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;
}