# Seitenrand mit Schatten über div



## Snewi133 (25. November 2007)

Hallo ich bin gerade dabei über CSS eine Webseite zu erstellen! 
Ich habe also ein Main div das 780px breit ist und zentriert dargestellt wird! Nun möchte ich nebem diesem Main Div links und rechts jeweils ein weiteres Div erzeugen um einen Schatten als Bild einzufügen! Das Problem das ich die Container nicht an den Seitenrand bekomme! 
Wie mache ich es richtig unten mein Code!! 


html 
{ 
height: 100%; 
margin: 0px; 
padding: 0px; 
} 

body 
{ 
   font: 95% Verdana, Arial, 'Times New Roman', sans-serif; 
background-color: #CEBB9B  ;  /*#A78062*/ 
   color: #CECABF; 
   text-align: center; 
margin: 0px; 
padding: 0px; 
} 

p 
{ 
   font-size: 12px; 
} 

a 
{ 
   font-size: 12px; 
   text-align: left; 
} 


/* Hauptcontainer */ 
/* -------------------------------------------------------------------------- */ 

div#main 
{ 
   width: 780px; 
   max-height: 600px; 
   /*margin-top: 0 auto;*/ 
   text-align:left; 
   background-color: #F8EDE1; 
   color: black; 
} 

div#logo 
{ 
   height: 175px; 
   margin: 10px; 
   margin-bottom: 1px; 
   background-color: #DAC8B4; 
   color: black; 
} 

div#navitop 
{ 
width: 760px; 
height: 25px; 
margin-left: 10px; 
background-color: #8B5F46; 
color: black; 
} 

div#topborder 
{ 
width:760px; 
line-height: 4px; 
margin-left: 10px; 
margin-bottom: 20px; 
border-bottom: 4px solid #8B5F46; 

} 

div#navileft 
{ 
   width: 175px; 
   float:left; 
   margin-left: 10px; 
   margin-right: 10px; 
   background-color: C; 
   color: black; 
} 

div#linie 
{ 
height: 600px; 
width: 1px; 
border-right: 1px solid #DAC8B4; 
} 

div#naviright 
{ 
   width:14%; 
   float:right; 
   border: 1px dashed #D7D7D7; 
   line-height:18px; 
} 

div#content 
{ 
   width:64%; 
   border: 1px dashed #D7D7D7; 
background-color: #F8EDE1; 
color: black; 
} 

div#schatten 
{ 
float: left; 
width: 15px; 
height:500px; 
margin-left:25px; 
background-image: url(schattenli.jpg); 
background-position: right; 
background-repeat: repeat-y; 
border: 1px dashed #D7D7D7; 


} 
div#footer 
{ 
width: 780px; 
height: 15px; 
background-color: #DAC8B4; 
color: black; 
} 

Gruß

Im Anhang ein Bild dazu


----------



## doger (25. November 2007)

Gib dem content container noch ein float: right; mit auf die Reise und alles wird gut.

//doger


----------



## Maik (25. November 2007)

Hi und herzlich Willkommen im Forum 

Ich empfehle dir hierfür  die "Zwiebelschalen-Technik" - in Anlehnung an http://www.alistapart.com/articles/onionskin/.

Die Änderungen und Ergänzungen für das Stylesheet lauten dann wie folgt:


```
div#main
{
width: 810px;/* = 780px + 2*15px */
max-height: 600px;
margin: 0 auto;
text-align:left;
background-color: #F8EDE1;
color: black;
}

div#shadow_left { /* linker Schatten */
background: url(shadowli.jpg) repeat-y;
}

div#shadow_right { /* linker Schatten */
background: url(shadowre.jpg) repeat-y right;
}

div#wrapper { /* nimmt die vorhandenen Seitenbereiche auf */
padding: 0 15px; 
}
```
Im HTML-Code werden nach dem DIV *#main* die drei DIVs *#shadow_left, #shadow_right* und *#wrapper* ineinander verschachtelt, und das "wrapper"-DIV nimmt nun die vorhandenen Seitenbereiche (Logo, Navi, Content, usw.) in sich auf:


```
<body>

<div id="main">
     <div id="shadow_left">
          <div id="shadow_right">
               <div id="wrapper">
                         <!-- Hier folgen die weiteren Seitenbereiche -->
               </div>
          </div>
     </div>
</div>

</body>
```


----------



## herrgarnele (25. November 2007)

Hallo!

