Wau, super Beschreibung vielen dank hasst mir sehr geholfen
Endlich hab ichs hingekriegt. bin nun auch fleissig dran ein Buch über CSS zu lesen.
Der Container ist nun mittig zentriert im Browser, jedoch nur beim Firefox.
Opera kommt nur weiss und beim Ie der Grüne Hintergrund (Background body).
Hab ich da was übersehen?
Die Angaben sind alle in px, habs zuerst mittels % Versucht, jedoch musste ich die Abstände und Längenangaben in % bis auf 2. Dezimalstelle angeben.
Habe dann vermutett das dies die Browser nicht schlucken und geändert.
Aufgrund dass meine Homepage 1024x768px gross ist und fix, also kein gleiten (scrollen) in Vertikaler Richtung, wäre es schön gewesen wenn die Seitengrösse sich anpassen würde, jedoch nur bis zu einer Grösse welche über max-width und max-height. Ist das möglich so zu realisieren oder nicht, so dass es von den 3 Browsern (heutigem Standart geschluckt wird)?
Gruss und vielen Dank
``
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Aeroplaneworks-maintemplate-center</title>
<!-- TemplateEndEditable --><!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<style type="text/css">
<!--
html, body {
height: 100%;
margin: 0;
background: #7C8D87;
}
#top {
float: left;
width: 1px; height: 50%;
margin-bottom: -384px;
}
#container {
clear: left;
position: relative;
margin: 0 auto;
width: 1024px;
height: 768px;
background: #7C8D87;
}
#head-section {
position:absolute;
left:0px;
top:0px;
width:1024px;
height:225px;
z-index:1;
background-image: url(../img/1024x225_heacsection.jpg);
background-repeat: no-repeat;
}
#nav-section {
position:absolute;
left:0px;
top:225px;
width:204px;
height:543px;
z-index:2;
background-image: url(../img/204x543_Navsection_left.jpg);
background-repeat: no-repeat;
}
#main-section {
position:absolute;
left:204px;
top:225px;
width:820px;
height:526px;
z-index:3;
background-image: url(../img/820x526_mainsection_transparenty.png);
background-repeat: no-repeat;
}
#feet-section {
position:absolute;
left:204px;
top:751px;
width:820px;
height:17px;
z-index:4;
background-image: url(../img/820x17_feetsection_transparent.png);
background-repeat: no-repeat;
}
</style>
<script type="text/javascript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<div id="top"></div>
<div id="container">
<div id="head-section"></div>
<div id="nav-section"></div>
<div id="main-section"></div>
<div id="feet-section"></div>
</div>
</body>
</html>