Jump to content

Beginner's Question / My First CSS Page


jimmyjames74

Recommended Posts

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?

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

 

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...