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

Schatten-Effekt mit <div> geht nicht über komplette Element-Höhe

B

BayerWaldWichtel

Neues Mitglied
Hallo zusammen,

der Christian (BayerWaldWichtel), 31, aus der nähe von Passau ;)

So wie das aussieht habe ich ein individuelles Problem, für das ich nach intensiver Google- und Forensuche noch keine Lösung entdeckt habe...

Ich möchte gerne mit <div>-Elementen einen Schatten links und rechts von der Hauptseite erzeugen. Dazu hab ich in die div-Container ein Hintergrundbild eingebunden, dieses wird jedoch nur 1x dargestellt und hört dann auf...

Nun meine Frage: Wie erreiche ich, dass links und rechts der Schatten-Bereich genauso hoch ist, wie der Seiteninhalt in der Mitte?

Hier die CSS-Datei:

Code: 
#body
{
    margin: 0px;
    text-align: center;
    background-color: #000000;
}


#seitencontainer
{
    width: 400px;
    background-color: #ffffff;
}


#rahmen_links
{
    float: left;
    width: 6px;


    background-color: #808080;
}


#hauptcontainer
{
    float: left;
    width: 388px;
}


#rahmen_rechts
{
    width: 6px;


    background-color: #808080;
}


.seitentext_standard
{
    font-family: Helvetica, Arial, sans-serif;
    font-size: 80%;
}



Und hier der body:

Code: 
<body id="body">


    <div id="seitencontainer">


        <div id="rahmen_links"></div>


        <div id="hauptcontainer">
            <a class="seitentext_standard">Zeug. Der die das. Wieso weshalb warum. Wer nicht fragt bleibt dumm. Wieso weshalb warum. Wer nicht fragt bleibt dumm. Wieso weshalb warum. Wer nicht fragt bleibt dumm. Wieso weshalb warum. Wer nicht fragt bleibt dumm. Wieso weshalb warum. Wer nicht fragt bleibt dumm. Wieso weshalb warum. Wer nicht fragt bleibt dumm. Wieso weshalb warum. Wer nicht fragt bleibt dumm. </a><br/>
        </div>


        <div id="rahmen_rechts"></div>


    </div>


</body>
 
Hallo, schon mal danke für diese Antwort, aber ich glaube, ich meinte was anderes :)

Hier mal ein Screenshot, wie das ganze im Moment aussieht.

Die kleinen 10x10-jpgs in der linken und rechten oberen Ecke sollten eigentlich bis ganz nach unten gehen, und so oft wiederholt werden, bis der Rand komplett aufgefüllt ist.


Uploaded with ImageShack.us
 
Ich kann dort in deinem Code jedoch keine Bilder entdecken.
Wenn ich dich richtig verstehe soll seitlich ein also rechts und links vom Text ein Schatteneffekt durch Bilder erzeugt werden?
Das macht man eigentlich in dem man ein Bild, oder auch zwei in den Hintergrund des DIV legt und diese dann vertikal wiederholen lässt.

