Couple of questions to do with CSS.

lolage · 21 Nov 2007 at 08:14

Hi, i want my navigation bar to be below my header and it deleted off the left hand side. How can i do this?
Also how can i make my footer transparent?

Another question... are there any good websites for website background images?

Thanks.

Website:
http://davies5.co.uk

CSS:

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-image: url(images/bg3.jpg);
	background-repeat: repeat;
	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: #010208 url("images/nav.jpg") top left repeat-y;
	color: #FFF;
	margin: 0 auto;
	width: 750px;
}

#header {
	height: 130px;
	float: center;
	margin-top: 10px;
}

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

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

#content {
	background: #fff;
	color: #000;
	margin-left: 175px;
	min-height: 600px;
	border-right: 2px solid #fff;
	border-left: 2px solid #fff;
	border-top: 2px solid #fff;
}

* html #content {
	height: 600px;                              /* for ie */
}
	#content .wrapper {
		padding: 1em;
	}

	#content p {
		margin: 0.5em 0;
	}

#footer {
	background-image: url(images/bg3.jpg);
	clear: left;
	color: #000;
	padding-top: 16px;
	text-align: center;
	border-top: 2px solid #FFFFFF;
}
	#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 */
	}

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>Davies5 </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.jpg" width="750" height="130"/> 
	</div>
	<ul id="menu">
		<li><a href="index.htm">Home</a></li>
		<li><a href="rob.htm">Rob</a></li>
		<li><a href="nicky.htm">Nicky</a></li>
		<li><a href="ben.htm">Ben</a></li>
		<li><a href="thomas.htm">Thomas</a></li>
		<li><a href="amy.htm">Amy</a></li>
	</ul>
	<div id="content">
		<div class="wrapper">
			<h1>Welcome to Davies5</h1>
		<p>Here you can find out about the Davies Family!</p>
	
		</div>
	</div>
	<div id="footer">
		<em>Copyright &#169 ; 2007, Ben Davies.</em>
	</div>
</div>
</body>
</html>

blade007 · 21 Nov 2007 at 08:24

you need the global white space reset rather than all those declarations at the top.

* { margin: 0; padding: 0;}

that should do it

Deleted User 234324 · 21 Nov 2007 at 10:30

Hang on got a little mixed up with what your after,

You want your navigation bar to be under your header right ? as in horizontal ?

if thats the case then

Code:

#menu {
width: 100%;
}

#menu li {
display: inline;
}

#menu li a {
display: inline;
}

should do it.

Also noticed your using an image for the header, scrap that and use a background color instead.

instead of using an "<img>" tag in your html to get the navy blue background remove that html all togeather and replace it with this css. That way if you wanna change the colour at all you just change one value instead of replace an image.

Code:

#header {
    width: 100%;
    height: 130px;
    background-color: #000066;
    margin-top: 10px;
}

Couple of questions to do with CSS.

More options

lolage

lolage

fiveub's Slave

blade007

blade007

Deleted User 234324

Deleted User 234324