PDA

View Full Version : Space around images or cells?


bdcee
11-19-2012, 04:04 PM
Hi all, I'm new the forums and it looks like this is the place to get help from some experts so Here we go. Thanks in advance to anyone who can offer some help!!

I've created a simple page as a sample to try my best to give you a good example to look at. I know this is something so simple that I am just missing somehow, but for the life of me I can't solve this issue I'm having.

On the page, I basically have a table (with no border), 4 rows, 2 column layout. Each cell has one image inside it, and when viewed as a webpage, all of the images should match up or touch with no space between them (naturally). I've attached some screencaps as well to show the space I'm referring to, and I've also included the code so someone can remind me of my ignorance haha.

PLEASE HELP!! :)

screen caps:
http://screencast.com/t/DYQtEtBwN (expanded tables mode to show the space better)
http://screencast.com/t/q0BugMvtRlu8 (standard tables mode)
http://screencast.com/t/7IksWRWs1 (the page viewed in a browser)

HTML of the page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Sample Page</title>

</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div align="center">
<table width="1000" border="0">
<tr>
<td colspan="2"><img src="images/header.jpg" width="1000" height="346"/><br /></td>
</tr>
<tr>
<td colspan="2"><img src="images/oom_link01.jpg" width="1000" height="51" /></td>
</tr>
<tr>
<td colspan="2"><img src="images/grd01.jpg" width="1000" height="26" /></td>
</tr>
<tr>
<td width="263"><img src="images/img_left.jpg" width="263" height="378" /></td>
<td width="733"></td>
</tr>
</table>
</div>
</body>
</html>

domedia
11-19-2012, 08:19 PM
Hi bdcee! I think most of the people on this forum is going to say that you have to change your approach. Thank god it's only a sample page, so you have not gotten too far into it :)

Use a regular CSS based layout and and take it from there. Do you have a mockup of your design? I'm sure someone can help you out with how to lay the foundation of your web site down in a standard manner.

Tables have default padding and margins that you can look at getting rid of if you insist on hacking a table to do your table layout. Try setting all the margin and padding to 0 for tables and table headers/cells.

bdcee
11-20-2012, 05:35 PM
Thank you very much for the info domedia! I've been using Dreamweaver for a year or so, and I still have a TON to learn. I don't know alot about CSS but I'm learning a little the more I poke around, as well as from getting help from good folks like yourself. For this page I was referring to, it's only a sample page with a few columns and rows, so I just highlighted all the cells and set the padding and spacing to 0 and it worked perfectly! You'd think since they were never set to anything originally (those areas in the properties were both blank), this would've had no padding or spacing, but nope! So anyway just wanted to say thank you for your help! Have a good one! :)

Corrosive
11-21-2012, 01:23 PM
You'd think since they were never set to anything originally (those areas in the properties were both blank), this would've had no padding or spacing, but nope! So anyway just wanted to say thank you for your help! Have a good one! :)

Some HTML tags have browser defaults (things like margin and padding, font sizes etc.) If you are feeling brave then you could start with a reset CSS; http://meyerweb.com/eric/tools/css/reset/ which will get rid of all the defaults so you start with a blank canvas (so to speak).