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 Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Dreamweaver constructed layout liquid height gaps between images

Status
Not open for further replies.
JamesCliff

JamesCliff

Programmer
Feb 16, 2005
106
GB
Hi all,

Im constructing a layout for my dads website on dreamweaver. The images were made in photoshop and sliced up as i thought right. I then built the table structures and added the images to the dreamweaver constructed layout.

Now, i have a problem. There is a gap between an image on the navigation bar. When i constructed the layout in dreamweaver and added the images everything looked fine and worked how i expected to. However now i have uploaded the index.php page to test it, and filled the home.php page with test data to see if the index.php main content box expands and it does expand. However when it expands the gabs appear between the image on the left hand side.

When there is no content in the main content box the page is normal and looks fine.

Check the URL's below to understand more what i mean:

My problem when there is content:

When there is no content all works fine:

I need the page to expand in height with the more content that is displayed, however i need rid of the gap. The navigation bars on the left are set to auto expand as well.

The code for my index.php is below:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>Peter Cliff - Agricultural and Sports Turf Engineer</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel='stylesheet' href='config/style.css' type='text/css'>

</head>

<body bgcolor="#FCFCE1">

<?php
if (!$_GET["page"]) {
  $_GET["page"] = "home";
}
$content = $_GET["page"] . ".php";
if (!file_exists($content)) {
  $content = "404.php";
}
?>

<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td valign="top"><table width="780" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr> 
          <td colspan="3"><img src="images/index_01.gif" width="780" height="139"></td>
        </tr>
        <tr> 
          <td width="126" valign="top" background="images/index_02.gif"> <br>
            <img src="images/index1_08.gif" width="106" height="21"><br>
            <br>
            <img src="images/index1_11.gif" width="106" height="21"><br>
            <br>
            <img src="images/index1_13.gif" width="106" height="21"><br>
            <br>
            <img src="images/index1_15.gif" width="106" height="21"><br>
            <br>
            <img src="images/index1_17.gif" width="106" height="21"><br>
            <br>
            <img src="images/index1_19.gif" width="106" height="21"><br>
            <br>
            <img src="images/index1_21.gif" width="106" height="21"><br>
            <br>
            <img src="images/index1_23.gif" width="106" height="21"><br>
            <br>
          </td>
          <td width="18">&nbsp;</td>
          <td width="636" rowspan="3" background="images/index_04.gif"><?php include($content); ?></td>
        </tr>
        <tr> 
          <td width="126"><img src="images/index_07.gif" width="126" height="142"></td>
          <td width="18">&nbsp;</td>
        </tr>
        <tr> 
          <td width="126" valign="top" background="images/index_02.gif"><br>
            <img src="images/index1_29.gif" width="106" height="21"><br>
            <br>
            <img src="images/index1_32.gif" width="106" height="21"> <br>
          </td>
          <td width="18">&nbsp;</td>
        </tr>
        <tr> 
          <td colspan="3"><img src="images/index_10.gif" width="780" height="64"></td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>

Any help would be greatly appriciated here as i dont understand where i have gone wrong.

Thanks alot

Jim
 
Sort by date Sort by votes

Have a look at the source as delivered to your page. It is seriously screwed up - html and body tags within body tags? I've never seen anything like it.

I'd fix all of that before starting to look at any other issues you have, as that may well be the cause.

A valid DOCTYPE wouldn't go amiss, either... you may as well not have the one you currently have, as it has no URL to a DTD on it.

Hope this helps,
Dan




