Frage zu divs...

[Encoder]

Hallo, mal ne kniffelige Frage zu einem Layout, an dem ich schon ne Weile rum überlege.

Ich habe bisher ein div (mit begrenzter Breite), in dem sich folgendes befindet.

<div>

<p>Text</p>

<div>
    <p>Evtl. viel Text, den man scrollen soll. Daher das div drum herum,
      es hat overflow:scroll und eine max-height, für den Scrolleffekt.
      Dieser Teil macht das gesamte äußere div variabel hoch!
    <p>
  </div>

<p>Eine Leiste mit Buttons</p
</div>

Das äußere div brauch ich schon mal wegen der Positionierung. Das zweite innen brauch ich, damit dieses div scrollen kann, wenn der <p> in ihm zu lang wird.

Hinter das ganze soll jetzt ein Hintergrundbild, das oben und unten einen Abschluss hat. Praktisch an die Grenzen des äußeren divs.

Denkbar wäre, oben ein relativ hohes Bild anzusetzen und ganz unten den Abschluss separat mit einem Bild zu gestalten.
Allerdings befürchte ich dass das in einer div Suppe ausartet.
Wenn ich dem äußeren div den oberen Teil des Hintergrunds geb, könnte ich der Buttonleiste den unteren Teil des HG verpassen. Dann ragt allerdings der obere Teil unter diesem noch hervor.

Ich könnte jetzt um die oberen zwei Teile (p und div) nochmal ein div klatschen, damit da das obere Hintergrundbild reinkommt.
Aber das werden mir so langsam zu viele divs, hat jemand ne Idee wie ich das schöner machen könnte?

[Beat]

Aber das werden mir so langsam zu viele divs, hat jemand ne Idee wie ich das schöner machen könnte?

Hast du in Betracht gezogen:
div.classname:before{}
div.classname:after{}

mfg Beat

[Encoder]

Bekannt ist mir das, aber wie könnte ich das hier einsetzen?

[Beat]

Bekannt ist mir das, aber wie könnte ich das hier einsetzen?

Du kannst die Pseudo-Elemente als Block formatieren, Grösse verleihen und Hintergrundbild zuweisen.

mfg Beat

[Encoder]

Und wie muss das dann aussehen?
Oder meinst du ich soll einfach die divs mit before und after erzeugen, so dass sie im Quellcode nicht zu sehen sind? Aber da sind sie dann trotzdem?
Wär cool wenn du mir da ein Beispiel hättest.

[Der Martin]

Hi,

<div>
    <p>Evtl. viel Text, den man scrollen soll. Daher das div drum herum,
      es hat overflow:scroll und eine max-height, für den Scrolleffekt.
      Dieser Teil macht das gesamte äußere div variabel hoch!
    <p>
  </div>

Das äußere div [...] Das zweite innen brauch ich, damit dieses div scrollen kann, wenn der <p> in ihm zu lang wird.

Dafür braucht's aber kein zusätzliches umschließendes div, denn diese Formatierung kannst du auch dem p-Element direkt mitgeben. Das zusätzliche div brauchst du nur, wenn es eventuell auch mal mehrere Absätze enthalten könnte (oder zusätzlich Überschriften o.ä.).

Hinter das ganze soll jetzt ein Hintergrundbild, das oben und unten einen Abschluss hat. Praktisch an die Grenzen des äußeren divs.

Was spricht dagegen, den Mittelteil des Hintergrundbilds dem äußeren div zu geben (mit repeat-y), den oberen und unteren Abschluss jeweils dem ersten bzw. letzten Kindelement des div-Containers (mit background-position:top/bottom und no-repeat)?

So long,
 Martin

[Encoder]

Dafür braucht's aber kein zusätzliches umschließendes div...

Ok das ist cool, daran hab ich noch nicht gedacht!

Was spricht dagegen, den Mittelteil des Hintergrundbilds dem äußeren div zu geben (mit repeat-y), den oberen und unteren Abschluss jeweils dem ersten bzw. letzten Kindelement des div-Containers (mit background-position:top/bottom und no-repeat)?

Das Problem ist, das Oberteil und Unterteil sind unten etwas abgeschnitten und transparent. Der Mittelteil besteheht aus Strichen an der Seite. Etwa so

___
/
|
|
\___

Wenn ich den Mittelteil komplett durchgängig mache (was er in dem von dir angesprochenen div ja wäre), würde er auch hinter dem Ober/Unterteil liegen und an den entsprechenden Stellen durchscheinen.
Ich hab jetzt drei Teile an den inneren Elementen. Damit siehts so aus wie gewünscht.
Wenn ich

[MudGuard]

Hi,

neben dem bereits gesagten:

<p>Eine Leiste mit Buttons</p

Streich das e aus der Leiste und mach das als Liste statt als Absatz.

cu,
Andreas

[stewe]

Allerdings befürchte ich dass das in einer div Suppe ausartet.

Aber das werden mir so langsam zu viele divs, hat jemand ne Idee wie ich das schöner machen könnte?

Ich finde diese allgemeine Angst davor, möglichst keine "div-Suppe" zu erhalten total übertrieben. Den Quelltext möglichst schlank halten zu wollen, halte ich zwar für sehr sinnvoll. Aber ein krampfhaftes Gebastel, nur um nicht noch ein div brauchen zu müssen? Das ist doch unnötig.
Für die meisten Webseiten ist die visuelle Ausgabe auf einem Bildschirm immer noch die wichtigste Ausgabevariante - und für diese darf man meines Erachtens auch Zugeständnisse machen. Vor allem da ein leeres, mit css formatiertes div andere Ausgabemedien nicht einschränkt.
In dem Sinne Stufe ich persönlich die so gewonnene zusätzliche Freiheit, die zusätzlichen Möglichkeiten für Design und Gestaltung als wichtiger ein, als die Vermeidung inhaltsleerer divs etc.
Dass man zu Beginn versucht, ein Design auf anderem Weg umzusetzen, halte ich auch für den richtigen Weg - nur soll man zusätzliche divs nicht im Vornherein schon ausschliessen.

gruss

[Encoder]

Da geb ich dir schon recht, ich spare ja auch nicht wo es geht.
Für mich steht im Vordergrund dass ich mein Zeug auch später noch durchschaue und ein bisschen was lernen ist ja auch nicht schlecht.
Und wenns wirklich einfacher geht, warum nicht.

[stewe]

Da geb ich dir schon recht, ich spare ja auch nicht wo es geht.
Für mich steht im Vordergrund dass ich mein Zeug auch später noch durchschaue und ein bisschen was lernen ist ja auch nicht schlecht.
Und wenns wirklich einfacher geht, warum nicht.

ja da kann ich absolut zustimmen!