CSS Very Basic. (Text via Images)

**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

html code here:

Code:

<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?

**Nile** · 01-02-2009, 03:33 AM

I told you to use text - not images. Never use images for text, unless explaining something in an image.
Don't use tables for a layout, take a look at: http://www.hotdesign.com/seybold/everything.html. Found in Snookerman's profile.

**Tye** · 01-02-2009, 05:04 PM

Alright, I'm done. www.animeunloaded.com

Thanks

Thread: CSS Very Basic. (Text via Images)

Thread Tools

Search Thread

CSS Very Basic. (Text via Images)

Bookmarks

Bookmarks

Posting Permissions