[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote

In fact, the placement of the messed up code is at the same place you are doing this with your PHP:

Code: 
"><?php include($content); ?>

Hope this helps,
Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote
It is clear you do not understand include statement. You treat them like frames, when they are simply something that is parsed in advance and thrown entirely at the place it is included. If you want to include a word, have just that word in the include file, if you want to include a table, have just the table. Don't include the whole html file. Think something like this (this is a silly example but should help you understand):
Code: 
<html>
 <head>
  <title>Include</title>
 </head>
 <body>
  <table>
   <?php include("content.php"); ?>
  </table>
 </body>
</html>

---------------
| content.php |
---------------
   <tr>
    <td>Table</td>
   </tr>
As you can see, content only has the stuff that actually fits the empty space where it is inlcuded. This will help your html be properly formatted.

As for the gaps. This is caused by rowspan. When your cell that contains content expands beyond the original size, the cells on the left have to expand as well, since this is a table and all cells in a row must end at the same point. Since you have (height-wise) three cells on the left and only one cell on the right, left hand cells will expand proportionally to accomodate for the growth of the right side. That means if the right side is empty, everything is ok. If it grows, every of the three containers on the left begins to grow and gaps appear. The more content the more it grows and the bigger the gaps. You can stop that (at least in Mozilla) if you put the fixed height on the cells on the left. Also, I would add valign="top" to all of them. Tables work in a way that they accomodate if content is bigger then specified size, so you can actually just say height="50" for the cells and they won't expand beyond that. However, be aware that the three (height-wise again) cells on the left are connected to the big (content) cell on the right and at least one of them needs to expand when the right one expands. If you have trouble understanding that, change border in your table (botder="1") and add more text and take it out and observe the behaviour. Also, try with fixed cell heights and observe how the ones with non-fixed heights are adjusting while fixed heights stay fixed.
 
Upvote 0 Downvote
Ok thanks for the feedback guys.

I think ive fixed the content error that was causing the HTML to be incorrect and messed up in the view source page.

As for the gaps, well ive made a little progress. Ive set Valign to top for the top and bottom cells on the left and the middle block on the left which holds the image index_07.gif is set to valign bottom. Therefore the page looks like this:


As you can see the middle left cell is now displaying correctly and the information nav bar is displayed correctly. However there is still the gap on the main navigation bar between the middle cell and the top cell. I cant understand why, ive set the middle cell to a fixed height and set the top left cell (with nav buttons in) to a height of 100%. I thought this would cause the top left cell to expand down the page with the main content box, with the middle image cell and bottom cell staying at a fixed height - that is what i want to happen, however it dosnt. The top left cell has a background image that is 126 width and 1px in height therefore it can expand, and ive set the height to 100% for that cell but still it wont expand with the main content box. Like Vragabond said above at least one of the cells needs to expand with the main content box, well im trying to make the top left cell expand with it, but not having much luck at the mo :(

This is the code i am using now:

Code: 
<table width="100%" height="100%" border="9" cellspacing="0" cellpadding="0">
  <tr>
    <td valign="top"><table width="780" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr> 
          <td colspan="3"><img src="images/index_01.gif" width="780" height="139"></td>
        </tr>
        <tr> 
          <td width="126" height="100%" valign="top" background="images/index_02.gif"> <br>
            <img src="images/index1_08.gif" width="106" height="21"><br>
            <br>
            <img src="images/index1_11.gif" width="106" height="21"><br>
            <br>
            <img src="images/index1_13.gif" width="106" height="21"><br>
            <br>
            <img src="images/index1_15.gif" width="106" height="21"><br>
            <br>
            <img src="images/index1_17.gif" width="106" height="21"><br>
            <br>
            <img src="images/index1_19.gif" width="106" height="21"><br>
            <br>
            <img src="images/index1_21.gif" width="106" height="21"><br>
            <br>
            <img src="images/index1_23.gif" width="106" height="21"><br>
            <br>
          </td>
          <td width="18" height="100%">&nbsp;</td>
          <td width="636" rowspan="3" background="images/index_04.gif"><?php include($content); ?></td>
        </tr>
        <tr> 
          <td width="126" height="142"  valign="bottom"><img src="images/index_07.gif" width="126" height="142"></td>
          <td width="18" height="142">&nbsp;</td>
        </tr>
        <tr> 
          <td width="126" valign="top" background="images/index_02.gif"><br>
            <img src="images/index1_29.gif" width="106" height="21"><br>
            <br>
            <img src="images/index1_32.gif" width="106" height="21"> <br>
          </td>
          <td width="18">&nbsp;</td>
        </tr>
        <tr> 
          <td colspan="3"><img src="images/index_10.gif" width="780" height="64"></td>
        </tr>
      </table></td>
  </tr>
</table>

If anyone could help it would be appriciated still.

Thanks all

Jim
 
Upvote 0 Downvote
Here's a suggestion. Why don't you load the background to the middle cell as well? Especially in IE it is very hard to control the sizes of cells since that browser does not follow any logic at that at all. Since there's the same motif going on all along the left side, I think you could safely add the background to the middle cell and it will solve your problems.
 
Upvote 0 Downvote
Thanks m8,

I did that, set the image as the background for the cell and it worked.

Thanks for help.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
227
tyutghf
tyutghf
k4ghg
  • Locked
  • Question
Liquid vertical bar 1
Replies
2
Views
225
k4ghg
k4ghg
dvannoy
  • Locked
  • Question
Simple Layout
Replies
3
Views
167
vacunita
vacunita
Carlvic
  • Locked
  • Question
How can i make layout 2 columns 2
Replies
3
Views
181
Carlvic
Carlvic
LonnieJohnson
  • Locked
  • Question
I want to use Dreamweaver
Replies
5
Views
142
fisheromacse
fisheromacse

Part and Inventory Search

Sponsor

Back
Top