✔ background-image Rahmen mit div?

Status
Nicht offen für weitere Antworten.
R

Romsl

Erfahrenes Mitglied
Hallo zusammen,

habe schon folgenden Beitrag gefunden allerdings entspricht dieser nicht komplett meinen Erwartungen.

http://www.tutorials.de/forum/css/266576-container-mit-runden-ecken.html

Ich moechte keine feste breite angeben muessen und habe nun folgendes probiert:

HTML: 
<html>
  <head>
    <title>Test</title>
    <style type="text/css">

      div.links {
        background-color:blue;
        width:10px;
        float:left;
        /*height:120px;*/
      }

      div.rechts {
        background-color:blue;
        width:10px;
        /*height:100px;*/
        float:right;
      }

      div.inhalt {
        float:left;
      }

      div.linkeObereEcke {
        background-color:red;
        width:10px;
        height:10px;
        float:left;
      }

      div.rechteObereEcke {
        background-color:yellow;
        width:10px;
        height:10px;
        float:right;
      }

      div.linkeUntereEcke {
        background-color:yellow;
        width:10px;
        height:10px;
        float:left;
      }

      div.rechteUntereEcke {
        background-color:red;
        width:10px;
        height:10px;
        float:right;
      }

      div.oben {
        background-color:green;
        height:10px;
      }

      div.unten {
        background-color:green;
        height:10px;
        clear:both;
      }
    </style>
  </head>
  <body>

    <div>
      <div class="oben">
        <div class="linkeObereEcke"></div>
        <div class="rechteObereEcke"></div>
      </div>
        <div class="links">&nbsp;</div>
        <div class="inhalt">
          der inhalt<br />
          der inhalt<br />
          der inhalt<br />
          der inhalt<br />
        </div>
        <div class="rechts">&nbsp;</div>
      <div class="unten">
        <div class="linkeUntereEcke"></div>
        <div class="rechteUntereEcke"></div>
      </div>
    </div>

  </body>
</html>

Das Problem dabei ist nun, dass der blaue Rahmen nicht durchgezeichnet wird. Diese sollten die selbe Hoehe wie der Inhalt hat annehmen. Ist das moeglich oder kann das wieder nur durch eine Tabelle geloest werden.

Vielen Dank
-- Romsl
 
Hi,

du musst hierfür mit verschachtelten DIVs arbeiten (Zwiebelschalen-Technik):

Code: 
  <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">
                                               der inhalt<br />
                                               der inhalt<br />
                                               der inhalt<br />
                                               der inhalt<br />
                                          </div>
                                     </div>
                                </div>
                           </div>
                      </div>
                 </div>
            </div>
       </div>
  </div>
Da du die Box wohl "grafisch" mit abgerundeten Ecken ausstatten möchtest, lautet das dazugehörige Stylesheet:
Code: 
div.links {
        background: url(img/ww.gif) repeat-y;
      }

div.rechts {
        background: url(img/ee.gif) repeat-y right;
      }

div.oben {
        background: url(img/nn.gif) repeat-x;
      }

div.unten {
        background: url(img/ss.gif) bottom repeat-x;
      }

div.linkeObereEcke {
        background: url(img/nw.gif) left top no-repeat;
      }

div.rechteObereEcke {
        background: url(img/ne.gif) right top no-repeat;
      }

div.linkeUntereEcke {
        background: url(img/sw.gif) left bottom no-repeat;
      }

div.rechteUntereEcke {
        background: url(img/se.gif) right bottom no-repeat;
      }

div.inhalt {
        padding: 10px;
      }
Das komplette Beispiel mit den Grafiken hänge ich hier als ZIP-Datei an.
 

Anhänge

Hi Maik,

scheint auf den ersten schnellen Blick super zu funktionieren und nun die Frage. Ist es besser als mit Tabellen zu arbeiten?

Vielen Dank nochmal.

Gruss Romsl
 
Hi,

wenn man den Grundsatz verfolgt, dass Tabellen semantisch nicht als allgemeines "Layout-Werkzeug" für ein Dokument dienen, lautet die Antwort: Ja.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück