Position Absolute Kindelemente
Bine
- css
<html>
<head>
<title>Test</title>
</head>
<body text="#000000" bgcolor="#FFFFFF" style="margin:0;">
<h1 style="background-color:#00AFFF;">Test</h1>
<div style="filter:alpha(opacity=60);position:absolute;top:0;left:0;background-color:#C0FF00;width:100%;height:100%;">
<p style="border:5px solid red;">
<b>Innen </b>
</p>
</div>
</body>
</html>
Hi, was muss ich tun damit Elemente innerhalb eines abolute positionierten Elementes sich daran anpassen?
Im Beispiel überlagert sich alles.
Bine
Hi
was muss ich tun damit Elemente innerhalb eines abolute positionierten Elementes sich daran anpassen?
Was _genau_ verstehst du unter "sich daran anpassen"?
so long
Ole
(8-)>
hi,
Hi, was muss ich tun damit Elemente innerhalb eines abolute positionierten Elementes sich daran anpassen?
Was soll sich woran anpassen?
Im Beispiel überlagert sich alles.
Erst mal holst du den Browser bitte aus dem Quirks Mode heraus, damit die Beobachtungen anhand deines Beispiels auch nur irgendeine Aussagekraft gewinnen können.
gruß,
wahsaga
Hi,
Was soll sich woran anpassen?
Na halt alle Kindelemente innerhalb des absolute positionierten
Elementes, hatte ich aber bereits erwähnt.
Im Beispiel überlagert sich alles.
Erst mal holst du den Browser bitte aus dem Quirks Mode heraus, damit die Beobachtungen anhand deines Beispiels auch nur irgendeine Aussagekraft gewinnen können.
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
Bine
Yerf!
Was soll sich woran anpassen?
Na halt alle Kindelemente innerhalb des absolute positionierten
Elementes, hatte ich aber bereits erwähnt.
Damit wäre das 'was' geklärt, fehlt noch das 'woran'...
Oder wunderst Du dich etwa, weshalb der Absatz die Überschrift überlagert?
Gruß,
Harlequin
Hi,
Oder wunderst Du dich etwa, weshalb der Absatz die Überschrift überlagert?
upps, hatte einen Fehler und bereits korregiert beim
Beispielcode,ohne zu merken. Klappt also doch der
Fehler war komma anstatt semikolon:
position:absolute;top:0,left:0;background-color:#C0FF00;
position:absolute;top:0;left:0;background-color:#C0FF00;
Eine Frage hätte ich allerdings doch noch.
<p style="margin:0 auto;border:5px solid red;width:300px;">
<b>Innen </b>
</p>
Der Absatz sollte doch eigentlich zentriert sein, ist er aber nicht.
Ich könnte zwar text-align missbrauchen dazu, aber will ja nicht Text ausrichten sondern ein <p> Blockelement, daher erscheint mir das unsauber. Warum klappt margin: 0 auto; nicht?
Bine
Yerf!
Der Absatz sollte doch eigentlich zentriert sein, ist er aber nicht.
Getestet im IE? Du musst bei dem Transisitonal-Doctype noch die DTD mit angeben, damit der IE nicht in den Quirksmode geht (da kann er kein margin:auto).
Gruß,
Harlequin
Getestet im IE? Du musst bei dem Transisitonal-Doctype noch die DTD mit angeben, damit der IE nicht in den Quirksmode geht (da kann er kein margin:auto).
Hi, ja IE6 SP2.
Wenn ich DTP angebe geht es zwar, dafür ist die Höhe vom Div dann ignoriert.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Bine
Yerf!
Wenn ich DTP angebe geht es zwar, dafür ist die Höhe vom Div dann ignoriert.
Hm, das deutet darauf hin, dass noch etwas nicht ganz den regeln von CSS entspricht. Vermutlich fehlt noch ein
html, body {height:100%;}
damit die Elternelemente des DIVs (auf die sich die 100% beim DIV beziehen) ebenfalls die volle Höhe haben.
Gruß,
Harlequin
Hi,
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
Soll das ein Doctype werden? Dann beachte die Groß-/Kleinschreibung.
cu,
Andreas