crmamx Posted April 14, 2011 Share Posted April 14, 2011 I can't get a space before "Chapter 2: CSS basics in the Menu. Tried Firebug but just can't find the problem. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" > <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-language" content="en" /> <title>CSS Tutorial 1</title> <style type="text/css"> #container { margin: 0 auto; width: 900px; background: #fff; } #header { background: #ccc; padding: 20px; } #header h1 { margin: 0; } /* ======================== Navigation ================================= */ div#menu a { color: #000; /* #000 the look of the links */ text-decoration: none; margin: 0px; } div#menu ul { list-style: none; /* Remove the bullets */ margin: 0; padding: 0; width:200px; /* Menu width */ } div#menu ul li { display: block; /* Make a menu item a block (height 100%, width 100%) */ font: bold 11px/16px arial, helvetica, sans-serif; height:100%; width:100%; background:#81A9FE; /* medium blue - first column*/ border-bottom:1px solid #fff; /* white */ position: relative; float:left; /* Make sure (in IE) there is no margin between the menu items */ } div#menu ul li a{ display:block; padding: 5px 8px; } div#menu ul li a:hover { color: #a00; background: #81A9FE; border-right:1px solid #fff; /* white */ border-left:1px solid #fff; /* white */ } /* ======================== End Navigation ================================= */ #content-container{ float: left; width: 900px; background: #fff url(/wp-content/uploads/layout-two-fixed-background.gif) repeat-y 100% 0; } #content{ clear: left; float: left; width: 560px; padding: 20px 0; margin: 0 0 0 30px; display: inline; } #content h2{ margin: 0; } #aside { float: right; width: 240px; padding: 20px 0; margin: 0 20px 0 0; display: inline; } #aside h3 { margin: 0; } #footer{ clear: left; background: #ccc; text-align: right; padding: 20px; height: 1%; } /* ================================ Next Lesson ======================== */ #box1 { background-color: #999999; width: 90px; height: 15px; border: 2px solid; padding: 5px; font-weight: bold; float: right; } #box2 { background-color: #999999; width: 110px; height: 15px; border: 2px solid; padding: 5px; font-weight: bold; } /* ================================ End Next Lesson ======================== */ </style> </head> <body> <div id="container"> <div id="header"> <h1>CSS tutorial for beginners</h1> </div> <div id="content-container"> <div id="content"> <!-- ========================= BEGIN NEW PAGE CONTENT ===================== --> <h2>Lesson 1: Introduction to tutorial</h2> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <!-- ========================= END NEW PAGE CONTENT ===================== --> <! -- =========================== Next/Previous Lessons===================== --> <div id="box1"> <a href="css_tutorial2.html">Next Lesson</a> </div> <div id="box2"> </div> </div> <! -- =========================== Menu ==================================== --> <div id="aside"> <div id="menu"> <h3>Chapter 1: Overview</h3> <br /> <ul> <li><a href="css_tutorial1.html">Lesson 1: Introduction to tutorial</a></li> <li><a href="css_tutorial2.html">Lesson 2: What is CSS?</a></li> <li><a href="css_tutorial3.html">Lesson 3: Basic requirements</a></li> <li><a href="css_tutorial4.html">Lesson 4: Benefits of CSS</a></li> <li><a href="css_tutorial5.html">Lesson 5: How CSS works</a></li> <li><a href="css_tutorial6.html">Lesson 6: Using a DOCTYPE</a></li> </ul> <br /> <h3>Chapter 2: CSS basics</h3> <br /> <ul> <li><a href="css_tutorial7.html">Lesson 7: Applying CSS to Html</a></li> <li><a href="css_tutorial8.html">Lesson 8: External CSS file</a></li> <li><a href="css_tutorial9.html">Lesson 9: Basic CSS syntax</a></li> <li><a href="css_tutorial10.html">Lesson 10: CSS rules</a></li> <li><a href="css_tutorial11.html">Lesson 11: CSS properties</a></li> </ul> </div> </div> <div id="footer"> <p>Copyright</p> </div> </div> </div> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/233720-cant-skip-a-line/ Share on other sites More sharing options...
sunfighter Posted April 14, 2011 Share Posted April 14, 2011 You can add spaces to the line by adding non breakable spaces: <h3> Chapter 2: CSS basics</h3> But a better css solution is this: #aside h3.second{ text-indent: 20px; } and then add the class="second" to Chapter 2: CSS basics ----------------------------------------- If you want to add white space above the line to seperate it from the above lessons add this : margin-bottom: 200px; (you make up the amount) to the div#menu ul Selector. Quote Link to comment https://forums.phpfreaks.com/topic/233720-cant-skip-a-line/#findComment-1201643 Share on other sites More sharing options...
sunfighter Posted April 14, 2011 Share Posted April 14, 2011 You can alternately do div#menu ul.second{ margin-bottom: 150px; } But all breaks you layout. Quote Link to comment https://forums.phpfreaks.com/topic/233720-cant-skip-a-line/#findComment-1201656 Share on other sites More sharing options...
cssfreakie Posted April 14, 2011 Share Posted April 14, 2011 don't use so many breaks, nor use no breaking spaces, it's extremely redundant. Us margin or padding depending on your needs. Keep in mind the css boxmodel Quote Link to comment https://forums.phpfreaks.com/topic/233720-cant-skip-a-line/#findComment-1201659 Share on other sites More sharing options...
crmamx Posted April 14, 2011 Author Share Posted April 14, 2011 I just thought of something funny... I am trying to write a CSS tutorial and can't even get the damn thing to skip a line. don't use so many breaks, nor use no breaking spaces, it's extremely redundant. Us margin or padding depending on your needs. Keep in mind the css boxmodel This is just sort of a test page and the long line of breaks is to push the content pane down being I don't have any data on the page. I know! I know! the box model. I tried to see with Firebug why I could not get a space or get "br" to work there but with no luck. As you know, I will get it eventually. Quote Link to comment https://forums.phpfreaks.com/topic/233720-cant-skip-a-line/#findComment-1201684 Share on other sites More sharing options...
cssfreakie Posted April 14, 2011 Share Posted April 14, 2011 if i may advice, first make a nice framework, with no content at all. so just some divs. After that make a general layout for the content. probably also just a div, with a h2 and a paragraph in it. As soon as you are doing thing twice, you can do it better and faster. Do you have it hosted somewhere so i can take a look? Quote Link to comment https://forums.phpfreaks.com/topic/233720-cant-skip-a-line/#findComment-1201686 Share on other sites More sharing options...
crmamx Posted April 14, 2011 Author Share Posted April 14, 2011 Do you have it hosted somewhere so i can take a look? No I don't, but the 2 files involved are pretty small...only 3 kb each. Email?.... I had the same problem with spacing when I was doing the ? mark but I was able to use Firebug and figure it out. This one I just can't find. Quote Link to comment https://forums.phpfreaks.com/topic/233720-cant-skip-a-line/#findComment-1201713 Share on other sites More sharing options...
cssfreakie Posted April 14, 2011 Share Posted April 14, 2011 yeah you can send it through. no problem Quote Link to comment https://forums.phpfreaks.com/topic/233720-cant-skip-a-line/#findComment-1201721 Share on other sites More sharing options...
cssfreakie Posted April 15, 2011 Share Posted April 15, 2011 put overflow:hidden on the Ul of the menu Since you didn't gave it a height. It should look nice afterwards Quote Link to comment https://forums.phpfreaks.com/topic/233720-cant-skip-a-line/#findComment-1201856 Share on other sites More sharing options...
crmamx Posted April 15, 2011 Author Share Posted April 15, 2011 put overflow:hidden on the Ul of the menu Since you didn't gave it a height. It should look nice afterwards I will try that although I used a clear:both and that seemed to fix it. Quote Link to comment https://forums.phpfreaks.com/topic/233720-cant-skip-a-line/#findComment-1201870 Share on other sites More sharing options...
cssfreakie Posted April 15, 2011 Share Posted April 15, 2011 they ul's don't have a height. IF you give them a background color you will see it. this is the same for any blockelement you set a width to but not a height Quote Link to comment https://forums.phpfreaks.com/topic/233720-cant-skip-a-line/#findComment-1201884 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.