CSS Help - Putting a border around navigation bar?

lolage

lolage

lolage

fiveub's Slave
Associate
Joined
1 Sep 2007
Posts
1,461
Location
OcUK HQ
Hi, i have recently got into CSS. I am just finishing off my template but i have one problem - the bottom of my navigation bar has no boder around it. Ive messed with it for ages trying to fix it but i cant do it. Any ideas?

Thanks.

help.png


Code: 
html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var {
	margin: 0;
	padding: 0;
}

body {
	background: #FFF;
	color: #000;
	font: normal 85%/140% tahoma, verdana, arial, helvetica, sans-serif;
	letter-spacing: 1px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: tahoma, garamond, times, serif;
	font-weight: bold;
}

h1 {
	font-size: 1.75em;
	line-height: 1.8em;
}

h2 {
	font-size: 1.5em;
	line-height: 1.55em;
}

h3 {
	font-size: 1.05em;
	line-height: 1.1em;
}

h4 {
	font-size: 0.95em;
	line-height: 1em;
}

h5 {
	font-size: 0.85em;
	line-height: 0.9em;
}

h6 {
	font-size: 0.75em;
	line-height: 0.8em;
}

img {
	border: 0;                                /* fixes firefox bug */
	display: block;
}

#container {
	background: #ff9933 url("images/nav.png") top left repeat-y;
	color: #FFF;
	margin: 0 auto;
	width: 750px;
}

#header {
	height: 200px;
}

#menu {
	float: left;
	list-style: none;
	width: 200px;
}
	#menu li {
		float: left;
		width: 200px;
	}

	#menu a {
		background: transparent;
		color: #FFF;
		display: block;
		font: 20px/15px georgia, helvetica, sans-serif;
		height: 1%;
		margin-left: 25px;
		padding: 8px 0;
		text-decoration: none;
		text-indent: 0px;
	}
	#menu a:hover {
		color: #FFD700;
	}

#content {
	background: #FFF;
	color: #000;
	margin-left: 200px;
	min-height: 400px;
}

* html #content {
	height: 400px;                              /* for ie */
}
	#content .wrapper {
		border-bottom: 1px solid #000;
		border-right: 1px solid #000;
		border-left: 1px solid #000;
		margin-right: 1px;
		padding: 1em;
	}

	#content p {
		margin: 0.5em 0;
	}

#footer {
	background: #FFF;
	clear: left;
	color: #000;
	padding-top: 16px;
	text-align: center;
}
	#footer em {
		border-top: 2px solid #000;
		display: block;
		font: normal 100%/140% tahoma, helvetica, sans-serif;
		margin: 0 auto;
		padding: 0.5em 3em;
		width: 24em;                                                        /* DO NOT CHANGE THIS VALUE */
	}
 
lolage said:
Code: 
html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var {
	margin: 0;
	padding: 0;
}
Click to expand...

Code: 
  * {
    margin: 0;
    padding: 0;
  }
 
Sic said:
Code: 
  * {
    margin: 0;
    padding: 0;
  }
Click to expand...

I dont get your post.. :confused:

Heres the HTML.
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>
	<title>Ben Davies - Come to the Fair!</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<meta http-equiv="imagetoolbar" content="no" />
	<meta name="description" content="A brief (160 character, including spaces) description of the current page goes here." />
	<meta name="keywords" content="keywords, go, here, only, once, page, content, has, been, finished" />
	<link rel="stylesheet" type="text/css" href="screen.css" media="screen,projection" />