Mein Ansatz führt zum gleichen Ziel und erspart dir die Erstellung der Bilder und ist moderner.
Ein Beispiel folgt hier:
HTML: 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>seitliche innere Schatteneffekte nur mit CSS3</title>
        <style type="text/css">
            body {             
                background-color:black;
            }
            #kasten {
                background-color:white;
                color:black;
                position:relative;
                margin: 0 auto;
                width:60%;
                box-shadow:
                inset 10px 0px 10px -10px black,
                inset -10px 0px 10px -10px black;
            }
            #kasten p {
                margin: 10px 15px;
            }
         </style>
    </head>
    <body>
        <div id=kasten>
            <p>Lorem ipsum dolor sit amet consectetuer est vestibulum risus tempus Donec. Venenatis condimentum a tristique cursus eleifend lacinia dapibus faucibus Sed non. Congue Pellentesque ut quis id est malesuada porttitor Aliquam venenatis In. Sed lorem id vitae quam urna scelerisque tempor interdum odio habitasse. Ipsum vitae libero Aenean Phasellus Aenean In id pretium Nunc pellentesque. Lorem condimentum tempor a sit nibh eros auctor wisi.</p>
            <p>Ornare mauris auctor id sagittis pellentesque ridiculus faucibus convallis diam dui. Adipiscing facilisi justo interdum a orci ipsum tristique volutpat ipsum consectetuer. Volutpat Nullam tempor tincidunt Proin id et sapien Phasellus metus condimentum. Et Ut cursus eu Duis Phasellus vitae mauris risus mi vel. Pede Maecenas cursus adipiscing pharetra urna euismod massa risus enim nibh. Curabitur fringilla eget ac amet id magna est tincidunt Nam turpis. Turpis Aliquam.</p>
            <p>Nisl vestibulum condimentum eros sodales et mattis eros laoreet Nulla pretium. Natoque congue tristique parturient justo nec elit pretium Vestibulum at massa. Tellus et diam Vestibulum non faucibus massa Pellentesque sit justo pellentesque. Suspendisse ut Curabitur leo sit massa a Sed Suspendisse tortor et. Fringilla urna semper vel enim Vivamus adipiscing congue Curabitur porta Fusce. Sociis ac Ut Pellentesque Vestibulum auctor interdum tincidunt eros tortor pretium. Tincidunt.</p>
        </div>
    </body>
</html>

Der IE7 und IE8 zeigt leider die Schatten noch nicht an, aber in Firefox, Opera und Safari sowie Chrome sieht es schick aus. Vielleicht kann ja mal jemand Rückmeldung geben ob es im IE9 oder 10 schon geht.
 
Zuletzt bearbeitet von einem Moderator:
Hallo,

danke für die Antworten :).

Ich hab's jetzt.

Hab ein Hintergrund-Schatten-Bild verwendet, das innen im Hauptcontainer sitzt, und so breit ist wie der Hauptcontainer.

CSS:

Code: 
#body
{
    margin: 0px;
    text-align: center;
    background-color: #000000;
}
#seitencontainer
{
    text-align: center;
    width: 400px;
    background-color: #ffffff;
}
#hauptcontainer
{
    float: left;
    width: 360px;
    padding: 20px;
    background-image: url(schatten_seite.JPG);
    background-repeat: repeat-y;
    background-color: #FFFFFF;
}
.seitentext_standard
{
    font-family: Helvetica, Arial, sans-serif;
    font-size: 80%;
}



Hauptseite:
Code: 
<body id="body">
    <div id="seitencontainer">
        <div id="hauptcontainer">
            <a class="seitentext_standard">Der die das. Wieso weshalb warum. Wer nicht fragt bleibt dumm. Seitentext. Der die das. Wieso weshalb warum. Wer nicht fragt bleibt dumm. Seitentext. Der die das. Wieso weshalb warum. Wer nicht fragt bleibt dumm. Seitentext. Der die das. Wieso weshalb warum. Wer nicht fragt bleibt dumm. Seitentext. Der die das. Wieso weshalb warum. Wer nicht fragt bleibt dumm. Seitentext. Der die das. Wieso weshalb warum. Wer nicht fragt bleibt dumm. Seitentext. Der die das. Wieso weshalb warum. Wer nicht fragt bleibt dumm. Seitentext. Der die das. Wieso weshalb warum. Wer nicht fragt bleibt dumm. Seitentext. Der die das. Wieso weshalb warum. Wer nicht fragt bleibt dumm. Seitentext. Der die das. Wieso weshalb warum. Wer nicht fragt bleibt dumm. Seitentext. </a><br/>
        </div>
    </div>
</body>
 
Nur mal als Anmerkung. Dein Div-Element seitencontainer kannst du wegnehmen wenn du die CSS-Attribute für das Body-Element anwendest. Alle Elemente einer HTML-Seite lassen sich benutzen, angefangen beim * über HTML und Body. Probier es mal aus, wird übersichtlicher.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben