Tye
01-02-2009, 02:13 AM
So I know I should know this, but hell I just started learning CSS. So here...again Nile suggested I drop trying to use the images to create a "hover" menu, so fine. Yet Now I figured out that if I use HTML tables, they don't go directly over my images, they simply move them down making my page a mess. So how would one go about creating little sections for each part of their page when using images? I think using them as a background would be the answer, but I've tried and failed at that. Maybe a style.ccs document?
The page: HERE (http://www.animeunloaded.com/augreyblue/index.html)
html code here:
<html>
<head>
<title>FinalUnloadedTemplate</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (FinalUnloadedTemplate.psd) -->
<table id="Table_01" width="1001" height="1201" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="9">
<img src="images/headerbackground.jpg" width="1000" height="154" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="154" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="4">
<img src="images/partbackground.jpg" width="37" height="97" alt=""></td>
<td rowspan="2">
<img src="images/animeunloaded.jpg" width="233" height="39" alt=""></td>
<td colspan="6">
<img src="images/headerpart3.gif" width="730" height="12" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="12" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/headerpart2.jpg" width="258" height="85" alt=""></td>
<td colspan="2" rowspan="2">
<img src="images/news.jpg" width="421" height="74" alt=""></td>
<td colspan="3" rowspan="3">
<img src="images/partbackground2.jpg" width="51" height="85" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="27" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/headerpart1.jpg" width="233" height="58" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="47" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/index_09.jpg" width="421" height="11" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="11" alt=""></td>
</tr>
<tr>
<td rowspan="5">
<img src="images/partbackground3.jpg" width="24" height="949" alt=""></td>
<td colspan="7">
<img src="images/body1.jpg" width="956" height="17" alt=""></td>
<td rowspan="5">
<img src="images/partbackground4.jpg" width="20" height="949" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="17" alt=""></td>
</tr>
<tr>
<td colspan="4" rowspan="2">
<img src="images/body.jpg" width="728" height="806" alt=""></td>
<td colspan="2">
<img src="images/chat.jpg" width="212" height="32" alt=""></td>
<td rowspan="2">
<img src="images/body-16.jpg" width="16" height="806" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="32" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/body-17.jpg" width="212" height="774" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="774" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="images/footer.jpg" width="956" height="87" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="87" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="images/underfooter.jpg" width="956" height="39" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="39" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="24" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="13" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="233" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="258" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="224" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="197" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="15" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="16" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="20" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
Any help?
The page: HERE (http://www.animeunloaded.com/augreyblue/index.html)
html code here:
<html>
<head>
<title>FinalUnloadedTemplate</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (FinalUnloadedTemplate.psd) -->
<table id="Table_01" width="1001" height="1201" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="9">
<img src="images/headerbackground.jpg" width="1000" height="154" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="154" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="4">
<img src="images/partbackground.jpg" width="37" height="97" alt=""></td>
<td rowspan="2">
<img src="images/animeunloaded.jpg" width="233" height="39" alt=""></td>
<td colspan="6">
<img src="images/headerpart3.gif" width="730" height="12" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="12" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/headerpart2.jpg" width="258" height="85" alt=""></td>
<td colspan="2" rowspan="2">
<img src="images/news.jpg" width="421" height="74" alt=""></td>
<td colspan="3" rowspan="3">
<img src="images/partbackground2.jpg" width="51" height="85" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="27" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/headerpart1.jpg" width="233" height="58" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="47" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/index_09.jpg" width="421" height="11" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="11" alt=""></td>
</tr>
<tr>
<td rowspan="5">
<img src="images/partbackground3.jpg" width="24" height="949" alt=""></td>
<td colspan="7">
<img src="images/body1.jpg" width="956" height="17" alt=""></td>
<td rowspan="5">
<img src="images/partbackground4.jpg" width="20" height="949" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="17" alt=""></td>
</tr>
<tr>
<td colspan="4" rowspan="2">
<img src="images/body.jpg" width="728" height="806" alt=""></td>
<td colspan="2">
<img src="images/chat.jpg" width="212" height="32" alt=""></td>
<td rowspan="2">
<img src="images/body-16.jpg" width="16" height="806" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="32" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/body-17.jpg" width="212" height="774" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="774" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="images/footer.jpg" width="956" height="87" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="87" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="images/underfooter.jpg" width="956" height="39" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="39" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="24" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="13" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="233" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="258" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="224" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="197" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="15" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="16" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="20" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
Any help?