News:

Click here for Toll-Free Service for your business starting at $2.00 per month

Main Menu

Tables coding help needed............

Started by Paris, September 05, 2006, 07:31:38 AM

Previous topic - Next topic
Print
Go Down Pages1
User actions

Paris

September 05, 2006, 07:31:38 AM
Ive been working on a new layout for my website for a while now and have finally, after months of creating and deleting, have made the perfect design/layout. I have set out a basic code for it and am slicing the layout according to the code so it will work perfectly. But I've got a small problem, for some reason no matter what I do or try I just can't seem to get the header to look like it should. I have sliced the header to look a certain way because part of it is a .gif image due to it being an animation and the rest are .jpg images cause of the better quality. Im just trying to get the images placed properly and looking like they should but they wont.

Here is the code:
Code Select
<html>
<head>
<title>Charmed-Designs.NET +----+ Home +----+</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content="web design, designs, webmaster, webmistress, charmed, charmed-designs.net, charmed design, charmeddesign, paris, amber,
amna, bukhari, mimi, free graphics, designs, layouts, templates, anime ,manga, images, photoshop brushes, transparent png, extracted image, tutorials, html,
css, php, photoshop, image ready, imageready, wallpapers">
<meta name="description" content="A Charmed resource for webmasters and webmistresses. We offer free graphics, designs, tutorials, layouts, templates,
images, photoshop brushes, transparent png's, wallpapers and much much more. We're your one and only Charmed Resource.">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table width=800 border=0 cellpadding=0 cellspacing=0 class="body" align="center">
<tr>

<td colspan=3>
<img src="images/image.jpg" width=800 height=23 alt=""></td>
</tr>
<tr>

<td colspan=0>
<img src="images/image.jpg" width=45 height=163 alt=""></td>

<td colspan=0>
<img src="images/image.jpg" width=713 height=163 alt=""></td>

<td colspan=0>
<img src="images/image.jpg" width=42 height=163 alt=""></td>

</tr>
<tr>
<td colspan=3>
<img src="images/blah.jpg" width="800" height="32" border="0" alt="" usemap="#menu_02_Map">
<map name="menu_02_Map">
<area shape="rect" alt="" coords="617,6,725,30" href="about.php">
<area shape="rect" alt="" coords="509,6,617,31" href="index.php" target="_self">
<area shape="rect" alt="" coords="401,6,509,30" href="tutorials.php">
<area shape="rect" alt="" coords="294,6,401,31" href="graphix.php">
<area shape="rect" alt="" coords="185,6,294,31" href="designs.php">
<area shape="rect" alt="" coords="77,6,185,31" href="index.php">
</map>
</td>

</tr>
<tr>
<td class="left">
<!--LEFT NAVIGATION-->
<table align="center" class="hnavi">
<tr><td class="navih"><b>Navigation</b></td></tr></table>

<table align="center" class="navi">
<tr><td>
» <a href="">link</a><br>
» <a href="">link</a><br>
» <a href="">link</a><br>
» <a href="">link</a><br>

» <a href="">link</a><br>
» <a href="">link</a><br>
» <a href="">link</a></td>
</tr>
</table>
<br>
<table align="center" class="hnavi">
<tr><td class="navih"><b>Navigation</b></td></tr></table>

<table align="center" class="navi">
<tr><td>
» <a href="">link</a><br>
» <a href="">link</a><br>
» <a href="">link</a><br>
» <a href="">link</a><br>

» <a href="">link</a><br>
» <a href="">link</a><br>
» <a href="">link</a></td><br>
</tr>
</table>
<br>
<table align="center" class="hnavi">
<tr><td class="navih"><b>Navigation</b></td></tr></table>

<table align="center" class="navi">
<tr><td>
» <a href="">link</a><br>
» <a href="">link</a><br>
» <a href="">link</a><br>
» <a href="">link</a><br>

