#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    5
    Rep Power
    0

    Make unordered list menu 100% of fluid layout width


    I'm experiencing some problems when making my fluid <ul>-list reach across 100% of the layout. There is a gap on the right side. e.g. I set the li width to 16.66667 when I have 6 tabs, but that isn't really the whole number so the outcome it a small gap at the end of the manu. It's "impossible" to make the number correct. When I have 5 tabs it's easy, just setting the width to 20%. However, isn't there a method for doing this regardless of number of tabs?

    My page is here: http://imt1292.desishion.no/mappe_1

    This is my (relevant) CSS
    Code:
    	
    
            #header nav { 
    		font-size: 1.2em; 
    		font-weight:300;
    		line-height: 2.1em;
    		text-transform: uppercase; 
    		margin-top: 100px;
    		padding: 0; 
    		text-align: center;
    		width: 100%;
    		min-width: 650px; 		 
    	}
    
    	#header ul {
    		list-style: none; 
    		margin: 0 auto; 
    		width: 100%;
    		margin-left: -40px;
    	} 
    	
    	#header li {
    		float: left; 
    		display: inline; 
    		width: 16.67%;
    	}
    This is my (relevant) HTML

    Code:
    <header id="header" class="layout"> 
    
    	<div class="logoArea">
    	  	
    		<canvas id="canvas" class="logo" width="258" height="221">
    		  	
                Sorry, your browser doesn't support canvas technology.
       
            </canvas>
    		  	  	
            <h1>Dovah</h1> 
            <h2>&nbsp; a Staffordshire Bull Terrier </h2>
        
        </div>
            
        <nav>
            <ul> 
    		<li><a href="index.php" id="tabIndex" class="tab1">home</a></li> 
            	<li><a href="sbt.php" id="tabSBT" class="tab2">the SBT</a></li>  
            	<li><a href="pedigree.php" id="tabPedigree" class="tab3">pedigree</a></li> 
            	<li><a href="dovah.php" id="tabDovah" class="tab4">dovah</a></li> 
            	<li><a href="multimedia.php" id="tabMedia" class="tab5">media</a></li> 
            	<li><a href="info.php" id="tabInfo" class="tab6">info</a></li>        		
    
            </ul>
        </nav>  
            
    </header>
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    294
    Rep Power
    8
    Make your list-items (<li>) elements 16.60% in width, and take off width: 100% off your <ul> unordered list.

    Regards,

    NM.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    5
    Rep Power
    0
    Originally Posted by Nanomech
    Make your list-items (<li>) elements 16.60% in width, and take off width: 100% off your <ul> unordered list.

    Regards,

    NM.
    Thanks, but unfortunately that didn't make any difference.
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    294
    Rep Power
    8
    I debugged your website in Firebug and I had it how you wanted it.

    It was late but I believe I deleted every style for the <ul> and then added the 16% for the list-items and it displayed every list-item on the same line.

    Regards,

    NM.

IMN logo majestic logo threadwatch logo seochat tools logo