Hello, I'm just learning basics at the moment and could do with some assistance as to how I go about creating a horizantal nav bar - that's similer to the Apple website. I've tried to use Google, but no tutorial that really deals with this so I'm trying to understand the code used on the Apple site.
Please bear in mind the website I have is just ruff and I'm learning the coding side of things before actually putting effort into all the Photoshopping. ALso I'm aware the links within the HTML don't work at the moment but that's not an issue as I can easily sort that later.
www.jonpaulwild.com
In IE7, IE6 and Firefox it all appears to render fine, but in IE 5 it reveals my concern.
In IE5 and Dreamweaver a gap opens up between the nav bar and the right and left columns - this doesn't appear in IE6,7 and Firefox 3 and onwards.
I'm just wondering if someone can look at the CSS and HTML and point out any problems?
CSS:
* { padding: 0; margin: 0; }
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
margin: 0 auto;
width: 900px;
}
#header {
color: #333;
width: 880px;
float: left;
padding: 10px;
height: 100px;
margin: 10px 0px 0px 0px;
background:#00CC33
}
#nav {
float: left;
width: 900px;
height: 50px;
color: #333;
background-image:url(/menurepeat.png); background-repeat:repeat-x;
}
#nav #navmain { margin: 0; padding: 0; }
#nav #navmain li {
float:left;
margin-left: 150px;
text-align:center;
display: inline;
}
#nav #navmain li a {
float:left;
width: 100px;
height: 0;
padding-top:50px;
overflow:hidden;
}
#nav #navmain li a,
#nav #navmain {background-image:url(/menubuttons.png); background-repeat:no-repeat;}
#home a { background-position: 0 0;}
#location a { background-position: -100px 0;}
#other a { background-position: -200px 0;}
#home a:hover { background-position: 0 -50px;}
#location a:hover { background-position: -100px -50px;}
#other a:hover { background-position: -200px -50px;}
.index #home a { background-position: -0px -150px ;}
.about #location a { background-position: -100px -150px;}
.services #other a { background-position: -200px -150px;}
#leftcolumn {
color: #333;
background: #E7DBD5;
height: 350px;
width: 300px;
float: left;
}
#rightcolumn {
float: right;
color: #333;
background: #F2F2E6;
height: 350px;
width: 600px;
display: inline;
position: relative;
}
_____________________________________________________________
Xhtml:
<!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=iso-8859-1" />
<title>test</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="wrapper">
<div id="header">This is the Header</div>
<div id="nav" class="home">
<ul id="navmain">
<li id="home"><a href="/"></a></li>
<li id="location"><a href="http://location.com"></a></li>
<li id="other"><a href="http://other.com"></a></li>
</ul>
</div>
<div id="leftcolumn">Left Column</div>
<div id="rightcolumn">Right Column</div>
</div>
</body>
</html>
_____
Thanks for any help and time people can give me.
Please bear in mind the website I have is just ruff and I'm learning the coding side of things before actually putting effort into all the Photoshopping. ALso I'm aware the links within the HTML don't work at the moment but that's not an issue as I can easily sort that later.
www.jonpaulwild.com
In IE7, IE6 and Firefox it all appears to render fine, but in IE 5 it reveals my concern.
In IE5 and Dreamweaver a gap opens up between the nav bar and the right and left columns - this doesn't appear in IE6,7 and Firefox 3 and onwards.
I'm just wondering if someone can look at the CSS and HTML and point out any problems?
CSS:
* { padding: 0; margin: 0; }
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
margin: 0 auto;
width: 900px;
}
#header {
color: #333;
width: 880px;
float: left;
padding: 10px;
height: 100px;
margin: 10px 0px 0px 0px;
background:#00CC33
}
#nav {
float: left;
width: 900px;
height: 50px;
color: #333;
background-image:url(/menurepeat.png); background-repeat:repeat-x;
}
#nav #navmain { margin: 0; padding: 0; }
#nav #navmain li {
float:left;
margin-left: 150px;
text-align:center;
display: inline;
}
#nav #navmain li a {
float:left;
width: 100px;
height: 0;
padding-top:50px;
overflow:hidden;
}
#nav #navmain li a,
#nav #navmain {background-image:url(/menubuttons.png); background-repeat:no-repeat;}
#home a { background-position: 0 0;}
#location a { background-position: -100px 0;}
#other a { background-position: -200px 0;}
#home a:hover { background-position: 0 -50px;}
#location a:hover { background-position: -100px -50px;}
#other a:hover { background-position: -200px -50px;}
.index #home a { background-position: -0px -150px ;}
.about #location a { background-position: -100px -150px;}
.services #other a { background-position: -200px -150px;}
#leftcolumn {
color: #333;
background: #E7DBD5;
height: 350px;
width: 300px;
float: left;
}
#rightcolumn {
float: right;
color: #333;
background: #F2F2E6;
height: 350px;
width: 600px;
display: inline;
position: relative;
}
_____________________________________________________________
Xhtml:
<!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=iso-8859-1" />
<title>test</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="wrapper">
<div id="header">This is the Header</div>
<div id="nav" class="home">
<ul id="navmain">
<li id="home"><a href="/"></a></li>
<li id="location"><a href="http://location.com"></a></li>
<li id="other"><a href="http://other.com"></a></li>
</ul>
</div>
<div id="leftcolumn">Left Column</div>
<div id="rightcolumn">Right Column</div>
</div>
</body>
</html>
_____
Thanks for any help and time people can give me.
