PDA

View Full Version : need help fast!!!!!



KurveMedia
Nov 15th, 2006, 01:20 AM
:eek: I have a client project that im working on and i have did the pixel precise horizontal navigation with overlapping active state graphics using CSS as seen here http://marcelfahle.com/2006/06/25/how-to-build-a-pixel-precise-horizontal-navigation-with-overlapping-active-state-graphics-using-css/ and for some reason im not able to get the images to overlap once i click on a menu button. so if anybody has did this process and has had success with it, please please can you help me out. I would really appreciate it. Below is my css and my xhtml

My 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>
<title>Livin - N - Hip Hop</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>

<body>
<div id="wrapper">

<div id="header">
<div id="headwrap"><img src="images/logo.jpg" alt="Livin N Hip Hop Logo"></div>
<div id="navWrap">
<ul>
<li id="nav-home"><a href="home.html"id="home">Home</a></li>
<li id="nav-shoes"><a href="shoes.html" id="shoes">Shoes</a></li>
<li id="nav-shirts"><a href="shirts.html" id="shirts">Shirts</a></li>
<li id="nav-grills"><a href="grills.html" id="grills">Grills</a></li>
<li id="nav-mixtapes"><a href="mixtapes" id="mixtapes">Mixtapes</a></li>
</ul>
</div>
</div>

<div id="navbar"></div>


<div id="leftcolumn">
<p>Sub Menu </p>
</div>

<div id="centercolumn">
<p>This Column is My Main Content Area</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="left">&nbsp;</p>
<p>&nbsp;</p>
</div>
<div id="footer"><div id="copyrightinfo">copyright info</div><div id="sitemap"><a href="#">link1</a> | <a href="#">link2</a> | <a href="#">link3</a> | <a href="#">link4</a></div></div>

</div>

</body>
</html>


My CSS

*{
padding: 0;
margin: 0;
}

html, body {
font-family: Arial, Helvetica, sans-serif;
color: #333333;
font-size: 12px;
}
#wrapper {
float:left;
width: 775px;
}
#navbar {
margin: 0px 5px 0px 5px;
border-top:5px solid #666666;
background-color: #FFFFFF;
}
#header {
margin: 0px 5px 5px 5px;
height: 70px;
padding: 0 0 35px 0;
background-color: #FFFFFF;
}
#leftcolumn { /* Parent Wrapper for inside boxes */
margin: 0 0px 0px 5px;
padding: 6px;
display: inline; /* IE Hack */
width: 24%;
float: left;
background-image:url(images/submenubkg.jpg);
background-position: right;
background-repeat:no-repeat;
background-color: #FFFFFF;
min-height: 300px;
}
* html #leftcolumn {height:300px} /* IE Min-Height Hack */

#centercolumn {
margin: 0 0px 0px 0px;
display: inline; /* IE Hack */
padding: 4px;
width: 72.1%;
float: left;
min-height: 300px;
}
* html #centercolumn {height:300px} /* IE Min-Height Hack */

#footer {
border-top:5px solid #666666;
background-color: #FFFFFF;
margin: 0 5px 5px 5px;
display: inline; /* IE Hack */
height:50px
padding: 4px;
float: left;
width: 97.7%;
clear:both;
}

#copyrightinfo{
float:left;
}

#sitemap{
float:right;
}

#headwrap {
float:left;
}

#navWrap{
float:right;
padding:0;
}

#navWrap ul {
margin:0;
padding:0;
list-style:none;
}

#navWrap li {
float:right;
margin:0;
padding:0;
width:93px;
height:93px;
}

#navWrap a {
display:block;
width:100%;
text-align:center;
padding: 25px 0;
text-indent:-5000px;
}

#navWrap ul {
margin:0;
padding:0;
list-style:none;
}

#navWrap li {
float:left;
margin:0;
padding:0;
width:93px;
height:93px;
}

#navWrap a {
display:block;
width:100%;
text-align:center;
padding:25px 0;
text-indent:-5000px;
}

#navWrap > ul a {
width:auto;
}

#nav-home {background:url(navigation/normal/home.jpg) no-repeat;}
#nav-shoes {background:url(navigation/normal/shoes.jpg) no-repeat;}
#nav-shirts {background:url(navigation/normal/shirts.jpg) no-repeat;}
#nav-grills {background:url(navigation/normal/grills.jpg) no-repeat;}
#nav-mixtapes {background:url(navigation/normal/mixtapes.jpg) no-repeat;}

#home #nav-home a {background: url(navigation/over-hit/home.jpg) no-repeat; margin-left: 0px; width: 106px; position: absolute; }
#shoes #nav-shoes a {background: url(navigation/over-hit/shoes.jpg) no-repeat; margin-left: 0px; width: 106px; position: absolute; }
#shirts #nav-shirts a {background: url(navigation/over-hit/shirts.jpg) no-repeat; margin-left: 0px; width: 106px; position: absolute; }
#grills #nav-grills a {background: url(navigation/over-hit/grills.jpg) no-repeat; margin-left: 0px; width: 106px; position: absolute; }
#mixtapes #nav-mixtapes a {background: url(navigation/over-hit/mixtapes.jpg) no-repeat; margin-left: 0px; width: 100px; position: absolute; }

KurveMedia
Nov 15th, 2006, 04:41 AM
Anybody Got any answers. please.. i really need to get this fixed...:(

rmedek
Nov 15th, 2006, 02:41 PM
You would get more help by being more polite and reading our Posting Guidelines (http://www.codingforums.com/postguide.htm). Thread titles like these are not only annoying, they clutter our forum searches.

KurveMedia
Nov 16th, 2006, 02:24 AM
sorry about the title.