...

View Full Version : CSS nav bar question



tissue
05-13-2010, 10:41 PM
Im trying to make a nav bar (Horizontal) that has text on the left and then on the right there will be icons that u can mouseover and they will change but im having a bit of a problem making the UL, LI list for the right side. I need to keep them both on the same line but when i try to do a <ul><li>/</li></ul> with a <ul><li>/</li></ul> in the same div it will put it under the other list.

My site is www.kbmapping.com/testpage.htm (kbmapping.com/testpage.htm)

The spot were it says "We Map For" will have a couple game icons and the bottom part of the arrow. Im not sure if this is enough info but i have to leave like in the next minute so i will check back and add a picture of how i want it to look. Thanks

abduraooft
05-14-2010, 10:32 AM
It looks like you've applied display:inline; to both <ul>s. Have you sorted it out?

tissue
05-14-2010, 11:17 PM
No, i actually screwed it up more. But the display:inline makes it horizontal?

abduraooft
05-15-2010, 08:42 AM
But the display:inline makes it horizontal?Yes, at least in FF3.6

tissue
05-15-2010, 09:08 AM
ya, ok well i got it all working and looks fine in Fire fox and Chrome, but ofc explorer is messed up

http://kbmapping.com/images/Random/messedup.jpg

Any Ideas? Seems like it doesnt allow the display:inlines; that arnt in the same class.

abduraooft
05-15-2010, 09:37 AM
<span id="mapfor">
<span class="gmod">
<li><a href="http://store.steampowered.com/app/4000/"></a></li>
</span>
<span class="css">
<li><a href="http://store.steampowered.com/app/240/"></a></li>
</span>
<span class="hl2">
<li><a href="http://store.steampowered.com/app/320/"></a></li>
</span>
<span class="hl2">
<li><a href="http://store.steampowered.com/app/320/"></a></li>
</span>
</span> Your markup is pretty invalid now! You can't nest a block level element inside an inline element. Moreover, a list item can only be mested inside <ul> or <ol>

And more importantly, you need to have a valid DOCTYPE at the top of your page, read http://www.alistapart.com/articles/doctype/

See the errors in your markup at http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fkbmapping.com%2Ftestpage.htm.

tissue
05-15-2010, 07:47 PM
Ok, so i got the 41 errors down to 12 which is all the span issues.

How i want it to be is
http://pichost.superkipje.com/images/05606905643624385226.png (http://pichost.superkipje.com/)

and it seems to work with span, but if its not good coding i should fix it. But if i try <li class="nav">blah</li> it doesnt work. It changes the text to the default no syles and theres no rollovers then.

Also if i do
<ul>
<li></li>
</ul>

<ul>
<li></li>
</ul>

it puts then on different lines even with the property inline selected.

How would you set this up?

abduraooft
05-16-2010, 01:19 PM
<ul id="buttonstemp">
<span class="nav">
<li><a href="http://www.kbmapping.com">Home</a></li>
<li><a href="http://www.kbmapping.com">Contact</a></li>
<li><a href="http://www.kbmapping.com">Buy Maps</a></li>
<li><a href="http://www.kbmapping.com">Gallery</a></li>
<li><a href="http://www.kbmapping.com">Tutorials</a></li>
</span>
<span id="whitespace">

<img src="http://kbmapping.com/images/topnav/games/whitespace.png" />
</span>
<span id="mapfor">
<span class="gmod">
<li><a href="http://store.steampowered.com/app/4000/"></a></li>
</span>
<span class="css">
<li><a href="http://store.steampowered.com/app/240/"></a></li>
</span>
<span class="hl2">
<li><a href="http://store.steampowered.com/app/320/"></a></li>
</span>
<span class="dod">
<li><a href="http://www.dayofdefeat.com/"></a></li>
</span>
</span>
</ul>

Why do you need all those spans? Are you suffering from divitis/spanitis (http://csscreator.com/divitis)? :)

Also if i do
<ul>
<li></li>
</ul>

<ul>
<li></li>
</ul>

it puts then on different lines even with the property inline selected.See the simple nesting of list items at http://www.htmldog.com/reference/htmltags/ul/

tissue
05-17-2010, 12:23 AM
Because im using CSS for rollovers so every span loads the other image on a:hover. That is why. I just dont want to use Java for it because i find css is more reliable then how i have it on my other site.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum