Help
Posted 10 April 2009 - 11:25 AM
I've created an unordered list and converted it to a navigation bar using CSS. My problem is is that the navigation bar just sticks to the left of the page vertically. What I want it to do is sit horizontally across the page at the top above my conent.
I've primarily designed websites using Dreamweaver and I'm looking to get stuck into the coding aspect of it now.
Thanks everyone!
Below is my code:
<html> <head> <title>yesweb.co.uk - coming soon.</title> <meta name="Keywords" content="" /> </head> <link rel="stylesheet" type="text/css" href="style.css"/> <body> <div id="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Clients</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact us</a></li> </ul> </div> <div id="main"> <h1>www.yesweb.co.uk</h1> <h2>Freelance web development by</h2> <h2>Chris Kernaghan..</h2> <p>This is just a wee test to see if this text stays within the box area in the centre of the page. I hope that it does!</p> <p>This is just a wee test to see if this text stays within the box area in the centre of the page. I hope that it does!</p> <p>This is just a wee test to see if this text stays within the box area in the centre of the page. I hope that it does!</p> <p>This is just a wee test to see if this text stays within the box area in the centre of the page. I hope that it does!</p> <p>This is just a wee test to see if this text stays within the box area in the centre of the page. I hope that it does!</p> <p>This is just a wee test to see if this text stays within the box area in the centre of the page. I hope that it does!</p> <p>This is just a wee test to see if this text stays within the box area in the centre of the page. I hope that it does!</p> <p>This is just a wee test to see if this text stays within the box area in the centre of the page. I hope that it does!</p> <img src="logo1.gif" alt=""/> </div> </body> </html>
p {color: white}
h1 {color: red}
h2 {color: red}
#nav ul {
list-style: none;
padding: 0;
margin: 0;
float: left;
margin: 0 0.15em;
}
#nav ul a
{
background: url(butt.jpg) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}
body {
background-color: #000000;
background-repeat:repeat;
font-family: "ariel", helvetica, times;
background-image: url("bg.jpg");
background-repeat: no-repeat;
background-position: 50% 20%;
}
#main {
margin-left: 5%;
margin-right: 5%;
margin-top: 55%;
margin-bottom: auto;
margin: 0% auto;
width: 40%;
padding: 0.5em;
background-color: #000000;
clear: both;
}
