Seitenrand mit Schatten über div

Status
Nicht offen für weitere Antworten.
S

Snewi133

Mitglied
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
 

Anhänge

  • seite.jpg
    seite.jpg
    12 KB · Aufrufe: 879
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:

Code: 
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:

Code: 
<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>
 
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?
 
Code: 
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;
}
Code: 
<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>
 
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..
 

Anhänge

  • corner_left.gif
    corner_left.gif
    2,4 KB · Aufrufe: 3.110
  • corner_right.gif
    corner_right.gif
    2,1 KB · Aufrufe: 3.115
Zuletzt bearbeitet:
Versuch es mal mit einem entsprechend horizontalen Außenabstand:

Code: 
div#shadow_bottom {
background: url(shadow_b.png) repeat-x left bottom;
margin:0 15px;
}
 
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 :)
 
Leider nicht.
Da gehen die Äußeren Schatten dann zu weit runter..
Und zwar genau um die Höhe des unteren Schattens..
 

Anhänge

  • Untitled-1.gif
    Untitled-1.gif
    846 Bytes · Aufrufe: 3.108
Zuletzt bearbeitet:
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.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück