chicaloca
11 Mar 2010, 01:05 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 © 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?
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 © 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?