Entschuldigung wenn ich mich in das Thema einklinke,
aber gibt es mit der onionskinning-Methode auch die Möglichkeit, nicht nur rechts und links, sondern auch _unten_ einen Schatten einzubinden?
So dass ich meinem zentrierten Layout rechts links und unten einen Schatten habe?


----------



## Maik (25. November 2007)

```
div#shadow_left {
background: url(shadow_l.png) repeat-y;
}

div#shadow_right {
background: url(shadow_r.png) repeat-y right;
}

div#shadow_bottom {
background: url(shadow_b.png) repeat-x left bottom;
}

div#wrapper {
padding:0 15px 15px 15px;
}
```


```
<div id="main">
     <div id="shadow_left">
          <div id="shadow_right">
               <div id="shadow_bottom">
                    <div id="wrapper">
                               <!-- Hier folgen die weiteren Seitenbereiche -->
                    </div>
               </div>
          </div>
     </div>
</div>
```


----------



## herrgarnele (25. November 2007)

Hallo Maik!

Danke erstmal für Deine schnelle Antwort!
Ich habe es nun wie von Dir gezeigt mit einem weiteren verschachtelten Container versucht.
Klappt auch fast, nur läuft der Schatten an den Ecken links und rechts zu weit nach Außen (siehe angehängte Grafiken).

Wenn ich dem #shadow_bottom links und rechts die Breite des Schattens als margin mitgebe, dann laufen die senkrechten Schatten zu weit nach unten..


----------



## Maik (25. November 2007)

Versuch es mal mit einem entsprechend horizontalen Außenabstand:


```
div#shadow_bottom {
background: url(shadow_b.png) repeat-x left bottom;
margin:0 15px;
}
```


----------



## Snewi133 (25. November 2007)

Hallo

danke für den tollen Tip hat soweit geklappt!
Bin noch lange nicht fertig aber trotzdem gibt es bei der Darstellung noch kleine Probleme!

Der Schatten geht nun nicht bis oben durch und der Contentbereich ist nach unten gerutscht!

Auch die 2,Linie unter dem Logo soll nur einen Abstand von 5 px haben und nicht von 25px!
War vorher auch anders vielleicht kannst ja nochmal schauen

http://www.snewi.de

Danke im voraus!

P.S Echt tolles Forum und super Beiträge hier


----------



## herrgarnele (25. November 2007)

Leider nicht.
Da gehen die Äußeren Schatten dann zu weit runter..
Und zwar genau um die Höhe des unteren Schattens..


----------



## Maik (25. November 2007)

Dann wirst du den Schlagschatten grafisch anders "aufteilen" müssen, damit die Ecken mit einer "45°-Gehrung" gestoßen werden - falls dies dein Vorhaben ist.


----------



## herrgarnele (25. November 2007)

Ich stehe grad ewtas auf dem Schlauch. Wie muss ich ihn dann grafisch Aufteilen?
Nur zur Sicherheit: Ich mäöchte eigentlich einfach nur einen "um die Ecke durchgängigen" Schatten haben.


----------



## Maik (25. November 2007)

Du benötigst dann eben noch zwei Grafiken für die linke und rechte Ecke, sowie im Markup zwei weitere DIVs, die diese Grafiken aufnehmen.


----------



## herrgarnele (25. November 2007)

Ah okay verstehe!
So mache ichs, dankeschön!

Semantisches Markup ist bei der ganzen Geschichte eher nicht so gegeben..
Daher überlege ich, den ganzen div-Wulst per js einzufügen. Wer kein js aktiv hat bekommt halt keine Schatten, aber dafür bleibt der Code semantisch.
Oder sehe ich das falsch!?


----------



## Maik (25. November 2007)

Semantisch spricht zwar nichts gegen die verschachtelten DIVs, aber für die Ästheten sind sie wohl ein Dorn im Auge.


----------



## Snewi133 (25. November 2007)

Hallo

ich hoffe ihr habt jetzt meinen Beitrag nicht übersehen! 

Wie ist das noch mit der Vererbung!
Die oberen Einstellungen werden von den unteren übernommen?
Wann und wie werden diese dann überschrieben?

Also warum habe ich in meinen Layout den Rand da oben und wie bekomme ich den weg?
Ebenso ist der Contenberich und der rechte Navibereich verschoben!

http://www.snewi.de

Gruß


----------



## herrgarnele (25. November 2007)

Super Sache, nu funktioniert alles, muss nur die js-Geschichte noch in den Griff bekommen - ich dank Dir vielmals!


----------

