Hi Debbie,
My suggestion is:
1. Make the menu div into an unordered list (display: block)
2. Put the links in separate list elements (display: inline)
3. Pad the list elements.
Example code:
HTML:
<ul id="navbar">
<li><a href="/index.shtml">Home</a></li>
<li><a href="/Services.shtml">Services</a></li>
<li><a href="/Portfolio.shtml">Portfolio</a></li>
<li><a href= "/Contact.shtml">Contact</a></li>
<li><a href="/BulletinBoard/">Bulletin Board</a></li>
</ul>
CSS:
#navbar {
display: block;
list-style: none;
}
#navbar li {
padding: 0 1em;
}
For the "you are here" navigational hint, you can make a class (ie: a.here)
which declares a border.
HTML:
<ul id="navbar">
<li><a href="/index.shtml" class="here">Home</a></li>
<li><a href="/Services.shtml">Services</a></li>
<li><a href="/Portfolio.shtml">Portfolio</a></li>
<li><a href= "/Contact.shtml">Contact</a></li>
<li><a href="/BulletinBoard/">Bulletin Board</a></li>
</ul>
CSS:
#navbar li .here {
border-top: solid 3px blue;
}
Hope that works for you,
Mike
http://www.stroke7.com
----- Original Message -----
From: "Debbie Silbert" <[EMAIL PROTECTED]>
To: "'CSS-D'" <css-d@lists.css-discuss.org>
Sent: Monday, July 04, 2005 4:12 AM
Subject: [css-d] Need fixed space between horiztonal menu elements
I would like to have a fixed space between the menu items displayed here
www.itgurl.com.
The menu items are contained in an include, but wrapped in a <div
id="navbar"> within the HTML. I've tried using padding in the navbar DIV,
but that only applies the padding to the first and last item. How do I
get
the spacing between each element?
Also, I would like a horizontal line at the top of each menu item to
indicate it's the current page. Is there a way to do that with CSS?
Thanks!
Debbie Silbert
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
