xhtml + css

rockerBOO · #1 (**permalink**) 06-11-03, 12: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 · #2 (**permalink**) 06-11-03, 12: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

Code:

<!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 · #3 (**permalink**) 06-11-03, 12: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 · #4 (**permalink**) 06-11-03, 12:39 PM

You can use the tables way as well.

rockerBOO · #5 (**permalink**) 06-11-03, 12:39 PM

but i want it to be xhtml strict so no table there...

grimlock · #6 (**permalink**) 06-20-03, 10: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 · #7 (**permalink**) 06-20-03, 02: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.