 |
HTML Code Clinic Do you have some HTML code you'd like to share and get suggestions from others for tweaking or improving it? This discussion is the place. |
Welcome to the p2p.wrox.com Forums.
You are currently viewing the HTML Code Clinic section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
|
|
|

April 21st, 2005, 06:55 AM
|
Friend of Wrox
|
|
Join Date: Mar 2004
Posts: 357
Thanks: 0
Thanked 0 Times in 0 Posts
|
|
'Auto' height of <DIV>s
Note that, when we use TABLEs ( with TD background colors ), all TD's adjust to same maximum hieght of TD having maximum height.
Can't <DIV> be forced to stretched automatically ?
http://www.nicejewishdate.com/test/blog/
|

April 27th, 2005, 11:34 AM
|
 |
Wrox Author
|
|
Join Date: Jun 2003
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
|
|
That's a pretty common question.
Consider the following testcase, it renders identically in IE6, Opera, and Firefox.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
body {
background: rgb(116, 163, 201);
color: rgb(192, 214, 231);
font-family: sans-serif;
margin: 0;
padding: 0;
}
h1, h6 {
margin: 0;
}
div#container {
position: relative;
min-height: 400px;
border: 1px solid rgb(91, 147, 191);
background: rgb(66, 123, 170);
}
div#first-column,
div#third-column {
position: absolute;
top: 0;
bottom: 0;
border: 1px solid rgb(91, 147, 191);
background: steelblue;
width: 200px;
margin: 3px;
}
div#first-column {
left: 0;
}
div#third-column {
right: 0;
}
div#content {
margin: 3px 208px 3px 208px;
background: rgb(57, 107, 149);
border: 1px solid rgb(91, 147, 191);
}
div#header,
div#footer {
background: rgb(66, 123, 170);
padding: 3px;
}
</style>
<!--[if lt IE 7]>
<style type='text/css'>
div#container {
height: 400px; /* height behaves like min-height in Explorer */
}
div#first-column,
div#third-column {
height: expression(document.getElementById('container').offsetHeight - 10); /* offsetHeight is the real height, not the value of the height property */
}
</style>
<![endif]-->
</head>
<body>
<div id='header'>
<h1>Header</h1>
</div>
<div id='container'>
<div id='first-column'>
Text in the first column.
</div>
<div id='content'>
Text in the content column.
</div>
<div id='third-column'>
Text in the third column.
</div>
</div>
<div id='footer'>
<h6>Footer</h6>
</div>
</body>
</html>
The dynamics of this one are fairly straight-forward. The liquid height is created by absolutely positioning the first and third columns. Then they are stretched by applying the top: 0; and bottom: 0; combination of properties, when both appear on an absolutely positioned element, height is implied. That height works similarly to how auto width does on block elements like div, i.e. it stretches to fill the space available to it vertically, but that available space is the space left over after padding, borders and margins are applied.
In order to keep this from failing when there is very little content in the "content" div, there must also be a lower height constraint placed on the "container" div, this is done with the min-height property.
Left and Right margins are placed on the content div that are equal to the width, padding, borders and margins of the left and right columns. Even more margin can be applied if you like, but that keeps the content of the content div from going behind those side columns.
That leaves the IE hacks. Explorer doesn't understand the top: 0; bottom: 0; combination of properties to imply height. So a conditional comment style sheet is added for IE 6 and less (I'll just assume that IE 7 will support these properties). Within that conditional comment style sheet I'll invoke another Explorer proprietary feature, and that feature is expression(), this allows javascript to be included inside a style sheet.
height: expression(document.getElementById('container').of fsetHeight - 10);
This assigns a height to the first and third columns, the height assigned is whatever the real height of the "container" element is, minus 10 pixels for margins and borders (I actually got 8 pixels (margins + borders), but 10 makes it match Firefox ?!?!). I say real height, because Explorer treats the height property like the min-height property, so the height of the "container" element may be more than whatever value is assigned to the height property.
Hope that explains how divs can be fluid with respect to height.
HTH!
Regards,
Rich
--
[ http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design
|

April 28th, 2005, 06:00 AM
|
Friend of Wrox
|
|
Join Date: Mar 2004
Posts: 357
Thanks: 0
Thanked 0 Times in 0 Posts
|
|
Very useful reply :)
Actually, particularly, why I posed this question is because I ( just ) clicked http://www.workingwith.me.uk/
That guy is campaigning for 'Table Free' design. I can't get h'm. I can't understand h'm. Almost all Web pages, we c, use TABLEs ( Infact, this Wrox page also! ). Why, TABLEs are so bad ( as he Neil Crosby says ) ? ( What I know is DIVs-data loads little faster than TABLEs, like interlaced images! ). For what else, 'Table Free' design is needed ?
And, how can b it implemented ? After all, we're using TABLEs for years :D
|

April 28th, 2005, 09:13 AM
|
 |
Wrox Author
|
|
Join Date: Jun 2003
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
|
|
Tables for layout is basically the crutch in the argument for CSS-based layout. I'm not going to go on and on about it, in some circles such talk can ignite standards holy wars. Thankfully that is rarely the case here on P2P. I'll go over some of the main points.
Tables are not bad, they are overused and abused. Way back in the day that was the only way to create an aesthetically appealing layout. Presentational HTML was better supported then than CSS. Today CSS support is excellent. So when I'm talking about table-based design I'm talking about nesting table upon table upon table, and using things like transparent gif images and html line breaks to control spacing.
Table-based designs increase the amount of markup by as much as 75%. This leads to both higher maintenance time and to higher download times. Often times higher maintenance time comes up in debate because old-school designers feel that the amount of time it takes to correct certain CSS bugs is equal to or greater than the amount of time it takes to crank out nested tables full of spacer gifs, et all. Standards proponents refute that claim with saying, as with any technology it times time to get really good at it. Experienced CSS designers do not spend that much time fixing bugs. You can decide for yourself.
Table-based designs also rarely convey any meaning in the markup (in standards talk this is referred to as semantics). That is to say instead of putting paragraphs between paragraph tags (the meaningful way to represent paragraphs), sections of text are instead separated with HTML line breaks. This is rarely efficient. With paragraph tags <p>, </p>, the meaning that text is a paragraph is also conveyed, as well as the added ability to be able to control how much space separates each paragraph with the CSS margin property. There are loads of examples of this.
Also, instead of a design that is spread out and completely dependant on the markup of each page as is the case with table-centric designs, style sheets allow the presentation to be centralized. So if you update the style sheet, that change immediately takes affect on all pages of the website that that style sheet appears in. Old school designers tend to refute this with the argument that the same thing can be acheived with a reasonably robust templating system (aka PHP, ASP, etc).
With the latest modern browsers, the browsers even allow the style sheets to be switched allowing many different templates to be applied to the same markup. See http://csszengarden.com for an example of this. So in other works, table-less designs are much more flexible!
Some examples of high-profile CSS sites:
ESPN.com - /not/ a table-based design.
MSN.com - Even Microsoft is coming on board with standards, msn.com was recently redesigned as an XHTML / CSS -based design.
As far as Wrox.com, they could eliminate a hefty percentage of markup from under the hood. Especially, *gasp*, the tag, and make much better use of semantic markup. But most aspects of the forum itself is better served in tables, IMO. This is a situation where you are seeing a relationship between data, and those situations are best served in tables. So I'm not saying that all tables have to be eliminated, you'd be crazy to try to do so. What I am saying is it is no longer necessary to nest 'em ten deep and use transparent gif images to control spacing.
HTH!
Regards,
Rich
--
[ http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design
|
|
 |