CSS Help - Width Question

gavd · Sep 7, 2006

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.

elppa · Sep 7, 2006

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>

gavd · Sep 7, 2006

Thanks elppa. I'll change the sans-serif typo.

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

Search

Search

CSS Help - Width Question

gavd

macrumors 6502a

elppa

macrumors 68040

gavd

macrumors 6502a

Our Staff