Hi There. I am trying to rewrite the HTML for my site www.entrepreneurprofit.co.nz (I am learning as I go) And as I understand it, it is best not to use tables, so I want to know how I can get the Free investor pack advert where it is without using tables. This is the HTML I have so far:
hi, right now I don't have time to do thisbut you can try this tool http://csscreator.com/tools/layout it will generate HTML and CSS.
once you have this created, be sure to cloak your affiliate links by having a redirect as opposed to your direct link to the affiliate page.
Ok. Have uploaded my first attempt to www.entrepreneurprofit.co.nz/my-website.html I would really appreciate it if you guys would take a look and tell me how to improve the code, especially in regards to SEO. Also I have a few questions; 1. Tables are bad right? 2. If tables are bad and I am trying to use them as little as possible - how do I get the Free Investor Pack Square that I have on www.entrepreneurprofit.co.nz to be there without using another table? 3. How do I get the books down the bottom to look like that without using another table? PLEASE PLEASE PLEASE HELP !!!!!
I'm going to answer your questions before I tell you how to fix your layout problems. 1.) Tables are bad right? - No. If they were, they would have been marked for removal from the specification. They're ideal for presenting tabular data, which in 99.975% of cases does not include layouts. 2.) If tables are bad and I am trying to use them as little as possible - how do I get the Free Investor Pack Square that I have on www.entrepreneurprofit.co.nz to be there without using another table? - It'll require some advanced CSS, specifically floats and negative margins, plus an extra, "non-semantic" DIV, but it can be done. 3.) How do I get the books down the bottom to look like that without using another table? - I'd probably use a list, then target the list's images via CSS to change their display state to block, give them a width, and then center the images with margin: 0 auto; but that's just me. Now, as for your layout, you have a three column design here. I'd mark up your header as a DIV (with an ID of "header") containing your logo (the domain name) as an image element, and then serve the rest of the image as a background via CSS. Yes, this will require some Photoshop work, but you're going to have to get used to doing things differently. You could then slide the logo (the image element) into place using any number of methods. Your menu is a list of links, so I'd mark them up as an unordered list with an ID of "menu". Remove the list bullets from the LI elements via CSS, then give the list a width and float it to the left. You'll have to position the floated menu relatively to avoid a bug in Opera that will rear its ugly head later on. As for the content area, I'd create two DIVs here - one with an ID of "content" that will be floated to the left and given a width of 100%; and then an inner DIV with a class of "wrapper" that will have a left margin applied to it (as well as a right margin for the other side column). You may or may not have to add a negative left/right margin for the #content DIV, but if you do, make sure it's equal to the .wrapper DIV's left/right margins. The .wrapper DIV will have overflow: hidden; applied to it so it can contain any floated elements that may appear inside of it. The sidebar (right column) will appear after $content in your HTML code, but will also be floated to the left. It'll be given a negative left margin equal to its width, which must also be explicitly declared. Then clear your footer left and give it a height of 1% to trip hasLayout in Internet Explorer 6 and earlier. Oh, and RESET YOUR MARGINS/PADDING before doing any of this (and make sure the reset goes in at the very top of your stylesheet). A simple trick such as this should do it the job in most cases: * { margin: 0; padding: 0; } Code (markup): If you want me to, I'll show you a basic example of this type of layout in action, but you'll have to take it from there and customize it for your own site.
What Ppera bug is this Dan? (and what version of Opera?) I can't say I've ever encountered one from floating a menu left before.
Wow thanks for all that valuable information. Just a shame I didn't understand much of what you said. An example would be great if you don't mind.
One example, coming up! <!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>Untitled Document</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 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="/styles/screen.css" media="screen,projection" /> --> <style type="text/css" media="screen,projection"> /* CSS RESET RULES */ html, body, a, abbr, acronym, address, area, b, bdo, big, blockquote, button, caption, cite, code, col, colgroup, dd, del, dfn, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, label, legend, li, map, object, ol, p, param, pre, q, samp, small, span, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, ul, var { margin: 0; padding: 0; vertical-align: baseline; } body { background: #FFF; color: #000; font: 85%/1.5 tahoma, verdana, arial, helvetica, sans-serif; letter-spacing: 1px; } code, pre { white-space: pre; } del { text-decoration: line-through; /* it's deleted text - show it as such */ } dfn { font-style: italic; font-weight: bold; } em { font-style: italic; } fieldset { border: 0; /* we'll be applying a border to a DIV with the class of "fieldset" later on, so this isn't needed */ display: inline; /* this squashes an IE float bug */ } h1, h2, h3, h4, h5, h6 { font: bold 1em/1.5 georgia, garamond, "times new roman", times, serif; } h1 { font-size: 1.5em; line-height: 1.75; } h2 { font-size: 1.25em; } img { border: 0; letter-spacing: 0; vertical-align: bottom; } ins { text-decoration: none; } p { padding: 0.25em 0; } strong { font-weight: bold; } tt { display: block; margin: 0.5em 0; padding: 0.5em 1em; } .skip { position: absolute; left: -999em; } /* GENERAL LAYOUT RULES */ #container { margin: 0 auto; width: 750px; } #header { background: #FEC; color: inherit; height: 80px; /* Crushes a Gecko bug */ } #menu { float: left; position: relative; /* Depth Sorting Error in Opera - this fixes it */ width: 150px; } #menu li { list-style: none; } #menu li a { background: #FCC; color: #000; display: block; height: 1%; /* hasLayout trigger for IE 6 */ padding: 0 0 0 1em; text-decoration: none; } #menu li a:hover, #menu li a:focus { background: #AF6; color: #F00; text-decoration: underline; } #content { float: left; margin: 0 -200px 0 -150px; width: 100%; } #content .wrapper { background: #FFF; border-left: 150px solid #FCC; /* creates the illusion of equal height columns */ border-right: 200px solid #CDF; /* creates the illusion of equal height columns */ color: #000; overflow: hidden; /* contains any floated elements inside this DIV */ padding: 0 10px; } #sidebar { background: #CDF; float: left; position: relative; /* Now it's Firefox's turn to trip up on the depth sorting error - this fixes it */ text-align: center; width: 200px; } #footer { background: #EEE; clear: left; color: inherit; height: 1%; /* hasLayout trigger (see above, in the menu link) */ text-align: center; } #footer em { display: block; font-size: 95%; font-style: normal; padding: 0 1em; } #footer ul { height: 2em; line-height: 2em; } #footer li { display: inline; list-style: none; white-space: nowrap; } #footer li a { background: transparent; color: #00F; padding: 0 0.25em; } </style> </head> <body> <div id="container"> <div id="header"> <img src="#" width="200" height="80" alt="Web Site Title" title="" /> </div> <ul id="menu"> <li><a href="#">Menu Link</a></li> <li><a href="#">Menu Link</a></li> <li><a href="#">Menu Link</a></li> <li><a href="#">Menu Link</a></li> <li><a href="#">Menu Link</a></li> <li><a href="#">Menu Link</a></li> </ul> <div id="content"> <div class="wrapper"> <h1>Web Page Title</h1> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla orci nulla, tempor eu, pulvinar quis, sollicitudin sed, neque. Maecenas ac sem. Maecenas rhoncus tincidunt mauris. Ut non sapien sed pede commodo vehicula. Nullam eget sapien quis augue viverra commodo. Nullam quis nunc. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc id nisl. Nulla sed enim. </p> <div> <h2>Major Section Heading</h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla orci nulla, tempor eu, pulvinar quis, sollicitudin sed, neque. Maecenas ac sem. Maecenas rhoncus tincidunt mauris. Ut non sapien sed pede commodo vehicula. Nullam eget sapien quis augue viverra commodo. Nullam quis nunc. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc id nisl. Nulla sed enim. </p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla orci nulla, tempor eu, pulvinar quis, sollicitudin sed, neque. Maecenas ac sem. Maecenas rhoncus tincidunt mauris. Ut non sapien sed pede commodo vehicula. Nullam eget sapien quis augue viverra commodo. Nullam quis nunc. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc id nisl. Nulla sed enim. </p> </div> <div> <h2>Major Section Heading</h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla orci nulla, tempor eu, pulvinar quis, sollicitudin sed, neque. Maecenas ac sem. Maecenas rhoncus tincidunt mauris. Ut non sapien sed pede commodo vehicula. Nullam eget sapien quis augue viverra commodo. Nullam quis nunc. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc id nisl. Nulla sed enim. </p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla orci nulla, tempor eu, pulvinar quis, sollicitudin sed, neque. Maecenas ac sem. Maecenas rhoncus tincidunt mauris. Ut non sapien sed pede commodo vehicula. Nullam eget sapien quis augue viverra commodo. Nullam quis nunc. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc id nisl. Nulla sed enim. </p> </div> </div> </div> <div id="sidebar"> <strong>Ads Go Here</strong> </div> <div id="footer"> <em>Copyright &#169; 2006-2008, The Monster Under the Bed. All Rights to Scare Unsuspecting Children Reserved.</em> <ul> <li><a href="#">Footer Link</a></li> <li><a href="#">Footer Link</a></li> <li><a href="#">Footer Link</a></li> <li><a href="#">Footer Link</a></li> <li><a href="#">Footer Link</a></li> </ul> </div> </div> </body> </html> Code (markup): It's a depth sorting error that occurs in most versions of Opera if you float elements a certain way (such as when creating a source-order three column layout). In the example above (which uses borders to fake an equal height column setup without images), the depth sorting error on the menu affects Opera while Firefox has problems of its own (same error, different rendering engine) with the right column.
Most of the time when I see a depth sorting error it's Internet Explorer that's tripping up, not Firefox (and other Gecko based browsers) or Opera.
One day I hope I know as much about this topic as you guys do. At the moment it sounds like you are talking Japanese or French or something.
Oh. I almost forgot. Thanks so much for the CSS example. I will have a play around tomorrow and see if I can't figure something out. Wish me luck.