Forum Moderators: open
I am trying to design a page layout, using tables that has several elements that have me baffled. I am just learning how to code with HTML, so I could be dangerous. I have a very simple layout for a page I have already published, and it has several elements that must also be in the new layout page. Those elements are the main header and the navigation bar below that.
Here is that page --> <SNIP>
Another element that must be included on the new page is an advertising module -- you can see this on the left side of this page --> <SNIP> This module is the only table in that part of the page that will have those graphic headers.
I tried to mock up the page design I wanted, using Fireworks MX. You can see it here --> <SNIP>
The large, main text area will actually be the same dark blue as the page background, with silvery font. I want the text to flow around the images on the right, but not all the way to the far right edge. I want the images to look like they jut out to the right, past the edge of the text a little.
I also have a small text box, that will be a light silvery color background with black or dark blue text in a slightly smaller font size than the main content. I would like the main text content to also flow around this box, going all the way to the left edge of that box.
Subsequent pages to this article will be slight variations on that layout -- the pictures and small text box may switch places, or I'll have pictures on both sides and a small text box centered in the main area.
I think this will all involve nested tables and the use of the span tags, but I'm not sure how to put it together. I designed the page in the first link up there and it doesn't validate. But the errors reported are not errors at all, which has me perplexed.
I hope someone can help me.
Thank you,
Grump
[edited by: BlobFisk at 4:26 pm (utc) on Feb. 10, 2005]
[edit reason] No URLs please! See TOS [webmasterworld.com] [/edit]
as for having the text so that it flows around the text box, you would be better suited using divs.
<body bgcolor="#000048" topmargin="0" leftmargin="0" rightmargin="0">
<table border=0 width=100% cellpadding="0" cellspacing="0">
<tr>
<td ColSpan="9"><br><br></td>
</tr>
<tr>
<td ColSpan="9" bgcolor="#0000ff">Header<br>header</td>
</tr>
<tr>
<td ColSpan="9"> </td>
</tr>
<tr>
<td></td>
<td ColSpan="7" bgcolor="#0000ff">nav and <br>stuff</td>
<td></td>
</tr>
<tr>
<td width="20" RowSpan="8"></td>
<td ColSpan="7" > </td>
<td RowSpan="8" width="20" ></td>
</tr>
<tr>
<td valign="top" width="150" bgcolor="#ffffff">Sidebar Header<hr></td>
<td valign="top" RowSpan="6" width="10"> </td>
<td valign="top" RowSpan="6" bgcolor="#0066ff" width="10"> </td>
<td valign="top" RowSpan="2" bgcolor="#0066ff" width="100">Could put something here too</td>
<td valign="top" RowSpan="6" bgcolor="#0066ff" >Test Content<br>Test Content<br>Test Content<br>Test Content<br></td>
<td valign="top" RoWSpan="2" bgcolor="#cccccc" ColSpan="2" width="150">Top Big Grey Box<br>Top Big Grey Box<br>Top Big Grey Box<br></td>
</tr>
<tr>
<td valign="top"RowSpan="5" bgcolor="#ffffff">Side Bar<br>Side Bar<br>Side Bar<br><br></td>
</tr>
<tr>
<td valign="top" RowSpan="3" bgcolor="#666666">text box<br>text box<br>text box<br>text box<br>text box<br>text box<br></td>
<td valign="top" RowSpan="2" bgcolor="#0066ff" ColSpan="2" width="150">Maybe Some Random Info here</td>
</tr>
<tr>
<!-- Leave this empty -->
</tr>
<tr>
<td valign="top" RowSpan="2" bgcolor="#cccccc" ColSpan="2" width="150">Bottom Big Grey Box<br>Bottom Big Grey Box<br>Bottom Big Grey Box<br>Bottom Big Grey Box<br></td>
</tr>
<tr>
<td valign="top" bgcolor="#0066ff" width="100">stuff could go here to</td>
</tr>
<tr>
<td ColSpan="7" height="10" > </td>
</tr>
</table>
Perhaps they could be eliminated and I should just use align right images. That way the main text would flow around them, correct? How do I get the images to position to the right top and the right bottom?
It looks like you have the main content area broken into 3 columns, which means the text will not flow around the picture cells. That's not what I want, but the above question may answer that problem.
Anyway, it's difficult for me to work on this here since my pertinent links are being edited out;
[edited by: BlobFisk at 10:28 pm (utc) on Feb. 10, 2005]
[edit reason] Please see TOS 24 [webmasterworld.com] [/edit]
