Suche im Forum:
Suchen


Autor Nachricht
Beitrag05.09.2009 um 17:48 (UTC)    
Titel: [erledigt] CSS3: Brauche Hilfe beim Box-Schatten

Hi Leute,

ich habe mit Begeisterung ( Very Happy ) CSS3 kennen gelernt. Jetzt möchte ich einen Schatten um einen Div-Block erzeugen lassen. Den Code dafür habe ich von http://www.css3.info/preview/box-shadow/ , nämlich diesen:
Zitat:
box-shadow: -10px -10px 0px #000;
border-radius: 5px;
padding: 5px 5px 5px 15px;

Als ich ihn dann in den Div-Block einfügte , der vorher so aussah,

Zitat:
<div style="border: 1px solid rgb(0, 0, 0); padding: 10px; background-color: rgb(102, 0, 204); -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px;">
<div>Hier schreibe ich den Text rein!</div>
</div>


bekam ich folgenden Code:


Zitat:
<div style="border: 1px solid rgb(0, 0, 0); padding: 10px; background-color: rgb(102, 0, 204); -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; box-shadow: -10px -10px 0px #000;
border-radius: 5px;
padding: 5px 5px 5px 15px;">
<div>Hier schreibe ich den Text rein!</div>
</div>


Leider entstand dann kein Schatten um die Box. Kann mir jemand sagen, ob ich die Codes vielleicht falsch zusammengesetzt habe, oder ob es aus einem anderen Grund nicht funktionert?
Ich würde mich sehr über Antworten freuen,

mfG stopferbedia

P.S.: Ich habe als Browser Mozilla Firefox 3.5, da müsste CSS3 ja eigentlich funktioniern!


Zuletzt bearbeitet von stopfermaxi am 06.09.2009, 16:26, insgesamt einmal bearbeitet
Beitrag05.09.2009 um 18:17 (UTC)    
Titel:

Hi,

[andere Lösung]

dein Code ist nicht valide, er folg also nicht den Offiziellen standarts des W3C. Tags wie
Zitat:
-moz-border-radius
werden nur von Mozilla Firefox interpretiert. Andere Browser (IE, Opera, Safari usw.) ignorrieren diese, die Box wird also eckig dargestellt.

Bei mir hat sich CSS3 nochnicht so wirklich durchgerungen, da die einige Sachen einfachermit Grafiken zu lösen sind. So auch dein Problem.

Mein Vorschlag wäre, einfach eine Grafik mit Runden exken und einem Schatten zu erstellen und dioese als Hintergrundbild des Containers zu setzen.
Das würde dann ungefähr so aussehen:

Zitat:

<div style="background-image: url(http://bild-adresse.png);padding: 5px 5px 5px 15px;">
<div>Hier schreibe ich den Text rein!</div>
</div>


Viel kürtzer und valide. Beim Rot markierten wird die Bildadresse angegeben. Dieser Code wird dann auch von jedem Browser interpretiert.
Zum Vergleich nochmal deins:

Zitat:
<div style="border: 1px solid rgb(0, 0, 0); padding: 10px; background-color: rgb(102, 0, 204); -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; box-shadow: -10px -10px 0px #000;
border-radius: 5px;

padding: 5px 5px 5px 15px;">
<div>Hier schreibe ich den Text rein!</div>
</div>


PS: Nur das Fett markierte ist wirklich CSS 3. Alles, was ich blau markiert habe, ist Firefox spezifisch. Der Rest ist CSS 2.1 Wink

- edit -
mehr zu den Eigenschaften von Firefox findest du auf http://www.css4you.de/mozproperty.html .
______________



Zuletzt bearbeitet von the-fun-factory am 05.09.2009, 19:22, insgesamt 2-mal bearbeitet
Beitrag05.09.2009 um 18:21 (UTC)    
Titel:

Vielen Dank für die schnelle Antwort, ich probiers sofort aus Very Happy
Beitrag05.09.2009 um 18:27 (UTC)    
Titel:

Nochmal Danke für die Mühe!
Der Code funktioniert auch einwandfrei, aber ich habe vor, mehrere Texte mit so einem Hintergrund zu versehen und da ändert sich auch ständig die erforderliche Höhe für das Bild und das wäre dann ein größerer Aufwand.
Aber wenn es keine andere Lösung gibt, werde ich es natürlich nach deinem Tipp machen!


Zuletzt bearbeitet von stopfermaxi am 05.09.2009, 19:28, insgesamt einmal bearbeitet
Beitrag05.09.2009 um 18:33 (UTC)    
Titel:

du könntest auch einfach drei div's erstellen, und sie Untereinander anordnen.
Der erste ist dann die rundung oben. Der zweite der Content bereich, so gestaltet, dass er sich inner wiederhohlen kann. Und ganz unten die Rundung in die andere Richtung.
Dabei ist allerdings darauf zu achten, dass du den Content oben und unten keinen rand verpasst, da sich der Hintergrund sonst nicht wiederhohlen kann und du dann oben und unten einen doppelten Rand hast.
______________

Beitrag05.09.2009 um 18:37 (UTC)    
Titel:

stimmt, danke für den Tipp! Very Happy
Beitrag05.09.2009 um 18:45 (UTC)    
Titel:

gern geschehen Very Happy
______________

Beitrag06.09.2009 um 15:26 (UTC)    
Titel:

Ich markier das Thema jetzt als "erledigt" , wenn jemand allerdings eine Antwort auf di Frage am Anfang weiß, ist diese willkommen Very Happy
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de