nicht angemeldet
Hallo zusammen,
ich bin CSS-Neuling und habe folgendes Problem:
Ich erstelle einen Block (id=header), der sich mittig im Browser-Fenster positionieren soll. Zunächst mache diesen Block static und setze 'left-' und 'right-margin' auf 'auto'. Das funktioniert soweit.
Innerhalb dieser Box möchtee ich eine weitere graue Box positionieren, die schmäler ist als die erste, aber von der Breite her gleich. Da der umgebende Block der ersten Box "static" ist kann ich die zweite nicht absolut zu dieser positionieren.
Deshalb setze ich nun die erste Box auf 'position: absolut'. Dann funktioniert das mit der zweiten Box aber nun rutschen sie beide zusammen an den linken Rand des Browsers. Wie schaffe ich also die gewünschte Postionierung, so dass dennoch beide automatisch zentriert in der Mitte des Browser-Fensters übereinander angeordnet werden ?
Oder gibt es eine andere bessere Lösung, um das gewünschte Ergebnis zu erzielen ?
Der nachfolgende Code zeigt den letzten Stand --> beide Boxen sind absolut.
CODE:
<!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=utf-8" />
<title>Testseite</title>
<style>
* {margin: 0;} /* Alle Margins sind standardm垩g auf 0 gesetzt */
body {
font: 11px Verdana, Helvetica, Arial, sans-serif;
color: #222222;
background-color: #F2F2F2;
}
div#header {
position: absolute;
margin: 50px auto 0 auto;
border-top: 1px solid black;
border-bottom: 1px solid black;
background: #FFFFFF;
width: 800px;
height: 118px;
}
div#greybox {
position: absolute;
top: 1px;
background: #DFDBDB;
width: 800px;
height: 116px;
}
</style>
</head>
<body>
<div id="header">
<div id="greybox">
</div>
</div>
</body>
</html>
Auge