» <a href="">link</a><br>
» <a href="">link</a><br>
» <a href="">link</a></td><br>
</td>
</tr>
</table>
<br>
<table align="center" class="hnavi">
<tr><td class="navih"><b>Navigation</b></td></tr></table>

<table align="center" class="navi">
<tr><td>
» <a href="">link</a><br>
» <a href="">link</a><br>
» <a href="">link</a><br>
» <a href="">link</a><br>

» <a href="">link</a><br>
» <a href="">link</a><br>
» <a href="">link</a></td><br>
</td>

</tr>
</table>
<br>
<table align="center" class="hnavi">
<tr><td class="navih"><b>Navigation</b></td></tr></table>

<table align="center" class="navi">
<tr><td>
» <a href="">link</a><br>
» <a href="">link</a><br>
» <a href="">link</a><br>
» <a href="">link</a><br>

» <a href="">link</a><br>
» <a href="">link</a><br>
» <a href="">link</a></td><br>
</td>
</tr>
</table>
<br>
<table align="center" class="hnavi">
<tr><td class="navih"><b>Navigation</b></td></tr></table>

<table align="center" class="navi">
<tr><td>
» <a href="">link</a><br>
» <a href="">link</a><br>
» <a href="">link</a><br>
» <a href="">link</a><br>

» <a href="">link</a><br>
» <a href="">link</a><br>
» <a href="">link</a></td>
</tr>

</table><!--END LEFT NAVIGATION-->
</td>
<td class="content">
<!--START CONTENT-->
<p><img src="avatar.jpg" alt="" align="left">Some content here. Some content here. Some content here. Some content here. Some content here.
Some content here. Some content here. Some content here.</p>
<p>Blahblah blah blahblahblah blah blah blahblah blahblahblah blah blahblahblah blah blah blah blahblah <a href="">Click here</a> or
<a href="">Click this link</a> Blah blah blah blahblah blah blahblah blah blah blahblahblahblah blahblah blah blah blah blah blahblahblah blah blah.</p>

<table align="center" class="hcont">
<tr><td align="center"><b>Title</b></td></tr></table>
<table align="center" class="outline">

<tr><td>
<img src="avatar.jpg" alt="" align="left" style="border: none;" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi bibendum auctor diam.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tincidunt. Etiam lectus. Mauris pede.
Sed aliquam, lacus quis luctus egestas, nunc risus ultricies nunc, eget varius odio tortor ac justo. Ut egestas posuere elit.
Etiam non elit. Maecenas sed felis. Pellentesque ut velit. Nam vestibulum, nisi id vehicula suscipit, dolor arcu facilisis sem,
a aliquet dolor ante non ipsum. Integer dictum volutpat velit. Nullam et sem in dolor mollis mattis. Nam consectetuer elit eu quam.
Nunc vehicula felis ut nibh.

</td></tr></table>
<table align="center" class="fcont">
<tr><td valign="hcont" align="center"><b> Date and Time</b>
<td></tr></table>
<br><table align="center" class="hcont">
<tr><td align="center"><b>Title</b></td></tr></table>
<table align="center" class="outline">
<tr><td>
<img src="avatar.jpg" alt="" align="left" style="border: none;" /> Vestibulum eleifend, ligula quis commodo euismod, orci arcu feugiat metus, in accumsan
ipsum turpis a dolor. Aliquam erat volutpat. Nunc nonummy felis eget dui. Phasellus tincidunt pede. Sed mi massa, consectetuer eu, nonummy vitae,
ullamcorper a, nulla.Aenean et purus. Pellentesque fringilla sapien ut lacus. Praesent non mauris. Ut sollicitudin luctus mauris. Aliquam elementum,
ligula a accumsan cursus, mauris risus ullamcorper nulla, vel aliquam ipsum lacus non mauris. Nunc purus. Nunc ut est.

