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

Diskutiere mit über: Beste Variante für <div> mit grafischem Rahmen? im Web Page Design Forum

  1. Saugkraft

    Saugkraft Thread Starter Super Moderator

    Beiträge:
    9.958
    Zustimmungen:
    1.659
    Registriert seit:
    20.02.2005
    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?
     
  2. koli.bri

    koli.bri Gast

    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
     
  3. Saugkraft

    Saugkraft Thread Starter Super Moderator

    Beiträge:
    9.958
    Zustimmungen:
    1.659
    Registriert seit:
    20.02.2005
    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.
     
Die Seite wird geladen...
Ähnliche Themen - Beste Variante <div> Forum Datum
Problem mit verschachtelten div-Boxen Web Page Design 30.08.2016
Problem: DIV sprengt Container Web Page Design 22.08.2013
Link/Scroll zu div id animieren Web Page Design 22.11.2012
Thumbnail Gallery, zusammen mit Text bündig rücken /oder/und in ein DIV packen… Web Page Design 18.08.2012
Wie verschiebe ich in einem Div-Layer den Inhalt, ohne dabei den HG anzusprechen? Web Page Design 15.08.2011

Diese Seite empfehlen

Benutzerdefinierte Suche