Hallo tutorials Gemeinde,

ich bastle mir grade ein eigenes Template zusammen. Da ich doch um einige Dinge gerne Runde Ecken haben möchte hab ich mir folgendes zusammen gestückelt:

index.php

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<div class="box" style="position:absolute; left: 68px; top: 300px; width: 270px; height:auto;">      <div>           <div>                <div>                     <div>                          <div>                               <div>                                    <div>                                         <div class="inhaltB4">                         <div align="center">                             <table width="auto" border="0">                                 <tr>                                 <td><jdoc:include type="modules" name="left"  style="xhtml" /></td>                                 </tr>                             </table>                         </div>                                         </div>                                    </div>                               </div>                          </div>                     </div>                </div>           </div>      </div> </div>

meine css Datei sieht dann so aus:

Code :

1 2 3 4 5 6 7 8 9 10

div.box {background:url(../images/lm.png) repeat-y;} div.box div {background:url(../images/rm.png) right repeat-y;} div.box div div {background:url(../images/mo.png) repeat-x;} div.box div div div {background:url(../images/mu.png) bottom repeat-x;} div.box div div div div {background:url(../images/lo.png) left top no-repeat;} div.box div div div div div {background:url(../images/ro.png) right top no-repeat;} div.box div div div div div div {background:url(../images/lu.png) left bottom no-repeat;} div.box div div div div div div div {background:url(../images/ru.png) right bottom no-repeat;}   div.inhaltB4 {padding: 10px 10px 15px 10px;}

und das Ergebnis ist dann das hier:
http://spittler.sp.funpic.de/help/001.gif

Meine Frage wie bekomme ich die falschen Grafiken (Roter Kreise)weg?


Danke schon mal für Eure Antworten

LG cymbalta

Hi,

der Hintergrund des letzten DIVs in deiner CSS-Deklaration wird auf tiefer geschachtelte weitervererbt. Hier könntest du für DIVs tieferer Ebene angeben, dass kein Hintergrund angezeigt werden soll. Ausserdem musste ich die Höhe auf 100% setzen.

Code :

1	div.box div div div div div div div div{height: 100%; background: none;}

Ciao
Quaese

wow das es so einfach ist hätte ich nicht gedach danke

In CSS3 gibt es Runde Ecken.
http://www.css3.info/preview/rounded-border/

Dann könntest du deine Lösung als alternative für den IE und andere ältere Browser einsetzen und hättest bei den neueren schönere Ecken.

Gruß