[html][css] Foot, Rozszerza się wraz z zawartością, gdy jej za mało przylega do dołu. Opcje

[Rewil]

Kiedyś próbowałem zrozumieć jak zrobić takie przyleganie, ale po prostu mi nie wychodzi. Wersja jest taka że albo rozwala stronę, albo stopka leci drugie tyle w dół, albo przylega do góry przeglądarki. Takiego foot'a potrzebuje zastosować na tej stronie: Klik. Wyrównanie statyczne, na zasadzie że zawsze przylega do dołu przeglądarki jeszcze umiem zrobić, ale jak przychodzi większa zawartość, to ta stopka tam zostaje ;>.

[piotrooo89]

może podasz trochę kodu? jakis link do strony? bo jak Ci mamy pomóc?

[pedro84]

Google.pl => CSS Sticky footer

[Rewil]

może podasz trochę kodu? jakis link do strony? bo jak Ci mamy pomóc?

Link podany był u góry. Link do strony

[HTML] pobierz, plaintext 
body{
	background:url('obrazki/bg.PNG') repeat-x;
	background-color: #690321;
	font-family:Arial;
	font-size: 11px;
	padding:0;
	margin:0;
	}
 
 
.szerokosc{
	margin: 0 Auto;
	width: 900px;
	height:auto;
}
 
	#box_lewy{
		float:left;
		width:200px;
		height:auto;
		margin:0 auto;
	}
 
	#tresc{
		float:left;
		width:700px;
	}
 
#stopka{
	width:900px;
	height:39px;
	float:left;
	background-image:url('obrazki/stopka.PNG');
	font-size:11px;
	color:#797979;
}
 
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
		<div class="szerokosc">
			<div id="box_lewy">
                                       menu boczne
			</div>
			<div id="tresc">
                                     zawartosc
			</div>
			<div id="stopka">
				Cała stopka przesunięta do dołu jeśli treść i box nie mają wystarczającej zawartości
			</div>
		</div>
[HTML] pobierz, plaintext 

Ten post edytował Rewil 2.05.2010, 13:09:04

[krzysztof_kf]

Witam możesz podać więcej szczegółów bo nie do końca rozumiem co chcesz uzyskać pozdrawiam .

[Rewil]

Być może masz małą rozdzielczość monitora.


Jak pedro napisał, "CSS Sticky footer" tyle że ja tego nie mogę jakoś podłączyć do tego projektu.

Tak wyszło po zastosowaniu kodu przypuszczalnie robiącego to co zamierzam.
Kliknij by zobaczyć link.

Ten post edytował Rewil 2.05.2010, 17:36:22

[pedro84]

Tutaj masz najlepsze rozwiązanie, nie powinieneś mieć z tym problemów jak znasz podstawy.

[krzysztof_kf]

Dla diva stopka dodaj

[CSS] pobierz, plaintext 
 
#stopka { 
position: fixed;
bottom: 0;
[CSS] pobierz, plaintext 

[pedro84]

Dla diva stopka dodaj

[CSS] pobierz, plaintext 
 
#stopka { 
position: fixed;
bottom: 0;
[CSS] pobierz, plaintext 

Przecież jemu nie o to chodzi...

[Rewil]

Dzięki za linka, ale mimo to nie działa mi dalej ;<. Css'a umiem podstawy mimo to nie rozumiem na jakiej zasadzie to oddala, powinny w css'ie być ify, działania na liczbach czy coś w tym stylu .
Link do aktualnego postępu
Jak widać próbowałem nawet używać te same nazwy i kopiując ten sam kod do mojego css'a.

Ten post edytował Rewil 2.05.2010, 20:30:25

[krzysztof_kf]

Podaj jaką rozdzielczością jest ten problem ? stopka ma przylegać do samego dołu okna przeglądarki nawet jeśli jest mało postów tak ?

[pedro84]

Podaj jaką rozdzielczością jest ten problem ? stopka ma przylegać do samego dołu okna przeglądarki nawet jeśli jest mało postów tak ?

Pod każdą, sprawdzone :-)

Stopka ma być cały czas na dole strony != okna przeglądarki.

[Rewil]

No jak jest za mało postów to do dołu przegląrki, tam gdzie się kończy okno strony. A jeżeli jest więcej postów to ma przylegać do ostatniego posta bo wtedy powstaje suwak i jedzie się dalej niż przeglądarka.

[krzysztof_kf]

No jak jest za mało postów to do dołu przegląrki, tam gdzie się kończy okno strony. A jeżeli jest więcej postów to ma przylegać do ostatniego posta bo wtedy powstaje suwak i jedzie się dalej niż przeglądarka.

A czytałaś mój post wcześniej ?

[CSS] pobierz, plaintext 
 
#stopka { 
position: fixed;
bottom: 0;
[CSS] pobierz, plaintext 

zawsze będziesz miał na dole stopkę eh ?

[Rewil]

No prawda, ale jak zmniejszysz okno to stopka nachodzi na posty, a ma się porostu zatrzymać przed nimi ;>.

[pedro84]

No prawda, ale jak zmniejszysz okno to stopka nachodzi na posty, a ma się porostu zatrzymać przed nimi ;>.

Czyli generalizując, ma być cały czas na dole strony, po zawartością, bez względu na to, ile tej zawartości jest. Wykorzystaj ten przykład co ci dałem, przejrzyj jego źródła (są tam linki).

[Rewil]

może podasz trochę kodu? jakis link do strony? bo jak Ci mamy pomóc?

Problem rozwiązany.

[HTML] pobierz, plaintext 
*{
  margin: 0;
  padding: 0;
}
 
html, body{
  height: 100%; /* Required */
}
 
#srodek_strony {
	margin: 0 auto;
	width: 900px;
	position: relative;
	min-height: 100%; /* For Modern Browsers */
	height: auto !important; /* For Modern Browsers */
	height: 100%; /* For IE */
	overflow:hidden;
}
 
#stopka {
  width: 100%;
  position: absolute;
  bottom: 0 !important;
  bottom: -1px; /* For Certain IE widths */
  height: 40px;
}
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
<div id="srodek_strony">
    Zawartość strony.
  <div id="stopka">
        Jakiś tekst na stopce.
  </div>
</div>
[HTML] pobierz, plaintext