I’ve got a table-based design with inline styles. Thought this was the best way to approach my designer’s concept as it (at first) appeared extremely simple.
My problem is that he’s very fond of overlapping semi-transparent pngs and full-screen layouts.
I have a pattern which flows 100% left/right.
Then I have a nav bar centered over that, which sits upon a semi-transparent gradient, which also stretches full screen. Everything else on the page is centered on a simple, full-screen repeating background pattern or color.
What I thought I could do is slice up the nav bar- by using three columns, I could center the main piece, and take the darker gradients on the side and throw them into table cells to repeat-x.
But the problem, of course is two-fold: 1) I can’t specify a td size or a fixed transparent image to force the side tds to expand, and 2) even though I’ve specified a width for my center (nav) image, that column keeps expanding.
I’m a little rusty, my CSS is not the most current, but I’ve tried max-width and everything I can think of to force that middle column to stay put.
Any ideas?
Hi,
You should be able to do something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
table.mytable {
table-layout:fixed;
width:100%;
margin:auto;
}
table.mytable td {
width:33%;
background:blue;
vertical-align:top
}
table.mytable td.mid {
width:800px;
background:red
}
</style>
</head>
<body>
<table class="mytable">
<tr>
<td> </td>
<td class="mid"><p>some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : </p></td>
<td> </td>
</tr>
</table>
</body>
</html>
You could probably achieve the same effect without tables and using three nested divs. The outer div for the image on one side the inner div for the image on the other side image and the third inner div for the content.
Wow, this is interesting…I tried your first approach and was able to get it to behave as expected with some minor adjustments:
table[SIZE=2].[/SIZE]mytable {
width: 100%;
width: fixed[SIZE=2];
}
[/SIZE]table[SIZE=2].[/SIZE]mytable td {
width:10%;
}
table[SIZE=2].[/SIZE]mytable td[SIZE=2].[/SIZE]mid {
width:988px[SIZE=2];
}[/SIZE]
But now everything extends beyond the viewport by about 20%. If I leave “margin: auto in”, it breaks… I’ll continue fiddling but ultimately will probably have to go with nested divs.
Thanks for your help!
I think it’s because I have a table within a table…the nav which sits on the troublesome transparent bar is in a table…so it’s inheriting…on to something here…
Good stuff!
Just out of curiosity (and not to be cynical or negative or anything):
Does this work in all browsers?
How about older browsers?
Again, I am just wondering whether anyone knows how browser-compatible this solution might be.
Thanks!
To answer your question, webgyver…no, the fix broke apart for me in Firefox, but honestly, I’m pretty sure my own code was to blame. Tugged at it for hours.
So to fix this issue, I made the unspeakable decision to “fake it” - I took a screenshot of the AI mockup, then took took the “pattern layer” and rigged up a flattened graphic which had the illusion of transparent layers, and spliced it into the html- so was still able to use the table layout with the nav bar running side to side, but the middle graphic no longer had any real transparency, so the nav layer couldn’t bleed through.
Not proud of it people, but it works. (and is cross-browser compatible :))
The code I posted in #post2 was working everywhere as I checked in IE6 - 8 and in all modern versions of Safari, Chrome, Firefox and Opera and at different screen sizes.
You missed out the table-layout:fixed which is the important part in your snippet above and you also missed targeting the td but I guess that was a typo 
The 10% width you set would not be enough to work on large monitors because it needs to be oversize to start with. The table will arrange the cells to fit accommodating the fixed pixel width middle element and the table should never be larger that 100%.
I guess you could get a similar effect using a fixed width spacer gif for the middle column and then setting each td to 50%.
e.g.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
table.mytable {
width: 100%;
table-layout:fixed;
}
table.mytable td {
width:50%;
background:blue;
}
table.mytable td.mid {
width:988px;
background:red;
}
.mid .spacer {
width:988px;
height:1px;
font-size:0;
background:yellow;
}
</style>
</head>
<body>
<table class="mytable">
<tr>
<td> </td>
<td class="mid"><div class="spacer"></div>
<p>some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : some text goes here : </p></td>
<td> </td>
</tr>
</table>
</body>
</html>
Checked in all modern browsers as before.
Thanks again for your help!