PDA

Click to See Complete Forum and Search --> : Help with a layout including tables.

stuckwithpins
10-15-2005, 01:17 PM
I've been working on a new layout for my fansite and I've bascially never used tables before. Previous layouts I've done have used "div" and aligned them to the left to keep it from falling out of line with the main image.
But this time, I'm algining the main image to the center and the only way to keep the body aligned is to use tables.
So I need some help.
Paste this into a notepad document and save it as an html file, open it, and tell me what I can do to fix it.

<html>
<head>
<title>....Coffin Crew.... [vampires will never hurt you.] </title>
<script type="text/javascript" src="http://www.haloscan.com/load/coffincrew"> </script>
</head>
<body background="http://i13.photobucket.com/albums/a273/vampiresthefansite/background.jpg" text="black" link=#4F3722 vlink=#4F3722 alink=#4F3722>
<body style="margin: 0">
<MAP NAME='imgmap'>
<AREA SHAPE='rect' COORDS='96,615,179,641' HREF='home.html' ALT='Home'>
<AREA SHAPE='rect' COORDS='184,616,269,640' HREF='gallery.html' target='_blank' ALT='Gallery'>
<AREA SHAPE='rect' COORDS='272,612,349,642' HREF='http://vampireswillnev.12.forumer.com/index.php' target='_blank' ALT='Message Boards'>
<AREA SHAPE='rect' COORDS='354,612,424,639' HREF='band.html' ALT='About the Band'>
<AREA SHAPE='rect' COORDS='429,614,487,639' HREF='fans.html' ALT='For the Fans'>
<AREA SHAPE='rect' COORDS='491,616,543,638' HREF='site.html' ALT='About the Site'>
</MAP>
<p align="center"><IMG SRC='http://i13.photobucket.com/albums/a273/vampiresthefansite/layout2.jpg' border=0 width=640 height=650 USEMAP='#imgmap'>
<style type=text/css>
body {scrollbar-face-color: #000000 ;
scrollbar-arrow-color: #4F3722 ;
scrollbar-track-color: #000000 ;
scrollbar-shadow-color: #000000 ;
scrollbar-darkshadow-color: #000000 ;
scrollbar-3dlight-color: #000000 ;
scrollbar-highlight-color: #000000 ;}
</style>
</p>
<table with="640" heigh="800" border="0" align="center" bgcolor="white">
<tr>
<td width="400">
<img src="http://i13.photobucket.com/albums/a273/vampiresthefansite/bnews.jpg" width=377>
<a href="javascript:HaloScan('COMMENTID');" target="_self">
<script type="text/javascript">postCount('COMMENTID'); </script></a>
</td>
<td width="234">
<img src="http://i13.photobucket.com/albums/a273/vampiresthefansite/bwelcome.jpg" width=234><br>
<br><br>
<img src="http://i13.photobucket.com/albums/a273/vampiresthefansite/bstats.jpg" width=234><br>
<br><br>
<img src="http://i13.photobucket.com/albums/a273/vampiresthefansite/btourdates.jpg" width=234><br>
<br><br>
<img src="http://i13.photobucket.com/albums/a273/vampiresthefansite/baffiliates.jpg" width=234><br>
<br><br>
<img src="http://i13.photobucket.com/albums/a273/vampiresthefansite/bdisclaimer.jpg" width=234><br>
<br><br>
</small>
</td>
</tr>
</table>
</body>
</html>

The table doesn't touch the main image. I don't know how to fix this.
Also, the banners in the tables (the News banner) is supposed to be up at the top, but it wants to fall towards the middle. I need help fixing this also.
And even though I said border="0", there still appears to be some what of a border. If I can't get rid of it as a whole, I'd like to at least change it to black.
One last thing: Is there a way I can create a definate height of the table?

Please help me out. And if there's anything else that should be pointed out, please don't be hesitant to do so.

Thanks.

<3
pcthug
10-16-2005, 07:31 AM
Are these the answers to your questions
The table doesn't touch the main image. I don't know how to fix this.
Instead of using <P align="center"></p> use the <center> tag

Also, the banners in the tables (the News banner) is supposed to be up at the top, but it wants to fall towards the middle. I need help fixing this also.
Tables vertically center everything by default, to fix this put valign="center" inside the <td> tag

And even though I said border="0", there still appears to be some what of a border. If I can't get rid of it as a whole, I'd like to at least change it to black.

Put style="border-collapse: collapse" inside the <table> tag

One last thing: Is there a way I can create a definate height of the table?

inside the table tag put in height="000" your table stuffed up because you spelt heigh instead of height

++HERES THE FIXED CODE


<html>
<head>
<title>....Coffin Crew.... [vampires will never hurt you.] </title>
<script type="text/javascript" src="http://www.haloscan.com/load/coffincrew"> </script>
</head>
<body background="http://i13.photobucket.com/albums/a273/vampiresthefansite/background.jpg" text="black" link=#4F3722 vlink=#4F3722 alink=#4F3722>
<body style="margin: 0">
<MAP NAME='imgmap'>
<AREA SHAPE='rect' COORDS='96,615,179,641' HREF='home.html' ALT='Home'>
<AREA SHAPE='rect' COORDS='184,616,269,640' HREF='gallery.html' target='_blank' ALT='Gallery'>
<AREA SHAPE='rect' COORDS='272,612,349,642' HREF='http://vampireswillnev.12.forumer.com/index.php' target='_blank' ALT='Message Boards'>
<AREA SHAPE='rect' COORDS='354,612,424,639' HREF='band.html' ALT='About the Band'>
<AREA SHAPE='rect' COORDS='429,614,487,639' HREF='fans.html' ALT='For the Fans'>
<AREA SHAPE='rect' COORDS='491,616,543,638' HREF='site.html' ALT='About the Site'>
</MAP>
<center><IMG SRC='http://i13.photobucket.com/albums/a273/vampiresthefansite/layout2.jpg' border=0 width=640 height=650 USEMAP='#imgmap'>
<style type=text/css>
body {scrollbar-face-color: #000000 ;
scrollbar-arrow-color: #4F3722 ;
scrollbar-track-color: #000000 ;
scrollbar-shadow-color: #000000 ;
scrollbar-darkshadow-color: #000000 ;
scrollbar-3dlight-color: #000000 ;
scrollbar-highlight-color: #000000 ;}
</style>
<table width="640" height="800" border="0" align="center" bgcolor="white"> <tr>
<td width="400" valign="top">
<img src="http://i13.photobucket.com/albums/a273/vampiresthefansite/bnews.jpg" width=377>
<a href="javascript:HaloScan('COMMENTID');" target="_self">
<script type="text/javascript">postCount('COMMENTID');
</script></a>
</td>
<td width="234">
<img src="http://i13.photobucket.com/albums/a273/vampiresthefansite/bwelcome.jpg" width=234><br>
<br>
<br>
<img src="http://i13.photobucket.com/albums/a273/vampiresthefansite/bstats.jpg" width=234><br>
<br>
<br>
<img src="http://i13.photobucket.com/albums/a273/vampiresthefansite/btourdates.jpg" width=234><br>
<br>
<br>
<img src="http://i13.photobucket.com/albums/a273/vampiresthefansite/baffiliates.jpg" width=234><br>
<br>
<br>
<img src="http://i13.ph
otobucket.com/albums/a273/vampiresthefansite/bdisclaimer.jpg" width=234><br>
<br>
<br>
</small>
</td>
</tr>
</table>
</body>
</html>


++HOPE IT HELPS
ray326
10-16-2005, 10:17 PM
++HERES THE FIXED CODEReally? Normally one would think "fixed" code is "correct" code but that's certainly no the case here.
I've been working on a new layout for my fansite and I've bascially never used tables before.Drop the tables and do it right. It will be easier and produce better results.
ray326
10-16-2005, 11:04 PM
Here's something to get you started. Correct, sans-tables and about the same in IE and Fx.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>....Coffin Crew.... [vampires will never hurt you.]</title>
<script type="text/javascript" src="http://www.haloscan.com/load/coffincrew"></script>
<style type="text/css">
body {scrollbar-face-color: #000000 ; scrollbar-arrow-color: #4F3722 ; scrollbar-track-color: #000000 ; scrollbar-shadow-color: #000000 ; scrollbar-darkshadow-color: #000000 ; scrollbar-3dlight-color: #000000 ; scrollbar-highlight-color: #000000 ;}
body {
color:#7F4D1A;
background:url(http://i13.photobucket.com/albums/a273/vampiresthefansite/background.jpg);
text-align:center;
margin:0 auto;
}
a:link, a:visited, a:hover, a:active { color:#4F3722 }
#content {
width:640px;
margin:0 auto;
background:#fff;
text-align: left;
}
#news {
width:380px;
float:left;
}
#details {
width:235px;
float:left;
}
#details h2 {
xwidth:235px;
background:#000;
color:#7F4D1A;
font-family:Georgia, "Times New Roman", serif;
font-size: 1.2em;
line-height: 1.4em;
padding:0 0 0 1em;
margin:0;
}
</style>
</head>
<body>
<map name='imgmap'>
<area shape='rect' coords='96,615,179,641' href='home.html' alt='Home'>
<area shape='rect' coords='184,616,269,640' href='gallery.html' target='_blank' alt='Gallery'>
<area shape='rect' coords='272,612,349,642' href='http://vampireswillnev.12.forumer.com/index.php' target='_blank' alt='Message Boards'>
<area shape='rect' coords='354,612,424,639' href='band.html' alt='About the Band'>
<area shape='rect' coords='429,614,487,639' href='fans.html' alt='For the Fans'>
<area shape='rect' coords='491,616,543,638' href='site.html' alt='About the Site'>
</map>
<img src='http://i13.photobucket.com/albums/a273/vampiresthefansite/layout2.jpg' border="0" width="640" height="650" usemap='#imgmap'>

<div id="content">
<div id="news">
<img src="http://i13.photobucket.com/albums/a273/vampiresthefansite/bnews.jpg" width="377">
<p><a href="javascript:HaloScan('COMMENTID');" target="_self">
<script type="text/javascript">
postCount('COMMENTID');
</script></a></p>
</div>

<div id="details">
<h2>Welcome</h2>
<p>welcome message</p>
<h2>Stats</h2>
<p>lies, damned lies and stats</p>
<h2>Tour Dates</h2>
<ul>
<li>date 1</li>
<li>date 2</li>
<li>date 3</li>
</ul>
<h2>Top Affiliates</h2>
<ul>
<li>date 1</li>
<li>date 2</li>
<li>date 3</li>
</ul>
<h2>Disclaimer</h2>
<p>read this at your own risk</p>
</div>
<div style="clear:both">&nbsp;</div>
</div>

</body>
</html>