extending horizontal css menu

[chicaloca]

hi

not sure if i can include the website Ive done so far so I'll just include the html and css



<div id="container">

<div id="header"> </div>


<!-- Begin Naviagtion -->
<div id="menubar">
<div id="menu1" class="menu" ><a href="#"> Home</a>

</div>

<div id="menu2" class="menu"> <a href="#"> About Reiki </a>

</div>

<div id="menu3" class="menu"><a href="#">Benefits</a>

</div>


<div id="menu4" class="menu"><a href="#">Contact</a>

</div>




</div>


<!-- End Naviagtion -->


<div id ="body">
<h2>Relax</h2>
<p>
Welcome to Whispers Reiki. The site is currently under construction but please add it to your favourites (press alt + z if using Internet Explorer and ctrl + d if using Firefox.) and check back frequently for updates.
</p>
</div>

<div id="footer"> Copyright &copy; Whispers Reiki </div>


</div>



</body>
</html>




#menubar {
width:755px;
border-top: 2px solid #e6e6e6;
border-right: 2px solid #b1b1b1;
border-bottom: 2px solid #b1b1b1;
border-left: 2px solid #e6e6e6;
background-color: #ccc;
color: #000;
height: 1.4em;
line-height: 1.2em;
}

.menu {
float:left;
position:relative;
left:200px;
padding: 0.1em 3em 0.1em 0.5em;
cursor: default;
}

.menu ul {
display: none;

background-color: #e6e6e6;
color: black;
list-style: none;
margin: 0.1em 0 0 0;
padding: 0;
}

.menu ul li {
display: block;
padding: 0.2em;
}

div.menu:hover ul {
display: block;
margin: 0;
padding: 0;

}

div.menu ul li:hover {
background-color: #ccf;
}



my question is how to make the links in the menu bar go further across the screen so home is at the left, contact is at the right with the other 2 evenly spaced in between, how would i do this?

[aeroweb99]

For one thing, you don't have a ul list for your nav, but you have them listed in the css, so that's not doing anything. You have the links in separate divs, so you can manipulate them to achieve what you want. For instance, give menu1 float left, menu 4 float right, and play with the margins in menu 2 & 3. You won't need the "menu" class in there because it will apply to all the menu buttons, so get rid of that.

Start with this and post back if you have any questions.


<div id="menubar">
<div id="menu1"><a href="#"> Home</a>

</div>

<div id="menu2"><a href="#"> About Reiki </a>

</div>

<div id="menu3"><a href="#">Benefits</a>

</div>


<div id="menu4"><a href="#">Contact</a>

</div>

</div>


CSS



#menubar {
width:755px;
border-top: 2px solid #e6e6e6;
border-right: 2px solid #b1b1b1;
border-bottom: 2px solid #b1b1b1;
border-left: 2px solid #e6e6e6;
background-color: #ccc;
color: #000;
height: 1.4em;
line-height: 1.2em;
}



#menu1 {
float: left;
width: 100px;
text-align: center;
margin-right: 60px;
}

#menu2{
width: 100px;
margin: 0 60px;
float: left;
}

#menu3 {
float: left;
width: 120px;
text-align: center;
margin: 0 60px;

}

#menu4 {
float: right;
width: 100px;
text-align: center;
}


Play with that. A ul list would be better though.