jimmyjames74 Posted February 25, 2010 Report Share Posted February 25, 2010 Stefan, I?m taking your tutorial and am just getting started with CSS. On your First CSS Tutorial page (the one with the classic two-columns and left-pane navigation), I?m trying to add space in between the title ?(The Main Navigation?) and the short horizontal green bar that runs just underneath. I tried adding a line-height to the CSS code and that didn?t do anything. I edited the HTML code by adding , but it adds too much space. How can you add space in between these two visual elements and fine tune it? Quote Link to comment Share on other sites More sharing options...
Andrea Posted February 25, 2010 Report Share Posted February 25, 2010 Don't use s to create space - that tag is meant for line breaks. You can create space by adding margins or padding - but in order to tell you precisely what to add that to, I'd need to see the code you're working on. Can you just paste it here? Quote Link to comment Share on other sites More sharing options...
jimmyjames74 Posted February 25, 2010 Author Report Share Posted February 25, 2010 The Main Navigation Page One Page Two The Main Heading Go to the Web Designers Killer Handbook home page and grab the practice HTML page that we will used as the starting template for this tutorial. You can find it under the heading: 'To create the practice HTML page do the following:'. Follow the instructions there and create your basic HTML page ... and do it now! Quote Link to comment Share on other sites More sharing options...
Andrea Posted February 25, 2010 Report Share Posted February 25, 2010 In the CSS, add h2 {margin-bottom: 25px;} --- the 25px is just a placeholder - see what works for you. and using padding-bottom would work as well. Quote Link to comment Share on other sites More sharing options...
jimmyjames74 Posted February 26, 2010 Author Report Share Posted February 26, 2010 Hi, Andrea. Here's what I did in CSS: h2 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 16px; font-weight: bold; color: #000000; margin-bottom: 25px; border-bottom: 1px solid #cc0033; } It didn't move the line from the Navigation Heading at all. They're still scrunched up together, and I'd love to space it out more. Any ideas? I attached a screenschot to show you what it looks like. In the CSS, add h2 {margin-bottom: 25px;} --- the 25px is just a placeholder - see what works for you. and using padding-bottom would work as well. Quote Link to comment Share on other sites More sharing options...
jimmyjames74 Posted February 26, 2010 Author Report Share Posted February 26, 2010 Here's the snapshot of the what i'm referring to. Quote Link to comment Share on other sites More sharing options...
droopsnoot Posted February 26, 2010 Report Share Posted February 26, 2010 Here's the snapshot of the what i'm referring to. Use padding-bottom instead: h2 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 16px; font-weight: bold; color: #000000; padding-bottom: 25px; border-bottom: 1px solid #cc0033; } My test in IE8 showed the line moved down. I think this is because the red line is the border-bottom for h2, so margin-bottom will add space below the line, which you won't see. Learning this stuff myself, so happy to be shown if I'm wrong. Quote Link to comment Share on other sites More sharing options...
Andrea Posted February 27, 2010 Report Share Posted February 27, 2010 This is what your page looks like with the exact code you pasted above: http://aandbwebdesign.com/KSforum/space.html If you add padding, you'll see this: http://aandbwebdesign.com/KSforum/space2.html And if you add margin instead of padding, you get http://aandbwebdesign.com/KSforum/space3.html The reason that the margin didn't work is because the line that you want to move is a bottom border (I missed that detail when I first responded). So the margin actually appears below this border - I've colored the background and added a second line - the margin appears under the border above line 2: http://aandbwebdesign.com/KSforum/space4.html Does that make sense? Quote Link to comment Share on other sites More sharing options...
jimmyjames74 Posted March 1, 2010 Author Report Share Posted March 1, 2010 Thanks, Andrea. That does make sense. In tweaking the amount on line space between Navigation Heading and first line, is it possible to adjust the distance between the two or is the space I see a default? Quote Link to comment Share on other sites More sharing options...
jimmyjames74 Posted March 1, 2010 Author Report Share Posted March 1, 2010 Also, could you post the code so I can see what it looks like to create the space between Navigation title and first line? Learning things here very slowly and a visual person. Thanks for all your help! Quote Link to comment Share on other sites More sharing options...
Andrea Posted March 1, 2010 Report Share Posted March 1, 2010 You can see the code by going to the page, right-clicking, and picking 'view source'. I'll have to address your other question later, no time right now. Quote Link to comment Share on other sites More sharing options...
Andrea Posted March 1, 2010 Report Share Posted March 1, 2010 In tweaking the amount on line space between Navigation Heading and first line, is it possible to adjust the distance between the two or is the space I see a default?You mean the space between "The main navigation" and "line two"? The answer would be YES - as in yes, there's a default, but you can also adjust it to your liking. In this case, it's determined by the 35px margin bottom I put to the h2 tag. Quote Link to comment Share on other sites More sharing options...
jimmyjames74 Posted March 2, 2010 Author Report Share Posted March 2, 2010 Andrea, you are the best! Very helpful and now I see what you did. Thanks so much for your patience and for answering my questions. Take care, James Quote Link to comment 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.
Note: Your post will require moderator approval before it will be visible.