Verschachtelte Div-Container mit dynamischen background image

    Hallo,


    ich habe leider ein Problem mit der Layout-Umsetzung eines Warenkorbs. Ich habe trotz mehrstündiger Suche im Internet keine Lösung dafür gefunden.


    Die meisten Divs kann ich problemlos umsetzen und der Hintergrund wird auch richtig angezeigt.
    Nur der schräge Schatten der Einkaukstüte macht nicht mit. Der schräge Schatten (Linker Div) soll in Height 100% sein. Ich dachte, ich probiere es mit dem Strecken. Hat auch nicht geholfen.

    Egal, wie ich das Layout schneide,


    Eventuell hätte jemand von euch eine Idee, wie man dies umsetzen kann.

    Ich bin echt dankbar für jede Hilfe!

    Vielen Dank im Voraus
    Amro

    Code
    box-shadow: 5px 5px 20px rgb(80,90,100);
-webkit-box-shadow: 5px 5px 20px rgb(80,90,100);
-moz-box-shadow: 5px 5px 20px rgb(80,90,100);

    Das wäre ein normaler Schatten mit CSS3.
    Du kannst das Bild doch aber auch Spiegeln in einem Imageeditor, oder nicht ?
    Hintergrundfarbe weiß und dann geht das eigentlich auch.

    Hallo Bleistift,

    vielen Dank für Deine schnelle Antwort!

    Aber ich glaube, ich habe mich nicht ganz richtig ausgedrückt. Im Layout ist der Schatten mit integriert.

    Es geht mir eigentlich nur darum, dass dieser schräge Schatten mit lang gezogen (gestreckt) wird.
    wäre die linke Seite(der schräge Schatten) genau so gerade wie rechts, dann hätte ich kein Problem (einfach drei DIVs).

    Ich werde mal weiter testen und wenn ich die Lösung habe, werde ich sie hier posten.

    Vielen Dank noch mal für Deine Antwort
    Amro

    du wirst keinen schrägen schatten haben können, der sich kachelt, das is rein grafisch doch schon nich möglich, da sich der schatten neu skalieren muss.
    du könntest den schattentiefer anfangen lassen und über dem beginn des schattens des kacheln durchführen, so dass der schatten immer gleich bleibt.
    dein vorhaben is nich umsetzbar

    edit:

    ich würd den schatten nach rechts setzen und nach unten, schau dir mal die umsetung bei otto.de in der bunten hauptnavi an, da siehste was ich meine :)

    Hallo Synaptic,

    Vielen Dank für Deine Antwort!

    Ich habe es jetzt mit drei DIVS gelöst: head(feste Größe), middle(dynamisch repeat-y) und bottom(auch feste Größe)

    .head{
    width: 180px;
    height: 80px;
    background-image: url(../images/cart-head.png);
    background-repeat: no-repeat;
    float:left;
    }
    .middle{
    width: 180px;
    height: 100%;
    background-image: url(../images/cart-middle.png);
    background-repeat:repeat-y;
    margin:0 0;
    float:left;
    }

    .middle-text{
    width: 160px;
    padding:0 10px 0 10px;
    }

    .bottom{
    width: 180px;
    height: 50px;
    background-image: url(../images/cart-bottom.png);
    background-repeat: no-repeat;
    margin:0 0;
    float:left;
    }

    Es sieht jetzt einigermaßen gut aus.


    vielen Dank noch mal für deine Antwort!

    Amro