Web Design Web Design Forum
Registration is free! Here you can view your subscribed threads, work with private messages and edit your profile and preferences Calendar Find other members Frequently Asked Questions Search
Home Web Design

Convenient web based access to our favorite web design Usenet groups
web design reviews

This is Interesting: Free Magazines for Graphics designers and webmasters  





Pages (3): [1] 2 3 »   Last Thread  Next Thread
Author
Thread Post New Thread   

Divs Can't Replace A Table
 

Tyler Carver




quote this post edit post

IP Loged report this post
Old Post  07-22-04 - 12:17 AM   
I would like to do something that seems so basic with two div's but I
don't think it can be done.  Tables can do it in a snap.  I was
convinced that css was the way to go for layout but without being able
to do even the easiest things, I don't see how.

Here is the table way to do the layout (I want this to work in
compliance mode in all modern browsers.):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-loose.dtd">
<html>
<head>
<style type="text/css">
body{margin:0px;height:100%;}
</style>
</head>
<body>
<table style="height:100%;" cellpadding="0" cellspacing="0">
<tr>
<td style="background-color:blue">
Some Text
</td>
<td style="background-color:red;width:100%;text-align:center">
<div style="width:400px">
A Lot More Text A Lot More Text
</div>
</td>
</tr>
</table>
</body>
</html>

I want to have the left column shrink to fit the text and the right
column to be a 100% of the left over viewport.  Sounds simple.

Here's what won't work in IE.  You'll notice that as soon as you touch
the 400px div with the viewport the whole thing drops to the bottom.

<!doctype html public "-//w3c//dtd html 4.0 transitional//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-loose.dtd">
<html>
<head>
<style type="text/css">
body{margin:0px;height:100%;}
#nav{float:left;height:100%;background-color:blue;}
#content{height:100%;background-color:red;text-align:center;}
</style>
</head>
<body>
<div id="nav">
Some Text
</div>
<div id="content">
<div style="width:400px">
A Lot More Text A Lot More Text
</div>
</div>
</body>
</html>


Tyler


[  Post Follow-Up to this message ]
Re: Divs Can't Replace A Table
 

Rainbow News Service




quote this post edit post

IP Loged report this post
Old Post  07-22-04 - 04:16 AM   
Tyler Carver wrote:

> I want to have the left column shrink to fit the text and the right
> column to be a 100% of the left over viewport.  Sounds simple.
>
> Here's what won't work in IE.  You'll notice that as soon as you touch
> the 400px div with the viewport the whole thing drops to the bottom.
>
> <!doctype html public "-//w3c//dtd html 4.0 transitional//en"
> "http://www.w3.org/tr/xhtml1/dtd/xhtml1-loose.dtd">
> <html>
>  <head>
>   <style type="text/css">
>    body{margin:0px;height:100%;}
>    #nav{float:left;height:100%;background-color:blue;}
>    #content{height:100%;background-color:red;text-align:center;}
>   </style>
>  </head>
>  <body>
>   <div id="nav">
>    Some Text
>   </div>
>   <div id="content">
>    <div style="width:400px">
>     A Lot More Text A Lot More Text
>    </div>
>   </div>
>  </body>
> </html>
>

Yes this is called a liquid layout, which you have created by using
relative positioning, which is the default for css. If you don't want
anything to move, use absolute positioning. Here is one way to do it:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
body{margin:0px;height:100%;}
#nav{position:absolute; background-color:blue; width:100px;
height:100%;}
#content{position:absolute; left:100px; width:100%; height:100%;
background-color:red; text-align:center; }
</style>
</head>
<body>
<div id="nav">
Some Text
</div>
<div id="content">
A Lot More Text A Lot More Text
</div>
</body>
</html>


[  Post Follow-Up to this message ]
Re: Divs Can't Replace A Table
 

Red




quote this post edit post

IP Loged report this post
Old Post  07-22-04 - 04:16 AM   
Tyler Carver wrote:

> I want to have the left column shrink to fit the text and the right
> column to be a 100% of the left over viewport.  Sounds simple.
>
> Here's what won't work in IE.  You'll notice that as soon as you touch
> the 400px div with the viewport the whole thing drops to the bottom.
>
> <!doctype html public "-//w3c//dtd html 4.0 transitional//en"
> "http://www.w3.org/tr/xhtml1/dtd/xhtml1-loose.dtd">
> <html>
>  <head>
>   <style type="text/css">
>    body{margin:0px;height:100%;}
>    #nav{float:left;height:100%;background-color:blue;}
>    #content{height:100%;background-color:red;text-align:center;}
>   </style>
>  </head>
>  <body>
>   <div id="nav">
>    Some Text
>   </div>
>   <div id="content">
>    <div style="width:400px">
>     A Lot More Text A Lot More Text
>    </div>
>   </div>
>  </body>
> </html>
>
>

