TheCheeze
Members
-
Joined
-
Last visited
-
Been spending a few hours playing around with it but i am trying to make my 3 div columns be the same height and the left div is long but the middle and right div are not but i would like them to go all the way down the page so it doesn't look uneven like the way it does now. My site is http://www.aussiesavers.com any tips would be most helpful as its doing my head in. kind regards Peter
-
You may need to use margin-left: auto; margin-right: auto; put that in the css under the element you need to center and it should work.
-
I agree with the guys above, DIVS are the new black. I spent all my younger years designing in tables and become a master at it only to go to school this year and find out they are not the correct method. /sigh Either way below is the code that fixes your problem. Remember with Tables you must give them all border 0 spacing 0 so you won't get that 1px Hope this helps <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name="generator" content="PSPad editor, www.pspad.com"> <title>YIDI CSS</title> <style type="text/css"> <!-- body {background-color:#6666FF; font-family:verdana; font-size:75%;} table.pictures {border-collapse:collapse; width:55em; background: #f5f5f5;} table.infoandmap {border-collapse:collapse; width:55em; background: #f5f5f5; border: 1px solid #c69; margin-top:1em;} table.lilac {border-collapse:collapse;} table.information {} div.whitebox {text-align:left; background-color:#f5f5f5; padding:1em; width:80em;} div.lilac {text-align:buttom; background-color:#5D0866; padding:1em; width:87em; height:5em;} td.pictures {width:10em; height:5em; text-align:center; border: 1px solid #c69;} td.map {text-align:right; padding-right:1em;} td.information {vertical-align:text-top;} td.country {width: 10em; height: 5em; text-align: left; vertical-align: text-top; border: 1px solid #c69;} td.hidden {border: 1px solid #f5f5f5; border-right-color:#c69; border-left-color:#c69;} td.lilac {text-align:right; padding:1em; background-color:#5D0866; width:7em; height:auto;} td img {width:9em; height:4em;} --> </style> </head> <body> <div class="lilac"></div> <table border="0" cellpadding="0" cellspacing="0" class="lilac"> <tr> <td class="lilac"></td> <td> <div class="whitebox"> <table class="pictures"> <tr> <td class="country"> <b>COUNTRY</b> </td> <td class="hidden"> </td> <td class="pictures"> <img src="path" alt="PICTURE 1" /> </td> <td class="pictures"> <img src="path" alt="PICTURE 2" /> </td> <td class="pictures"> <img src="path" alt="PICTURE 3" /> </td> <td class="pictures"> <img src="path" alt="FLAG" /> </td> </tr> </table> <table class="infoandmap"> <tr> <td class="information"> <!--TABLE with country information--> <table class="information"> <tr> <td><b>Capital:</b></td> <!--Capital:--> <td>Santiago</td> </tr> <tr> <td><b>Continent:</b></td> <!--Continent:--> <td>South America</td> </tr> <tr> <td><b>Currency:</b></td> <!--Currency:--> <td>Chilean Peso</td> </tr> </table> <!--end of TABLE with country information--> </td> <td class="map"> <!--MAP--> <img style="width:auto; height:auto;" src="C:\Documents and Settings\y9098kc4\My Documents\My Pictures\Mood-Swings.jpg" alt="MAP" /> </td> </tr> </table> </div> <td> </tr> </table> </body> </html>
-
I will supply my css/div menu complete just in case you or anyone else need something basic. Not sure how the experts do it, but this way seems to work for me, except the fonts don't seem to be similar in IE7 and FF. HTML CODE <div id="menucontainer"><!-- comment --> <div id="menu"><!-- Div to contain the menu div ie give it somewhere to be. --> <div id="menustyle"><!-- div to contain the list). --> <ul id="one"> <li class="two"><a href="index.html" text-decoration="none">Home</a></li> <li class="two"><a href="index.html" text-decoration="none">About</a></li> <li class="two"><a href="index.html" text-decoration="none">link</a></li> <li class="two"><a href="index.html" text-decoration="none">Share</a></li> <li class="two"><a href="index.html" text-decoration="none">Whatever</a></li> </ul> </div> </div> </div> CSS CODE div#menucontainer { width: 1000px; margin: 0px; border: 0px; padding: 0px; } div#menu { height:40px; width:1000px; border: 0px solid red; background-color: black; padding-top:8px; margin: 0px; } div#menustyle { width:560px; height:24px; margin-left:360px; margin-right:auto; background-color: #000000; border-top: solid 1px #99cc33; border-bottom: solid 1px #99cc33; margin-top: 0px; } ul#one { font-family:arial; font-size: 90%; font-weight: normal; color:#ffffff; position:relative; float:left; margin-top:2px; list-style-type: none; text-decoration: none; } li.two { font-family:arial; font-size: 90%; font-weight: normal; color:#ffffff; position:relative; float:left; margin-top:2px; list-style-type: none; text-decoration: none; float:left; padding-left:20px; padding-right:30px; } Hope this is useful. If anyone has a correction on the font area of this code please feel free to put in your 2 cents.
-
f you? i think you meant thank you... haha took me a second read to make sure it wasn't an insult