Can someone check the coding to the INDEX PAGE of www.wholesalechecklist.com? I want to use this new layout (no left menu) on all of my pages and want to fix any errors before I use it on all pages. Thanks.
Bump? Every other website I have tried coding myself has had coding problems, and I am sure this one is no different. I also used w3 validate to fix a few, but a lot of these errors are either from Adsense or something that I do not understand.
Well, you've got no H1, jumped straight to the H3, and have a whole bunch of wrappers that aren't needed... the menu should likely be a list (since a menu is just a list) and there's no real need on this layout for a table. <img></img> and <input></input> are really unneccessary (theoretically could flake out older browsers - though I've never seen that actually happen) as you can just do <img /> and <input /> <labels> set to display:none - pointless. Use of target on anything except framesets is impolite and annoying - there's a REASON it was pulled from the XHTML specification. There is NO reason to be assigning .category_links to all the LI's AND it's parent UL This is probably all the HTML you really 'need' for that page: <!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" lang="en"><head> <title>Wholesale and Dropshipping List of Electronics, Computers, and More</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="screen.css" media="screen,projection" /> </head><body> <div id="container"> <h1> <strong>WHOLESALE CHECKLIST</strong> Never Pay Consumer Prices Again <span></span> </h1> <ul id="linkmenu"> <li class="first"><a href="http://www.wholesalechecklist.com">Home</a></li> <li><a href="articles.html">Articles</a></li> <li><a href="contact.html">Contact</a></li> </ul> <div id="content"> <div class="content_box"> <h2>Main Categories</h2> <!-- SiteSearch Google --> <form method="get" action="http://www.google.com/custom"> <div id="searchbox"> <a href="http://www.google.com/"> <img src="http://www.google.com/logos/Logo_25wht.gif" alt="Google" /> </a> <input type="hidden" name="domains" value="www.wholesalechecklist.com" /> <input type="text" name="q" size="31" maxlength="255" value="" id="sbi" /> <input type="submit" name="sa" value="Search" id="sbb" /> <input type="radio" name="sitesearch" value="" checked id="ss0" /> <label for="ss0" title="Search the Web">Web</label> <input type="radio" name="sitesearch" value="www.wholesalechecklist.com" id="ss1" /> <label for="ss1" title="Search www.wholesalechecklist.com"> www.wholesalechecklist.com </label> <input type="hidden" name="client" value="pub-9245005395536875" /> <input type="hidden" name="forid" value="1" /> <input type="hidden" name="ie" value="ISO-8859-1" /> <input type="hidden" name="oe" value="ISO-8859-1" /> <input type="hidden" name="safe" value="active" /> <input type="hidden" name="cof" value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:8FC7E8;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;LH:50;LW:300;L:http://www.wholesalechecklist.com/images/top.gif;S:http://www.wholesalechecklist.com;FORID:1" /> <input type="hidden" name="hl" value="en" /> </div> </form> <ul class="category_links"> <li><a href="asseenontv.html">As Seen on TV</a></li> <li><a href="auto.html">Auto Parts</a></li> <li><a href="closeouts.html">Closeouts</a></li> <li><a href="clothes.html">Clothes</a></li> <li><a href="computers.html">Computers and Parts</a></li> <li><a href="cosmetics.html">Cosmetics</a></li> <li><a href="digitalcameras.html">Digital Cameras</a></li> </ul> <ul class="category_links"> <li><a href="dvds.html">DVDs</a></li> <li><a href="electronics.html">Electronics</a></li> <li><a href="furniture.html">Furniture</a></li> <li><a href="jewelry.html">Jewelry and Watches</a></li> <li><a href="purses.html">Purses</a></li> <li><a href="sports.html">Sporting Goods</a></li> <li><a href="tools.html">Tools</a></li> </ul> </div> <div class="content_box"> <h2>Featured Article</h2> <img src="images/lens.jpg" class="content_image" alt="Wholesale Sources" /> <h3 class="title">Learn to find wholesale sources!</h3> <a href="findsources.html" class="mainlink"> Seven Ways to Find the Best Wholesale Sources </a> <p> Tired of paying people for wholesale lists only to find out that they are useless? The truth is that there are sources, but the best way to find them is to find them yourself. </p> <ul class="rel_links"> <li class="first"><a href="findsources.html">Full Article</a></li> <li><a href="articles.html">Other Articles</a></li> </ul> </div> <div class="content_box"> <h2>Our Mission</h2> <img src="images/laptop.jpg" class="content_image" alt="Wholesale Sources" /> <p> Wholesale lists are everywhere. Unfortunately, 99% of them are useless and expensive. Why pay for information when this type of information is easy to find? Wholesale Checklist believes in free information on wholesale sources, and we will continue to grow and maintain our list to the highest quality and integrity in order to provide the best possible list to our readers. </p> </div> </div> <div id="sidebar"> <script type="text/javascript"><!-- google_ad_client = "pub-9245005395536875"; google_ad_width = 120; google_ad_height = 600; google_ad_format = "120x600_as"; google_ad_type = "text"; //2007-08-03: WC index google_ad_channel = "5780795932"; google_color_border = "FFFFFF"; google_color_bg = "FFFFFF"; google_color_link = "486E9C"; google_color_text = "000000"; google_color_url = "486E9C"; --></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> <div id="footer">© Wholesale Checklist 2007</div> </div> </body></html> Code (markup): Which BTW strips about 900 bytes off the page despite adding formatting. I'll toss together the CSS for that later if I have Morris Day and company.
Thanks alot man I really appreciate everything youve fixed up for me lately. Lookin forward to seein this css!
CSS here: http://battletech.hopto.org/for_others/wholesalechecklist/site2/screen.css Some minor revisions to the HTML were made: http://battletech.hopto.org/for_others/wholesalechecklist/site2/template.html Validates XHTML 1.0 strict, CSS validates, works perfect IE 6 & 7, Opera, FF and Saffy. Tested in 5.5 - not great, but functional which is close enough at this point. I'll do a writeup of the CSS choices if I have time.
Very nice job. I made a few changes and here it is: http://www.wholesalechecklist.com/test/ Also, I wanted to make the content box width smaller in order to leave room to give the adsense margin from the border, but when I went ahead and made the width smaller, the layout got messed up. I realized that you used very precise measurement for category_links and the width of the container, and not sure of the formula you used to get these values. Could you help me add padding or margins to the adsense to push it away from the border? Or do you think that is unnecessary? EDIT: I kinda like how it is now that I think about it. But your opinion would be appreciated.
If you check out that test link, I made the content box smaller, but when I try to add left margin to the adsense sidebar, it disappears. What am I doing wrong? Edit: I (think I) put all the margins back to where they began. It was getting too confusing. Do you think I should give the adsense a left margin or just leave it as-is?
I'd give it a left and top margin of 8px - same as around 'the rest' To do so, I would add it as padding-left to #sidebar and increase the negative right margin as well - thing is you have to make ROOM for it so the margin-left on #content .wrapper needs to be upped to 128px, and the width of .contentbox needs to be dropped 8 pixels to 634px. That should be enough to add that padding. Finally those two inner columns would need to be narrowed as well, so take 4px off each. I just uploaded a new http://battletech.hopto.org/for_others/wholesalechecklist/site2/screen.css That implements those changes.
Thanks, worked like a charm. I started transferring over all my old content to this new layout and I have a few questions. Please open up the As Seen on TV category page, as that is what I will be referring to. I started working on the category pages, and I found two odd things. The first one is that if the content is not longer then the adsense, then the adsense overlaps the footer. Should I just make sure the content is always long enough? Or is there a coding error here? Just checking. The other thing is that there is a scroll bar in my content on my As Seen on TV page too. Why? EDIT: Fixed the adsense problem. I cant figure out the scroll bar though...
I figured out that the scroll bar goes away when I use paragraph tags in the summary. Whats the best way to code this: <h3>CyberBrands</h3> <b>Category:</b> Consumer<br /> <b>URL:</b> <a href="http://www.cyberbrands.com">http://www.cyberbrands.com</a><br /> <b>Summary:</b> CyberBrands is easily navigated throughout the entire website. It has all the “As Seen On TV†products you can think of, such as kitchen appliances, cleaning supplies, electronics, and much more. It provides a “best sellers†list as well as a “hottest products†list. Their prices are good and they provide a 30-day money back guarantee. They ship by UPS and accept all major credit cards.<br /> Code (markup):
Because each one has it's own header, I'd normally wrap them in a DIV... and remove that last BR... but being it's a list of sites, I'd wrap it in a UL with a LI around each section. I'd be half tempted to use a definition list inside each LI after the H3, but that's not entirely appropriate use of a DL.
Getting rid of the "overflow: auto" tag fixes the problem. Should I just do that, or should I recode anyway? Is the original code that bad? Is there a reason the overflow auto tag is used?