✔ Runde Ecken erweitert?

[schutzgeist]

Hallo,

ich versuch mich grad daran, eine Box zu bauen,
siehe: http://schutzgeist.com/yum/steffi/ -> News-Box
nur mit dem Unterschied, dass ich die Größe (Breite + Höhe) der Box je nach Inhalt bestimmen will (Höhe automatisch, Breite eben fix...)

Hab mich nun an 'Runde Ecken' orientiert.. leider reicht das für meine Zwecke nicht ganz aus, da ich jeweils für oben/unten, links/rechts noch eine Grafik habe...
http://schutzgeist.com/yum/steffi/rundeecken.html

Seiten-Grafiken:
http://schutzgeist.com/yum/steffi/image/box_top_middle.png
http://schutzgeist.com/yum/steffi/image/box_middle_left.png
http://schutzgeist.com/yum/steffi/image/box_middle_right.png
http://schutzgeist.com/yum/steffi/image/box_bottom_middle.png

Hatte das Ganze auch schon mit mehr Boxen probiert.. Kam aber auch nicht zum gewünschten Ergebnis

 

[Maik]

Hi,

vielleicht hilft dir da mein Lösungsbeispiel in dem Thread background-image Rahmen mit div? weiter?

P.S. Die vier Links zu den Grafiken führen auf eine 404-Fehlerseite.

 

[schutzgeist]

Huch, böser Tippfehler

Im FF sieht nun alles prächtig aus

Nur im IE 6 fehlt komischerweise die linke Seite?! :suspekt:

.content {
width: 500px;
}
      div.links {
        background: url(image/box_middle_left.png) repeat-y left;
      }

      div.rechts {
        background: url(image/box_middle_right.png) repeat-y right;
      }

       div.oben {
        background: url(image/box_top_middle.png) repeat-x;
      }

      div.unten {
        background: url(image/box_bottom.png) bottom repeat-x;
      }

      div.linkeObereEcke {
        background: url(image/box_top_left.png) left top no-repeat;
      }

      div.rechteObereEcke {
        background: url(image/box_top_right.png) right top no-repeat;
      }

      div.linkeUntereEcke {
        background: url(image/box_bottom_left.png) left bottom no-repeat;
      }

      div.rechteUntereEcke {
        background: url(image/box_bottom_right.png) right bottom no-repeat;
      }

      div.inhalt {
        padding: 43px 23px 24px 13px;
      }
	  div.main {
	  background: url(image/gelb.png) repeat;
	  }

<div class="content"  
  <div class="links">
       <div class="rechts">
            <div class="oben">
                 <div class="unten">
                      <div class="linkeObereEcke">
                           <div class="rechteObereEcke">
                                <div class="linkeUntereEcke">
                                     <div class="rechteUntereEcke">
                                          <div class="inhalt">
										  <div class="main">
                                               der inhalt<br />
                                               der inhalt<br />
                                               der inhalt<br />
                                               der inhalt<br />
										  </div>
                                          </div>
                                     </div>
                                </div>
                           </div>
                      </div>
                 </div>
            </div>
       </div>
  </div>
</div>

 

[Maik]

Kannst du das Demo bitte mal online stellen?

 

[schutzgeist]

Entschuldigung, Link vergessen:

http://schutzgeist.com/yum/steffi/

der gelbe Kasten

 

[Maik]

Beim DIV .content fehlt die schliessende Klammer:

<div class="content">
  <div class="links">
       <div class="rechts">
            <div class="oben">
                 <div class="unten">
                      <div class="linkeObereEcke">
                           <div class="rechteObereEcke">
                                <div class="linkeUntereEcke">
                                     <div class="rechteUntereEcke">
                                          <div class="inhalt">
										  <div class="main">
                                               der inhalt<br />
                                               der inhalt<br />
                                               der inhalt<br />
                                               der inhalt<br />
										  </div>
                                          </div>
                                     </div>
                                </div>
                           </div>
                      </div>
                 </div>
            </div>
       </div>
  </div>
</div>

 

[schutzgeist]

ui, wie war das mit dem Wald und den Bäumen?

Vielen, vielen Dank mal wieder