April 2, 200917 yr Hi All, This is my first post & I am very much a beginner at web design. I am doing my best to learn how to use codes but am now stuck! I have read several posts on here regarding wrappers & how to centre my site, but still am not getting anywhere, so your help would be much appreciated! My CSS looks like this: * { margin: 0; padding:0; } body { font-family: Verdana, Helvetica, Arial, sans-serif; background-color: #99cc33; line-height: 125%; padding: 0; margin: 0; text-align:left; } #wrapper { background-color: #FFFF99; border: 1px solid #993399; margin-top: 0px; margin-left: auto; padding: 10px; width: 960px; height: 1000px text-align:left; } Whilst my html is: <!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"> <head> <title>Ivywell Alpacas - Home Test</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <link href="testing.css" rel="stylesheet" type="text/css"/> </head> </div> <body> <div class="wrapper"> <div id="header"> <div id="sitebranding"> <h1>Ivywell Alpacas</h1> </div> <div id="tagline"> <p>Defining the future...</p> </div> <!-- SiteSearch Google --> <form method="get" action="http://www.google.com/search"> <div id="search"> <label for="q">Search:</label> <input id="q" name="q" size="20" maxlength="255" value="" type="text"/> <input name="domains" value="http://www.ivywell.co.uk/"'>http://www.ivywell.co.uk/" type="hidden"/> <input name="sitesearch" value="http://www.ivywell.co.uk/" checked="checked" id="mysite" type="radio"/> <label for="mysite">Just this site</label> <input name="sitesearch" value="" id="www" type="radio"/> <label for="www">WWW</label> <input name="btnG" value="Go" type="submit"/> </div> </form> <!-- SiteSearch Google --> </div> <!-- end of header div --> </div> <!-- end of header div --> <div id="navigation"> <ul> </ul> </div> <!-- end of navigation div --> <div class="menu"> <ul> <li><a href="../menu/index.html">HOME<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="herd2.html" title="The zero dollar ads page">test</a></li> <li><a href="../menu/embed.html" title="Wrapping text around images">test</a></li> <li><a href="../menu/form.html" title="Styling forms">test</a></li> <li><a href="../menu/nodots.html" title="Removing active/focus borders">test</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="index.html">ABOUT US<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="spies.html" title="a coded list of spies">test</a></li> <li><a href="vertical.html" title="a horizontal vertical menu">test</a></li> <li><a href="expand.html" title="an enlarging unordered list">test</a></li> <li><a href="enlarge.html" title="an unordered list with link images">test</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="../layouts/index.html">EVENTS<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">test</a></li> <li><a href="../layouts/body2.html" title="Cross browser fixed layout">test</a></li> <li><a href="../layouts/body4.html" title="Cross browser fixed layout">test</a></li> <li><a href="../layouts/body5.html" title="Cross browser fixed layout">test</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="../boxes/index.html">HERD<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="spies.html" title="a coded list of spies">test</a></li> <li><a href="vertical.html" title="a horizontal vertical menu">test</a></li> <li><a href="expand.html" title="an enlarging unordered list">test</a></li> <li><a href="enlarge.html" title="an unordered list with link images">test</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="../mozilla/index.html">CONTACT US<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="../mozilla/dropdown.html" title="A drop down menu">test</a></li> <li><a href="../mozilla/cascade.html" title="A cascading menu">test</a></li> <li><a href="../mozilla/content.html" title="Using content:">test:</a></li> <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">test</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> </div> <div id="bodycontent"> <h2>Welcome to the home of Ivywell Alpacas</h2> <p><img src="Gallery/Brooke.jpg" class="feature" width="200" height="162" alt="a circle of divers practice their skills"/></p> <p>Welcome to the site of Ivywell Alpacas. blah blah blah. </p> </div> <!-- end of bodycontent div --> </div> <!--wrapper--> </body> </html> Any help would be much appreciated as it is now driving me absolutely crazy!!!
April 5, 200917 yr Author Many thanks for your replies. I've tried the codes you've suggested above & amendments, but still no luck! Any other suggestions? How do I stop everything squeezing up when you minimise the screen?
April 6, 200917 yr Your nesting is completely out in your HTML. This will affect both your layout and your pages validation with W3C. I have corrected your indentation and updated your CSS. 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"> <head> <title>Ivywell Alpacas - Home Test</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <link href="testing.css" rel="stylesheet" type="text/css"/> </head> <body> <div id="wrapper"> <div id="header"> <div id="sitebranding"> <h1>Ivywell Alpacas</h1> </div> <div id="tagline"> <p>Defining the future...</p> </div> <!-- SiteSearch Google --> <div id="search"> <form method="get" action="http://www.google.com/search"> <label for="q">Search:</label> <input id="q" name="q" size="20" maxlength="255" value="" type="text"/> <input name="domains" value="http://www.ivywell.co.uk/" type="hidden"/> <input name="sitesearch" value="http://www.ivywell.co.uk/" checked="checked" id="mysite" type="radio"/> <label for="mysite">Just this site</label> <input name="sitesearch" value="" id="www" type="radio"/> <label for="www">WWW</label> <input name="btnG" value="Go" type="submit"/> </form> </div> </div> <div id="navigation"> <ul> <!-- Dan: You need some navigation here --> </ul> </div> <div class="menu"> <ul> <li><a href="../menu/index.html">HOME</a></li> <li><a href="herd2.html" title="The zero dollar ads page">test</a></li> <li><a href="../menu/embed.html" title="Wrapping text around images">test</a></li> <li><a href="../menu/form.html" title="Styling forms">test</a></li> <li><a href="../menu/nodots.html" title="Removing active/focus borders">test</a></li> <li><a href="index.html">ABOUT US</a></li> <li><a href="spies.html" title="a coded list of spies">test</a></li> <li><a href="vertical.html" title="a horizontal vertical menu">test</a></li> <li><a href="expand.html" title="an enlarging unordered list">test</a></li> <li><a href="enlarge.html" title="an unordered list with link images">test</a></li> <li><a href="../layouts/index.html">EVENTS</a></li> <li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">test</a></li> <li><a href="../layouts/body2.html" title="Cross browser fixed layout">test</a></li> <li><a href="../layouts/body4.html" title="Cross browser fixed layout">test</a></li> <li><a href="../layouts/body5.html" title="Cross browser fixed layout">test</a></li> <li><a href="../boxes/index.html">HERD</a></li> <li><a href="spies.html" title="a coded list of spies">test</a></li> <li><a href="vertical.html" title="a horizontal vertical menu">test</a></li> <li><a href="expand.html" title="an enlarging unordered list">test</a></li> <li><a href="enlarge.html" title="an unordered list with link images">test</a></li> <li><a href="../mozilla/index.html">CONTACT US</a></li> <li><a href="../mozilla/dropdown.html" title="A drop down menu">test</a></li> <li><a href="../mozilla/cascade.html" title="A cascading menu">test</a></li> <li><a href="../mozilla/content.html" title="Using content:">test:</a></li> <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">test</a></li> </ul> </div> <div id="bodycontent"> <h2>Welcome to the home of Ivywell Alpacas</h2> <p><img src="Gallery/Brooke.jpg" class="feature" width="200" height="162" alt="a circle of divers"/></p> <p>Welcome to the site of Ivywell Alpacas. blah blah blah.</p> </div> </div> </body> </html> Changes to HTML: Fixed tag nesting Indented code for readability Ammended wrapper "class" to an "ID" (this was the cause of your problems) CSS: * { margin: 0; padding:0; } body { font-family: Verdana, Helvetica, Arial, sans-serif; background-color: #99cc33; line-height: 125%; padding: 0; margin: 0; text-align:left; } #wrapper { background-color: #FFFF99; border: 1px solid #993399; margin: 0 auto; padding: 10px; width: 960px; } Changes to CSS: Removed uneccessary height and text-align declarations Added "margin: 0 auto;" to #wrapper (for center alignment) The cause of your problem was that you had defined a class in your HTML but was in fact referencing an ID in your CSS. It should have been an ID in your HTML also. I reccomend using Notepad++ as it will highlight your sytax, making your mistakes much easier to spot. Regards, Dan
Create an account or sign in to comment