Delphi-PRAXiS - css-problem: text über 3 divs

Delphi-PRAXiS (https://www.delphipraxis.net/forum.php)

- Programmieren allgemein (https://www.delphipraxis.net/40-programmieren-allgemein/)

- - css-problem: text über 3 divs (https://www.delphipraxis.net/145509-css-problem-text-ueber-3-divs.html)

css-problem: text über 3 divs

Hallihallo,
ich brauche eure hilfe bei css:

der contentbereich besteht aus 3 vertikalangeordneten teilen.

Schwarz -> Weiß - Verlauf
"Weißer" Hintergrund (Grafik 1px Höhe mit y-repeat)
Weiß -> Schwarz - Verlauf

ich könnte jetzt ein div machen mit 3 divs untereinander und jedem dieser 3 das hintergrundbild zuweisen und ins mittlere div den inhalt einfügen. dieses div wäre dann variabel in der höhe, je nachdem wieviel drinsteht.

das problem ist: der inhalt soll schon im 1. div anfangen und im 3. div aufhören, da sonst der abstand oben und unten zu groß ist. negatives padding funktioniert nicht. eventuell kann man was mit ebenen (z-index) machen, aber ich habe gerade ein brett vor dem kopf. ich hoffe ihr könnt mir helfen.

Re: css-problem: text über 3 divs

Eine Möglichkeit wäre es, über das Dokument ein Div mit position:absolute zu setzen. Das Div ist dann unabhängig von allen anderen Elementen auf der Seite. Wichtig ist nur, dass der z-index des Elements größer als das der anderen ist, oder dieses spezielle Div nach den anderen im HTML Code steht.

Eine andere, imho schönere Möglichkeit wäre es zwei der Divs zu verbinden. Du sagst, dass das zweite Div einen einfachen weißten Hintergrund hat. Dafür braucht man kein Bild, da reicht ein background:white; Wenn du nun den Hintergrund des Dokuments entweder im Body oder in einem übergeordneten Div weiß machst, dann kannst du deinen ersten Farbverlauf in ein Div tun (mit repeat-x) und den Content auch dort rein machen. Kurze Veranschaulichung:

CSS:

Code:

			body {

  background:white;

}

.meinErsterVerlauf {

  background-image:url('verlauf1.png');

  background-repeat:repeat-x;

  /* evtl. noch padding */

}

HTML:

Code:

			<body>

  <div class="meinErsterVerlauf">

  </div>

  <div class="meinZweiterVerlauf"></div>

</body>

Hoffe das hilft! :thumb:

Liebe Grüße,
Valle