nicht angemeldet
overflow:hidden wirkt in after-Block nicht/Hintergrund bei after
Hallo,
ich habe ein div, dass unten mit abgerundeten Ecken abschließen soll. Da ich ungern zusätzliche leere divs einfügen will, wollte ich es nach der Methode aus http://www.wssexpert.de/Style/Examples/007/roundshadow.html machen und für den IE halt auf die Rundungen verzichten.
Das div enthält zwei weitere divs, eines davon ist mit float:right rechts ausgerichtet. Insgesamt sollen die enthaltenen divs eine Mindesthöhe haben und die Höhe sich ansonsten nach dem Inhalt richten, das ganze soll dann einen Spaltenlook ergeben. Das rechts ausgerichtete div hat natürlich nur dann die gleiche Höhe wie das umfließende, wenn man von html/body aus Höhenangaben macht. Dann ändert sich aber nicht mehr die Höhe abhängig vom Inhalt, also habe ich als Workaround für das umfließende Element eine Hintergrundgrafik mit 1px Höhe und einer Breite von 2000px eingerichtet, repeat-y verwendet und in x-Richtung so positioniert, dass der Spaltenlook (Verhältnis immer 70/30) entsteht.
(Falls jemand dafür eine bessere Lösung parat haben sollte, die idealerweise nur mit background-color arbeitet, wäre ich übrigens auch dankbar.)
Dabei ergaben sich (im Firefox) folgende zwei Probleme:
1. Das Hintergrundbild des div ist auch hinter dem after-Block sichtbar, letzterer ist nicht wirklich nach dem div, sondern in ihm enthalten. Daher sind die Rundungen gar nicht sichtbar. Woran liegt das, ich dachte der Sinn von :after wäre, etwas nach einem Element einzufügen?
2. Um den Spaltenlook fortzusetzen, dachte ich an folgendes:
div#Inhalt:after {
width: 100%;
height: 16px;
padding-right: 30%;
content: url(../images/corner-bl.png);
background-image: url(../images/corner-br.png);
background-position: bottom right;
overflow: hidden;
display: block;
}
Ich dachte mir, dass das Padding und overflow:hidden dafür sorgen würden, dass die 1400px Breite Grafik aus corner-bl.png nur bis zu einer Breite von 70% des Elternelements (gleiche Breite wie vorstehendes div) dargestellt würde, so dass rechts davon der background sichtbar sein würde. Das content-Bild wird jedoch immer vollständig angezeigt. Testweise habe ich unter content auch mal einen langen Text eingetragen. Dieser wird auch nicht abgeschnitten. Die Box an sich hat in jedem Fall die richtige Breite, das konnte ich durch einen Border feststellen.
Ist overflow:hidden bei solchen before- bzw. after-Blöcken nicht wirksam?
Ich hoffe, dass ich das jetzt halbwegs verständlich beschrieben habe. Schon mal vielen Dank für eure Hilfe!
Gruß
Hanno
-
Moin!
- Das Hintergrundbild des div ist auch hinter dem after-Block sichtbar, letzterer ist nicht wirklich nach dem div, sondern in ihm enthalten. Daher sind die Rundungen gar nicht sichtbar. Woran liegt das, ich dachte der Sinn von :after wäre, etwas nach einem Element einzufügen?
div:after { ... }spricht ein Pseudoelement an, dass man sich im HTML-Code so vorstellen muss:<div>Content<pseudospan></pseudospan></div>Entsprechendes gilt für :before.
- Sven Rautenberg
--
"Love your nation - respect the others."-
Hallo!
div:after { ... }spricht ein Pseudoelement an, dass man sich im HTML-Code so vorstellen muss:<div>Content<pseudospan></pseudospan></div>Entsprechendes gilt für :before.
Danke, das erklärt dieses Verhalten. Die Beschreibung auf der Seite, die ich oben nannte ist dann etwas missverständlich:
"Die 'display:block' Eigenschaft sorgt dafür dass die verwendeten Bildränder als Blockelemente behandelt werden und somit über und unter den Hauptinhalt gesetzt werden anstatt in die erste und letzte Zeile des Selbigen."
Es funktioniert dort nur, weil die Bilder für die oberen und unteren Ränder keine Transparenz enthalten. D.h. ich müsste mein Hintergrundbild aus dem div anders verbauen. :-(