I have included the code for my current site layout and left the content area blank for ideas. My idea is to have the image on the right side and the text for the article on the left that fits the gap. I have been playing around with some ideas but in which i have three image divs and three content divs. I thought this would be the best idea but i think its a bit div happy (ie too many divs). Can i create the layout i want with less divs? html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <script src="styleswitch.js" type="text/javascript"> </script> <link href="CSS/default.css" rel="stylesheet" type="text/css" /> <link rel="alternate stylesheet" type="text/css" media="screen" title="Contrast" href="CSS/contrast.css" /> <link rel="alternate stylesheet" type="text/css" media="screen" title="Large" href="CSS/large.css" /> </head> <body> <div id="header"></div> <div id="style-switcher"> <a href="javascript:chooseStyle('none', 60)" checked="checked">Default</a> | <a href="javascript:chooseStyle('Large', 60)">Large Font</a> | <a href="javascript:chooseStyle('Contrast', 60)">High Contrast</a> </div> <div id="content"> <div id="content-left"> <a href="index.html">Home</a><br /> About<br />News<br />Dates<br />Admissions<br />Successes<br />Microsoft Academy<br />Email<br />Contact Us<br />Links </div> <div id="content-right"> <div id="search"> <h2>Google Search</h2> <form id="form1" method="post" action=""> <input name="textfield" type="text" size="15" /> <input type="submit" name="Submit" value="Go" /> </form> </div> <div id="prospectus"> <h2>Prospectus</h2> School Prospectus (PDF) <br /> Sixthform Prospectus (PDF)</h2> </div> <div id="newsletter"> <div> <h2>Newsletter</h2> </div> <div class="newsletter1">Newsletter (PDF)</div> <div class="newsletter2">Newsletters can be viewed by using a version of Adobe Reader</div> <div class="newsletter3"> <a href="http://www.adobe.com/uk/products/acrobat/readstep2.html"><img src="images/get_adobe_reader.gif" alt="Download the latest version of Adobe Reader" width="82" height="29" border="0" /></a></div> </div> <div id="links"> <h2>Useful Links</h2> Wolverhampton Engage<br /> Virtual Workspace<br /> My I-Plan<br /> OFSTED</h2> </div> </div> <div id="content-main"></div> </div> <div id="wrapper"> <div id="footer"><a href="index.html">Home</a> | About | Contact Us | Accessibility</div> </div> </body> </html> Code (markup): css a:link { text-decoration: none; color: #000000; } a:visited { text-decoration: none; color: #000000; } a:hover { text-decoration: none; color: #00CCFF; } a:active { text-decoration: none; color: #000000; } body { font-family:arial,helvetica,sans-serif; font-size:12px; } #header { border:1px solid #bbb; height:80px; padding:10px; font-family: Arial, Helvetica, sans-serif; margin-bottom:10px; min-width:500px; font-size: 10px; } #style-switcher { margin-bottom:5px; margin-left:2px; border:1px solid #bbb; text-align:right; background-color:#0099FF; } #content { float:left; width:100%; } #wrapper { float:left; left:0; width:100%; min-width:500px; margin-top:10px; } #content-left { float:left; padding:10px; line-height:20px; width:130px; border:1px solid #bbb; margin-right:10px; } #content-right { float:right; width:150px; border:1px solid #bbb; } #search { margin:5px 5px 5px 5px; border:1px solid #bbb; } .searchbox { font-size:11px; line-height:18px; } .header { border-bottom:1px solid #bbb; text-align:center; font-size:12px; line-height:18px; background-color:#0099FF; color:#FFFFFF } #prospectus { margin:5px 5px 5px 5px; border:1px solid #bbb; line-height:18px; font-size:11px; } #newsletter { margin:5px 5px 5px 5px; border:1px solid #bbb; } .newsletter1 { font-size:11px; line-height:18px; border-bottom:1px solid #bbb; } .newsletter2 { font-size:10px; } .newsletter3 { margin-top:5px; margin-bottom:5px; text-align:center; } #links { margin:5px 5px 5px 5px; border:1px solid #bbb; font-size:11px; line-height:18px; } .links { font-size:11px; line-height:18px; padding-left:5px; padding-right:5px; } #content-main { height:325px; padding:10px; border:1px solid #bbb; margin-left:165px; margin-right:165px; } #footer { padding:5px; border:1px solid #bbb; text-align:right; background-color:#0099FF; } h2 { top:0; font-size:12px; text-align:center; background-color:#0099FF; color:#FFFFFF; font:Arial, Helvetica, sans-serif; margin-top:0em; margin-bottom:0em; font-weight:normal; } h3 { top:0; font-size:14px; text-align:left; color:#000000; font:Arial, Helvetica, sans-serif; margin-top:0em; margin-bottom:0em; font-weight:bold; } form { margin-top:5px; margin-bottom:5px; margin-left:2px; } input { font-size:11px; } .colour { float:left; } Code (markup):
Yes, you are using too much markup (it's called "over-thinking" the solution). You also need to learn how to use the proper HTML elements for the job. As I said in the other thread, I'll see what I can do in the morning for ya .
i have ammended the code for it to HTML strict instead of XHTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <script src="styleswitch.js" type="text/javascript"> </script> <link href="CSS/default.css" rel="stylesheet" type="text/css"> <link rel="alternate stylesheet" type="text/css" media="screen" title="Contrast" href="CSS/contrast.css"> <link rel="alternate stylesheet" type="text/css" media="screen" title="Large" href="CSS/large.css"> </head> <body> <div id="header"></div> <div id="style-switcher"> <form id="switchform"> <select name="switchcontrol" size="1" onchange="chooseStyle(this.options[this.selectedIndex].value, 60)"> <option value="none" selected="selected">Default style</option> <option value="Large">Large Font</option> <option value="Contrast">High Constrast</option> </select> </form> </div> <div id="content"> <div id="content-left"> <a href="index.html">Home</a><br> About<br>News<br>Dates<br>Admissions<br>Successes<br>Microsoft Academy<br>Email<br>Contact Us<br>Links </div> <div id="content-right"> <div id="search"> <h2>Google Search</h2> <form id="form1" name="form1" method="post" action=""> <input name="textfield" type="text" size="15"> <input type="submit" name="Submit" value="Go"> </form> </div> <div id="prospectus"> <h2>Prospectus</h2> School Prospectus (PDF) <br> Sixthform Prospectus (PDF)</h2> </div> <div id="newsletter"> <div> <h2>Newsletter</h2> </div> <div class="newsletter1">Newsletter (PDF)</div> <div class="newsletter2">Newsletters can be viewed by using a version of Adobe Reader</div> <div class="newsletter3"> <a href="http://www.adobe.com/uk/products/acrobat/readstep2.html"><img src="images/get_adobe_reader.gif" alt="Download the latest version of Adobe Reader" width="82" height="29" border="0"></a></div> </div> <div id="links"> <h2>Useful Links</h2> Wolverhampton Engage<br> Virtual Workspace<br> My I-Plan<br> OFSTED</h2> </div> </div> <div id="content-main"></div> </div> <div id="wrapper"> <div id="footer"><a href="index.html">Home</a> | About | Contact Us | Accessibility</div> </div> </body> </html> Code (markup):
Ok, ready for a test? I'm going to give you the "optimized" HTML code. I want to see how you style it (you are not allowed to change the HTML code). I'm doing it this way because I want to see how well you can pick up the concept of using semantic HTML coding habits, and then using CSS to style them. I'll help you out if you get stuck. In fact, I'll even give you the first bit of CSS code you're going to need right now, before I give you the HTML code for the BODY section: /* This is the universal selector at work. It will remove the margins and padding from nearly every element so you can have total control over these two CSS properties. */ * { margin: 0; padding: 0; } Code (markup): But before I show you the HTML code, you're going to want to read up on CSS image replacement techniques. I'm sure you've heard of FIR and the other rubbish - and that's exactly what they are. You're going to want something that works and is ACCESSIBLE. Here is the holy grail of accessible image replacement: http://www.sitepoint.com/article/header-images-css-xhtml And now, the HTML code for the BODY section: <body> <h1><span></span>Header</h1> <!-- should be the site title; some will advocate using the page title, but I prefer the former since IE7 has tabbed browsing - it may prove benefical for those using screen readers to know what site they are on first --> <form id="styleswitcher" method="get" action=""> <!-- you should tie this form into an ASP, JSP, or PHP script for those who have JavaScript disabled or are otherwise unable to use it; if you want to use "POST" instead of "GET" feel free to, it may be more secure given how well the server-side code is written --> <fieldset> <legend>Stylesheet Switcher</legend> <select id="switch" name="switch" size="1" onchange="chooseStyle(this.options[this.selectedIndex].value, 60)"> <option value="none" selected="selected">Default Style</option> <option value="Large">Large Fonts</option> <option value="Contrast">High Contrast</option> </select> <input id="switchStyles" name="switchStyles" type="submit" value="Switch Stylesheets"> <!-- leave this in for accessibility reasons --> </fieldset> </form> <h2 class="skipLink">Main Menu (<a href="#content">Skip to Content</a>)</h2> <ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">News</a></li> <li><a href="#">Dates</a></li> <li><a href="#">Admissions</a></li> <li><a href="#">Successes</a></li> <li><a href="#">Microsoft Academy</a></li> <li><a href="#">Email</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Links</a></li> </ul> <div id="sidebar"> <h2>Sidebar Header</h2> <!-- replace "Sidebar Header" with actual text --> <form id="googleSearch" method="post" action=""> <fieldset> <legend>Google Search</legend> <label for="searchbox">Search Google</label> <input id="textfield" name="textfield" type="text" size="15"> <input id="submitSearch" name="submitSearch" type="submit" value="Go"> </fieldset> </form> <div id="pdfLinks"> <p> Our prospectus and newsletters can be viewed by using a version of Adobe Acrobat Reader. You can <a href="http://www.adobe.com/uk/products/acrobat/readstep2.html"><span></span>download the latest version</a> at Adobe´s Web site. </p> </div> <div id="prospectus"> <h3>Prospectus</h3> <ul> <li><a href="#">School Prospectus <span>(PDF)</span></a></li> <li><a href="#">Sixthform Prospectus <span>(PDF)</span></a></li> </ul> </div> <div id="newsletter"> <h3>Newsletter</h3> <ul> <li><a href="#">Newsletter <span>(PDF)</span></a></li> <li><a href="#">Lorem ipsum...</a></li> <!-- perhaps a link to a newsletter archive? --> </ul> </div> <div id="links"> <h3>Useful Links</h3> <ul> <li><a href="#">Wolverhampton Engage</a></li> <li><a href="#">Virtual Workspace</a></li> <li><a href="#">My I-Plan</a></li> <li><a href="#">OFSTED</a></li> </ul> </div> </div> <div id="content"> <h2>Page Title</h2> <!-- Replace "Page Title" with Actual Title of Page --> <!-- These "section" DIVs are for illustrative purposes only. Your actual page content will vary. --> <div class="section"> <h3>Section Title</h3> <p> Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... </p> </div> <div class="section"> <h3>Section Title</h3> <p> Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... </p> </div> </div> <div id="footer"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Accessibility</a></li> </ul> <p> Copyright © 2007 The Monster Under the Bed. All Rights To Scare Unsuspecting Children Reserved. </p> </div> </body> Code (markup):
Hi Dan, Thanks for the reply with your tut! Just at work at the mo but i will look at this when i get home and have a play
I wanted to put the content between the menu and the sidebar, but that would have required some advanced CSS (negative margins) and an extra, non-semantic DIV. I kept it this way since I have no idea how good you are with CSS (hence my calling it a "test").
Hi Dan, Just to check because i'm really new to this! How am i doing? CSS .skipLink { font-size: xx-small;} div { font-size: 15;} .section {} body { font-size: 0.8em; font-family: Verdana, Helvetica, Arial, sans-serif;} h1 {} #menu { float: left; width: 150px;} #sidebar { float:right; width: 150px;} #pdfLinks {} #prospectus {} #newsletter {} span {} #links {} #content { float: left;} h2 {} div {} h3 { font-size: 1em; text-align: center; background-color: aqua; color: white;} #footer { clear: both;} ul {} li {} a {} p {} a:link {} a:visited {} a:hover {} a:active {} Code (markup):
Ok, I think we have some work to do here... Can you provide me with a graphic representation of what you want the layout to look like? (I work much better with a visual representation than code, ironically.) Get me that, and I'll show you how to code this sucker .