Printable View
I cannot figure this out... I have designed my website, but I can't figure out how to get all of the pieces to fit together. My problem is I have a big banner on the right side that is longer than all of the other pieces because I can't divide it up. Attached is a picture of my problem.
http://image-upload.us/93430layout.gif
And when I try to put it in my web page it does this
http://image-upload.us/69415problem.gif
How do I go about fixing this?
Are you using tables? If so, vAlign=top will align everything to the top of the cell.
Have you got a link to the page?
I'd put money on this being a table align problem though..
Looks like you're usign 1 table which is being stretched by the banner thus causing your problem.
If this is the case, build your page like this:
<table><tr><td vAlign="top">
<table>
<tr><td> Some content</td></tr>
<tr><td> Some more content</td></tr>
</table>
</td><td>Banner goes here</td><tr>
</table>
i'm presuming your trying to do this using a table layout?
in which case you need to use colspan and rowspan to span unused columns and rows in your table.
a quick slice up of your first image would look like this using PhotoShop:
note the uses of colspan and rowspan.Code:<table id="Table_01" width="512" height="350" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="images/93430layout_01.jpg" width="31" height="40" alt=""></td>
<td colspan="5">
<img src="images/93430layout_02.jpg" width="342" height="40" alt=""></td>
<td>
<img src="images/93430layout_03.jpg" width="18" height="40" alt=""></td>
<td rowspan="5">
banner</td>
<td rowspan="5">
<img src="images/93430layout_05.jpg" width="35" height="313" alt=""></td>
</tr>
<tr>
<td>
<img src="images/93430layout_06.jpg" width="31" height="148" alt=""></td>
<td colspan="2">
<img src="images/93430layout_07.jpg" width="70" height="148" alt=""></td>
<td>
my picture</td>
<td colspan="2">
<img src="images/93430layout_09.jpg" width="67" height="148" alt=""></td>
<td>
<img src="images/93430layout_10.jpg" width="18" height="148" alt=""></td>
</tr>
<tr>
<td>
<img src="images/93430layout_11.jpg" width="31" height="29" alt=""></td>
<td colspan="5">
<img src="images/93430layout_12.jpg" width="342" height="29" alt=""></td>
<td>
<img src="images/93430layout_13.jpg" width="18" height="29" alt=""></td>
</tr>
<tr>
<td>
<img src="images/93430layout_14.jpg" width="31" height="77" alt=""></td>
<td>
<img src="images/93430layout_15.jpg" width="44" height="77" alt=""></td>
<td colspan="3">
text conent here...</td>
<td>
<img src="images/93430layout_17.jpg" width="42" height="77" alt=""></td>
<td>
<img src="images/93430layout_18.jpg" width="18" height="77" alt=""></td>
</tr>
<tr>
<td>
<img src="images/93430layout_19.jpg" width="31" height="19" alt=""></td>
<td colspan="5">
<img src="images/93430layout_20.jpg" width="342" height="19" alt=""></td>
<td>
<img src="images/93430layout_21.jpg" width="18" height="19" alt=""></td>
</tr>
<tr>
<td colspan="9">
<img src="images/93430layout_22.jpg" width="512" height="36" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="31" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="44" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="26" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="205" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="25" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="42" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="18" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="86" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="35" height="1" alt=""></td>
</tr>
</table>
with some simple math you could probably scale up the above example to fit your purpose.