Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Site based on tables - layout not displaying properly

Status
Not open for further replies.
nofx1728

nofx1728

Technical User
Jan 26, 2006
65
US
The problem I'm having is images aren't lining up correctly, and my table cells are not staying the right size. I'll try to explain the best I can. I'm using Dreamweaver 8, and my main browser is explorer 6.0. I have a table that covers the entire page (100%.) Several rows, mostly 1 column, parts of it are 2 columns. First 5 rows contain a flash.swf banner, a background picture, a logo, the same background picture, and a menu.swf. I'm having spacing issues in firefox and netscape that puts gaps between each row. After the first 5 rows come my main problem. I'm trying to create a rounded text box with a graphic on the left side (that I can also put information over.) In my 6th row I have 2 columns. In the left hand column is where I want my first background graphic titled "corner." I want it to be fixed at width="221" height="25". In the right column Is where I want my main body to go with text. I want this to expand the rest of the screen (vertically and horizontally), stetching in each browser. In the next row there really only needs to be 1 column - matching up with the "corner" image above. I want this to be width="221" height="100%". I want this to stretch to the bottom of the main body I spoke about above. Right now the "corner" and "side" image are not displaying properly. If you view on a smaller screen it shrinks - cutting off the rounded edge, and if you view on a larger screen the "corner" image begins to repeat itself. I would like to attach the html, but I don't see an option, so I'll paste my code. You can view the pages at or . I've noticed that the sites aren't displaying my code correctly if you view source, that is why i'm pasting it here. Thanks... please help.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Celeste Home</title>
<style type="text/css">
<!--
body {
background-color: #FFFFFF;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.style1 {font-size: 12px}
.style2 {font-size: 10px}
.style3 {
font-size: 16px;
font-weight: bold;
}
.style4 {font-size: 14px}
-->
</style>
</head>

<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="50" colspan="2" bgcolor="#FFFFFF"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=" height="100%" width="100%" align="left" title="celeste_banner">
<param name="movie" value="celeste_banner.swf" />
<param name="quality" value="high" />
<param name="scale" value="noborder" />
<embed src="celeste_banner.swf" height="50" align="left" quality="high" pluginspage=" type="application/x-shockwave-flash"></embed>
</object></td>
</tr>
<tr>
<td colspan="2"><div align="center"><img src="gradient_rectangle.jpg" alt="gradient_rectangle" width="100%" height="20" /></div></td>
</tr>
<tr>
<td height="82" colspan="2" bgcolor="#FFFFFF"><div align="center"><img src="celeste_logo1.gif" alt="celeste_logo" width="280" height="80" /></div></td>
</tr>
<tr>
<td colspan="2"><div align="left"><img src="gradient_rectangle.jpg" alt="gradient_rectangle" width="100%" height="20" /></div></td>
</tr>
<tr valign="top">
<td height="50" colspan="2" bgcolor="#FFFFFF"> <p align="left">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase=" WIDTH=100% HEIGHT=50> <PARAM NAME=movie VALUE="celeste_nav.swf"> <PARAM NAME=menu VALUE=false>
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#25408F>
<PARAM NAME="scale" VALUE="noborder" />
<EMBED src="celeste_nav.swf" menu=false quality=high bgcolor=#25408F WIDTH=800 HEIGHT=50 TYPE="application/x-shockwave-flash" PLUGINSPAGE="</OBJECT>
</tr>
<tr valign="top">
<td width="221" height="31" background="images/corner.gif" bgcolor="#FFFFFF">&nbsp;</td>
<td rowspan="2" bgcolor="#FFFFFF"><p align="left"><br />
</p>
<p align="center"><span class="style1"><img src="group_picture.jpg" alt="group_picture" width="306" height="204" /></span><br />
<span class="style2">The Law Office of Celeste &amp; Associates, P.A. concentrates heavily in the <br />
litigation of many different types of personal injury claims. </span></p>
<p align="left" class="style1">&nbsp;</p>
<blockquote>
<p align="left" class="style3">Celeste &amp; Associates Handles:</p>
<ul>
<li class="style4">All types of personal injury and wrongful death cases arising out of motor vehicle accidents, slip and falls, dog bites and products liability.</li>
<li class="style4">Employment cases involving wrongful termination and hostile work environments due to all forms of discrimination as well as workers compensation retaliation claims and wage and overtime claims.</li>
<li class="style4">Workers Compensation claims involving any dispute over wage loss or medical benefits.</li>
<li><span class="style4">Social Security Disability claims.</span></li>
</ul>
</blockquote>
<p><br />
</p>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="53%"><blockquote>
<p><span class="style1">Suite 315 <br />
580 Village Boulevard<br />
W. Palm Beach, FL 33409<br />
Tel: 561-478-2447<br />
Fax: 561-478-5073</span></p>
</blockquote></td>
<td width="47%"><blockquote>
<p><span class="style1">8000 S. U.S. Hwy One<br />
Suite 400<br />
Port St. Lucie, FL 34952<br />
Tel:772-343-8992<br />
Fax:772-343-8993 </span></p>
</blockquote></td>
</tr>
</table>
<p align="left"><span class="style1"><br />
</span></p> </td>
</tr>
<tr valign="top">
<td background="images/side.gif" bgcolor="#FFFFFF">&nbsp;</td>
</tr>


<tr valign="top">
<td colspan="2"><img src="gradient_rectangle.jpg" alt="gradient_rectangle" width="100%" height="20" /></td>
</tr>
<tr valign="top">
<td colspan="2" bgcolor="#FFFFFF"><span class="style1">Celeste &amp; Associates, P.A. </span></td>
</tr>
</table>
</body>
</html>
 
Sort by date Sort by votes
Hi nofx1728,

I decided to have a little play around with your page. My solution might not be the result you want, however, it's getting there I think.

Firstly, with a table layout, the best plan of action is usually to have a "wrapper" table with 3 rows. Inside the first row you place another table for the header, the second row has another table for the content and the last row is for the footer, so you can place another table there if needed. These nested tables are set to 100% width, the wrapper table can have a fixed width - I set mine to 750 pixels.

It's not a good idea to use a png image especially when you just have a plain colour. So I set the background for the body to #25408F, so you don't need that huge image for the left side. I also resized the gradient_rectangle image and I cropped the corner1 image to a size of w-21 h-30. Then for the cells which need to be white, the background is reset back to #FFFFFF.

I would normally place all this formatting directly into an external style sheet, so this is a bit higgeldy piggeldy at the moment. Anyway, while it's not perfect, I think this structure is working so if you copy this into DW and compare with your version, you should be able to see how I have set it up. Note that I used a transparent gif to keep the left side open - sometimes called a spacer image.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #25408F;
margin: 0px;
padding: 0px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
}
#leftTable {
border-top-width: 1px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 3px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #CCCCCC;
border-right-color: #CCCCCC;
border-bottom-color: #CCCCCC;
border-left-color: #CCCCCC;
background-position: center top;
color: #FFFFFF;
}
.style2 {font-size: 10px}
.style3 {font-size: 14px}
.style4 {font-size: 16px;
font-weight: bold;
}
p.c3 {text-align: left}
p.c4 {text-align: center}
-->
</style>
</head>

