Stylesheets - Liquid design question

Author

Liquid design question

2004-11-22, 11:22 pm

Please, bare with me. I'm new to CSS and would like to ask for some
advice on my current project. I have an existing table based layout
that serves as the main template for a .Net application I've been
working with. I would like to convert this layout to css based liquid
design. I would like the pages to stretch both horizontally and
vertically as needed. The layout needs to consist of a Pre-Header area
that stretches across the entire page. The header area follows also
stretched across the entire page. An area for bread crumbs follows
strectched across the entire page. Beneath these three bars I would
like a nav. area to the left with a width of approx. 30% of the page
and height that fills the remainder of the page. To the right of the
nav. area should be my content area with a width that stretches across
the rest of the page and a height that stretches almost the rest of
the page but leaves room for a footer area underneath and to the right
of the nav. area. All the areas should flow together with no gutter
areas in between. Any information on to best improve and achieve a
liquid design is appreciated. It seems this design would be fairly
trivial using tables, but it also seems there should be a better way
to do it using css. Here is my current style sheet:
body{
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-family:Georgia;
height:100%;
}

div.PreHeaderArea{
background-color:#330099;
color:#FFFF00;
margin:0px;
height:1%;
z-index:6;
}
..ParentSiteTitle{
font-weight:bold;
font-size:10px;
color:#FFFF00;
}
..SiteNavLink{
FONT-SIZE: 10px;
color:#FFFF00;
TEXT-DECORATION: underline;
}

div.HeaderArea{
background-color:#FFFF00;
color:#330099;
margin:0;
height:6%;
top:1%
z-index:4;
}
..SiteTitle{ FONT-SIZE: 25px;}
div.BreadCrumbArea{
background-color:#330099;
color:#FFFF00;
margin:0;
height:3%;
top:7%
z-index:5;
}
..BreadCrumbText{
font-size:10px;
font-weight:bold;
color:#FFFF00;
}
div.NavigationArea{
float:left;
background-color:#330099;
color:#FFFF00;
width:25%;
height:80%;
top:10%;
z-index:6;
}
div.ContentArea{
background-color:silver;
float:right;
left:25%;
top: 10%;
height:77%;
width:75%;
z-index:8;

}
div.FooterArea{
background-color:#FFFF00;
float:left;
width:75%;
height:3%;
left:25%;
top:90%;
z-index:2;
}

Neal

2004-11-22, 11:22 pm

On 22 Nov 2004 16:17:38 -0800, oj <oaguayo75@yahoo.com> wrote:

> Please, bare with me.

Ooh, exciting! Though you probably mean "bear with me". "Bare with me"
means we both get naked.

> ... The layout needs to consist of a Pre-Header area
> that stretches across the entire page. The header area follows also
> stretched across the entire page. An area for bread crumbs follows
> strectched across the entire page. Beneath these three bars I would
> like a nav. area to the left with a width of approx. 30% of the page
> and height that fills the remainder of the page. To the right of the
> nav. area should be my content area with a width that stretches across
> the rest of the page and a height that stretches almost the rest of
> the page but leaves room for a footer area underneath and to the right
> of the nav. area. All the areas should flow together with no gutter
> areas in between.

For future reference, this is so much easier with an uploaded example and
a posted URL.

Basically, to have a footer you must float the columnar material above and
set the footer as clear: both;.

After your full-width material, and assuming you want the content before
the column in the code:

..content {float: right; width: 69%;}
..nav {float: left; width: 30%;}
..footer {clear: both;}

This should get you started. To eliminate gutter space, control margins
and padding in the CSS.

More questions? Ask.

Andrew Thompson

2004-11-23, 4:23 am

On Mon, 22 Nov 2004 19:49:43 -0500, Neal wrote:

>
> Ooh, exciting! Though you probably mean "bear with me". "Bare with me"
> means we both get naked.

Sorry for taking this *so* off topic, but that reminded me of some
common graffiti editing done to a sign on Sydney's urban trains..

"At night, travel near the guard's compartment, marked with a blue light"

becomes..

"At night, rave near the gi rl's compartment, na ked with a blue light"

I'd probably give it a go, ..if I could find the girl's compartment. ;-)

--
Andrew Thompson
http://www.PhySci.org/codes/ Web & IT Help
http://www.PhySci.org/ Open-source software suite
http://www.1point1C.org/ Science & Technology
http://www.LensEscapes.com/ Images that escape the mundane

2004-11-23, 7:26 pm

Neal <neal413@yahoo.com> wrote in message news:<opshv685s66v6656@news.individual.net>...
> On 22 Nov 2004 16:17:38 -0800, oj <oaguayo75@yahoo.com> wrote:
>
>
> Ooh, exciting! Though you probably mean "bear with me". "Bare with me"
> means we both get naked.

