Toggle sidebar Toggle sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

CSS Help - Width Question

G

gavd

macrumors 6502a
Original poster
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.
 
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>
 
Thanks elppa. I'll change the sans-serif typo.

I'll also give your CSS suggestions a try and see how that comes out.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back