SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    May 2011
    Location
    India
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Horizontal Navigation with Right Image.

    Dear All,

    I am new bie and m trying Horizontal Navigation Bar, and i m confused in margin and padding in my Navigation bar,
    I want to my navigation bar just like attached image, please help me out how I can set my width in between each li with right arrow attached is the image of bullet.

    header_nav_bullet.png

    header_nav_bullet_selected.png

    Horiz_Nav.png

    HTML

    <div id="Header_nav">
    <div class="nav_container">

    <ul>
    <li><a href="" style="text-decoration:underline;" >Home</a></li>
    <li><a href="" >Products</a></li>
    <li><a href="">Apps</a></li>
    <li><a href="">Explore</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Groups</a></li>

    </ul>


    </div>

    </div>

    CSS:

    #Header_nav {

    width:100%;
    height:59px;
    margin:0;
    background-size:100% 100%;
    border-bottom:1px solid #e2e2e2;
    background-color:#f7f7f7;
    }


    .nav_container{width:1200px;
    margin:auto;
    padding:20px 0 0 97px;

    }

    .nav_container ul{padding:0; margin:0;}
    .nav_container ul li {list-style:none; display:inline-block; background-image:url('header_nav_bullet.png'); background-repeat:no-repeat; background-position:right; margin:auto;}

    .nav_container ul li a {color:#333; font-size:15px; text-decoration:none; display:block; margin:0 0 0 20px; font-weight:bold; padding:0px;}



    .a_underline{text-decoration:underline; color:#333;}

  2. #2
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Well... let's see... you have two DIV around it for no good reason, you're applying list-style to the wrong element, you're attempting to use inline-block on a element that IE can't do that to, inline-blocks are like normal words so whitespace between them means there's a space between them which is why if you need them flush typically floats are used (though there are workarounds, none of them are particularly reliable).

    I'd have to see the full page to weigh in more, but I suspect from what I'm seeing that there's lo legitimate reason for that to be more than just the UL.

    Though I also suspect that much of your problem is the lack of an extra element to apply that down-arrow to... since the text is dynamic width an you want the anchor (which is where MOST of your dynamic style belongs). I'd toss a sandbag span into the anchor and use that to make the image... I'd move half of what you have on LI into the anchor, and half of it into the parent list,

    But again with the tiny code snippets and without seeing the rest of the layout, we're left guessing wildly as to what it is you are trying to accomplish... though that 1200px fires off a massive flare saying "broken/inaccessible layout" and/or "not viable design concept" since a massive fixed width pretty much throws the notion of accessibility out the window.


Tags for this Thread

Bookmarks

Posting Permissions

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