Frage stellen
ich habe ein paar Fragen zum Positionieren von Elementen mit CSS.
Hier ein bsp. von w3c (klein wenig geändert):
- Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
*
{
margin:0;
padding:0;
}
.container
{
position: relative;
margin: 0 auto;
width: 80%;
height: 80%;
border: 1px solid green;
}
.right
{
position: relative;
margin: auto;
width: 90%;
height: 90%;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="container">
<div class="right">
<p><b>Note: </b>When aligning using the position property, always include the !DOCTYPE declaration! If missing, it can produce strange results in IE browsers.</p>
</div>
</div>
</body>
</html>
Wenn ich anstatt relative für den container absolute nehme
- Code: Alles auswählen
.container
{
position: absolute;
margin: 0 auto;
width: 80%;
height: 80%;
border: 1px solid green;
}
passiert folgendes:
Der komplette Container wird an die linke obere Ecke geschoben was noch zu erwarten war.
height nimmt 80% vom body ein, und width auch 80% vom body.
Bei relative war das nur bei width der Fall, nicht bei height.
Weshalb ist das so?
Klar es macht Sinn, da 80% im CSS für height und width angegeben wurden.
Aber warum wird dann bei relative nur width berücksichtigt, nicht auch height?
Bei absolute dagegen beides?
Dazu ist mir aufgefallen, dass beim Verkleinern des Browsers-Fenster sich die Breite anpasst so dass sie immer 80 % einnimmt, die Höhe aber nicht.
Die Höhe wird einfach "abgeschnitten", d.h. die Höhe passt sich nicht an das Verkleinern oder Vergrößern des Fensters an.
Womit hängt das zusammen?
Wie gesagt ich habe zu der Positionierung der Elemente mit CSS noch mehr Fragen,
aber ich möchte das erstmal mit relative und absolute und width und height klären.
Für jeden Tipp dankbar.
vg
jimmy
