Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Element przesuwający się wraz ze stopką
Forum PHP.pl > Forum > Przedszkole
merszel
Witam, prawdopodobnie banalne pytanie, ale za pomoc byłbym bardzo wdzięczny.

http://img139.imageshack.us/img139/6172/stronac.jpg

Jest to płynny layout, a chodzi mi o to, żeby element koloru czerwonego przesuwał się razem ze stopką w zależności od ilości tekstu na stronie.
Piotrwusek
Nie wiem jak pokroiłeś sobie swoją grafikę.

Co to Twojego pytania...

Zakładając ze ciąłeś to na tabelki to porostu daj polu (zielonemu) które masz pod polem(żółtym)
Kod
height="100%"


Pamiętając żeby rodzić też miał wysokość na 100% i wtedy będzie się ono rozszerzać wraz z wielkością teksu
seth-kk
cerwony element wrzoc do stopki i nadaj jej ujemny margines gorny rowny wysokosci tego elementu
drPayton
  1. <div>
  2. <div style="width:100%;height:200px;background:blue;">nagłówek</div>
  3. <div style="green">
  4. <div style="width:200px;height:200px;background:yellow;float:left;">Menu</div>
  5. <div>Tekst</div>
  6. <div style="clear:left;">
  7. <div style="width:200px;height:100px;background:red;">Toto nad stopką</div>
  8. <div style="width:100%;height:200px;background:lightblue;">stopka</div>
  9. </div>
  10. </div>
  11.  
  12. </div>


Tu czerwony element zawsze jest bezpośrednio nad stopką... Tak?
merszel
Cytat(drPayton @ 26.08.2009, 12:25:45 ) *
  1. <div>
  2. <div style="width:100%;height:200px;background:blue;">nagłówek</div>
  3. <div style="green">
  4. <div style="width:200px;height:200px;background:yellow;float:left;">Menu</div>
  5. <div>Tekst</div>
  6. <div style="clear:left;">
  7. <div style="width:200px;height:100px;background:red;">Toto nad stopką</div>
  8. <div style="width:100%;height:200px;background:lightblue;">stopka</div>
  9. </div>
  10. </div>
  11.  
  12. </div>


Tu czerwony element zawsze jest bezpośrednio nad stopką... Tak?


W tym przypadku wpisanie tekstu będzie powodować przesuwanie się czerwonego elementu i stopki - racja, ale tekst nie sięgnie do niebieskiej stopki, gdyż strona rozciąga się po dojściu tekstu do wysokości czerwonego elementu, mam nadzieję, że zrozumiale to opisuję tongue.gif

Cytat(seth-kk @ 26.08.2009, 12:23:47 ) *
cerwony element wrzoc do stopki i nadaj jej ujemny margines gorny rowny wysokosci tego elementu


Natomiast ten sposób wydaje się eliminować powyższy błąd, ale czerwony element, gdy tekstu jest mało - nachodzi na lewe menu. Jakieś sugestie, żeby Menu i Cz. El. nie nachodziły na siebie? min-height? Czy może coś praktyczniejszego?
seth-kk
float: left dla menu + clear: left dla stopki?
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.