PDA

View Full Version : extending horizontal css menu



chicaloca
Mar 11th, 2010, 08:04 PM
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?

Excavator
Mar 11th, 2010, 08:37 PM
Hello chicaloca,
You are mixing some positioning and float in your .menu styling, maybe that left:200; was meant to be width?

4 buttons @ 200px =800px total width. margin/padding/border also figure into that width. You need to make sure you don't make your buttons wider than the menu bar your placing them in.
Have a look at this -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html, body {background: #fc6;}
#container {
width: 800px;
margin: 30px auto;
}
#menubar {
height: 1.4em;
width: 800px;
border-top: 2px solid #e6e6e6;
border-right: 2px solid #b1b1b1;
border-bottom: 2px solid #b1b1b1;
border-left: 2px solid #e6e6e6;
background: #ccc;
color: #000;
line-height: 1.2em;
}
.menu {
width: 200px;
float: left;
text-align: center;
cursor: default;
}
.menu a {display: block;}
.menu a:link, .menu a:visited {background: #ff0;}
.menu a:hover, .menu a:active {background: #ccc;}
</style>
<title>Untitled Document</title>
</head>

<body>
<div id="container">
<div id="header">header</div>
<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>
<!--end menubar--></div>
<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>
<!--end container--></div>
</body>
</html>
Usually that menu would be in a ul instead of seperate divs for each button. It looks like you had a ul at one time, there is some leftover styling in your CSS.
Have a look at some menu examples here (http://nopeople.com/design/CSS%20tips/index.html).

chicaloca
Mar 11th, 2010, 09:24 PM
hi

not too sure about the 200px to be honest, ive used code from a few different places, still earning so still trying to figure out how it all fits together. if i take the left:200 away it makes the links appear in a list instead of horizontal but not sure if my code is correct.

yeah you're right i had it with ul tags before but that was then I had links and when they were rolled over more links appeared underneath, kinda like this:


<div id="menu2" class="menu">About Glen Moss
<ul>
<li><a href="about.html">About the area </a></li>
<li><a href="gettinghere.html">Getting there</a></li>
<li><a href="peatbog.html">What is a peatbog?</a></li>

</ul>
</div>

I'll have a look at that code and the link you gave me, thanks. just finding it hard to compare other code to mine and work out how to change parts to get the code looking like i want....


edit: just worked out. the left:200px was to enable me to have the list more centered than having it over at the left hand side of the screen. sounds like that isnt right.....