468,110 Members | 1,559 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,110 developers. It's quick & easy.

Horizontal menu problems - pretty sure it's something basic!

2
Hi, new hear and just starting out in CSS so I'm sure this is something simple.

I'm trying to build a horizontal menu bar with 5 different headings: home, process, policies and proceedures, clients, and contacts.

The bar is 20px high, and 818px long. The first and last menu items must reach each end, and there needs to be a white space 11px wide separating each item.

These are the styles I've come up with so far:

.menuwrapper {
background: #ff0000;
border-left: 20px solid #666;
border-right: 20px solid #666;
text-align: left;
font-size: 100%;
height: 20px;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
padding-top: 1px;
font-size: 125%;
width: 818px;
}

li { display: inline;}

a {
text-decoration: none;
color: #000000;
font-weight: bold;
text-align: center;
background-color: #fff;
padding-left:10px;
padding-right:10px;
}

.menuspacer {
width: 11px;
height:20px;
background-color: #00ff00;
float:left;
}


and this is the code:

<div class="menuwrapper">
<ul>
<li class="active"><a href="home.htm">HOME</a></li><div class="menuspacer">&nbsp;</div>
<li><a href="profile.htm">PROFILE</a></li>
<li class="wide"><a href="policies.htm">POLICIES AND PROCEEDURES</a></li>
<li><a href="clients.htm">CLIENTS</a></li>
<li><a href="contact.htm">CONTACT</a></li></ul></div>

So far it just ain't working!...

I'm guessing there's something relatively straightforward I'm doing wrong here (first time at trying this sort of thing). I guess I could put a one row table in there, but I really wanted to get this done with CSS...

Thanks for any help!

Jon
Jul 25 '07 #1
3 1589
Take a look at the changes I made and let me know if that helps ...

I increased the width of your wrapper to allow for the borders ... if you truly want something 818px wide and have 20px wide borders, it's actually 858px wide.

I took out any classes in the HTML that I didn't see styles for.

If you want the first and last menu items to be closer to the outside of the wrapper, you can a) increase the margin between each item, b) increase the line-spacing of each word, or c) increase the font-size.

Note: by adding a height of 20px, if someone sets their text size bigger, the background won't expand with it. You'll need to put a min-height in there for firefox and an alternative tag for ie/safari.

Oh, you said white space in between each menu item, but you have the background of the links set to white ... so if you want the space between white too change that red to white ... but then it'll all be white.

I hope this helps:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style>
.menuwrapper {
background: #ff0000;
border-left: 20px solid #666;
border-right: 20px solid #666;
text-align: center;
height: 20px;
width: 858px;
}

ul {
list-style-type: none;
margin: 0;
padding: 1px 0 0 0;
font-size: 125%;
}

li { display: inline;}

a {
text-decoration: none;
color: #000000;
font-weight: bold;
background-color: #fff;
margin-left:6px;
margin-right:5px;
padding: 0 2px;
}

</style>
</head>

<body>

<div class="menuwrapper">
<ul>
<li><a href="home.htm">HOME</a></li>
<li><a href="profile.htm">PROFILE</a></li>
<li><a href="policies.htm">POLICIES AND PROCEEDURES</a></li>
<li><a href="clients.htm">CLIENTS</a></li>
<li><a href="contact.htm">CONTACT</a></li>
</ul>
</div>

</body>
</html>
Jul 25 '07 #2
lanoak
2
Thanks, that does help, just need to study where I was going wrong now.

I did really want to fix the menu options to at each end of the bar, but I can't see how to do this with CSS. Do you think a one row table would be better in this situation?
Jul 25 '07 #3
drhowarddrfine
7,435 Expert 4TB
No, you don't need a table. This isn't quite right but it's close:
[HTML]<style>
*{margin:0;padding:0}

ul {
list-style-type: none;
}

li {

background-color:#aaa;
margin-left:11px;
outline:1px solid red;
display:inline;
font-size: 125%;
padding:0 1em;
text-decoration:none;
}

</style>
</head>

<body>

<ul>
<li><a href="home.htm">HOME</a></li>
<li><a href="profile.htm">PROFILE</a></li>
<li><a href="policies.htm">POLICIES AND PROCEEDURES</a></li>
<li><a href="clients.htm">CLIENTS</a></li>
<li><a href="contact.htm">CONTACT</a></li>
</ul>

</body>[/HTML]
Jul 25 '07 #4

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by Craig van Nieuwkerk | last post: by
4 posts views Thread by Mohit Gupta | last post: by
2 posts views Thread by Sergio E. | last post: by
1 post views Thread by Solo | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.