Aah yes, you are correct I do not wish to get naked! :)
>
> For future reference, this is so much easier with an uploaded example and
> a posted URL.

I'm working on this via my work server. Any recommendations on a free
site to store a web page for viewing without having a bunch of
advertising banners on the page as well.
>
>
> .content {float: right; width: 69%;}
> .nav {float: left; width: 30%;}
> .footer {clear: both;}

Do I insert your recommended property values in addition to the ones
already defined in my stylesheet? Also, when I view the page on my
laptop it looks almost right, but when I view the page on my company's
test webserver it looks far from perfect. Both use IE 6.0.

2004-11-23, 7:26 pm

Andrew Thompson <SeeMySites@www.invalid> wrote in message > Sorry for taking this *so* off topic, but that reminded me of some
> common graffiti editing done to a sign on Sydney's urban trains..
>
> "At night, travel near the guard's compartment, marked with a blue light"
>
> becomes..
>
> "At night, rave near the gi rl's compartment, na ked with a blue light"
>
> I'd probably give it a go, ..if I could find the girl's compartment. ;-)

You have way too much time on your hands. :)

Genomega

2004-11-23, 7:26 pm

"oj" <oaguayo75@yahoo.com> wrote in message
news:aba00e68.0411221617.22404f07@posting.google.com...
> Please, bare with me. I'm new to CSS and would like to ask for some
> advice on my current project. I have an existing table based layout
> that serves as the main template for a .Net application I've been
> working with. I would like to convert this layout to css based liquid
> design. I would like the pages to stretch both horizontally and
> vertically as needed. The layout needs to consist of a Pre-Header area
> that stretches across the entire page. The header area follows also
> stretched across the entire page. An area for bread crumbs follows
> strectched across the entire page. Beneath these three bars I would
> like a nav. area to the left with a width of approx. 30% of the page
> and height that fills the remainder of the page. To the right of the
> nav. area should be my content area with a width that stretches across
> the rest of the page and a height that stretches almost the rest of
> the page but leaves room for a footer area underneath and to the right
> of the nav. area. All the areas should flow together with no gutter
> areas in between. Any information on to best improve and achieve a
> liquid design is appreciated. It seems this design would be fairly
> trivial using tables, but it also seems there should be a better way
> to do it using css. Here is my current style sheet:
> body{
> margin-left: 0px;
> margin-top: 0px;
> margin-right: 0px;
> margin-bottom: 0px;
> font-family:Georgia;
> height:100%;
> }
>
> div.PreHeaderArea{
> background-color:#330099;
> color:#FFFF00;
> margin:0px;
> height:1%;
> z-index:6;
> }
> .ParentSiteTitle{
> font-weight:bold;
> font-size:10px;
> color:#FFFF00;
> }
> .SiteNavLink{
> FONT-SIZE: 10px;
> color:#FFFF00;
> TEXT-DECORATION: underline;
> }
>
> div.HeaderArea{
> background-color:#FFFF00;
> color:#330099;
> margin:0;
> height:6%;
> top:1%
> z-index:4;
> }
> .SiteTitle{ FONT-SIZE: 25px;}
> div.BreadCrumbArea{
> background-color:#330099;
> color:#FFFF00;
> margin:0;
> height:3%;
> top:7%
> z-index:5;
> }
> .BreadCrumbText{
> font-size:10px;
> font-weight:bold;
> color:#FFFF00;
> }
> div.NavigationArea{
> float:left;
> background-color:#330099;
> color:#FFFF00;
> width:25%;
> height:80%;
> top:10%;
> z-index:6;
> }
> div.ContentArea{
> background-color:silver;
> float:right;
> left:25%;
> top: 10%;
> height:77%;
> width:75%;
> z-index:8;
>
> }
> div.FooterArea{
> background-color:#FFFF00;
> float:left;
> width:75%;
> height:3%;
> left:25%;
> top:90%;
> z-index:2;
> }

I just put everything inside a container.

#container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}

Mark Eggers

2004-11-23, 7:26 pm

On Mon, 22 Nov 2004 16:17:38 -0800, oj wrote:

> Lots of code and stuff snipped

Here are two good references that can be hacked to do what you want:

This link talks about creating liquid designs with negative margins.
http://www.alistapart.com/articles/negativemargins/

This link talks about fake columns.
http://www.alistapart.com/articles/fauxcolumns/

Both of these ideas are useful. For each area on your page, you can
contain a 2 or three column liquid design in a <div></div>. Then you just
stack the results in the order that you would like.

I've not been as happy with the three column effect as I have with the
two column layout. However, I can get around that with some games played
with absolute positioning for now.

