Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    May 2010
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    CSS nav bar question

    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

    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

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    It looks like you've applied display:inline; to both <ul>s. Have you sorted it out?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    May 2010
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    No, i actually screwed it up more. But the display:inline makes it horizontal?

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Quote Originally Posted by tissue View Post
    But the display:inline makes it horizontal?
    Yes, at least in FF3.6
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    May 2010
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    ya, ok well i got it all working and looks fine in Fire fox and Chrome, but ofc explorer is messed up



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

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Code:
    <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?verbos...2Ftestpage.htm.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    New Coder
    Join Date
    May 2010
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ok, so i got the 41 errors down to 12 which is all the span issues.

    How i want it to be is


    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?

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    <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?
    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/
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    New Coder
    Join Date
    May 2010
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •