Stylesheets - Liquid design question

Author

Liquid design question

2004-11-29, 4:16 am

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-29, 4:16 am

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.

Genomega

2004-11-29, 12:21 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%;
}

Neal

2004-11-29, 12:21 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.

Mark Eggers

2004-11-29, 12:21 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 . . .