Jump to content

Can't Get This Layout Right


Recommended Posts

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:screenfn9.gifFor 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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

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.screen2yc8.gifThis 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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...