Menu
Hi all,
I am using a list, and images to creat my navigation. For some reason there is a gap between the “home” and “About Us” links.
Here’s a link to the prototype [URL=”http://www.baseiber.com/designExamples/IdealLandscapeSolutions/start.htm”]http://www.baseiber.com/designExamples/IdealLandscapeSolutions/start.htm
here is my html
[CODE]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<title>Ideal Landscape Solutions LLC.</title>
<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″ />
<link rel=”stylesheet” type=”text/css” href=”startstyle.css” />
</head>
<body>
<div class=”shell”>
<div class=”header”>
<h1 class=”logo”><img src=”images/common/Logo.jpg” /></h1>
<ul class=”navigation”><li><a class=”home” href=”start.html”><img src=”images/common/nav_home_clear.gif” /></a></li><li><a class=”aboutus” href=”start.html”><img src=”images/common/nav_aboutus_clear.gif” /></a></li><li><a class=”contactus” href=”start.html”><img src=”images/common/nav_contactus_clear.gif” /></a></li></ul>
</div>
</div>
</body>
</html>
Here is my css
[CODE]
html, body { height:100%; }
BODY
{
padding:0px;
margin:0px;
background-color:#663100;
background-image:url(‘images/common/borderColor.jpg’);
background-repeat:repeat;
color:#000000;
width:100%;
font-family:Verdana, Arial, Sans-Serif;
font-size:95%;
}
div { display:block; }
h1, h2, h3, h4, h5, h6, h7
{
padding-top:0;
padding-bottom:0;
margin-top:0;
margin-bottom:0;
}
div.shell
{
margin:0 auto 0 auto;
padding:0px;
width:1000px;
height: auto !important;
height: 100%;
min-height: 100%;
background-color:green;
}
div.header
{
width:1000px;
height:289px;
background-color:yellow;
background-repeat:no-repeat;
background-position:right top;
background-image:url(‘images/common/header_background.jpg’);
border-right:solid 1px #000000;
}
h1.logo, h1.logo img
{
width:289px;
height:289px;
border:0;
padding:0;
margin:0;
}
h1.logo { position:relative; float:left; }
ul.navigation
{
width:711px;
height:41px;
margin:221px 0 0 0;
padding:0;
position:relative;
float:right;
background-repeat:no-repeat;
background-position:right top;
background-image:url(‘images/common/navigation_background.jpg’);
text-align:right;
}
ul.navigation li { display:inline; list-style-type:none; }
ul.navigation li a
{
font-size:39px;
text-decoration:none;
background-repeat:no-repeat;
background-position:center right;
margin:0;
padding:0;
}
ul.navigation li, ul.navigation li a img
{
border:0;
padding:0;
margin:0;
height:39px;
}
a.home { background-image:url(‘images/common/nav_home.jpg’); }
a.home:hover { background-image:url(‘images/common/nav_home_hover.jpg’); }
a.homeSelected { background-image:url(‘images/common/nav_home_on.jpg’); }
a.home img { width:84px; }
a.aboutus { background-image:url(‘images/common/nav_aboutus.jpg’); /*background-color:Gray;*/ }
a.aboutus:hover { background-image:url(‘images/common/nav_aboutus_hover.jpg’);}
a.aboutusSelected { background-image:url(‘images/common/nav_aboutus_on.jpg’); }
a.aboutus img { width:116px; }
a.contactus { background-image:url(‘images/common/nav_contactus.jpg’); }
a.contactus:hover { background-image:url(‘images/common/nav_contactus_hover.jpg’); }
a.contactusSelected { background-image:url(‘images/common/nav_contactus_on.jpg’); }
a.aboutus img { width:133px; }
I’ve been working on this the past 2 days and can’t seem to get anywhere. If you could help I’d really appreciate it.
Thanks!