nicht angemeldet
Absolute Positionierung
0 
Auge
0 0
Absolute Positionierung
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>
-
Hallo
Der nachfolgende Code zeigt den letzten Stand --> beide Boxen sind absolut.
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;
}Es fehlen die Angaben zu
topundleft. Du bekommst damit aber Probleme, deinen Header mittig anzuzeigen.Besser ist es,
position:relative;ohne Angabe zutopundlefteizusetzen. Damit ist das Element aus dem normalen Dokumentfluss genommen, behält aber, wegen der fehlenden Positionsangaben, seine natürliche Position bei.Deine 'greybox' wird nun absolut zum Elternelement positioniert.
Tschö, Auge
--
Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
(Victor Hugo)
Veranstaltungsdatenbank Vdb 0.1 -
Hallo,
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.Soweit vollkommen richtig.
Deshalb setze ich nun die erste Box auf 'position: absolut'.
Diese Schlussfolgerung ist nicht zwingend. Die Eigenschaft position:relative existiert auch und ist auch _nicht_ static.
viele Grüße
Axel
-
Hallo zusammen,
Danke für eure Hilfe.
Das war's. Klappt jetzt wie erhofft.Gruß
Marky