The images blend into each other so they have to be aligned that way, I cant figure out how to do this, would somebody please point me in the right direction?
[web] Simple HTML: trouble with tables
Author
I'm pretty new to this stuff so please bare with me...
I have a basic web page that is centered (so the entire content is in a single table)... I simply want to align two images, my banner image (in blue) and another image (in red) like so:
The images blend into each other so they have to be aligned that way, I cant figure out how to do this, would somebody please point me in the right direction?
The images blend into each other so they have to be aligned that way, I cant figure out how to do this, would somebody please point me in the right direction?
<table><tr> <td rowspan=2> left image </td> <td> top image </td></tr><tr> <td> content </td></tr></table>rowspan will make the topleft frame 2 rows high so it fills down into the one below. Hope this explains it
First off, you really should be using CSS for layout purposes.
The key here is rethinking the traditional notion of rows and colums and coming to grips with rows and cells. Apply the appropriate proportional or fixed row/cell sizing parameters to the <td> and <tr> tags.
[Edit: ProPuke's method is cleaner.]
<table> <tr> <td>red-image</td> <td> <tr>blue-image</tr> <tr>page-content</tr> </td> </tr></table>The key here is rethinking the traditional notion of rows and colums and coming to grips with rows and cells. Apply the appropriate proportional or fixed row/cell sizing parameters to the <td> and <tr> tags.
[Edit: ProPuke's method is cleaner.]
Quote:Original post by Oluseyi
First off, you really should be using CSS for layout purposes.
Although I haven't seen anything disasterous yet, I do agree with this. This makes your code much cleaner.
<div style="width:{red-image-width};float:left;"> <img src="{red-image-source}" alt="red image"/></div><div style="margin-left:{red-image-width}"> <div><img src="{blue-image-source}" alt="blue image"/></div> <div> <!-- content here --> </div></div>Stuff in curly braces is just placeholder of course. Haven't tested this but it should work. Remember appropriate doctype.
Quote:Original post by igni ferroque
*** Source Snippet Removed ***
Stuff in curly braces is just placeholder of course. Haven't tested this but it should work. Remember appropriate doctype.
That's the good stuff. Also, make sure you validate it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Funky Chicken</title> <style type="text/css"> .contain { width:700px; margin-right:auto; margin-left:auto; } .subContain { border:none; float:left; } .headImg { border:none; width:500px; height:200px; background-color:#000000; background-image:url(); } .sideImg { border:none; width:200px; height:500px; float:left; background-color:#555555; background-image:url(); } .content { border:none; width:500px; text-align:justify; background-color:#CCCCCC; background-image:url(); } </style> </head> <body> <div class="contain"> <div class="sideImg"> </div> <div class="subContain"> <div class="headImg"> </div> <div class="content"> </div> </div> </div> </body></html>Validates, looks fine in both IE6 and Firefox 0.9.3, etc etc..
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
