Benutzerdefinierte Suche

Beste Variante für <div> mit grafischem Rahmen?

  1. Saugkraft

    Saugkraft Thread Starter Super Moderator

    Mitglied seit:
    20.02.2005
    Beiträge:
    8.760
    Medien:
    1
    Zustimmungen:
    2.453
    Hallöchen,

    mich würde mal interessieren, wie ihr folgende Problemstellung umsetzen würdet:

    Ich will auf einer Seite ein <div> unterbringen, das einen grafischen Rahmen hat. Ich erstelle in Photoshop also z.B. ein Quadrat mit blauem Rahmen, das mir auf der Seite als Umrandung für das <div> dienen soll.

    Eine Möglickeit wäre, die komplette Grafik per CSS als background-image für das <div> zu definieren. Nachteil: ich bin mit dem Inhalt des divs an die Höhe der Grafik gebunden. Weil die Grafik ja eine vorgegebene Höhe hat.

    Zweite Variante: ich teile die Grafik in drei Teile auf. Den oberen Teil (oben.gif), eine 1px hohe Grafik aus dem Mittelteil (mitte.gif) und den unteren Teil (unten.gif). Dann setze ich drei divs wie folgt übereinander:

    Code:
    <div style="background-image: url(oben.gif); background-repeat: norepeat;"></div>
    <div style="background-image: url(mitte.gif); background-repeat: repeat-y;">Hier steht der Inhalt...</div>
    <div style="background-image: url(unten.gif); background-repeat: norepeat;"></div>
    
    Mir scheint die zweite Lösung praktikabel zu sein. Oder gibt es noch eine schickere Variante?
     
    Saugkraft, 26.02.2007
  2. koli.bri

    koli.bri

    Ich hab mal eine herausgerissene Seite genau auf die Zweite Möglichkeit dargestellt.
    Ziel war auch, dass sie in der Höhe variabel ist.
    Also einen Kopfteil, einen Fußteil, der in der Größe fest ist geschustert, und den Mittelteil dann dann sich wiederholen lassen.

    Genau so würde ich es auch wieder machen :)

    gruß
    Lukas
     
    koli.bri, 26.02.2007
  3. Saugkraft

    Saugkraft Thread Starter Super Moderator

    Mitglied seit:
    20.02.2005
    Beiträge:
    8.760
    Medien:
    1
    Zustimmungen:
    2.453
    Prima, danke. Dann werd ich mich da mal dran machen. Wollte nur noch mal Rat einholen, bevor ich wie ein Wilder die Grafiken erstelle und zerschnippele und dann evtl. feststelle, dass es so nicht klappt.
     
    Saugkraft, 26.02.2007
Die Seite wird geladen...
Ähnliche Themen - Beste Variante <div>
  1. mingorius
    Antworten:
    4
    Aufrufe:
    362
  2. Isegrim242
    Antworten:
    6
    Aufrufe:
    1.030
    Isegrim242
    23.08.2013
  3. apstalker
    Antworten:
    8
    Aufrufe:
    949
    apstalker
    26.11.2012
  4. laukel
    Antworten:
    41
    Aufrufe:
    2.078
  5. ataq
    Antworten:
    4
    Aufrufe:
    960