✔ 3 Spalten gleich hoch, aber mit Hintergrundbild!

[chris4712]

Hallo!

Ich habe ein kleines Problem, an dem ich mir schon seit Tagen die Zähne ausbeiße.
Hab schon viel versucht, aber schaffe es leider nicht

Unter http://kdnwbs.webseiten-schmiede.com/wr/ habe ich mal die Seite hochgeladen, um die es geht.

Problem:
De "Kasten" soll links und rechts einen Abstand von 100px und oben und unten einen Abstand von 50px zum Fensterrand haben.
Der DIV Container "Content" soll scrollbar sein, und den Seiteninhalt beinhalten.
Links und rechts davon sollen die anderen DIV Container genauso hoch sein, und die jeweiligen Hintergrundbilder beinhalten.
Ihr könnt von mir aus auch alles umstricken. Alles egal, Hauptsache es klappt endlich

Gruß

Christian

 

[Maik]

Hi,

Sven und ich haben seinerzeit die abgerundeten Boxen hier im Forum auf diese Weise umgesetzt:

<div class="box">
     <div>
          <div>
               <div>
                    <div>
                         <div>
                              <div>
                                   <div>
                                        <!-- Hier folgt der Boxinhalt -->
                                   </div>
                              </div>
                         </div>
                    </div>
               </div>
          </div>
     </div>
</div>

/** Standardbox **/
    div.box{background:url(http://www.tutorials.de/forum/images_v6/silver/box_ww.gif) repeat-y;}
    div.box div{background:url(http://www.tutorials.de/forum/images_v6/silver/box_ee.gif) right repeat-y ;}
    div.box div div{background:url(http://www.tutorials.de/forum/images_v6/silver/box_nn.gif)  repeat-x;}
    div.box div div div{background:url(http://www.tutorials.de/forum/images_v6/silver/box_ss.gif) bottom repeat-x;}
    div.box div div div div{background:url(http://www.tutorials.de/forum/images_v6/silver/box_nw.gif) left top no-repeat;}
    div.box div div div div div{background:url(http://www.tutorials.de/forum/images_v6/silver/box_ne.gif) right top no-repeat;}
    div.box div div div div div div{background:url(http://www.tutorials.de/forum/images_v6/silver/box_sw.gif) left bottom no-repeat;}
    div.box div div div div div div div{background:url(http://www.tutorials.de/forum/images_v6/silver/box_se.gif) right bottom no-repeat; padding:0 5px;margin:0;}

 

[chris4712]

Hallo!

Sorry dass ich erst heute Antworte. Die Telekom hatte (mal wieder) Mist gebaut --> Hatte kein Internet.

Danke für Deinen Vorschlag. Leider kann ich ihn nicht verwenden!
Hatte leider vergessen zu erwähnen dass ich transparente PNG Bilder verwenden möchte. Durch diese Bilder soll (der sich wechselnde Hintergrund) durchscheinen.

Bei deinem Vorschlag "verdecken" die Ecken die anderen DIV's. Um es für meinen Fall passend zu machen, müsste der Hintergrund XX PX nach dem DIV Rand anfangen und auch wieder XX PX DIV vom Rand entfernt aufhören.

Hoffe Du verstehst was ich meine?!
Viele Grüße

Christian

 

[Maik]

Hi,

in dem Beispiel CSS Transparent Frame wendet der Autor ebenfalls die "Zwiebelschalentechnik" an und stattet die Box mit transparenten PNGs aus. Dem "Überlagern" der Eckgrafiken wirkt er in seinem Modell mit entsprechenden margin- und padding-Angaben entgegen.

Desweiteren habe ich diese technischen Varianten im Netz gefunden, in denen ebenfalls transparente PNGs zum Einsatz kommen:

1. 3 column, equal height, round corners, alpha png
2. Another attempt at CSS rounded-corner dialogs using the sliding doors technique
3. Even More Rounded Corners (Fluid, Alpha-transparent, Single Image Approach) Using CSS
4. How to Create Fluid-Width <div> Layers with Rounded Corners
5. rounded corners with png transparency

 

[chris4712]

Hallo!

T-Schrottline hatte schon wieder Mist gebaut.....

OK, danke für die Links Sieht doch sehr vielversprechend aus. Ich werde mich mal durchwurschteln!
Gruß

Christian