</head>
<body>
<div id="container">
	<div id="header">
		<img src="images/banner.png" width="750" height="200"/>
	</div>
	<ul id="menu">
		<li><a href="home.htm">Home</a></li>
		<li><a href="planning.htm">Planning</a></li>
		<li><a href="logo.htm">Logo</a></li>
		<li><a href="flyer.htm">Flyer</a></li>
		<li><a href="banner.htm">Banner</a></li>
		<li><a href="wristband.htm">Wristband</a></li>
		<li><a href="cd_case.htm">CD Case</a></li>
		<li><a href="digital_poster.htm">Digital Poster</a></li>
	</ul>
	<div id="content">
		<div class="wrapper">
			<h1>Welcome to my eportfolio!</h1>
			<p>
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean vitae dolor quis diam
				sodales sodales. Quisque massa leo, sagittis sed, rhoncus vitae, convallis nec, orci.
				Fusce lorem. Nullam ac dui. Mauris quis risus. Mauris volutpat. Ut sollicitudin magna
				ac arcu. Aliquam velit. Donec commodo tempus urna. Mauris mi purus, rutrum vel, aliquet
				ut, faucibus eget, purus. Phasellus tellus libero, iaculis ut, tempor malesuada,
				elementum et, urna. Proin vehicula viverra sapien. Integer eleifend, tortor et
				hendrerit vulputate, lectus enim pharetra risus, quis blandit nibh dui sed neque. Nunc
				nec odio vel odio porta fermentum. Sed quis arcu. Donec tristique scelerisque nibh. Nam
				lacinia libero a sem. Nunc volutpat, dui rutrum euismod sodales, ipsum dui accumsan
				libero, id consequat quam lorem vitae orci.
			</p>
			<p>
				Cras eu justo. Duis ornare ultrices urna. Integer eros. Nulla sagittis viverra purus.
				Sed massa quam, eleifend hendrerit, laoreet vel, auctor sit amet, nunc. Donec
				scelerisque. Cras sodales. Nulla facilisi. Ut molestie. Quisque rhoncus, nulla non
				auctor tincidunt, lectus sapien laoreet metus, non laoreet elit purus sollicitudin
				nulla. Praesent eget lacus sit amet sem elementum molestie. Etiam mattis eros quis
				libero.
			</p>
			<p>
				Vestibulum et massa. Cras pharetra metus ut quam. Fusce ac lectus. Nunc quis nibh ut
				tellus placerat mattis. Duis mi dolor, pharetra at, consectetuer in, aliquet eget,
				lacus. Ut malesuada mi sed ipsum. Integer tristique libero et lacus. Duis hendrerit,
				lectus sit amet porta rhoncus, ipsum quam placerat nunc, ac porta quam turpis ut erat.
				Vestibulum molestie, metus sit amet malesuada eleifend, lorem est dignissim nibh, a
				imperdiet turpis mauris a tortor. Nam porttitor lacus sed tellus. Phasellus tempus. In
				hac habitasse platea dictumst. Vivamus magna. In in sem. Morbi tristique metus at magna.
				Sed luctus laoreet turpis. Curabitur egestas varius nibh. Fusce condimentum pretium
				augue. Nam sollicitudin rutrum turpis. Quisque imperdiet.
			</p>
			<p>
				Integer turpis arcu, hendrerit id, lacinia non, volutpat quis, quam. Nunc pharetra.
				Vestibulum posuere lorem vitae odio. Donec risus mi, accumsan sed, mattis ut, gravida
				vehicula, massa. Duis auctor dui eu tellus. Nam hendrerit pulvinar est. Aenean nunc. In
				consectetuer. Duis rutrum sollicitudin tellus. Donec rutrum mollis eros. Aliquam eget
				odio vel pede rutrum dictum.
			</p>
			<p>
				Suspendisse potenti. In elit. Nunc nibh. Proin ac enim. Nulla tellus. Nunc ipsum mi,
				ornare dictum, hendrerit lobortis, pellentesque sit amet, magna. Sed dui nisi, dictum
				ac, auctor eu, tincidunt nec, nunc. Donec mattis, nisi non posuere accumsan, nulla sem
				congue elit, sit amet eleifend velit lacus sed dui. Duis urna est, iaculis non,
				malesuada ut, faucibus sit amet, dui. Nunc elementum, augue sed auctor imperdiet, risus
				nibh nonummy erat, in rutrum mi felis eu augue. Phasellus eros. Phasellus scelerisque
				pede id nisl. Sed ornare, ante ac laoreet blandit, sem lacus feugiat diam, eget
				consectetuer lorem massa in massa. Fusce commodo lectus vitae quam.
			</p>
		</div>
	</div>
	<div id="footer">
		<em>Copyright &#169 ; 2007, Ben Davies.</em>
	</div>
</div>
</body>
</html>
 
lolage said:
I dont get your post.. :confused:
Click to expand...

you can replace that massive declaration you made with the very small one I posted - unless you specifically want to remove margin and padding from the listed elements. You can use the universal selector (*) to apply style to every element rendered on a page
 
it is quite funny actually - I started getting problems using the thing I recommended, and opted for a reset declaration from a CSS framework that looks identical to the one I recommended the OP replace. Not 8 month resurrection funny, but whatever tickles you!
 
You must log in or register to reply here.
Back
Top Bottom