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 2 of 2
  1. #1
    Banned
    Join Date
    Sep 2012
    Posts
    1
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Horizontal List problem

    I'm new here so hi everyone.

    I'm having some trouble with styling a navigation bar. For reference the page I'm working on can be found here.

    I am trying to get the links along the top to list horizontally with display: inline; however this isn't working as you can see. A solution I have seen to this is to use float: left; instead but this makes it end up looking like this: http://cl.ly/image/2r2H1D1U0v3Q.

    I have managed to fix this second problem by adding overflow: hidden; to the ul, however this then leads me to lose the small triangles either side of the nav bar which make it look as though it folds over.

    Thanks in advance!

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Quote Originally Posted by ollysharp View Post
    I am trying to get the links along the top to list horizontally with display: inline; however this isn't working as you can see.
    You could also use display: inline-block; which works the same was as float: left;, however you don't have to clear your floats (which is what overflow: hidden; was for):

    Code:
    #nav li {
        display: inline-block;
        *display: inline; /* for ie6 & 7 */
        *zoom: 1; /* for ie6 & 7 */
    }
    Inline-Block Article To some this article up: the downside is that you have to string your elements together or you will get a 4px gap between them, kind of like words.

    Code:
    <li>No Gaps!</li><li>No Gaps!></li>
    <li>
        A natural 4px gap :(
    </li>
    <li>
        A natural 4px gap :(
    </li>
    --------------------------------- FOR YOUR SITUATION, I RECOMMEND

    Quote Originally Posted by ollysharp View Post
    A solution I have seen to this is to use float: left; instead but this makes it end up looking like this: http://cl.ly/image/2r2H1D1U0v3Q.
    You could set a height to the #nav instead if you decided to use floats (instead of inline-block):

    Code:
    #nav {
        height: 47px; /* this is the correct height value you should use */
    }
    Looking at your code, I believe you were trying to do something similar to this:

    Code:
    #nav {
    	margin-left: -40px;
    	margin-right: -40px;
    	padding: 0 20px;
    	background: #0055FF;
    	list-style: none;
    	/*overflow: hidden;*/
    	position: relative;
    	height: 100; /* this is not valid, it needs "px", "em", or "%" */
    }
    ---------------------------------

    I have managed to fix this second problem by adding overflow: hidden; to the ul, however this then leads me to lose the small triangles either side of the nav bar which make it look as though it folds over.
    Yeah, the problem with the overflow: hidden; float clearing method is that is indeed does hide any overflow from the normal dimensions (the folds are indeed not part of the nav and were position: absolute; outside of the parent).

    ---------------------------------

    I hope you enjoyed all your options,
    Sammy12
    Last edited by Sammy12; 09-15-2012 at 08:15 PM.

  • Users who have thanked Sammy12 for this post:

    ollysharp (09-16-2012)


  •  

    Posting Permissions

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