<body>
<table width="750" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><table width="100%" border="0" cellpadding="0" cellspacing="0" id="header">
<tr>
<td width="100%" height="50" bgcolor="#25408F"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=" width="100%" height="50" title="celeste_banner">
<param name="movie" value="celeste_banner.swf" />
<param name="quality" value="high" /><param name="SCALE" value="exactfit" />
<embed src="celeste_banner.swf" width="100%" height="50" quality="high" pluginspage=" type="application/x-shockwave-flash" scale="exactfit"></embed>
</object></td>
</tr>
<tr>
<td height="20"><img src="gradient_rectangle.jpg" /></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><div align="center"><img src="celeste_logo1.gif" alt="Celeste Logo" width="300" height="120" /></div></td>
</tr>
<tr>
<td><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=" width="800" height="50" title="Celeste Navigation">
<param name="movie" value="celeste_nav.swf" />
<param name="quality" value="high" />
<embed src="celeste_nav.swf" quality="high" pluginspage=" type="application/x-shockwave-flash" width="800" height="50"></embed>
</object></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" border="0" cellpadding="0" cellspacing="0" id="Content">
<tr>
<td width="200"><img src="../trans.gif" width="200" height="10" /></td>
<td width="21" bgcolor="#FFFFFF"><img src="smallcorner.jpg" width="21" height="30" align="top" /></td>
<td bgcolor="#FFFFFF">&nbsp;</td>
</tr>
<tr>
<td valign="top"><table width="80%" border="1" cellpadding="2" cellspacing="0" id="leftTable">
<tr>
<td>This is some placeholder text for something to go in this side. </td>
</tr>
</table></td>
<td bgcolor="#FFFFFF">&nbsp;</td>
<td bgcolor="#FFFFFF"><p class="c3"></p>
<p class="c4"><span class="style1"><img src="group_picture.jpg"
alt="group picture" width="306" height="204" /></span><br />
<span class="style2">The Law Office of Celeste &amp; Associates,
P.A. concentrates heavily in the<br />
</span> <span class=
"style2">litigation of many different types of personal injury claims.</span></p>
<h2>Celeste &amp; Associates Handles: </h2>
<ul>
<li>All types of personal injury and wrongful death cases arising
out of motor vehicle accidents,<br />
slip and falls, dog bites and products liability.</li>
<li>Employment cases involving wrongful termination and hostile work
environments due to all<br />
forms of discrimination as well as workers compensation retaliation
claims and wage and<br />
overtime claims.</li>
<li>Workers Compensation claims involving any dispute over wage loss
or medical benefits.</li>
<li>Social Security Disability claims</li>
</ul>
<p> </p>
<p><br />
</p>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="49%"><span class="style3">Suite 315<br />
580 Village Boulevard<br />
W. Palm Beach, FL 33409<br />
Tel: 561-478-2447<br />
Fax: 561-478-5073</span></td>
<td width="51%"><span class="style3">8000 S. U.S. Hwy One<br />
Suite 400<br />
Port St. Lucie, FL 34952<br />
Tel:772-343-8992<br />
Fax:772-343-8993</span></td>
</tr>
</table>
<p class="c3"><span class="style1"><br />
</span></p></td>
</tr>
</table></td>
</tr>
<tr>
<td><img src="gradient_rectangle.jpg" width="800" height="20" /></td>
</tr>
<tr>
<td bgcolor="#FFFFFF" class="style2">Celeste
&amp; Associates, P.A.</td>
</tr>
</table>
</body>
</html>
 
Upvote 0 Downvote
Thanks for your time and effort, and your tips. I appreciate it very much.

-nofx1728
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cohan123
  • Locked
  • Question
page layout-&gt;page size, optimal for web
Replies
0
Views
582
cohan123
cohan123
cohan123
  • Locked
  • Question
Hypertext Jump function not working
Replies
0
Views
601
cohan123
cohan123
fdgsogc
  • Locked
  • Question
Displaying results of an SQL Pivot Query
Replies
1
Views
661
jdhilljr
jdhilljr
Mike Lewis
  • Locked
  • Question
Using Dreamweaver to maintain a site not created in Dreamweaver
Replies
2
Views
765
Mike Lewis
Mike Lewis
HansKok
  • Locked
  • Question
Error after only changing text and not codes
Replies
0
Views
599
HansKok
HansKok

Part and Inventory Search

Sponsor

Back
Top