tables with images as headers

[monkeymeister]

How do you get a table with an image header like in the examples here :

http://www.channel4.com/bigbrother/

When I separate the image from the main body of text into separate tables, I always get a gap in between the two.

Anybody know how to do this?


Cheers,

Mike

 

[tgreer]

I haven't done table-based layouts in awhile... but you want to make sure to set the margin, padding, cell-padding, cell-spacing, border, etc. properties of the table itself and all of the image and "content" elements, appropriately.

Thomas D. Greer

http://www.tgreer.com

Providing PostScript & PDF
Training, Development & Consulting

 

[Vragabond]

What exactly are you referring to in that page? There is a lot of things there and it is hard to pinpoint what you mean by table with an image header -- I cannot distinctly see one.

 

[monkeymeister]

Vragabond,

Where you have the Search, BB Mobile, Latest Pics, Features images in blue. And then you have a table underneath each of them.


Cheers,

Mike

 

[vongrunt]

One table, collapsed borders. Something like:

<style type="text/css">
.box
{	border: solid black 1px; 
[b]	border-collapse: collapse; [/b]
}
.box th 
{ 	background-color: navy; 
	color: white; 
}
</style>

<table class="box">
<tr><th>Some text or image</th></tr>
<tr><td>Lorem ipsum blah blah</td></tr>
</table>

If you use image then .box th cascade is not necessary.

------
"There's a man... He's bald and wears a short-sleeved shirt, and somehow he's very important to me. I think his name is Homer."
(Jack O'Neill, Stargate)

 

[monkeymeister]

If I wanted to have a table for the image and then a table for the text, textboxes etc below so that I can format them how I want with tables within the table, would border-collapse enable me to do this and prevent a gap between the 2 main tables?


Cheers,

Mike

 

[vongrunt]

It depends... can you post code example?

------
"There's a man... He's bald and wears a short-sleeved shirt, and somehow he's very important to me. I think his name is Homer."
(Jack O'Neill, Stargate)

 

[monkeymeister]

Here's an example of my code (minus the image stuff). I'm just basically using tables to format my textboxes/labels/buttons etc :

<table class="border" width="400">
<tr>
<TD style="font-family:Verdana; font-size:small" width="50" align="right">Name:</TD>
<TD>
<asp:TextBox ID="txtName" width="200px" Runat="server" ValidationGroup="Main"></asp:TextBox>
<asp:RequiredFieldValidator ID="valName" runat=server ControlToValidate="txtName"
ValidationGroup="Main" ErrorMessage="Enter Name" SetFocusOnError=true>*</asp:RequiredFieldValidator>
</TD>
</tr>
<tr>
<TD class="main" width="50" align="right">Address:</TD>
<TD>
<asp:TextBox ID="txtAddress" width="200px" runat="server" ValidationGroup="Main"></asp:TextBox>
<asp:RequiredFieldValidator ID="valAddress" runat=server ControlToValidate="txtAddress"
ValidationGroup="Main" ErrorMessage="Enter Address" SetFocusOnError=true>*</asp:RequiredFieldValidator>
</TD>
</tr>
<tr>
<TD class="main" width="50" align="right">City:</TD>
<TD>
<asp:TextBox ID="txtCity" Width="200px" runat=server ValidationGroup="Main"></asp:TextBox>
</TD>
</tr>
<tr>
<TD class="main" width="50" align="right">Country:</TD>
<TD>
<aspropDownList ID="ddlCountry" Width="206px" runat=server ValidationGroup="Main">
<asp:listitem Value=""> - Select Country - </asp:listitem>
<asp:listitem Value="China">China</asp:listitem>
<asp:listitem Value="Brazil">Brazil</asp:listitem>
<asp:listitem Value="Portugal">Portugal</asp:listitem>
<asp:listitem Value="UK">UK</asp:listitem>
<asp:listitem Value="Iceland">Iceland</asp:listitem>
<asp:listitem Value="Canada">Canada</asp:listitem>
<asp:listitem Value="South Africa">South Africa</asp:listitem>
</aspropDownList>
</TD>
</tr>
</table><BR />
<table>
<tr>
<td width="400px" align=center>
<asp:Button ID="btnSubmit" Runat="server" Text="Post" PostBackUrl="~/CrossPagePosting2.aspx"
ValidationGroup="Main" />
</td>
</tr>
</table><BR />
<table>
<tr>
<td>
<asp:ValidationSummary ID="valSumMain" runat=server ValidationGroup="Main" />
</td>
</tr>
</table>

Cheers,

Mike

 

[vongrunt]

TABLE is block-level element - by default you don't need additional <BR /> tags. Remove these tags and then play with either CSS border-collapse or ol-fashioned table properties like border, cellpadding and cellspacing.

------
"There's a man... He's bald and wears a short-sleeved shirt, and somehow he's very important to me. I think his name is Homer."
(Jack O'Neill, Stargate)