Stuart Elliott
Members
-
Joined
-
Last visited
Reputation Activity
-
Stuart Elliott got a reaction from Vulcan in Website coding error need helpHi Vulcan
By default each browser comes with its own set of very basic default styles, what the Meyer snippet does is effectively remove / reset these default styles allowing a consistant feel cross browser.
I have ammended your HTML / CSS and included the meyer reset to hopefully give you a head start.
Hope this helps
Stuart
HTML Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>The Hive Project</title> <meta name="author" content="Adrian Pelletier" /> <link rel="stylesheet" type="text/css" href="css/screen.css" media="all" /> <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> </head> <body> <div id="wrapper"> <div id="header"> <div class="title"></div> </div><!--// End of #header --> <div id="container"> <div id="menu"> <ul> <li class="active"><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="projects.html">Projects</a></li> <li><a href="contact.php">Contact</a></li> </ul> </div><!--// End of #menu --> <div id="content"> <h1>Projects </h1> <p>Vintage at Goodwood festival 2010</p> <p>Collaboration with 'The Den Project' - Leeds Light Night 2010</p> <p>Marlbourough college - Creative writing course 2011</p> <p>Chandler School - Woodland design and build alongside workshops 2011 </p> <p>'Bournstream' charity playsite - design and build 2011</p> </div><!--// End of #content --> </div><!--// End of #container --> <div id="footer"> <div class="footer_left">© Copyright 2011 The Hive Project</div> <div class="fooler_right"><a href="mailto:pigramj@gmail.com">Web Designer Contact </a></div> </div><!--// End of #footer --> </div><!--// End of #wrapper --> <!--// Non page rendering Javascript performs better within the page footer --> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script> <script type="text/javascript" src="js/execute.js"></script> </body> </html>
CSS Code (Styles.css)
/* -- Start of Meyer Reset DO NOT EDIT -- */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* -- End of Meyer Reset DO NOT EDIT -- */ /* -- Start of style.css edit from here onwards -- */ body { background: url("images/bg.png") repeat scroll 0 0 transparent; font: 14px Arial,Helvetica,sans-serif; margin: 0; padding: 0; text-align: justify; } h1 { font-size: 50px; margin:10px; } p { margin:5px; } a { color: #000000; } #wrapper { margin: 0 auto; width: 1020px; } #header { background: url("images/header.png") no-repeat scroll left top transparent; height: 140px; } .title { background: url("images/title.png") no-repeat scroll 0 0 transparent; float: left; height: 80px; margin-left: 50px; margin-top: 50px; width: 440px; } #menu { height: 40px; padding-left: 50px; } #menu ul { line-height: normal; list-style: none outside none; } #menu li { float: left; font-size: 16px; font-weight: bold; width: 100px; } #menu a { display: block; width: auto; } #menu a:hover { font-family: Arial,Helvetica,sans-serif; font-size: 18px; font-weight: bold; text-decoration: underline; } #container { background: url("images/main.png") repeat-y scroll 0 0 transparent; } #content { padding:0 50px 30px 50px; } #slide { height: 450px; margin-left: 220px; margin-top: 50px; width: 600px; } #placeholder { height: 450px; width: 600px; } #footer { background: url("images/footer.png") repeat scroll 0 0 transparent; clear: both; font-weight: bold; height: 54px; } .footer_left { clear: left; float: left; font-weight: bold; padding-left: 50px; width: 700px; } .footer_right { float: right; font-weight: bold; text-align: right; width: 200px; }
