CSS NavBar Task of Doom!

[RTP]

Hi,
I've spent all afternoon trying to figure this out, until i finally ended up here. My goal was to create a CSS navbar that looked (kinda) like a 'jazzy' flash style Navbar. This way, it would be html text based and thus SEO friendly, and still look like a good flash button(s).

I used some photoshop images that i created for the task, that represented the button states of normal, hovered, and active. Using a little trickery, i was able to make the buttons of the navbar change ('animate') when hovered over (they seemed to extend downwards, a feature seen alot with Flash style buttons). What i did was 'move' the background image along an exact amount of pixels to show the previously unseen right side of the image (which just happened to be the button in it's hovered state :) ). And then again for the activated state. This coupled with a few CSS text-state changes, and it seemed to work.

However, heres the snag. It keeps grouping the buttons vertically, and i need them in a horizontal navbar. I've been playing around alot with <li> and things like display:inline & list-style-type:none etc, but i can't get the damned thing to do it!. I've probably quite blatantly overlooked a simple thing i needed to do to achieve this; but it's been a long day so i need some help figuring it out!

It's all for test purposes, i'm just learning and playing around with things to self teach myself some aspects i'm gonna need in the near future.

Anyone know what to do? I've tried starting over and doing a basic horizontal navbar and then try and work the 'animated' feature in after, but this approach i'm struggling with too. Need to bridge that middle bit!

Thanks for your help,
Rich.

[Declan1991]

Post your code, then it is a lot easier.

[Centauri]

Try floating both the <a> and <li> elements left (IE sometimes has problems unless the <a> is floated as well). If any of the floated elements have a left margin for spacing, then they will have to be given inline display as well to avoid IE6's doubled margin bug.

[WebJoel]

Kudoes for you for wanting a CSS solution for a FLASH-esque effect on navigation. For the horizontal <li>, yes, "float:left;" or "display:inline;" works, but the container needs to be stated a width 'wide enough' to allow all <li>s to align horiz.. Same thing happens to me all the time... can't get "display:inline;" to work, -check "width" of container..

Nice non-Flash effect could use a background-image that is changed using the pseudo-class for hover. I have been working on just such a thing myself. I haven't completed it mostly because I am not greatly skilled creating realistic animated *GIFs, but here is what I came up with for http://www.fit-dc.com/

The intent is to eventually have it so that when you hover over the link, the little orange circle is animated, expands/contracts, rotates, -something like that as it does on subsequent pages in the FLASH navaigation that we are going to get rid of eventually.

[RTP]

Thanks for your replies, i'm glad to see there are some like-minded people (and even more glad too see that you know what you're doing unlike me!)

All it needed was a very simple float: left on the ol' 'li' css, and it fell into place better than I could'a imagined. Thanks very much for that. Twas very relieving to say the least!

If it's ok with you guys, i'll post up the code here anyway so you can go over it. it works great now, but because i've been testing, and playing around (basically trying to teach myself) there's probably lotsa discrepancies in the coding that I'd appreciate you pointing out (and hopefully giving a solution too!). Most of it is probablly unecessary extra code that has worked it's way in thru tests for this, and tyouts for that. but as i'm fairly new, i'm not sure what i need to pick out and to leave in to shorten it down (if it needs to be shortened that is. I'll soon find out :) ).

Thanks again, Rich.

<style type="text/css">

#navbar ul{
width: 100%;
padding-left:0;
margin:0;
float:left;
list-style-type: none;
}
#navbar ul li {display:inline; float:left;}
#navbar ul li a {
display:block;
width:169px;
height: 20px;
margin: 1em 0; padding: 24px 0px 35px 37px;
font: bold 16px/1 Verdana, Arial, Helvetica, sans-serif;
text-shadow: white -1px 1px 0;
color:#1d0a38;
background: url(../../test_com/images/testnav.JPG) 0 0 no-repeat;
text-decoration: none;
}

#navbar ul li a:hover {
background-position: -206px 0;
color:#1d0a38;
text-transform:capitalize;
font:bolder;
padding-top:40px;
}
#navbar ul li a:active {
background-position: -412px 0;
color:#1d0a38;
}
</style>
<body>
<div id="navcontain">
<div id="navbar">
<ul>
<li><a href="page001.html">Page 1</a></li>
<li><a href="page002.html">Page 2</a></li>
</ul>
</div>
</div>
</body>

[KDLA]

If you're wanting to clean up your code, try using: http://www.cleancss.com/
then validating it: http://jigsaw.w3.org/css-validator/
:)
KDLA