-Ray- said:
Ok.. i completely hate div's, but its becoming the new standart so...
on
http://whizmix.com/search/by-letter/d/1/
the footer div is half way in the container div. i have tried everything... it needs to so below.. (footer says 2008 whizmix.com)
Anyhelp would be great..
it's not CSS, it's your html that is screwed, and the mix of tables and divs is screwing it even more
OK, not a really good work, but OK for a quick fix, at least it works and looks as supposed, just copy the code below and paste it between your
tags>
well, without further ado, here's the code you must use
Code:
<div id="masthead">
<div id="navleft"><a href="http://whizmix.com/">
<img alt="Welcome To WhizMix.com" src="http://whizmix.com/images/welcome-to-whizmix-com.jpg" class="style4" width="442" height="125"></a></div>
<div id="navright"><br>
<br>
<br>
<br>
<br>
FIND A DRINK:
<input name="alp" class="form2" type="text">
<input name="Submit1" value="Search " id="form" class="form" type="submit"> </div>
<div id="top_nav">
FIND A DRINK BY LETTER:
<a href="http://whizmix.com/search/by-letter/a/1/" class="style3">
<span class="style5">A</span></a>
<a href="http://whizmix.com/search/by-letter/b/1/" class="style3">
<span class="style5">B</span></a>
<a href="http://whizmix.com/search/by-letter/c/1/" class="style3">
<span class="style5">C</span></a>
<a href="http://whizmix.com/search/by-letter/d/1/" class="style3">
<span class="style5">D</span></a>
<a href="http://whizmix.com/search/by-letter/e/1/" class="style3">
<span class="style5">E</span></a>
<a href="http://whizmix.com/search/by-letter/f/1/" class="style3">
<span class="style5">F</span></a>
<a href="http://whizmix.com/search/by-letter/g/1/" class="style3">
<span class="style5">G</span></a>
<a href="http://whizmix.com/search/by-letter/h/1/" class="style3">
<span class="style5">H</span></a>
<a href="http://whizmix.com/search/by-letter/i/1/" class="style3">
<span class="style5">I</span></a>
<a href="http://whizmix.com/search/by-letter/j/1/" class="style3">
<span class="style5">J</span></a>
<a href="http://whizmix.com/search/by-letter/k/1/" class="style3">
<span class="style5">K</span></a>
<a href="http://whizmix.com/search/by-letter/l/1/" class="style3">
<span class="style5">L</span></a>
<a href="http://whizmix.com/search/by-letter/m/1/" class="style3">
<span class="style5">M</span></a>
<a href="http://whizmix.com/search/by-letter/n/1/" class="style3">
<span class="style5">N</span></a>
<a href="http://whizmix.com/search/by-letter/o/1/" class="style3">
<span class="style5">O</span></a>
<a href="http://whizmix.com/search/by-letter/p/1/" class="style3">
<span class="style5">P</span></a>
<a href="http://whizmix.com/search/by-letter/q/1/" class="style3">
<span class="style5">Q</span></a>
<a href="http://whizmix.com/search/by-letter/r/1/" class="style3">
<span class="style5">R</span></a>
<a href="http://whizmix.com/search/by-letter/s/1/" class="style3">
<span class="style5">S</span></a>
<a href="http://whizmix.com/search/by-letter/t/1/" class="style3">
<span class="style5">T</span></a>
<a href="http://whizmix.com/search/by-letter/u/1/" class="style3">
<span class="style5">U</span></a>
<a href="http://whizmix.com/search/by-letter/v/1/" class="style3">
<span class="style5">V</span></a>
<a href="http://whizmix.com/search/by-letter/w/1/" class="style3">
<span class="style5">W</span></a>
<a href="http://whizmix.com/search/by-letter/x/1/" class="style3">
<span class="style5">X</span></a>
<a href="http://whizmix.com/search/by-letter/y/1/" class="style3">
<span class="style5">Y</span></a>
<a href="http://whizmix.com/search/by-letter/z/1/" class="style3">
<span class="style5">Z</span></a>
</div>
</div>
<div id="container">
<div id="left_col" style="width: 152px; background-color: rgb(53, 55, 57); background-image: url(http://whizmix.com/images/navbg.jpg); height: 193px;">
<div style="width: 145px; height: 193px;">
<div class="style6">
<img alt="" src="http://whizmix.com/images/ar.gif" width="10" height="11"><span class="style8">
<a href="http://whizmix.com/search/by-type/beer-ale/1/" class="style9">
Beer / Ales</a></span></div>
<div class="style6">
<img alt="" src="http://whizmix.com/images/ar.gif" width="10" height="11">
<a href="http://whizmix.com/search/by-type/cocktails/1/" class="style3">
<span class="style8">Cocktails</span></a></div>
<div class="style6">
<img alt="" src="http://whizmix.com/images/ar.gif" width="10" height="11">
<a href="http://whizmix.com/search/by-type/coffee-tea/1/" class="style3">
<span class="style8">Coffee / Teas</span></a></div>
<div class="style6">
<img alt="" src="http://whizmix.com/images/ar.gif" width="10" height="11">
<a href="http://whizmix.com/search/by-type/liqueurs/1/" class="style3">
<span class="style8">Liqueurs</span></a></div>
<div class="style6">
<img alt="" src="http://whizmix.com/images/ar.gif" width="10" height="11">
<a href="http://whizmix.com/search/by-type/punches/1/" class="style3">
<span class="style8">Punches</span></a></div>
<div class="style6">
<img alt="" src="http://whizmix.com/images/ar.gif" width="10" height="11">
<a href="http://whizmix.com/search/by-type/shots-shooters/1/" class="style3">
<span class="style8">Shots & Shooters</span></a></div>
<div class="style6">
<img alt="" src="http://whizmix.com/images/ar.gif" width="10" height="11">
<a href="http://whizmix.com/search/by-type/non-alcoholic/1/" class="style3">
<span class="style8">Non-Alcoholic</span></a></div>
<div class="style6">
<img alt="" src="http://whizmix.com/images/ar.gif" width="10" height="11">
<a href="http://whizmix.com/search/by-type/other-drinks/1/" class="style3">
<span class="style8">Other Drinks</span></a></div>
</div>
</div>
<table style="width: 743px; background-image: url(http://whizmix.com/images/nbg.jpg); background-repeat: no-repeat; padding:20px; margin-top:-20px;" align="center" class="style14">
<tbody><tr><td style="width: 300px; height: 22px;" class="style132">1/4</td>
<td style="width: 300px; height: 22px;" class="style32" align="right">1 - 100 of 379</td></tr>
<tr><td style="width: 300px;" class="style32"> <a href="http://WhizMix.com/search/by-letter/d/2/"><img alt="Next" src="http://www.WhizMix.com/images/n.jpg" border="0" width="70" height="25"></a></td>
<td style="width: 300px;" class="style32" align="right"><b>1</b> <a class="style32" href="http://WhizMix.com/search/by-letter/d/2/" title="Page 2">2</a> <a class="style32" href="http://WhizMix.com/search/by-letter/d/3/" title="Page 3">3</a> <a class="style32" href="http://WhizMix.com/search/by-letter/d/4/" title="Page 4">4</a> <a class="style32" href="http://WhizMix.com/search/by-letter/d/4/" title="Last Page">></a> </td></tr>
<tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/6418/">D & D Lay</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/6460/">D-Roy</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/6480/">D.O.A.</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/6579/">D.O.M. Cocktail</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/6510/">D.P.R.</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/6538/">D.R.F.O.</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/113/">D.W.I.</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/8122/">Daffy Duck</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/8123/">Daily Double C</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/8124/">Daily Mail</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/8125/">Daiquiri Blossom</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/6559/">Daiquiri Cocktail #2</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/6628/">Daiquiri Cocktail</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/8126/">Daiquiri Liberal</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/6588/">Daiquiri Liqueur</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/6186/">Daiquiri Natural</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/8127/">Daisy Dueller</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/6647/">Dakota</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/443/">Dali Lama</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/2693/">Dallas Stars</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/8128/">Dalton</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/6897/">Damage</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/2694/">Damn-The-Weather Cocktail</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/2695/">Damn-Your-Eyes</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/2696/">Damned If You Do</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/2698/">Danbooka</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/2699/">Dance With A Dream Cocktail</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/444/">Dancing Dana</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/2700/">Dancing Dutchman</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/2062/">Dancing Leprechaun</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/8129/">Dandy Cocktail</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/4144/">Danger</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/8131/">Danish Gin Fizz</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/8132/">Danish Martini</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/5883/">Danish Toddy</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/8133/">Daphrine Cocktail</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/8134/">Darb Cocktail</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/2701/">Daring Dylan</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/114/">Dark and Veiny</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/8135/">Dark Destroyer</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/4780/">Dark Fuzzy Navel</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/2702/">Dark Indulgence</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/8136/">Dark Lagoon</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/2703/">Dark Nightmare</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/9008/">Dark Side</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/2706/">Darkwood Sling</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/8801/">Darth Vader</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/2707/">Das Ruhige Sturm</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/8137/">Datsun Cocktail</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/6898/">Dave Matthews</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/5884/">Davenport</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/115/">Davey Crockett</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/2708/">David Bareface</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/2709/">David Caradine</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/5895/">Dawn Chorus</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/8138/">Daydream Martini</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/2711/">Daydream</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/8140/">Daytona Daydream</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/8141/">Daytona Rolling Thunder</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/116/">De-Lay</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/2071/">Dea Lea</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/9009/">Dead Baby Boy</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/2713/">Dead Bastard</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/8142/">Dead Budgie</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/2715/">Dead Dog</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/2714/">Dead Dog Vomit</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/2716/">Dead Grasshopper</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/4656/">Dead Green Frog</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/8143/">Dead Hand</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/2717/">Dead Hitler</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/2718/">Dead Little Green Frog</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/2719/">Dead Lizard</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/8527/">Dead Man Walking</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/2720/">Dead Nazi</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/8144/">Dead Pirate Seaspray</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/7328/">Deanne</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/8145/">Death by Chocolate</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/445/">Death by Shot</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/2721/">Death From Above</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/2723/">Death in the Afternoon</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/5745/">Death Mix</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/2078/">Death of a Virgin</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/446/">Death Row</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/6899/">Death Sentence</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/2724/">Death Wish</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/2725/">Deauville Cocktail</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/6574/">Debonaire Cocktail</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/8146/">Deceiver</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/8148/">DeeDee Cocktail</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/2085/">Deep Blue</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/8149/">Deep Blue Something</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/447/">Deep Dark Love</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/2726/">Deep Dark Secret</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/8150/">Deep Sea Cocktail</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/8151/">Deep Sea Martini</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/8152/">Deep Sea Sex</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/2093/">Deep Valley</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/2727/">Deep-7</a></td></tr><tr><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/6187/">Deep-Sea Diver</a></td><td style="width: 300px;" class="style92"><a class="style92" href="http://WhizMix.com/drink/271/">Deer Hunter</a></td></tr> <tr><td style="width: 300px;" class="style32"> <a href="http://WhizMix.com/search/by-letter/d/2/"><img alt="Next" src="http://www.WhizMix.com/images/n.jpg" border="0" width="70" height="25"></a></td>
<td style="width: 300px;" class="style32" align="right"><b>1</b> <a class="style32" href="http://WhizMix.com/search/by-letter/d/2/" title="Page 2">2</a> <a class="style32" href="http://WhizMix.com/search/by-letter/d/3/" title="Page 3">3</a> <a class="style32" href="http://WhizMix.com/search/by-letter/d/4/" title="Page 4">4</a> <a class="style32" href="http://WhizMix.com/search/by-letter/d/4/" title="Last Page">></a> </td></tr>
</tbody></table>
</div>
</div>
</div>
<hr style="clear:both; visibility:hidden;">
<div id="footer" class="style11">
<span class="style12">© 2008 WhizMix.com </span> </div>
For future reference, next time consider the following:
* divs are used when there's only one occurence of that div. Otherwise, you use a class for repeated items
* instead of all the mumbo-jambo you used with your tables (hence why you'd LOVE divs instead of hating them, your problem are tables), try this:
where you used
Code:
<td style="width: 300px" class="style92"><a class="style92" href="http://WhizMix.com/drink/8124/">Daily Mail</a>
you'd use this:
Code:
<ul>
<li><a href="http://WhizMix.com/drink/8124/">Daily Mail</a></li>
<li><a href="http://WhizMix.com/drink/8124/">Daily Mail</a></li>
<li><a href="http://WhizMix.com/drink/8124/">Daily Mail</a></li>
<li><a href="http://WhizMix.com/drink/8124/">Daily Mail</a></li>
<li><a href="http://WhizMix.com/drink/8124/">Daily Mail</a></li>
<li><a href="http://WhizMix.com/drink/8124/">Daily Mail</a></li>
now, just define the ul and li styles ONLY ONCE and you're set. 100 times easier, faster and less complicated than tables
* instead of inline styles, try to use an external sheet so you don't need to declare the styles for every element in the page. Doing it the right way, you page should be about 1/10 of what it is now
* when usind styles, name them a way you can recognize them as first glimpse. style1..............style90 means nothing. Just use div="header", div="left-colum" span="small fonts" class="maintext" and so on. Plus, you should use that for SEO purposes as well
* finally, try to economize. ie, the footer section of your code:
Code:
<div id="footer" class="style11">
<span class="style12">© 2008 WhizMix.com </span> </div>
should be like this:
Code:
<div id="footer">© 2008 WhizMix.com</div>
Define footer styles (you can mix the style class and span class you already have with the "footer" div style and that's it)