This is called a liquid layout, which you have created by using relative
positioning, which is the default for css. If you don't want anything to
move, use absolute positioning. Here is one way to do it:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
body{margin:0px;height:100%;}
#nav{position:absolute; background-color:blue; width:100px;
height:100%;}
#content{position:absolute; left:100px; width:100%; height:100%;
background-color:red; text-align:center; }
</style>
</head>
<body>
<div id="nav">
Some Text
</div>
<div id="content">
A Lot More Text A Lot More Text
</div>
</body>
</html>


[  Post Follow-Up to this message ]
Re: Divs Can't Replace A Table
 

Jan Roland Eriksson




quote this post edit post

IP Loged report this post
Old Post  07-22-04 - 04:16 AM   
On 21 Jul 2004 14:24:02 -0700, xfreshy222-2@yahoo.com (Tyler Carver)
wrote:

>I would like to do something that seems so basic with two div's but I
>don't think it can be done...

Sure you can; there's a lot of interesting ideas that can be realized
already with CSS1 properties only.

<http://www.css.nu/articles/table-in-css.html>

You should of course forget the use of a "Transitional" <DOCTYPE...
declaration and make sure that your browser operates in its best
possible rendering mode.

--
Rex


[  Post Follow-Up to this message ]
Re: Divs Can't Replace A Table
 

Alan J. Flavell




quote this post edit post

IP Loged report this post
Old Post  07-22-04 - 04:16 AM   
On Wed, 21 Jul 2004, Red wrote:

> This is called a liquid layout, which you have created by using relative
> positioning, which is the default for css.

splendid.

> If you don't want anything to move, use absolute positioning.

If you don't want anything to move - think again.  It's going to move
anyway, for some readers, so you might do better to work -with- the
properties of the medium.  Some CSS properties are more suitable for
specific display situations, but are better avoided when the result
will be displayed over the whole range of display situations on the
WWW.

Unless you're a real wizard with graceful fallback techniques, but
then surely you'd know better than to ask for "nothing to move".

cheers


[  Post Follow-Up to this message ]
Re: Divs Can't Replace A Table
 

Spartanicus




quote this post edit post

IP Loged report this post
Old Post  07-22-04 - 09:16 AM   
Red <groups@reenie.org> wrote:

>This is called a liquid layout, which you have created by using relative
>positioning, which is the default for css.

Static is the default.

>If you don't want anything to
>move, use absolute positioning.

Many beginners make the mistake of thinking that css absolute
positioning is the way to create pixel prefect layouts that will look
the same in every css browser. Most of the time what they produce not
only does not achieve the desired goal, it fights the strengths of the
medium. There are relatively few cases where using css absolute
positioning makes sense, and in the cases where it does it requires
considerable skill to understand, implement and to reduce the associated
drawbacks (some are unavoidable).

Bottom line: stay away from absolute positioning until you are a skilled
css'er.

--
Spartanicus


[  Post Follow-Up to this message ]
Re: Divs Can't Replace A Table
 

Rainbow News Service




quote this post edit post

IP Loged report this post
Old Post  07-22-04 - 05:18 PM   
Spartanicus wrote:
> Red <groups@reenie.org> wrote:
>
> 
>
>
> Static is the default.
>
> 
>
>
> Many beginners make the mistake of thinking that css absolute
> positioning is the way to create pixel prefect layouts that will look
> the same in every css browser. Most of the time what they produce not
> only does not achieve the desired goal, it fights the strengths of the
> medium. There are relatively few cases where using css absolute
> positioning makes sense, and in the cases where it does it requires
> considerable skill to understand, implement and to reduce the associated
> drawbacks (some are unavoidable).
>
> Bottom line: stay away from absolute positioning until you are a skilled
> css'er.
>
Are you really saying don't use absolute postitioning at all ? Most
layout tutorials such as http://bluerobot.com/web/layouts/layout1.html
use it to some extent.

What in particular are the drawbacks of the particular code I posted ?
I'll post it again below, and here is an url:
http://www.reenie.org/test/csstest.htm

