...

View Full Version : RESOLVED CSS Hover w/ Displace Not Working



jihanemo
11-03-2010, 08:17 PM
I'm using a CSS hover method that displaces part of an image to create a hover effect (once the mouse is placed over the image, the other half of the image is "uncovered" or "slides over", making it appear as a mouse over effect).

The navigation bar on this page (http://www.americanchic.net/accessories3.html) uses that CSS hover effect. But the menu buttons are falling under one another instead of appearing inline, one after the other. How do I fix that?

teedoff
11-03-2010, 08:21 PM
I dont see anything special on the example page you gave, but could you post your code or a link to your site in question?

jihanemo
11-03-2010, 08:25 PM
Oh - on the page, it's that top fat black bar which should appear as the navigation bar. I'm using the button "Home" as sample nav bar buttons but they should all be appearing in a row rather than vertically stacked...

Should I still post the code?

teedoff
11-03-2010, 08:31 PM
I still dont see anything other than a color change for the "Home" links. Yes post your code and try to maybe explain what you're wanting and why your not getting the desired outcome.

holyhttp
11-03-2010, 08:31 PM
You need to float those list items inside the navbar.

li.navbarhome {
display: inline;
margin: 0px;
padding: 0px;
float:left;
clear:none;
}



To keep your HTML CSS style clean, use an ID for that top navbar. Therefore your HTML markuup for the top nav would be:

<ul id="navbar">
<li><a href="http://www.americanchic.net">Home</a></li><li><a href="http://www.americanchic.net">Home</a></li><li><a href="http://www.americanchic.net">Home</a></li><li><a href="http://www.americanchic.net">Home</a></li><li><a href="http://www.americanchic.net">Home</a></li>
</ul>


and the CSS styles:

#navbar {
list-style-type: none;
margin: 0px;
padding: 0px;
}

#navbar li{
display: inline;
margin: 0px;
padding: 0px;
float:left;
clear:none;
}


#navbar li a{
background: url(http://www.americanchic.net/website_graphics/nav_home.png);
display: block;
height: 16px;
text-decoration: none;
width: 114px;
}

If you later need to target just a single link in your navigation bar, then you can set a unique id attribute for each li item in your navbar.

teedoff
11-03-2010, 08:40 PM
Ahhh lol I thought you were asking something else..lol Sorry yes as the last poster said to get the links to align vertically, add the rules he suggested to your style sheet.

jihanemo
11-03-2010, 09:36 PM
Got it. Thanks guys!!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum