Anzeige

CSS Design: 3 Spaltig - aber endloser Rand

CSS Design: 3 Spaltig - aber endloser Rand | PSD-Tutorials.de

Erstellt von xanTrax, 07.08.2008.

  1. xanTrax

    xanTrax Noch nicht viel geschrieben

    Dabei seit:
    30.12.2006
    Beiträge:
    29
    Geschlecht:
    männlich
    Ort:
    Nürnberg
    CSS Design: 3 Spaltig - aber endloser Rand
    Hi,

    also ich bin wohl grad zu dämlich das zu finden was ich möchte, denke es gibt 100 pro schon so ein Thema, aber ich will es einfach nicht finden (evtl. bin ich zu verbohrt gerade auf falsche Begriffe).

    Also mein Problem:
    Ich möchte eine Seite erstellen, bei der der
    Inhalt
    - zentriert ist
    - 1000px breit
    - variable höhe (je nach Textinhalt, kommen später per Datenbank in eigenen Div`s)
    Rand rechts und links
    - 30px hoch
    - bündig zum Rand des Browsers und zum jeweiligen Rand des Inhaltes
    - Endlosbild enthalten

    Unten an den Inhalt soll dann noch ein Footer kleben.

    Also optisch soll am Ende eine Linie von links kommen bis sie nahtlos in den Inhaltsbereich übergeht dort in eine Grafik wandelt und dann wieder als Linie zum anderen Browserrand geht. Dabei soll egal welche Auflösung man gerade hat diese Linie immer bis zum Rand gehen!

    Wie löse ich das?

    <div id="links">Hier Endlosgrafik per css-background-image und repeat-x</div>
    <div id="Inahlt">Hier kommen Div-Boxen mit Nachrichten rein, soll variabel nach unten ausdehnbar sein und 1000px breit</div>
    <div id="rechts">Hier Endlosgrafik per css-background-image und repeat-x</div>

    Hoffe mir kann jemand helfen krieg hier noch die Kriese!
    Möchte es aus Gründen der variablen Länge nicht mit position: absolut lösen.

    mfg
    xan
     
    #1      
  2. rapzitis

    rapzitis Guest

    CSS Design: 3 Spaltig - aber endloser Rand
    AW: CSS Design: 3 Spaltig - aber endloser Rand

    wenn ich dich richtig verstehe willst du EINE Grafik Kacheln.

    Dann lege das gerüst folgender maßen an:

    <div id="inhalt_hintergrund">
    <div id="inhalt"></div>
    </div>


    "inhalt_hintergrund" gibst du die eigenschaft 100% ("bündig zum Rand des Browsers und zum jeweiligen Rand des Inhaltes") und die hintergrundgrafik gekachelt.

    "inhalt" gibs lässt du zentrieren und gibst die gewünschte feste breite von 1000px.

    Die Höhe von 30px, ist ja nicht notwendig, wenn diese variable sein soll.
     
    #2      
  3. xanTrax

    xanTrax Noch nicht viel geschrieben

    Dabei seit:
    30.12.2006
    Beiträge:
    29
    Geschlecht:
    männlich
    Ort:
    Nürnberg
    CSS Design: 3 Spaltig - aber endloser Rand
    AW: CSS Design: 3 Spaltig - aber endloser Rand

    Mhh ne glaub ich mein was anderes....

    Also angehängte Grafik.... weiß soll sich immer dehnen von der Weite her und den roten Streifen (1px breit x 30px hoch) so oft einsetzen wie es halt notwendig ist, dass es bündig zum schwarzen Inhaltsbereich ist, der immer zentriert sein soll.

    Sprich hat man eine Auflösung die kleiner als 1000px ist, würde man den weißen Rand gar nicht sehen.... hat man ne Auflösung von 2000px würde man links und rechts jeweils 500px weißen Rand sehen und halt die rote Linie wieder durchgehend.

    mfg
    xan

    Bild: http://s1.directupload.net/images/080807/bs72i9iv.jpg
     
    #3      
  4. rapzitis

    rapzitis Guest

    CSS Design: 3 Spaltig - aber endloser Rand
    AW: CSS Design: 3 Spaltig - aber endloser Rand

    jo genau das mein ich ...

    schau ... du legst im meinem beispiel fest, das "inhalt_hintergrund" über die gesamte bildschirm breite geht - width:100%; und die kachelbare Grafik auf der x-achse.

    innerhalb des Containers legst du ein weiteren div fest "Inhalt". Dieser wird 1000px breit. Bekommt margin-left/right - auto, damit dieser zentriert wird.

    Innerhalb von "Inhalt" kannst du nun beliebig viele weiter divs einbauen, welche nahtlos mit der gekachelten Hintergrundgrafik übereinstimmen.
     
    #4      
  5. serverhombre

    serverhombre Guest

    CSS Design: 3 Spaltig - aber endloser Rand
    AW: CSS Design: 3 Spaltig - aber endloser Rand

    Hallo,
    hab mal ein kleines Beispiel erstellt:
    Beispiel

    Einfach mal einen Blick in den Quellcode werfen, bei Fragen einfach nochmal melden. ;)
     
    #5      
  6. stb_87

    stb_87 Web-Sheriff - ohne Bild

    Dabei seit:
    13.05.2007
    Beiträge:
    1.895
    Geschlecht:
    männlich
    Software:
    dies & das
    CSS Design: 3 Spaltig - aber endloser Rand
    #6      
  7. xanTrax

    xanTrax Noch nicht viel geschrieben

    Dabei seit:
    30.12.2006
    Beiträge:
    29
    Geschlecht:
    männlich
    Ort:
    Nürnberg
    CSS Design: 3 Spaltig - aber endloser Rand
    AW: CSS Design: 3 Spaltig - aber endloser Rand

    Wow danke für die Hilfe...

    Die Beispiele von CSS 4You sind leider nicht das was ich suche, da sich hier ja der Inhalt immer verändert und die Ränder starr bleiben (also quasi genau das Gegenteil von dem was ich wollte).

    Aber serverhombre das ist genau das was ich meine, nur das du paar interessante Sachen gemacht hast, die ich gar nicht kenne! :)
    Dennoch vielen Dank, werde mir das jetzt zu gemüte führen und dann selber umsetzen.
    -Vorfreude- ;)

    Ech spitze, danke an alle für schnelle Antwort!

    mfg
    hmmm
     
    #7      
x
×
×
teststefan