It seemed to do what the original poster wanted. How would you make this
layout without using absolute positioning ?
The only reason I made the content column absolute is that height:100%
doesn't work with relative positioning, and it seemed like the original
poster wanted the columns to fill the screen. The original poster also
complained that the right hand column moved to the bottom when the
screen is narrow- and I agree it can be ugly when that happens.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
body{margin:0px;height:100%;}
#nav{position:absolute; background-color:blue; width:100px;
height:100%;}
#content{position:absolute; left:100px; width:100%; height:100%;
background-color:red; text-align:center; }
</style>
</head>
<body>
<div id="nav">
Some Text
</div>
<div id="content">
A Lot More Text A Lot More Text
</div>
</body>
</html>


[  Post Follow-Up to this message ]
Re: Divs Can't Replace A Table
 

Red




quote this post edit post

IP Loged report this post
Old Post  07-22-04 - 05:18 PM   
Spartanicus wrote:
> Red <groups@reenie.org> wrote:
>
> 
>
>
> Static is the default.
>

relative positioning is static ? How is that ? Doesn't make any sense to
me. I seems that absolute positioning would be considered static, and
it surely is not the default.
> 
>
>
> Many beginners make the mistake of thinking that css absolute
> positioning is the way to create pixel prefect layouts that will look
> the same in every css browser. Most of the time what they produce not
> only does not achieve the desired goal, it fights the strengths of the
> medium. There are relatively few cases where using css absolute
> positioning makes sense, and in the cases where it does it requires
> considerable skill to understand, implement and to reduce the associated
> drawbacks (some are unavoidable).
>
> Bottom line: stay away from absolute positioning until you are a skilled
> css'er.
>
Are you really saying don't use absolute postitioning at all ? Most
layout tutorials such as http://bluerobot.com/web/layouts/layout1.html
use it to some extent.

What in particular are the drawbacks of the particular code I posted ?
I'll post it again below, and here is an url:
http://www.reenie.org/test/csstest.htm

It seemed to do what the original poster wanted.
The only reason I made the content column absolute is that height:100%
doesn't work with relative positioning, and it seemed like the original
poster wanted the columns to fill the screen. The original poster also
complained that the right hand column moved to the bottom when the
screen is narrow- and I agree it can be ugly when that happens.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
body{margin:0px;height:100%;}
#nav{position:absolute; background-color:blue; width:100px;
height:100%;}
#content{position:absolute; left:100px; width:100%; height:100%;
background-color:red; text-align:center; }
</style>
</head>
<body>
<div id="nav">
Some Text
</div>
<div id="content">
A Lot More Text A Lot More Text
</div>
</body>
</html>


[  Post Follow-Up to this message ]
Re: Divs Can't Replace A Table
 

Johannes Koch




quote this post edit post

IP Loged report this post
Old Post  07-22-04 - 05:18 PM   
Red wrote:
> Spartanicus wrote:
> 
>
> relative positioning is static ? How is that ? Doesn't make any sense to
>   me. I seems that absolute positioning would be considered static, and
> it surely is not the default.

Read in the CSS spec about positioning. Values are 'static', 'relative',
'absolute', or 'fixed'. The default is 'static'.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)


[  Post Follow-Up to this message ]
Re: Divs Can't Replace A Table
 

Red




quote this post edit post

IP Loged report this post
Old Post  07-22-04 - 05:18 PM   
Johannes Koch wrote:


>
> Read in the CSS spec about positioning. Values are 'static', 'relative',
> 'absolute', or 'fixed'. The default is 'static'.

OK sorry. I thought had I read it some book, but I guess I was mistaken.

red


[  Post Follow-Up to this message ]
Sponsored Links
 





All times are GMT. The time now is 04:36 AM. Post New Thread   
Pages (3): [1] 2 3 »   Previous Last Thread   Next Thread next
Stylesheets archive | Show Printable Version | Email this Page | Subscribe to this Thread

Popular forums

Adobe Photoshop forum Macromedia Flash Web Site Design
Dreamweaver FrontPage forum
JavaScript Forum XML forum
Style Sheets VRML
Forum Jump:
Rate This Thread:

 

XML RSS Feed web design latest articles Syndicate our forum via XML or simple JavaScript

Web Design archive  Database administration help  


Top Home  -  Register  -  Control Panel   -  Memberlist  -  Calendar  -  Faq  -  Search Top