PDA

View Full Version : Remove Spaces

Man of Wonder
04-02-2005, 03:57 PM
Hi

I've Decided To Use A Table To Position My Content...The Only Thing I Need Help Is, Is With Removing The Little White Spaces Between The Top Row And The Middle And The Middle Row With The Bottom...I've Provided A Link To Show What I Am Talking About, And My Source So That You Can See What I've Done Wrong...Thanx For Any Help

Click Here (http://www.freewebs.com/manofwonderland)

<html>

<head>

<title>

[Man of Wonderland]

</title>

<link rel=stylesheet type="text/css" href="man-of-wonderland-stylesheet.css">

</head>

<body background="man-of-wonderland-background.jpg" bgproperties="fixed" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<center><TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>

<TD ALIGN = "center" COLSPAN="3"><img src="layout-top.jpg" height="177" width="728" hspace="0" vspace="0"/></TD>

</TR>

<TR>

<TD ALIGN = "center"><div><img src="layout-left.jpg" usemap="#man-of-wonderland-layout.jpg" hspace=0 vspace=0 border=0/>
<map name="man-of-wonderland-layout.jpg">

<area shape=rect coords="0,84,155,100" href="home.html" target="iframe2">

<area shape=rect coords="0,106,155,122" href="affiliates.html" target="iframe2">

<area shape=rect coords="0,128,155,144" href="disclaimer.html" target="iframe2">

<area shape=rect coords="0,150,155,166" href="forum.html" target="iframe2">

<area shape=rect coords="0,172,155,188" href="graphic-design.html" target="iframe2">

<area shape=rect coords="0,194,155,210" href="information.html" target="iframe2">

<area shape=rect coords="0,216,155,232" href="link-us.html" target="iframe2">

<area shape=rect coords="0,238,155,254" href="multimedia.html" target="iframe2">

<area shape=rect coords="0,260,155,276" href="profiles.html" target="iframe2">

<area shape=rect coords="0,282,155,298" href="site-stats.html" target="iframe2">

<area shape=rect coords="0,304,155,320" href="video-games.html" target="iframe2">

</map></TD>

<TD ALIGN = "center"><div style="width:352;height:396;overflow:auto; border:#B62E2E 0px solid;">
<iframe name="iframe2" src="home.html" width="352" height="396" frameborder="0" scrolling="yes"></iframe></div></TD>

<TD ALIGN = "center"><img src="layout-right.jpg"/></TD>

</TR>

<TR>

<TD ALIGN = "center" COLSPAN="3"><img src="layout-bottom.jpg"/></TD>

</TR>

</TABLE>

</center>

</body>

</html>
snowieken
04-02-2005, 05:53 PM
Tables are nice if you want to lay out text and images, but to build up a good fitting layout with them is a pain in the buttocks. If you insist on using a table though, here's a way to solve your problem.

First, add a height of 400 to your layout-left.jpg and layout-right.jpg, and a width of 188. I would also remove the iframe if I were you, instead just use the scrolling div you already made. You will have to use the same table in every page then, but that's not so bad. Add to the div a height of 400 as well.

Next, the map. HTML generates a space for any whitespace in its code. That's what it is doing here: it generates a space after your image, so that the table cell is stretched out a bit. That is why tables aren't exactly suited to lay out fitting images.

To solve the problem, make sure every tag in the cell (img, map and area) follows the previous one closely without a return. If you still want to leave the code clean, you can leave a return between the attributes of a tag or something...

Example:

<TD ALIGN = "center"><img
src="layout-left.jpg" width="188" height="400" usemap="#man-of-wonderland-layout.jpg" hspace=0 vspace=0 border=0/><map
name="man-of-wonderland-layout.jpg"><area shape=rect coords="0,84,155,100" href="home.html" target="iframe2"><area
shape=rect coords="0,106,155,122" href="affiliates.html" target="iframe2"><area
shape=rect coords="0,128,155,144" href="disclaimer.html" target="iframe2"><area
shape=rect coords="0,150,155,166" href="forum.html" target="iframe2"><area
shape=rect coords="0,172,155,188" href="graphic-design.html" target="iframe2"><area
shape=rect coords="0,194,155,210" href="information.html" target="iframe2"><area
shape=rect coords="0,216,155,232" href="link-us.html" target="iframe2"><area
shape=rect coords="0,238,155,254" href="multimedia.html" target="iframe2"><area
shape=rect coords="0,260,155,276" href="profiles.html" target="iframe2"><area
shape=rect coords="0,282,155,298" href="site-stats.html" target="iframe2"><area
shape=rect coords="0,304,155,320" href="video-games.html" target="iframe2"></map></TD>

This is what I mean. In this case, the tags follow each other closely and there is no whitespace.

I hope this helps!
Man of Wonder
04-02-2005, 06:22 PM
Thanx So Much For The Help...It Works Perfect Now And It All Fits Together Nicely :thumbsup: