hybrid kill3r Posted November 14, 2007 Share Posted November 14, 2007 I'm trying to code a template for my clan's website, but I can't get the tables to align properly. The tables that I want to align all the way to the top, won't. I have both html and css in my coding. Here's a screen of what I have now:For some reason my tables aren't aligning to the top. Here's my coding:HTML <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head> <title></title> <meta content="Evrsoft First Page" name="GENERATOR"> <link href="style.css" type="text/css" rel="stylesheet"></head><body> <table cellspacing="0" cellpadding="0" width="100%" align="center" border="0"> <tbody> <tr> <td colspan="3"><img alt="28 Kills Later" src="images/banner.gif" width="100%"></td> </tr> <tr> <td class="toplinks" width="100%" colspan="3"><a href="index.php">Home</a> | <a href="forums/index.php" target="new">Forums</a> | <a href="index.php?sector=support">Support</a></td> </tr> <tr> <td width="175" rowspan="2"> <!-- Start main navigation table --> <table id="mainNav" cellspacing="1" cellpadding="1" width="100%" align="center" border="0"> <tbody> <tr> <td class="top">Main Navigation</td> </tr> <tr> <td><a href="index.php">Home</a></td> </tr> <tr> <td><a href="forums/index.php" target="new">Forums</a></td> </tr> <tr> <td><a href="index.php?sector=support">Support</a></td> </tr> <tr> <td><a href="rosters.php">Rosters</a></td> </tr> <tr> <td><a href="matches.php">Matches</a></td> </tr> <tr> <td><a href="recruiting.php">Recruiting</a></td> </tr> <tr> <td><a href="index.php?sector=sponsors">Sponsors</a></td> </tr> </tbody> </table><!--End main navigation table --> </td> <td> <!-- Start clan leaders table --> <table id="clanLeaders" cellspacing="0" cellpadding="0" width="100%" border="0"> <tbody> <tr> <td class="top" colspan="4">Clan Management</td> </tr> <tr> <td><a href="profile.php?memID=1"><img height="75" alt="No Photo" src="images/nophoto.gif" width="75" border="0"></a></td> <td><a href="profile.php?memID=1"><img height="75" alt="No Photo" src="images/nophoto.gif" width="75" border="0"></a></td> <td><a href="profile.php?memID=1"><img height="75" alt="No Photo" src="images/nophoto.gif" width="75" border="0"></a></td> <td><a href="profile.php?memID=1"><img height="75" alt="No Photo" src="images/nophoto.gif" width="75" border="0"></a></td> </tr> <tr> <td colspan="4"></td> </tr> </tbody> </table><!-- End clan leaders table --> </td> </tr> <tr> <td> <!-- Start news articles --> <table id="siteNews" cellspacing="0" cellpadding="0" width="100%" align="center" border="0"> <tbody> <tr> <td class="top">News & Updates</td> </tr> <tr> <td> <!-- Start news loop --> <h3>Site Under Construction</h3> <p>In id justo. Proin nec justo eu nunc pellentesque ultricies. Aliquam orci. Morbi diam est, sagittis id, faucibus ut, elementum ut, velit. Morbi vel neque. Nullam vehicula diam id diam. Nulla facilisi. Quisque vel risus. Mauris sodales orci eget ante. Morbi fermentum luctus dui. Sed odio tortor, fermentum id, blandit id, interdum quis, nisl. Etiam tempus nulla vel urna ferme</p> <h4>Posted by Re4ctIoNz x on November 14th at 2:39 a.m.</h4> </td> </tr> </tbody> </table><!-- End news loop --> </td> <td rowspan="2"> <!--Start side menu --> <table id="rightSide" cellspacing="0" cellpadding="0" width="100%" align="center" border="0"> <tbody> <tr> <td class="top">Member Login</td> </tr> <tr> <td> <form action="login.php" method="post"> Username<br> <input size="15" name="username"><br> Password<br> <input type="password" size="15" name="password"><br> <input type="submit" value="Login" name="login"> </form> </td> </tr> <tr> <td class="top">Recent Matches</td> </tr> <tr> <td> <!-- Start match results loop --> <table id="results" cellspacing="1" cellpadding="1" align="center" border="0"> <tbody> <tr> <td class="col-light">W/L</td> <td class="col-dark">Opp.</td> <td class="col-light">Score</td> </tr> <tr> <td class="col-light">W</td> <td class="col-dark">Insane Asylum</td> <td class="col-light">3-1</td> </tr> <tr> <td class="col-light">W</td> <td class="col-dark">iA</td> <td class="col-light">3-1</td> </tr> <tr> <td class="col-light">W</td> <td class="col-dark">iA</td> <td class="col-light">3-1</td> </tr> <tr> <td class="col-light">W</td> <td class="col-dark">iA</td> <td class="col-light">3-1</td> </tr> <tr> <td class="col-light">W</td> <td class="col-dark">iA</td> <td class="col-light">3-1</td> </tr> </tbody> </table><!-- End match results loop --> </td> </tr> <tr> <td class="top">Site Stats</td> </tr><tr> <td>Clan Members: 5<br> Forum Members: 20<br> Forum Posts: 56<br> <br> Online: <a href="#">Re4ctIoNz x</a></td> </tr> <tr> <td class="top">Affiliates & Sponsors</td> </tr> <tr> <td height="100"> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table></body></html> CSS body { background: #6e0019 url(images/contentbg_repeat.gif); background-repeat: repeat-x; background-position: bottom; margin: 0px; }.toplinks { background: url(images/menutop.gif); text-align: center; color: #FFF; font-weight: bold; }.toplinks a:hover, a:active, a:visited, a:link { color: #FFF; font-weight: bold; text-decoration: none;}#mainNav { background: #6e0019 url(images/contentbg_repeat.gif); background-position: bottom; background-repeat: repeat-x; margin: 10px 10px 10px 10px; vertical-align: top; width: 175px;}#mainNav .top { background: url(images/menutop.gif); text-align: center; color: #FFF; font-weight: bold; }#mainNav td { background: none; text-align: right; }#mainNav td a { color: #FFF; text-decoration: none; font-weight: bold; padding: 5px 5px 5px 5px; }#clanLeaders .top { background: #6e0019 url(images/menutop.gif); background-repeat: repeat-x; background-position: bottom; text-align: left; font-weight: bold; color: #FFF; height: 30px; }#clanLeaders td { background: url(images/contentbg.gif); text-align: center; padding: 10px 10px 10px 10px; color: #FFFFFF; }#siteNews { background: #6e0019 url(images/contentbg.gif); background-repeat: repeat-x; background-position: bottom; margin: 0px 10px 10px 10px;}#siteNews .top { background: url(images/menutop.gif); text-align: left; padding: 5px; color: #fff; margin: 0px 0px 0px 0px;}#siteNews td { background: #6e0019 url(images/contentbg.gif); text-align: left; padding: 5px; color: #fff; }#siteNews td a { color: #FFF; text-deocration: none; font-weight: bold; }#siteNews h3 { color: #FFF; text-decoration: none; font-weight: normal; font-size: 14px; }#siteNews h4 { color: #FFF; text-decoration: none; font-weight: bold; font-size: 12px; text-align: right; }#rightSide { background: #6e0019 url(images/contentbg_repeat.gif); background-repeat: repeat-x; background-position: bottom; text-align: left; padding: 5px; color: #FFF; width: 175px; vertical-align: top; }#rightSide .top { background: url(images/menutop.gif); text-align: left; font-weight: normal; color: #fff; }#rightSide a { color: #FFF; font-weight: bold; text-decoration: none; }#rightSide #results .col-dark { background: #6e0019; color: #FFF; font-size: 10px; text-align: center; padding: 3px; }#rightSide #results .col-light { background: #b82b2b; color: #FFF; font-size: 10px; text-align: center; padding: 3px; } Thanks for any help. Link to comment Share on other sites More sharing options...
Synook Posted November 14, 2007 Share Posted November 14, 2007 Try putting valign="top" on all your table cells - the vertical-align CSS property actually defines at what part of a line text should appear. Link to comment Share on other sites More sharing options...
Ingolme Posted November 14, 2007 Share Posted November 14, 2007 This isn't very well designed, you even have tables embedded within tables. If this were done with CSS and <div> tags the "Main navigation" and "News and updates" boxes would be aligned to the top automatically. Link to comment Share on other sites More sharing options...
hybrid kill3r Posted November 14, 2007 Author Share Posted November 14, 2007 That's what I was originally going to do, but I guess I got lazy and used the table creator in my html editor. But I changed it all to css, but it's even worse now. Lol. This is what it currently looks like.This is my css body { background: #6e0019 url(images/contentbg_repeat.gif); background-repeat: repeat-x; background-position: bottom; margin: 0px; }#header { height: 154px; margin: 0px 0px 20px 0px; }#header #logo { height: 128px; }#toplinks { background: url(images/menutop.gif); text-align: center; color: #FFF; font-weight: bold; }#toplinks ul { list-style: none;}#toplinks ul li { float: left; display: inline;}#toplinks a:hover, a:active, a:visited, a:link { color: #FFF; font-weight: bold; text-decoration: none;}#mainNav { background: #6e0019 url(images/navbg.gif); background-position: bottom; background-repeat: repeat-y; margin: 10px 10px 10px 10px; vertical-align: top; width: 175px; float: left;}#mainNav ul { list-style: none; width: 175px; display: inline;}#mainNav .top { background: url(images/menutop.gif); text-align: center; color: #FFF; font-weight: bold; }#mainNav td { background: none; text-align: right; }#mainNav td a { color: #FFF; text-decoration: none; font-weight: bold; padding: 5px 5px 5px 5px; }#middle-body { float: middle;}#clanLeaders { background: #6e0019 url(images/contentbg.gif); background-repeat: repeat-x; background-position: bottom; margin: 0px 10px 0px 10px;}#clanLeaders img { margin: 10px 10px 10px 10px; border: 0px; }#clanLeaders h5 { background: #6e0019 url(images/menutop.gif); background-repeat: repeat-x; background-position: bottom; text-align: left; font-weight: bold; color: #FFF; height: 30px; }#clanLeaders td { background: url(images/contentbg.gif); text-align: center; padding: 10px 10px 10px 10px; color: #FFFFFF; }#siteNews { background: #6e0019 url(images/contentbg.gif); background-repeat: repeat-x; background-position: bottom; margin: 0px 10px 10px 10px; }#siteNews h5 { background: url(images/menutop.gif); text-align: left; padding: 5px; color: #fff; margin: 0px 0px 0px 0px;}#siteNews td { background: #6e0019 url(images/contentbg.gif); text-align: left; padding: 5px; color: #fff; }#siteNews td a { color: #FFF; text-deocration: none; font-weight: bold; }#siteNews h3 { color: #FFF; text-decoration: none; font-weight: normal; font-size: 14px; }#siteNews h4 { color: #FFF; text-decoration: none; font-weight: bold; font-size: 12px; text-align: right; }#rightSide { background: #6e0019 url(images/navbg.gif.gif); background-repeat: repeat-y; background-position: bottom; text-align: left; padding: 5px; color: #FFF; width: 175px; vertical-align: top; float: right; }#rightSide h5 { background: url(images/menutop.gif); text-align: left; font-weight: normal; color: #fff; }#rightSide a { color: #FFF; font-weight: bold; text-decoration: none; }#rightSide #results .col-dark { background: #6e0019; color: #FFF; font-size: 10px; text-align: center; padding: 3px; }#rightSide #results .col-light { background: #b82b2b; color: #FFF; font-size: 10px; text-align: center; padding: 3px; } This is my html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head> <title></title> <meta content="Evrsoft First Page" name="GENERATOR"> <link href="style.css" type="text/css" rel="stylesheet"></head><body> <div id="header"> <div id="logo"> <img alt="28 Kills Later" src="images/banner.gif" width="100%"> </div> <div id="toplinks"> <ul> <li><a href="index.php">Home</a></li> <li><a href="index.php?sector=support">Support</a></li> <li><a href="forums/index.php" target="new">Forums</a></li> </ul> </div> </div><!-- Start main navigation table --> <div id="middle-body"> <div id="mainNav"> <ul> <li class="top">Main Navigation</li> <li><a href="index.php">Home</a></li> <li><a href="forums/index.php" target="new">Forums</a></li> <li><a href="index.php?sector=support">Support</a></li> <li><a href="rosters.php">Rosters</a></li> <li><a href="matches.php">Matches</a></li> <li><a href="recruiting.php">Recruiting</a></li> <li><a href="index.php?sector=sponsors">Sponsors</a></li> </ul> </div><!--End main navigation table --> <div id="middle-body"> <div id="clanLeaders"> <h5>Clan Management</h5> <a href="profile.php?memID=1"><img height="75" alt="No Photo" src="images/nophoto.gif" width="75" border="0"></a> <a href="profile.php?memID=1"><img height="75" alt= "No Photo" src="images/nophoto.gif" width="75" border="0"></a> <a href="profile.php?memID=1"><img height="75" alt="No Photo" src="images/nophoto.gif" width="75" border="0"></a> <a href= "profile.php?memID=1"><img height="75" alt="No Photo" src="images/nophoto.gif" width="75" border="0"></a> </div> <div id="siteNews"> <h2>News & Updates</h2> <h3>Site Under Construction</h3> <p>In id justo. Proin nec justo eu nunc pellentesque ultricies. Aliquam orci. Morbi diam est, sagittis id, faucibus ut, elementum ut, velit. Morbi vel neque. Nullam vehicula diam id diam. Nulla facilisi. Quisque vel risus. Mauris sodales orci eget ante. Morbi fermentum luctus dui. Sed odio tortor, fermentum id, blandit id, interdum quis, nisl. Etiam tempus nulla vel urna ferme</p> <h4>Posted by Re4ctIoNz x on November 14th at 2:39 a.m.</h4> </div> </div><!-- End middle body --> <div id="rightSide"> <h5>Member Login</h5> <form action="login.php" method="post"> Username<br> <input size="15" name="username"><br> Password<br> <input type="password" size="15" name="password"><br> <input type="submit" value="Login" name="login"> </form> <h5>Recent Matches</h5> <table id="results" cellspacing="1" cellpadding="1" align="center" border="0"> <tbody> <tr> <td class="col-light">W/L</td> <td class="col-dark">Opp.</td> <td class="col-light">Score</td> </tr> <tr> <td class="col-light">W</td> <td class="col-dark">Insane Asylum</td> <td class="col-light">3-1</td> </tr> <tr> <td class="col-light">W</td> <td class="col-dark">iA</td> <td class="col-light">3-1</td> </tr> <tr> <td class="col-light">W</td> <td class="col-dark">iA</td> <td class="col-light">3-1</td> </tr> <tr> <td class="col-light">W</td> <td class="col-dark">iA</td> <td class="col-light">3-1</td> </tr> <tr> <td class="col-light">W</td> <td class="col-dark">iA</td> <td class="col-light">3-1</td> </tr> </tbody> </table><!-- End match results loop --> <h5>Site Stats</h5>Clan Members: 5<br> Forum Members: 20<br> Forum Posts: 56<br> <br> Online: <a href="#">Re4ctIoNz x</a> <h5>Affiliates & Sponsors</h5> </div> </div></body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.