Hey there!
I'm currently converting my portfolio mock up into html/css and I've come across something that has confused me.
As you can see, the navigation text is positioned in the wrong place; I want it to be inline with the markers. I've looked through the code loads and looked at other websites but can't figure out why it's not working..
This is the exact code:
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<title>MozazDesign Portfolio</title>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
</div><!--end logo-->
<div id="nav">
<ul id="main_nav">
<li><a href="#">home</a></li>
<li><a href="#">about me</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">contact</a></li>
</ul><!--end main nav-->
</div><!--end nav-->
</div><!--end header-->
</body>
body {
padding: 0px;
margin: 0px;
background:url('Images/background.png');
font-family: century gothic;
}
#nav a {
text-decoration: none;
color: white;
}
#container {
margin: 0 auto;
width: 960px;
}
#logo {
background:url('Images/Logo.png');
height: 340px;
width: 524px;
float: left;
margin-left: 0px; <!--check-->
}
#nav {
background:url('Images/Nav_Container.png');
width: 427px;
height: 33px;
float: right;
margin-top: 100px;
}
#main_nav li {
list-style-type: none;
display: inline;
font-family: century gothic;
font-size: 18px;
color: white;
margin-right: 17px;
}
Any ideas why it isn't positioned correctly?
Thanks in advance!