</td></tr></table>
<table align="center" class="fcont">
<tr><td valign="hcont" align="center"><b> Date and Time</b>
<td></tr></table>
<!--END CONTENT-->
</td>
<td class="right">
<!--START RIGHT NAVIGATION-->
<table align="center" class="hnavi">
<tr><td class="navih"><b>Navigation</b></td></tr></table>

<table align="center" class="navi">
<tr><td>
» <a href="">link</a><br>
» <a href="">link</a><br>
» <a href="">link</a><br>
» <a href="">link</a><br>

» <a href="">link</a><br>
» <a href="">link</a><br>
» <a href="">link</a><br>
</td>
</tr>
</table>
<br>
<table align="center" class="hnavi">
<tr><td class="navih"><b>Navigation</b></td></tr></table>

<table align="center" class="navi">
<tr><td>
» <a href="">link</a><br>
» <a href="">link</a><br>
» <a href="">link</a><br>
» <a href="">link</a><br>

» <a href="">link</a><br>
» <a href="">link</a><br>
» <a href="">link</a><br>
</td>

</tr>
</table>
<br>
<table align="center" class="hnavi">
<tr><td class="navih"><b>Navigation</b></td></tr></table>

<table align="center" class="navi">
<tr><td>
» <a href="">link</a><br>
» <a href="">link</a><br>
» <a href="">link</a><br>
» <a href="">link</a><br>

» <a href="">link</a><br>
» <a href="">link</a><br>
» <a href="">link</a><br>
</td>
</tr>
</table>
<br>

<table align="center" class="hnavi">
<tr><td class="navih"><b>Navigation</b></td></tr></table>

<table align="center" class="navi">
<tr><td>
» <a href="">link</a><br>
» <a href="">link</a><br>
» <a href="">link</a><br>
» <a href="">link</a><br>

» <a href="">link</a><br>
» <a href="">link</a><br>
» <a href="">link</a><br>

</td>
</tr>
</tbody></table>
<br>
<table class="topnav" align="center">
<tbody><tr><td class="hnavi"><b>Navigation</b></td></tr></tbody></table>
<table class="nav" align="center">
<tbody><tr><td>
» <a href="">link</a><br>
» <a href="">link</a><br>
» <a href="">link</a><br>
» <a href="">link</a><br>

» <a href="">link</a><br>
» <a href="">link</a><br>
» <a href="">link</a><br>
</td>
</tr>
</table><!--END RIGHT NAVIGATION-->
</td>
</tr>

<tr>
<td colspan=3 STYLE="BACKGROUND:URL(images/image.jpg);BACKGROUND-REPEAT:NO-REPEAT;HEIGHT:126PX;TEXT-ALIGN:CENTER;PADDING-TOP:24PX;">&nbsp; &nbsp;</td>
</tr>
</table>
</body>
</html>

Just look at this in your FireFox browser (I hate IE and do not code accoring to it EVER) and can you see whats going on with the header. I need to get a top image of 800px, and then an image below it to the left, and an image in the center, and another image to the very right of this image(3 images in all adding upto 800px underneath the very top image), and an image underneath all the other images of 800px.

For some reason I can't get the 3 images in the middle to align properly and "stick" together so they look like one image. I can't figure out what went wrong with the coding, ive tried changing big things and little things both....but so far nothing has worked. I seriously need some expert help on this subject so thats why Im asking here. Please help me figure this out so I can finally take my site off of hiatus  :P.

Oh P.S.
No I won't think about re-coding my site in CSS. It sounds great and all, but really I havnt even gotten the hang of HTML yet, jumping on the CSS train isnt the smartest thing to do. Maybe someday, far away, when hovercars take over the freeways, I'll code all of my pages in CSS. But for now, Im pretty much sticking with Tables....every browser understands em, and they look perdy too.....but when its time to convert....I hope you CSS experts won't mind when I come running for some serious help  :D.

Thank you, Paris.
Print
Go Up Pages1
User actions