CSS Help - Width Question

Discussion in 'Web Design and Development' started by gavd, Sep 7, 2006.

  1. gavd macrumors 6502a

    Joined:
    Jan 30, 2006
    #1
    I'm new to web design and am struggling to do something in CSS. I'm trying to put together a navigation bar (i.e. Home, Contact tabs etc). I'm doing this by having a <ul> list in my html and formatting it in CSS to display inline.

    I've fixed the width for each element, but I'd then like a blank block to fill the width of the rest of the page and aren't sure how to do it. I've given each list item a class of it's own which I think should make things easier but don't know what to do next.

    List within the html...
    Code:
    <li class="nm_Home"><a href="#" title="To the home page">Home</a></li>
    <li class="nm_About"><a href="#" title="All about me">About</a></li>
    <li class="nm_Contact"><a href="#" title="How to  get in touch">Contact</a></li>
    <li class="nm_Blank"><a href="#"></a></li>
    
    ...and my CSS...
    Code:
    #navigation_Main li a{
    	display: block;
    	background: #000;
    	color: #fff;
    	padding: 5px;
    	height: 30px;
    	width: 75px;
    	border-right: 1px solid #fff;
    	font-family: verdana, Arial, san-serif;
    	font-size: 10pt;
    	text-decoration: none;
    	float: left;
    	vertical-align: middle;
    	line-height: 20px;
    }
    I'm thinking I need to create another block in the CSS beginning like the line below but I'm not sure wat to put in it.
    Code:
    #navigation_Main li.nm_Blank a{}
    Thanks in advance for any help.
     
  2. elppa macrumors 68040

    elppa

    Joined:
    Nov 26, 2003
    #2
    First thing, it's sans-serif, not san-serif. If a browser does not have Verdana or Arial available, it will get stuck.


    Next part, how are you li and ul elements styled?

    You can just give the ul element a width of 100%, a height and a background colour (if you so choose).

    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    	<title>untitled</title>
    	
    	<style type="text/css" media="screen">
    	
    		ul {
    			margin: 0;
    			padding: 0;
    			list-style: none;
    			background: #001185;
    			width:  100%;
    			float: left;
    		}
    		
    		ul li {
    			margin: 0;
    			padding: 0;
    		}
    		
    		li {
    			font-family: Verdana, Arial, sans-serif;
    			font-size: 10pt;
    			width: 75px;
    			border-right: 1px solid #fff;
    			float: left;
    		}
    		
    		li a {
    			background-color: #000;
    			color: #fff;
    			padding: 8px;
    			text-decoration: none;
    			display: block;
    		}
    		
    		li a:hover {
    			background-color: #001185;
    			color: #fff;
    		}
    	</style>
    	
    	
    </head>
    
    <body>
    
    <ul>
    	<li><a href="#" title="To the home page">Home</a></li>
    	<li><a href="#" title="All about me">About</a></li>
    	<li><a href="#" title="How to  get in touch">Contact</a></li>
    </ul>
    
    </body>
    </html>
    
    
    
     
  3. gavd thread starter macrumors 6502a

    Joined:
    Jan 30, 2006
    #3
    Thanks elppa. I'll change the sans-serif typo.

    I'll also give your CSS suggestions a try and see how that comes out.
     

Share This Page