Other approaches that seem to work well can be found in Chapter 7 of the
book CSS Cookbook by Christopher Schmitt (O'Reilly). Some slight hacking
about is needed for these solutions, especially to deal with the many
broken parts of Internet Explorer.

To fix the layout in Internet Explorer, you'll need to see some box model
hacks:

http://webdesign.about.com/cs/css/a/aaboxmodelhack.htm
http://positioniseverything.net/exp...hreepxtest.html

Armed with the above information you should be able to construct
cross-browser layouts that actually look consistent.

Hope this helps

/mde/
just my two cents . . .

Alan J. Flavell

2004-11-23, 7:26 pm

On Tue, 23 Nov 2004, Mark Eggers wrote:

[...]
> Armed with the above information you should be able to construct
> cross-browser layouts that actually look consistent.

Which seems to me to be a fatuous waste of time, since none of your
*real* users are going to compare your web site in two different
browsers and award points for consistency.

If your lords and masters set visual consistency as a design
requirement, then they're wasting their own money, so go ahead and
grab as much of it as you can. But if I'm honest, I would try to
explain to them why I reckon that they're wrong. One of the original
*intentions* of the WWW was to display the same information in very
diverse situations - there is simply no reason that it has to look the
same, and lots of reasons for it to look different.

In fact as comparing two very different browsing situations I'm sure
that I would *like* the results to be inconsistent with each other,
but optimally usable in each.

So I'd say make it look good in a specification-conforming browser in
the usual range of visual settings; and make sure that it's at least
usable in any other kind of browsing situation. Optimise to taste,
but *don't* aim for pointless consistency.

Neal

2004-11-23, 7:26 pm

oj wrote:
> Neal wrote
>
> Do I insert your recommended property values in addition to the ones
> already defined in my stylesheet? Also, when I view the page on my
> laptop it looks almost right, but when I view the page on my company's
> test webserver it looks far from perfect. Both use IE 6.0.

I was trying to avoid critiquing the stylesheet... oh well, here goes.

body{
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-family:Georgia;
height:100%;
}

- No need for a unit on 0 values.
- In font-family, setting just Georgia means the user's default font -
whatever it may be - will be used if Georgia is not installed. If you set
a font, it's probably a good idea to end with a generic - serif or
sans-serif, depending on what you're after look-wise.

div.PreHeaderArea{
background-color:#330099;
color:#FFFF00;
margin:0px;
height:1%;
z-index:6;
}

- Without knowing the content of this div, I cannot comment on whether
height: 1% is appropriate. I highly doubt it is.
- z-index should not need to be used if you do it right. z-index simply
tells the browser how to handle overlaps. The goal, however, is to have no
overlaps.
- Though, good that you set both color and background-color. You might
consider setting body with these too, in the event some elements don't
meet neatly.

..ParentSiteTitle{
font-weight:bold;
font-size:10px;
color:#FFFF00;
}

- background-color?
- px is not a suitable unit for text on the web. Use % or em, they are the
only units that will work properly - that is, they will resize so the user
can read your page, while px (and pt) cannot resize in all UAs.

..SiteNavLink{
FONT-SIZE: 10px;
color:#FFFF00;
TEXT-DECORATION: underline;
}

- Though case is not critical, mixing case is sloppy coding. This isn't an
error though.
- Links will be underlined anyhow, this last declaration is not needed.

div.HeaderArea{
background-color:#FFFF00;
color:#330099;
margin:0;
height:6%;
top:1%
z-index:4;
}

- More of the same as above.

..SiteTitle{ FONT-SIZE: 25px;}

- No, no, no...

div.BreadCrumbArea{
background-color:#330099;
color:#FFFF00;
margin:0;
height:3%;
top:7%
z-index:5;
}

- See above.

..BreadCrumbText{
font-size:10px;
font-weight:bold;
color:#FFFF00;
}

- Again.

div.NavigationArea{
float:left;
background-color:#330099;
color:#FFFF00;
width:25%;
height:80%;
top:10%;
z-index:6;
}

- top: is only meaningful when you set the property position. Floating is
NOT the same as position.

div.ContentArea{
background-color:silver;
float:right;
left:25%;
top: 10%;
height:77%;
width:75%;
z-index:8;

}

- You've been doing hex color, and now you use a name. Not incorrect, but
it's inconsistent.
- Again, top is not used with float.

div.FooterArea{
background-color:#FFFF00;
float:left;
width:75%;
height:3%;
left:25%;
top:90%;
z-index:2;
}

- Don't float this. Instead, use clear: both; and the div will drop below
both content and column.
- Again, the "top" and "left" are meaningless. What it looks like you want
is the div content to start 25% across the page, right? If so,
margin-left: 25%; does the trick nicely. No need to specify width now, as
it will be the remainder of the viewport.

Hope this clears up any problems. If I were you, I'd (temporarily) dump
the z-index, all the tops and lefts etc., change that footer to clear, and
use % and/or ems for font-sizes.