homepage Welcome to WebmasterWorld Guest from 54.226.0.225
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum



These terms have been highlighted:
horizontal navigation menu [ remove highlighting]

    
Horizontal Menus using CSS and Lists
tutorial for different types...
SuzyUK




msg:1211258
 3:42 am on Dec 31, 2004 (gmt 0)

horizontal Lists - Tutorials

The 2 x Demos which follow use some common code:


HTML Code for List
<div id="navbar">
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">Google</a></li>
<li><a href="#">Foo</a></li>
</ul>
</div>

Common CSS:
#navbar ul
{
list-style: none;
padding: 0;
margin: 0;
white-space: nowrap;
background: #ffc;
}

#navbar li {display: inline;}

CSS explained:

  • list-style: none; - to remove the bullets from the list items
  • padding/margin set to zero - to remove the default indentation consistently x-browser
  • white-space: nowrap; - to avoid multi word links breaking in the middle
  • a background is set for demos only so you can visualise the "container"
  • display: inline; set on the <li> is the main ingredient to get the list to display horizontally.


horizontal List Tutorial - Part 1

Centered navigation Bar

Take the common CSS and add as follows:

to the #navbar ul:
#navbar ul
{
text-align: center;
line-height: 2em;
}

  • text-align: center; - to center the list items within the <ul>
  • line-height: 2em; - this can be adjusted to suit. It will give the ul "height", and along with the demo background color show where the top/bottom boundaries are for when you add padding to the <a> element, as well as keeping the text vertically centered.
    Note: If you don't use line-height to approximately match your padding the the text may not appear where you think as it might "escape" from it's line box boundaries.

Add the link formatting

#navbar ul li a {
padding: 0.5em 2em;
margin-right: -4px;
color: #fff;
background-color: #036;
text-decoration: none;
}

#navbar ul li a:hover {
color: #fff;
background-color: #369;
}

  • 1. Because the "li" elements and the "a" elements are both "inline" they will not accept an explicit height or width so if a taller/wider "box" is required use padding instead.
    Note: too much top/bottom padding will cause the links to expand beyond the (line-)height 'boundary' of the list so adjust both the top/bottom padding AND the line-height on the ul to suit especially if borders are being used!

  • 2. This inline method of creating blocks will leave a default whitespace gap between the list items so the margin-right: -4px; is one way to get rid of it if required.
    Note: this will affect any effects that use side borders though.

  • 3. The colors and text-decoration are up to you.

Finally the Entire Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Centered horizontal navigation menu</title>
<style type="text/css">
#navbar ul
{
list-style: none;
padding: 0;
margin: 0;
white-space: nowrap;
background: #ffc;
text-align: center;
line-height: 2em;
}

#navbar li {display: inline;}

#navbar ul li a {
padding: 0.5em 2em;
margin-right: -4px;
color: #fff;
background-color: #036;
text-decoration: none;
}

#navbar ul li a:hover {
color: #fff;
background-color: #369;
}
</style>
</head>
<body>
<div id="navbar">
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">Google</a></li>
<li><a href="#">Foo</a></li>
</ul>
</div>
</body>
</html>

1.If you copy/paste this, then comment out the line height from the ul and the negative margin from the <a> to see the effect it has x-browser.

2.IE5/Win doesn't play ball with the padding

Apart from that enjoy.. and left/right aligned ones to follow..

Suzy

[edited by: SuzyUK at 12:02 pm (utc) on Dec. 31, 2004]

 

SuzyUK




msg:1211259
 4:23 am on Dec 31, 2004 (gmt 0)

horizontal List Tutorial - Part 2

Left or Right Aligned navigation menus

Take the common CSS from the first post and add as follows:
to the
#navbar ul:
#navbar ul
{
float: left;
width: 100%;
line-height: 25px;
}

  • float: left; and width: 100% - to contain the floated child <a> elements in this method
  • line-height: 25px - adjust to suit this will give the overall "height" to the navbar, and keep the text vertically centered.

Add the link formatting

#navbar ul li a{
float: right;
padding: 0 20px;
background: #008;
border: 1px solid #0f0;
color:#fff;
text-decoration:none;
}

#navbar ul li a:hover{
color:#f00;
background: #ddd;
border: 1px solid #f00;
}

  • 1. Float the <a> element to the required side, this will also trigger the default of display: block; for a floated element so it now fills the line box as set by the line-height on the <ul>. So top/bottom padding tweaking not required for this method
  • 2. Left and right padding can be set as required to space the links or a width could be used
  • 3. The colors, borders and text-decoration are up to you, and this would be where you might use a background-image if required

Finally Entire Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Left/Right Aligned horizontal navigation menu</title>
<style type="text/css">
#navbar ul{
list-style: none;
padding: 0;
margin: 0;
white-space: nowrap;
background: #ffc;
float: left;
width: 100%;
line-height: 25px;
}

#navbar li {display: inline;}

#navbar ul li a{
float: right;
padding: 0 20px;
background: #008;
border: 1px solid #0f0;
color:#fff;
text-decoration:none;
}

#navbar ul li a:hover{
color:#f00;
background: #ddd;
border: 1px solid #f00;
}
</style>
</head>
<body>
<div id="navbar">
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">Google</a></li>
<li><a href="#">Foo</a></li>
</ul>
</div>
</body>
</html>

that's it, there's no notes this time ;)

Suzy

[edited by: SuzyUK at 12:07 pm (utc) on Dec. 31, 2004]

djclark




msg:1211260
 4:37 am on Dec 31, 2004 (gmt 0)

Is it possible to do the same instead with grafix behind?

As i am trying to do the same however need the links/buttons to have a gradient image behind it.

which image would you put the background image on?

SuzyUK




msg:1211261
 4:57 am on Dec 31, 2004 (gmt 0)

hi djclark.. I presume you mean which element to put the image on?

if so it would need to be the <a> element the background image is attached to in these examples.

e.g. #navbar ul li a {background: #008 url(hello.gif) no-repeat 50% 50%;}

bumpaw




msg:1211262
 9:39 pm on Dec 31, 2004 (gmt 0)

Nice tutorial Suszy! I got it saved in my Reference Folder. Now if you really want to spoil us come up a Flash tutorial like Joyce Evans has for Fireworks and Dreamweaver.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved