✔ Eck-Verzierung mit CSS

[Leugim]

Ist es möglich diese Verzierung per CSS zu positionieren?
Die Dinger sind ja sozusagen ausserhalb des Homepage Bereiches...
Vielen Dank!

 

[Maik]

Ja, das ist mit CSS möglich

div.outer {
width: 800px;
margin: 0 auto;
}

/* links oben */
div.nw {
background: url(nw.gif) no-repeat left top;
}

/* rechts oben */
div.ne {
background: url(ne.gif) no-repeat right top;
}

/* links unten */
div.sw {
background: url(sw.gif) no-repeat left bottom;
}

/* rechts unten */
div.se {
background: url(se.gif) no-repeat right bottom;
}

div.inner {
padding: 20px; /* bestimmt den Abstand zu den Grafiken */
}

div.content {
margin: 0px;
border: 1px solid #cacaca;
}

<div class="outer">
     <div class="nw">
          <div class="ne">
               <div class="sw">
                    <div class="se">
                         <div class="inner">
                              <div class="content">content</div>
                         </div>
                    </div>
               </div>
          </div>
     </div>
</div>

 

[Leugim]

Re: AW: Eck-Verzierung mit CSS

Hi! Vielen dank für deine Lösung!
Klappt ja wunderbar...
Eine Verständniss-frage bliebe aber noch..
Die vier eck-divs. Liegen die genau übereinander?

 

[Maik]

Ja, die vier Eck-DIVs liegen in einer Stapelreihenfolge übereinander.

Je tiefer ein DIV (Hintergrundbild) verschachtelt ist, desto höher liegt es in dieser Stapelreihenfolge.

 

[Leugim]

Das hat mir deutlich weitergeholfen. Ich mag CSS inzwischen immer mehr... fragt sich nur wie lange noch
Tausend Dank!