Przesunięcie div na koniec bloku Opcje

[projektGraf]

Witam

Na samym początku dam pierw link do obrazka, aby było wiadomo o czym mówię.

http://edzu.pl/blok.jpg

Potrzebuje zaznaczony na obrazku div przesunąć na sam dół div'a wypełniającego.

A teraz kody:

[HTML] pobierz, plaintext 
 
<style>
// fragment css
.categoryBackgroundMain {
	width: 198px; background-image: url(../img/categoryBackgroundMain.jpg); background-repeat: repeat-y; clear: both;
}
 
.categoryBackgroundBottom {
	width: 198px; background-image: url(../img/categoryBackgroundBottom.jpg); background-repeat: no-repeat;
	position: static; overflow: auto;
}
</style>
 
<div class="categoryBackgroundMain">Jakaś tak nieznana treść
       <div class="categoryBackgroundBottom"><div>
</div>
 
[HTML] pobierz, plaintext 

Problem w tym że zaprzyjaźnionego grafika poniosło, i zrobił box z wypełnieniem graficznym (te ukośne pasy). Wypełnienie musi być zawsze na dole bloku. Wysokości są nieznane ponieważ treść generuje się dynamicznie.

I teraz pytanie:
Jak zrobić jeśli jest długa treść na górze było wypełnienie categoryBackgroundMain.jpg a na dole bloku categoryBackgroundBottom.jpg

Bardzo proszę o pomoc

Pozdrawiam

[pedro84]

Position:relative dla nadrzędnego, position:absolute dla potomka i powinno działać.

Ten post edytował pedro84 15.03.2010, 14:35:31

[projektGraf]

Dzięki za odpowiedź ale jak dałem:

[HTML] pobierz, plaintext 
<style>
.categoryBackgroundMain {
	width: 198px; background-image: url(../img/categoryBackgroundMain.jpg); background-repeat: repeat-y; clear: both;
   position: relative; 
}
 
.categoryBackgroundBottom {
	width: 198px; background-image: url(../img/categoryBackgroundBottom.jpg); background-repeat: no-repeat;
	position: absolute; height: 204px;
}
</style>
 
<div class="categoryBackgroundMain">
       <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>dddddd<br><br><br>ddd
       <div class="categoryBackgroundBottom"></div>
 
 
</div>
[HTML] pobierz, plaintext 

to owszem categoryBackgroundBottom jest na dole ale bez treści, a potrzebuje aby treść kończyła się na categoryBackgroundBottom.



Pozdrawiam

Ten post edytował projektGraf 15.03.2010, 14:52:11

[krzysztof_kf]

to owszem categoryBackgroundBottom jest na dole ale bez treści, a potrzebuje aby treść kończyła się na categoryBackgroundBottom.



Pozdrawiam

No to wpisz dla danego selektora treść sama się nie wpiszę ;/

[projektGraf]

Przepraszam nie zauważyłem że źle napisałem tutaj kod.
Poprawny kod to:

[HTML] pobierz, plaintext 
<style>
.categoryBackgroundMain {
   width: 198px; background-image: url(../img/categoryBackgroundMain.jpg); background-repeat: repeat-y; clear: both;
}
 
.categoryBackgroundBottom {
  width: 198px; background-image: url(../img/categoryBackgroundBottom.jpg); background-repeat: no-repeat;
}
</style>
 
<div class="categoryBackgroundMain">
	     <div class="categoryBackgroundBottom"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>dddddd<br><br><br>ddd</div>
</div>
[HTML] pobierz, plaintext 

Obecnie <div class="categoryBackgroundBottom"> mam na górze box'u a potrzebuje aby poszedł na dół a na górze było wypełnienie class="categoryBackgroundMain"

Bardzo przepraszam za błędny kod na samym początku.

[krzysztof_kf]

eee usuń te znaczniki <br>

Kod

<div class="categoryBackgroundMain"></div>
         <div class="categoryBackgroundBottom">dddd</div>
</div>

[projektGraf]

No dobrze usunołem ale co to da.

<div class="categoryBackgroundMain">
<div class="categoryBackgroundBottom">
dddddd<br>ddd<br>dddddd<br>ddd<br>dddddd<br>ddd<br>dddddd<br>ddd<br>dddddd<br>ddd<br>dddddd<br>ddd
<br>dddddd<br>ddd<br>dddddd<br>ddd<br>dddddd<br>ddd<br>dddddd<br>ddd<br>dddddd<br>ddd<br>dddddd<br>ddd
<br>dddddd<br>ddd<br>dddddd<br>ddd<br>dddddd<br>ddd<br>dddddd<br>ddd<br>dddddd<br>ddd<br>dddddd<br>ddd
<br>dddddd<br>ddd<br>dddddd<br>ddd<br>dddddd<br>ddd<br>dddddd<br>ddd<br>dddddd<br>ddd<br>dddddd<br>ddd</div>
</div>

Jakiś długi bardzo text, ale i tak nic nie zmienia, ponieważ dalej nie wiem jak opuścić class="categoryBackgroundBottom"

Pozdrawiam

[krzysztof_kf]

Powinno być ok sprawdź

Kod

<style>
.categoryBackgroundMain {
   width: 198px; background-image:  url(../img/categoryBackgroundMain.jpg); background-repeat: repeat-y; clear: both;
}

.categoryBackgroundBottom {
  width: 198px; position: fixed; bottom: 0; background-image: url(../img/categoryBackgroundBottom.jpg); background-repeat: no-repeat;
}
</style>

<div class="categoryBackgroundMain">
         <div class="categoryBackgroundBottom"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>dddddd<br><br><br>ddd</div>
</div>

Ten post edytował krzysztof_kf 15.03.2010, 16:51:25

[projektGraf]

Niestety nie:
Brak wypełnienia, po zatym dolny blok przesuwa się z przewijaniem strony.

W miedzy czasie wykombinowałem taki kod:

[HTML] pobierz, plaintext 
<style>
.categoryBackgroundMain {
   width: 198px; background-image: url(../img/categoryBackgroundMain.jpg); background-repeat: repeat-y; clear: both;
}
 
.categoryBackgroundBottom {
  width: 198px; height: 204px; background-image: url(../img/categoryBackgroundBottom.jpg); background-repeat: no-repeat;
  margin-top: -180px;
}
</style>
 
<div class="categoryBackgroundMain">
          <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>dddddd<br><br><br>ddd
         <div class="categoryBackgroundBottom"></div>
</div>
 
[HTML] pobierz, plaintext 

co dało zamierzony efekt, ale jeśli blok jest krótki to ,,tło idzie w kosmos''.

Może jakieś inne rozwiązanie aby uzyskać taki efekt:
http://edzu.pl/blok2.jpg

Na szaro specjalnie na razie zrobiłem wypełnienie.

Ma ktoś jeszcze jakiś pomysł.

Pozdrawiam