DIV Problem und/oder eine andere Lösung?!

D

dshock

Guest
Hollerö zusammen!

Ich habe eine Page gebastelt, welche wie folgt aussieht:

prob.gif



Ich habe also insgesamt vier DIVs:
  • allcell - Höhe und Breite sind 100% und zentriert die DIVs in ihr.
  • headcell - feste Höhe und Breite. In ihr befinden sich Grafiken und die Navi.
  • includecell - feste Breite, variable Hähe. Via PHP Befehl werden die Dateien von der Navi in dieses DIV geladen.
  • footercell - feste Höhe und Breite. Copyight und Kontakt befindet sich in ihr.
der Code schaut folgendermaßen aus:
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>TITEL</title></title>
<link rel="stylesheet" type="text/css" media="screen" href="css/global.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/content.css">
<link rel="stylesheet" type="text/css" media="print" href="css/printglobal.css">
<link href="favicon.ico" rel="shortcut icon"
</head>
<body>
<?php  
include('scripts/config.php');
?>
<div id="allcell" class="center">
 <!--Alles. Bestimmt Höhe und Breite der Page und zentriert den Inhalt-->
<div id="headcell">
  <!--Kopfzelle. Navi + Head-->
 <ul id="navi">
   <li class="navi"><a href="index.php?section=inhalt01">Link 01</a></li>
   <li class="navi"><a href="index.php?section=inhalt02">Link 02</a></li>
   <li class="navi"><a href="index.php?section=inhalt03">Link 03</a></li>
   <li class="navi"><a href="index.php?section=inhalt04">Link 04</a></li>
   <li class="navi"><a href="index.php?section=inhalt05">Link 05</a></li>
   <li class="navi"><a href="index.php?section=inhalt06">Link 06</a></li>
   <li class="navi">|</li>
   <li class="navi"><a href="index.php?section=inhalt07">Link 07</a></li>
   <li class="navi"><a href="index.php?section=inhalt08">Link 08</a></li>
   <li class="navi"><a href="index.php?section=inhalt09">Link 09</a></li>
   <li class="navi"><a href="index.php?section=inhalt10">Link 10</a></li>
   <li class="navi">|</li>
   <li class="navi"><a href="index.php?section=inhalt11">Link 11</a></li>
 </ul>
</div>
 <!--Ende der Kopfzelle-->
<div id="includecell">
  <!--Inhalt. Wird mit dem PHP-include Befehl geladen-->
 <?php
   
 include('scripts/config.php');
 if(isset($_GET['section']) AND isset($content[$_GET['section']]))
 {
 if(!file_exists($content[$_GET['section']])) echo "Die Datei ist nicht vorhanden.";
 include $content[$_GET['section']];
 }
 else
 {
 include $content['error'];
 }
 
 ?>
  <!--Ender der Contentzelle-->
</div>
<div id="footercell">
  <!--Footer. Adresse, Copyright und Scroll Top-->
 Adresse, Copyright
  <!--Ender der Footerzelle-->
</div>
 <!--Ender der Allzelle-->
</div>
</body>
</html>



und die dazugehöroge CSS-Datei:

CODE
body{
margin:0px 0px 5px 0px;
background:#FFFFFF;
font-size:11px;
font-family:verdana, Arial, sans-serif;
color:#666666;
}

.center{
text-align:center;
}

ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

li{
float:left;
list-style:none;
padding:0;
margin:0;
}

.frame{
border:1px solid #999999;
background-color:#E6E6E6;
}

.center{
text-align:center;
}


/************************************************/
/* Zellen          */
/************************************************/

#allcell{
float:left;
width:100%;
height:98%;
}

#headcell{
position:relative;
top:0px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
width:992px;
height:205px;
text-align:left;
}

#includecell{
height:100%;
width:992px;
text-align:left;
}

#footercell{
position:relative;
bottom:0px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
width:992px;
height:86px;
text-align:center;
}


/************************************************/
/* Navi           */

#navi{
position:absolute;
top:30px;
left:194px;
width:791px;
height:13px;
}

.navi{
padding:0px 9px 0px 0px;
}



/************************************************/
/* Standart Links        */

a:link, a:visited{
text-decoration:underline;
color:#666666;
}

a:hover{
text-decoration:none;
background:#009C38;
color:#E6E6E6;
}

a:active{
text-decoration:underline;
color:#666666;
}




Mein Problem ist nun, dass im sämtlichen Gecko-Browsern die footercell direkt unter der headcell klebt, was falsch ist, da diese unter der contentcell bleiben soll, da sich die contentcell ja dem Inhalt der zu geladenen Dateien anpasst und die footercell immer unten bleiben soll.
Außerdem habe ich festgestellt, dass das nur so ist, wenn der Inhalt [also das, was in die includecell kommt] dynamisch geladen wird. Wenn ich also anstatt des PHP-Codes den "wirklichen" Inhalt hineinschreibe, ist alles okay. Aber ich möchte schon recht gerne den Inhalt includen
smile.gif


Kann man dies denn so, wie ich es gerne hätte, mit DIVs lösen, oder sollen Tabellen verwendet werden?!

Habt ihr vielleicht eine Lösung für mich ?!


Vielen lieben Dank schoneinmal im Voraus
smile.gif


Gruß
 
Zurück
Oben