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: 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 */ } Code (markup): HTML: <!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 © ; 2007, Ben Davies.</em> </div> </div> </body> </html> Code (markup):
I see a couple of things, though they probably have little to do with your problem : ) 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; } Code (markup): You are trying to select everything. So, just go for it. Select everything with the "everything wildcard": * * { padding: 0; margin:0; } I'm not sure, but this might also work with the headertexts: h* or if it works like Unix, h? (normally a ? means one character and the * could be any number of characters... but dunno if CSS knows what the ? is). float: center does not exist : ) There's only left and right (and none, if you're un-doing a float you've previously stated for the same element... not sure how useful none is). I dunno what CSS is doing when you say float and then use center... it'll either not float or maybe default to left. Instead, center the header the same way you centered the #container: give it a width and marign: 0 auto it. Then the menu will come after and sit on the left. If the menu is horizontal, you won't notice the float as it'll be really wide. Do you really want to float it? As for now, because you're trying to float the header too, the menu might be trying to float next it it (because the float of the header, working or not, wasn't cleared). Most people float the li's in a menu (if horizontal), not the menu itself. Nevermind, I just saw your site. You could better float the sidebar that the menu's in. The text coming later will sit happily on the right. On FireFox, your menu seems to be in the right place. Footer transparent, not sure what you mean. If you don't set a background colour, it is automatically transparent (shows the background of whatever's behind it.
#footer em { border-top:2px solid #FFFFFF; remove the border-top line to make the footer completely transparent As for the rest, it seems fixed or you're not describing your problem well. If it is NOT fixed please reply with a more detailed explanation of your problem
Uh Stomme, I wrote that code for Ben over at SitePoint (though he has modified it since then). I used that particular method of zeroing everything out since I don't want form controls to be affected by the reset. I also cleared his footer problem over at SitePoint as well. Ben, since I originally wrote the template for you, why don't you just take me up on my offer to help you out for free rather than posting questions everywhere?
Dan, can you explain? Form resets? Do you mean an html form or something else? What gets reset that's default? (Cause I'm still slogging my way through forms at work...) Also, do you know if CSS can do something like h? to mean all h1, h2, etc?
Yes, I mean HTML forms. And I was specifically referring to margins and padding being locked out. And yes, CSS can handle multiple selectors at once. You can see it in the heading rules I wrote for Ben's page above (h1, h2, h3, h4, h5, h6 { }).