ich bin ein CSS-Neuling. Da ich nun die Arbeit eines Erfahrenen Webentwicklers übernehmen muss (und möchte) habe eine Frage zu dem verhalten von Layern für ein Jello-Layout:
Ich möchte ein <div> mittig auf der Seite zentrieren, in dem ich dann andere <div>s absolut positionieren kann. Das müsste doch möglich sein, oder? Momentan wird zwar der Layer den ich in der Mitta haben möchte auch in die Mitte gepackt, jedoch werden die anderen Layer absolut von Seitenrand und nicht absolut vom mittigen Layer plaziert. Wie kann man das beheben?
Hier meine Quelltexte:
XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Petri Media GmbH - Lösungen für Marketing und IT</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="petrimedia.css" />
</head>
<body>
<div id="page">
<div id="inhalt">
<p>
<img src="bitmap/startseite/ihr_unternehmen.jpg" alt="Die passende Leistung für Ihr Unternehmen" />
</p>
<p> Je nach größe der Unternehmung halten wir verschiedene Leistungs- sowie
Beratungsprogramme bereit und Verfahren nach verschiedenen Methoden bezüglich
Beratung, Leistungserstellung, Kundenbetreuung und Service.
</p>
</div>
<div id="kopfleiste">
<img src="bitmap/shared/petri_media_kopf.jpg" alt="Petri Media GmbH - Lösungen für Werbung und IT" />
</div>
<div id="navigation">
<p> <img src="bitmap/shared/petri_media_logo.jpg" alt="Petri Media GmbH, Logo" />
</p>
<p><img src="bitmap/shared/spacer.gif" alt="Einrückender Platzhalter" width="24" height="5" /><span class="pfeilmarkierung">»
</span><a href= "startseite.html" title="Petri Media, Startseite">Startseite</a><br />
[...]
</div>
</div>
</body>
</html>
HIER MEIN CSS:
body {
font-family: Arial, Helvetica, Verdana, sans-serif;
color: #444444;
font-size: 11px;
margin: 0px;
background-image: url(bitmap/shared/hintergrund_body.jpg);
}
#page {
width: 896px;
height: 666px;
padding-top: 0px;
background-color: #123954;
margin-left: auto;
margin-right: auto;
background-image: url(bitmap/shared/petri_media_inhaltsbereich.jpg);
}
#inhalt {
position: absolute;
top: 92px;
left: 225px;
width: 665px;
background-color: #eeeeee;
}
#navigation {
position: absolute;
top: 92px;
left: 10px;
font-weight: bold;
font-size: 12px;
width: 230px;
}
#kopfleiste {
position: absolute;
top: 0px;
left: 0px;
}
.pfeilmarkierung {
font-family: verdana, sans-serif;
}
/*PSEUDO - KLASSEN für LINKS */
a:link {
color: #444444;
text-decoration: none;
}
a:hover {
color: #cc0000;
text-decoration: none;
}
a:visited {
color: #444444;
text-decoration: none;
}
das XHTML strict und das CSS sind beide anscheinend valide. Daher kann es sich doch nur um einen konzeptionellen Fehler handeln, oder?
![;-]](./images/smilies/icon_impudently.gif "Extrem frech"){kind=icon}
) dem <div> "Page" zuweise, wird diese nicht wirklich angezeigt, weil das <div> "Page" keinen eigenen Inhalt und damit keine eigene Höhe hat. Der komplette Inhalt steht in den <div>s "navigation" und "inhalt", aber nie direkt im <div> "Page" (2).
