PDA

View Full Version : xhtml + css

rockerBOO
06-11-03, 01:15 PM
I want to make a page fully xhtml strict compliant, but i am having some css problems.

So what i want to do is have the page formated like this.

| HEADER +++++++++++++ |
| MENU | MAINCONTENT +++|
| ++++ | ++++++++++++++|
| FOOTER +++++++++++++|

+ = spacing.

but when i do that, the main content either goes below the menu or goes behind the menu, depending on the browser. If anyone could help out i would appeciate it very much. Thanks.

rockerBOO
daynah
06-11-03, 01:34 PM
Hi rockerBOO,

I would just use absolute (or relative) CSS positioning for this layout. Just be sure to separate your data from your style. And validate your page at http://validator.w3.org :)



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml/DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.headerDiv
{
position: absolute;
top: 0px;
left: 0px;
}
.menuDiv
{
position: absolute;
top: 80px;
left: 10px;
height: 300px;
width: 180px;
}
.footerDiv
{
position: absolute;
bottom: 0px;
left: 0px;
}
.maincontentDiv
{
position: absolute;
top: 310px;
left: 190px;
width: 400px;
}
<style>
</head>

<body>

<div class="headerDiv"><img src="header.jpg"></div>
<div class="menuDiv">
- menu1<br />
- menu1<br />
- menu1<br />
- menu1<br />
- menu1<br />
</div>
<div class="maincontentDiv">
The content goes here. The content
goes here. The content goes here.
The content goes here. The content
goes here. The content goes here.
The content goes here. The content
goes here. The content goes here.
The content goes here. The content
goes here. The content goes here.
The content goes here. The content
goes here. The content goes here.

</div>
<div class="footerDiv"><img src="footer.jpg"></div>

</body>
</html>
rockerBOO
06-11-03, 01:37 PM
that will work with everything but the footer, because that will stick to the bottom of the browser window and mess up what i am viewing. I was hoping to go into the relative area of this, but who knows if that will work. Thanks though. I will use that if all goes bad.
daynah
06-11-03, 01:39 PM
You can use the tables way as well. :)
rockerBOO
06-11-03, 01:39 PM
but i want it to be xhtml strict so no table there...
grimlock
06-20-03, 11:54 AM
Hi there,

I guess it is hard to get the footer to cross the whole page again without breaking up the whole design. Try to integrate the Menu as a nested float in the central box.
eg: http://glish.com/css/1.asp

That way you have three boxes on the page. header main and footer, with a floating menu in the main box.

Hope it helps

Ciao
Grimlock
rockerBOO
06-20-03, 03:47 PM
I have worked on it, and i think i finally got it working, learn a lot trying to do this though. I will try to keep you all updated.