[html][css] 3 różna tła w jednym divia Opcje

[sweter]

Witam,
chciałbym w 1 divie zrobić taki układ teł jak w załącznku.
(IMG:http://wstaw.org/m/2010/05/10/Bez_nazwy.png)
Przy czym:
div 1. ma stałą wysokość (przylega do górnej krawędzi)
div 2. ma zmienną wysokość
div 3 ma stałą wysokość (przylega do dolnej krawędzi)

Da się tak zrobić za pomocą 1 div'a??

Pozdrawiam

Ten post edytował sweter 10.05.2010, 10:19:53

[pedro84]

Tak. Górny i dolny pozycjonujesz absolutnie względem diva nadrzędnego, dla środkowego ustawiasz marginesy (o wysokości tych divów) i będzie Ci działać.

[krzysztof_kf]

nie da się zależy co chcesz uzyskać rozumiem że góra nagłówek to jakiś gradient później kolejne tło i potem stopka ? daj to najlepiej pierwsze tło w body potem dodatkowy div do nagłówka i na koniec dodatkowy div do stopki raczej się nie da się zrobić w jednym divie ;/

[john_doe]

ja bym zrobił tak:

1. tworzysz jednego dużego diva, który pełni rolę kontenera
2. wewn. 1. tworzysz 3 divy: header ( stały height ), body ( nie nadajesz wysokości ) oraz footer ( stały height )

[sweter]

Ale mi chodziło o takie coś, wewnątrz jest treść, która "zahacza" o wszystkie obszary.
(IMG:http://wstaw.org/m/2010/05/10/Bez_nazwy_.png)

[pedro84]

Środkowej zawartości musisz ustawić ujemne marginesy, dolny i górny.

[Pawel_W]

[HTML] pobierz, plaintext 
<div id="div1">
    <div id="div2">
        tekst
    </div>
</div>
[HTML] pobierz, plaintext 

dla #div1 dajesz górne tło, no-repeat, position: left top;
dla #div2 dajesz dolne tło, no-repeat, position: left bottom + środkowe tło (jako kolor);

to wypali tylko jeżeli środkowe tło jest jednolite

[varez]

jak chcesz 3 grafiiki to budujesz 3 divy:

[HTML] pobierz, plaintext 
<div id="div1">
  <div id="div2">
    <div id="div3">
       tresc
    </div>
  </div>
</div>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
#div1 {
 background: url('obr1.png') top center repeat-x; /* bądź no-repeat */
}
#div2 {
 background: url('obr2.png') bottom center repeat-x; /* bądź no-repeat */
}
#div3 {
 background: url('obr3.png') center center repeat;
 min-height: 200px; /* zamiast 200px ma byc wysokosc grafiki górnej i dolnej */
}
[CSS] pobierz, plaintext 

i niech te dwa pierwsze obrazki mają taki "gradient przeźroczystości" zeby sie tło powtarzające mogło wkomponować w to na górze i na dole..

Ten post edytował varez 10.05.2010, 12:23:34