• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Probleme mit Box Schatten

konzule

Neues Mitglied
Halli hallo,
Steh grad etwas auf dem Schlau. Vll hat hier jemand ne Lösung für mein Problem.
Versuche grade um einer Box zwei Schatten hinzuzufügen (mit zwei .pngs und ohne box-shadow).
Die Schatten müssen einfach an der Box bleiben und im Browserfenster zentriert angezeigt werden.
Leider brichts bei mir nicht so um wie ich gerne möchte da ich mit margin:auto; arbeite.
Nachdem ich gefloatet habe funktioniert einfach gar nichts mehr :D.
Wäre für jede kleine Hilfestellung sehr dankbar.

Hier mal ne abgespeckte Version^^
Code:
<html>
<head>
<style type="text/css">
#box{
    height: 400px;
    width: 400px;
    background-color: red;
    margin: auto;
    float: left;
}
#wrapper {
    margin: auto;
}
#shadow1{float:left;}

</style>
</head>
<body>
    <div id="wrapper">
        <div id="shadow1">
            <img src="Bilder/shadow.png">
        </div>
        <div id="box"></div>
        <div id="shadow2">
            <img src="Bilder/shadow.png">
        </div>
    </div>
</body>
</html>
Gruss Konzule
 
Zuletzt bearbeitet:
float:left und margin:auto funktionieren zusammen nicht.
Ja, und verwende auf jeden Fall statt dem Bild box-shadow.
So machst du dich nur zum Affen.

Lieber noch auf den Schatten verzichten statt einem Bild.
 
Es ist ein ziemlich spezieller Schatten... mit box-shadow kann man zwar einiges machen aber dies ist leider nicht möglich -.-
Hm nun ja ok schade. Trotzdem danke
 
Du solltest den Schatten für die linke und rechte Seite in eine einzige Grafik packen. Die legst Du bei der Box, die vom Schatten umgeben werden soll, als Hintergrundbild fest, welches sich vertikal wiederholt. Damit ist der Schatten (als Hintergrund) so lange zu sehen wie die Box einen Inhalt hat. Kein Problem mit float, und margin kann zur Zentrierung verwendet werden.
 
Drei Möglichkeiten:

1. Was Threadi vorgeschlagen hat. Entspricht in etwa dem, wie man früher runde Ecken per CSS 2 simulierte.
2. Lässt sich die Position eine HTML-Elements per JavaScript ermitteln und dementsprechend das Bild an die richtige Stelle rücken.
3. Sind zumindest beim Attribut text-shadow auch komplexere, mehrfarbige Schatten möglich (bsw.: text-shadow: 0 0 5px #FFFFFF, 0 0 10px #FFFFFF, 0 0 15px #FFFFFF, 0 0 20px #F27635, 0 0 30px #FF2D95, 0 0 40px #F27635, 0 0 50px #F27635, 0 0 75px #F27635). Ich könnte mir vorstellen, dass so etwas auch mit box-shadow funktioniert.

Die Frage ist nur, ob das wirklich den Aufwand lohnt.
 
Ich sehe einen. Den kannst Du wie von mir beschrieben erreichen, nur eben ohne vertikaler Wiederholung. Dem Element dem Du diesen grafischen Schatten als Hintergrund zuordnest müsstest Du nur eine Mindesthöhe geben damit die Schattengrafik auch durchgehend zu sehen ist.
 
Zurück
Oben