Layout mit 3 Hintergrundgrafiken

lisali

lisali

Erfahrenes Mitglied
Hallo,

also, ich kenne es bisher nur mit Tabellen und ich weiß nicht, ob der Weg, den ich mir jetzt denke der gleiche ist, aber ich möchte mit CSS in folgendem Format den Content-Bereich bauen:

[1111]
[2222]
[1111]

Also bei 1111 ist jeweils die selbe Hintergrundgrafik und dieser Bereich bleibt eigentlich ganz unberührt. Er soll einfach nur dargestellt werden. Und 2222 ist der Bereich, wo der Inhalt ist. Von Tabellen her wäre das ja eher simpel und ich würde dort einfach die Hintergrundgrafik für jede Zeile bestimmen, aber bei CSS bin ich mir jetzt unsicher.
Müsste ich da ebenfalls 3 divs machen und Hintergrundgrafik + Höhe bestimmen?

Liebe Grüße,

Lisa
 
Moin,

wenn du mit drei einzelnen Grafiken arbeitest, werden die beiden äußeren Spaltenhintergründe in der Höhe nicht mitwachsen, da diese Blöcke ja inhaltsleer sind, und zudem keinen Bezug zum Inhaltsumfang des benachbarten mittleren Blocks besitzen. Dies ist nämlich der kleine, aber entscheidende Unterschied gegenüber einer Tabellenkonstruktion.

Schau dir hierzu mal meine beiden CSS-Tutorials an, in denen ich solch ein dreispaltiges Layout mit einem einzigen Hintergrundbild belegt habe:


Der Vorteil der hier angewandten "Faux Columns-Technik" liegt darin, dass sich die Spaltenhintergründe unabhängig von ihrem Inhaltsumfang in der Höhe optisch automatisch angleichen.

Da aber bei dir die beiden äußeren Spalten keinen Inhalt aufnehmen sollen, sondern lediglich zur Erzeugung und Ausschmückung der "Randbereiche" dienen, wären sie im HTML-Code gänzlich überflüssig, und das Hintergrundbild liesse sich alleinig für den mittleren Spaltenblock nutzen, der mit der padding-Eigenschaft einen linken und rechten Innenabstand erhält, der sich an der Breite der "Randbereiche" orientiert, damit sie von seinem Inhalt nicht überdeckt werden.

Das bis hierher Geschriebene geht von einem Layout mit fester Breite aus.

Falls es sich aber um ein Layout mit relativer Breite handeln sollte, hilft dir der folgende Lösungsansatz weiter, den ich kürzlich in dem Thema repeat in verschachtelten div boxen angehängt habe, und der für dieses Modell zwei Hintergrundbilder nutzt.

mfg Maik
 
Also wenn ich das richtig verstehe redet ihr grade an einander vorbei.

lisalis Beitrag liest sich so als würde sie eine vertikale Aufteilung wollen

also
[Oben]
[Mitte]
[Unten]

und nich das von euch vorgeschlagene typische
[Links][Mitte][Rechts]

Falls ich mich Irre sag ich schonmal sry.

Die konstruktive CSS Hilfe überlasse ich in beiden Fällen lieber Maik ;)
 
@rd4eva: Ja, genau... so meinte ich das!

Ähm... vielleicht habe ich mich auch zu voreilig entschieden bei meiner Fragestellung und dachte ich würde dann von der Logik her alleine auf das kommen, um das komplette Design in CSS zu gestalten, aber da gibt es folgendes Problem, das ich im Anhang im Bild beschrieben habe.

Wovon ich nämlich bei meinem ersten Beitrag ausging war ja "einfach nur" der Content-Bereich meiner Seite. Aber da ich denke, dass das Grundgerüst insgesamt etwas komplexer ist, aufgrund des mit dem Content-Bereich "mitkommenden" Menüs (siehe Bild), dachte ich, dass ich das direkt auch hier mal frage.

Ich hoffe ihr könnt nachvollziehen was ich so meine, ansonsten kann ich nochmal irgendwie eine Veranschaulichung machen.

Vielen Dank und Liebe Grüße,

Lisa
 

Anhänge

  • konzept.gif
    konzept.gif
    17,1 KB · Aufrufe: 39
Upps, sorry für die Fehlantwort :-(

Nun denn, was das Mitwachsen des Menü- und Inhalthintergrunds betrifft, bleibt es dennoch bei meiner Aussage von heute Morgen, dass hierfür beispielsweise ein gemeinsames Hintergrundbild vonnöten wäre, das in einem übergeordneten DIV-Block genutzt wird, damit sich dieser bei zunehmenden Inhalt automatisch angleicht.

Diese Technik kannst du in diesem Fall aber gleichermaßen in meinen beiden CSS-Tutorials studieren :)

Neben dieser "Faux Columns"-Technik gibt es aber noch weitere Lösungsansätze, damit sich die Spaltenhöhen, unabhängig von ihrem jeweiligen Inhaltsumfang, automatisch angleichen.

Diese kannst du dem Artikel AnyColumnLongest entnehmen, und die für dich geeignete Technik auswählen.

Was mich noch interssieren würde: Handelt es sich hier um ein Layout mit absoluter oder relativer Breite?

mfg Maik
 
Dankeschön! Also, ich versuche da erstmal durchzusteigen, denn ich verstehe ehrlichgesagt gerade nicht so viel. Und dann melde ich mich nochmals.

Vielleicht hilft mir ja auch die Antwort auf die Frage wie viele Container bzw. divs ich für so ein Layout (wie in meinem Anhang) bräuchte!?

Es handelt sich um absolute Breite beim Menü sowie beim Content. Also, die Pixelbreite ist jeweils fest und sollte nicht in % angegeben werden.

LG,

Lisa
 
Lass mich mal kurz durchzählen:

HTML: 
<div id="wrapper">
    <div id="header"></div>
    <div id="menu"></div>
    <div id="content"></div>
</div>

4 :)

Alternativ +1, falls noch ein Footerbereich erwünscht ist.

mfg Maik
 
Und dieser Footer käme dann nach dem div "content"?

Ja, ich wollte schon einen Footer machen, aber bin noch unschlüssig, ob der im Content-Bereich in über der "abschließenden" Hintergrundgrafik sein soll oder darunter.

Und das ist echt nur so wenig? Was ist denn mit den Hintergrundgrafiken? Müssen die nicht extra in ein div rein?

LG,

Lisa
 
Wo du den Footer-Block im HTML-Code einbindest, hängt davon ab, ob er sich über die gesamte Breite (= #wrapper), oder nur über die Breite von #content erstrecken soll:

  • Variante 1:
HTML: 
<div id="wrapper">
    <div id="header"></div>
    <div id="menu"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>
  • Variante 2:
HTML: 
<div id="wrapper">
    <div id="header"></div>
    <div id="menu"></div>
    <div id="content">
        <div id="footer"></div>
    </div>
</div>

Die Hintergrundbilder würden direkt in #wrapper (ein Hintergrundbild für #menu und #content), und #header eingebunden werden :)

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück