Forum PHP.pl > [HTML][CSS] Problem ze stopką

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][CSS] Problem ze stopką

thomson89

5.12.2009, 14:31:06

Witam!

Mam problem ze stopką strony. Nie przylega ona do końca monitora, lecz jak treść jest krótsza pojawia się wyżej. Style stopki:

[CSS] pobierz, plaintext 
#footer {
        clear: both;
        height: 180px;
        background: url(../images/img03.jpg) repeat-x left bottom;
        /*background-color: #753334;*/
        text-align: center;
        font-size: smaller;
        font-family: Arial, Helvetica, sans-serif;
        color: white;
}
[CSS] pobierz, plaintext

korro

5.12.2009, 14:56:29

Spróbuj:

[CSS] pobierz, plaintext 
position: fixed;
bottom: 0px;
[CSS] pobierz, plaintext

thomson89

5.12.2009, 15:06:01

Już lepiej, ale...

- jest szerokości tekstu (nie całej szerokości przeglądarkowego okienka)
- "przykleiło" się do lewej strony

korro

5.12.2009, 15:08:05

[CSS] pobierz, plaintext 
width: 100%;
[CSS] pobierz, plaintext

vokiel

5.12.2009, 15:46:36

Coś w stylu CSS Sticky Footer?

thomson89

5.12.2009, 17:24:00

Cytat(korro @ 5.12.2009, 15:08:05 )

[CSS] pobierz, plaintext 
width: 100%;
[CSS] pobierz, plaintext

Nie działa...

@vokiel, no coś takiego ale nie umiem tego zastosować do mojej stronki. Pomożesz?

Dałem tak (divy są ok), a treść objąłem divem main. I nie działa. (treść to tabelka).

[CSS] pobierz, plaintext 
html, body, #wrapper {height: 100%;}
 
body > #wrapper {height: auto; min-height: 100%;}
 
#main {padding-bottom: 180px;}  /* must be same height as the footer */
 
#footer {position: relative;
	margin-top: -180px; /* negative value of footer height */
	height: 180px;
	clear:both;} 
 
.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
[CSS] pobierz, plaintext

vokiel

5.12.2009, 18:40:26

Tak to masz?

[HTML] pobierz, plaintext 
<div id="wrapper">
    <div id="main" class="clearfix"></div>
</div>
 
<div id="footer"></div>
[HTML] pobierz, plaintext

Nie ma literówek typu wrap w html a wrapper w css ?

W css zapomniałeś chyba o tym:

[CSS] pobierz, plaintext 
* {margin:0;padding:0;} 
[CSS] pobierz, plaintext

Masz to gdzieś na żywo?

thomson89

6.12.2009, 08:55:15

Wejdź tutaj i wpisz jakieś fikcyjne dane.

Dodałem ten margin: 0; (...) i nic się nie zmieniło.

vokiel

6.12.2009, 10:03:29

Div footer nie powinien zawierać się w wrapper. A u Ciebie wrapper jest zamknięty za footerem (ależ to nie po polskiemu

)

Zrób tak jak w przykładzie. Wyrzuć footer poza wrapper.

[HTML] pobierz, plaintext 
<div id="wrapper">
    <div id="main" class="clearfix"></div>
</div>
 
<div id="footer"></div>
[HTML] pobierz, plaintext

thomson89

6.12.2009, 10:40:34

Dzięki! Wszystko już "śmiga".

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.