On my homepage i want there to be on the right a section for news. Then on the left of the site there can be normal welcome stuff. Heres what i want it too look like... Website: http://davies5.co.uk 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"> <p>Welcome to Davies5. 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): 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/bg.gif); 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 { color: #FFF; margin: 0 auto; width: 750px; } #header { height: 130px; float: center; margin-top: 10px; } #menu { overflow: hidden; background-color: #ffffff; list-style: none; } * html #menu { height: 1%; } #menu li { float: left; } #menu a { background: transparent; color: #000000; display: block; font: 21px/20px georgia, helvetica, sans-serif; margin-right: 20px; margin-left: 20px; padding: 5px 0; text-decoration: none; text-indent: 25px; } #menu a:hover { color: #FFD700; font: 21px/20px georgia, helvetica, sans-serif; } #content { background: #fff; color: #000; min-height: 600px; border-right: 2px solid #fff; border-left: 2px solid #fff; } * html #content { height: 600px; /* for ie */ } #content .wrapper { padding: 1em; } #content p { margin: 0.5em 0; } #footer { clear: left; color: #ffffff; padding-top: 16px; text-align: center; border-top: 2px solid #FFFFFF; } #footer em { border-top: 2px solid #ffffff; display: block; font: normal 100%/140% tahoma, helvetica, sans-serif; margin: 0 auto; padding: 0.5em 3em; Code (markup): How can i do this? Anybody able to help? Thanks.. :goof:
For some reason the text in my news collumn doesnt have a margin so the text is right by the border. But in the css it says it has a 10px border. Any ideas? Website: http://www.lolage.co.uk 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>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="#" width="#" height="#"/> </div> <ul id="menu"> <li><a href="index.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 id="news"> <h1 id="newstitle">Profile</h1> <p><b>Name:</b> Ben Davies <br> <b>Age</b>: 16 <br> <b>Candidate Number</b>: 3040 <br> <b>Center Number</b>: 20544</p> </div> <div class="wrapper"> <p> Welcome to my eportfolio. Here in my eportfolio you will find all my work which i have been working on. Its showcased in this eportfolio, click on the links to navigate through the site. </p> <p> I created this website from scratch in a text editor using HTML+CSS. I have also got numerous video clips in the site which i have edited myself to evaluate my work. </p> I hope you like my eportfolio - Graphics SPB. </p> </div> </div> <div id="footer"> <em>Copyright © ; 2007, Ben Davies.</em> </div> </div> </body> </html> Code (markup): CSS: /* CSS Document */ * { margin: 0; padding: 0; } body { background-image: url(images/bg.gif); background-repeat: repeat; background-color: #333333; 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 { color: #FFF; margin: 0 auto; width: 750px; } #header { margin: 0 auto; background: url() no-repeat 0 0; background-color: #666666; border-top: 4px solid #FFF; border-left: 4px solid #FFF; border-right: 4px solid #FFF; height: 130px; margin-top: 10px; } #menu { overflow: hidden; background-color: #ffffff; list-style: none; } * html #menu { height: 1%; } #menu li { float: left; } #menu a { background: transparent; color: #000000; display: block; font: 11px/11px georgia, helvetica, sans-serif; margin-right: 5px; margin-left: 5px; padding: 3px 0; text-decoration: none; text-indent: 25px; } #menu a:hover { color: #FFD700; font: 11px/11px georgia, helvetica, sans-serif; } #content { background: #fff; color: #000; min-height: 600px; border-right: 2px solid #fff; border-left: 2px solid #fff; } * html #content { height: 600px; /* for ie */ } #content .wrapper { padding: 1em; } #content p { margin: 0.5em 0; } #footer { clear: left; color: #ffffff; padding-top: 16px; text-align: center; border-top: 2px solid #FFFFFF; } #footer em { border-top: 2px solid #ffffff; display: block; font: normal 100%/140% tahoma, helvetica, sans-serif; margin: 0 auto; padding: 0.5em 3em; } #news { width: 250px; height: 130px; float: right; border: 1px solid #333333; background-color: #CCCCCC; margin: 10px 10px 0 0; } #newstitle { margin: 0; padding: 0; width: auto; background-color: #666666; color: #fff; font-weight: bold; text-align: center; } Code (markup):
The margin was applied to the top and the right of the element's container. Also, you don't need the 1% height hack for IE 6 in your menu. You can simply stick it in the menu rule and be done with it.