|
|
Posted by Jonathan N. Little on 01/14/07 20:13
William wrote:
> Hello all,
>
> I hope someone can help me. I got a problem where some table layout
> won't work the way it's supposed to work, using rowspan. It's hard to
> explain, but in the example I give you below, there's 3 TDs, the right
> and left TD have a rowspan of 2, and the middle TD have a rowspan of 1,
> and the first row should have 16 pixels, and second row whatever height
> the page requires. But it seems that depending on the left or right TD
> height, it affects the height of my middle top TD, which is supposed to
> be fixed at 16 pixels. Anyway, this example should explain it all. Is
> there a way to make that tow middle TD fixed at 16 pixels? It works fine
> with Firefox, but not with Explorer.
>
>
<snip code>
In a nutshell your markup is stinks of using tables, nested even, for
layout! Also what happen to the poor schmuck view your site with a old
14" monitor, or low on the corporate-ladder laptop where the max screen
resolution is 800x600? Your table is 1,100 pixels wide! Not sure why
your dims are fixed in pixels, better proportional to the text, maybe
for graphics, how know since <broken record>you have not supplied a
URL</broken record> so we must guess. Here is a better way:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>More User Friendly</title>
<style type="text/css">
HTML, BODY { margin: 0; padding: 0; }
/* margins on content to offset sidebars */
.content { margin: 0 100px 0 100px; padding: 0; }
/* background colors only to show layout! */
.banner { height: 16px; background-color: #efe; }
.sidebar { position: absolute; width: 100px; height: 100%;
background-color: #fee; }
.lefthand { top: 0; left: 0; }
.righthand { top: 0; right: 0; }
/* put nav links in lists */
.sidebar UL { list-style: none; margin: 0; padding: 0; }
.sidebar LI { margin: 0; }
</style>
</head>
<body>
<div class="sidebar righthand">
right sidebar
</div>
<div class="sidebar lefthand">
<ul>
<li>Nav Link</li>
<li>Nav Link</li>
<li>Nav Link</li>
<li>Nav Link</li>
<li>Nav Link</li>
</ul>
</div>
<div class="content">
<div class="banner">Top banner</div>
<h1>Your Page Content</h1>
<p>
Now the center section will scale
with browser window, far better!
</p>
</div>
</body>
</html>
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
[Back to original message]
|