Hallo CSS-Freaks,
ich habe folgendes CSS im Einsaz um automatisch einen Schatten und Rahmen um Bilder im Contentbereich zu erzeugen:
PHP-Code:
.img-shadow {
float: left;
background: url(../03img/shadow-alpha.png) no-repeat bottom right !important;
background: url(../03img/shadow.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 10px;
}
.img-shadow img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #a7b2bc;
margin: -6px 6px 6px -6px;
padding: 4px;
border-bottom-color: #a9a9a9;
}
Im Source-Code des HTML-Dokumentes ist das ganze so eingebunden:
PHP-Code:
<div class="img-shadow"><img src="../03img/www.jpg" alt="World Wide Web" width="200" height="200" title="World Wide Web" /></div>
<p>Unentdeckt, unerforscht, unergründlich: Schicksal des provisorischen Substituts zwischen nutzloser Platzhalterei und dem nie formulierten Anspruch auf Beachtung. Ein Schattendasein auf der unbekannten Seite der Seite. Heute noch eine einsame, doch kräftige Kulturpflanze auf dem unbeackerten, öffentlich unbeachteten literarischen Brachland, auf dem die krude komponierte, sinnentleerte Worthülse regiert, bin ich morgen schon Kult.</p>
Leider steht der Text rechts neben dem Bild - was logischerweise durch das 'float:left' aus der class="img-shadow" hervorgeht.
Der Text soll aber unter dem Bild stehen.
Ich habe schon probiert dem ersten Absatz ein style="clear:both" mitzugeben, dann erscheint aber ein Geister-Absatz der locker 200px hoch ist.
Dasselbe passiert wenn man einen DIV-Container zwischen Absatz und Bildcontainer setzt dem ein "clear:both" zugewiesen ist.
Leider ist das 'float:left' aus der class="img-shadow" nötig um in allen Browsern, den Schatten korrekt anzuzeigen.
Weiß vielleicht jemand wie man das in den Griff bekommen könnte?
LG, Torsten
P.S. Hier gibts das Tutorial dazu:
http://www.alistapart.com/articles/cssdropshadows/
Hab ich dich nun falsch verstanden?
