+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: footer (/thread-footer)
footer - fth - 18-03-2010
Witam
Jakie parametry ( albo ich brak ) mogą trzymać pasek footera bezpośrednio po górnym dive.
Chodzi mi aby ten pasek był na samym dole okna przeglądarki - jak to zwykle występuje w klasycznym schemacie www.
Niestety u mnie tak nie jest div z paskiem footera "przykleił" się do góry (czyli końca zawartości strony), a między nim a dołem przeglądarki jest przestrzeń czyli zdefiniowane tło strony.
Jeśli ktoś rozumie o co mi chodzi i ma koncepcję na to aby udało się obniżyć diva z footerem na sam koniec strony - prosił bym o odpowiedz ...
RE: footer - Dhofca - 18-03-2010
Podaj adres strony to ktoś Ci pomoże.
RE: footer - fth - 18-03-2010
Wrzucilem na serwera...
adas.csns.pl
http://adas.csns.pl/Olimpia/index.html (footer jest tylko w index.html)
No wiec footer to 42 pixelowy pasek na dole, a w zasadzie nie do końca na dole bo dwa zbędne pasy poniżej uniemożliwiają jego maksymalnie dolne położenie.
Wiem że to wynika ze sporego chaosu w kodzie ale nie mogę dojść co za tym stoi.
Przy okazji mam jeszcze jedno pytanko ...
Otóż mam baner swf i chciałem go umieścić dokładnie na miejscu tego obrazka z prawej strony logo. Niestety nie potrafię go dokładnie umiejscowić w tym miejscu.
Jak tworze diva w celu wrzucenia do niego powyższego flasha wszystko mi sie sypie ...
RE: footer - Dhofca - 18-03-2010
Zrobiłem Ci taki 'szkielet', a Ty zobacz na czym polega to przyklejenie footera to dołu strony i edytuj swoją stronę w ten sam sposób.
HTML:
Kod:
<body>
<div id="page">
<div id="header"></div>
<div id="content"></div>
<div id="footer">Raz dwa</div>
</div>
</body>CSS:
Kod:
html, body {
height: 100%
}
#page {
background-color: #000000;
position:relative;
width:960px;
min-height:100%;
}
#footer {
background-color: #ff0000;
width:100%;
height:50px;
position:absolute;
bottom:0;
}Musisz tego diva 'page' zamknąć dopiero po footerze. Najważniejsze do zmiany w CSS jest position: relative w page i position: absolute w footer, min-height:100%; w page i bottom:0; w footerze.
RE: footer - fth - 18-03-2010
Dzięki bardzo - niestety po zastosowaniu tych parametrów całkiem mi końcowy footer znika. Napewno jest to spowodowane syfem w kodzie.
Jak byś miał jeszcze troche cierpliwości to podsyłam linki obrazujące cały ten problem:
http://adas.csns.pl/Olimpia/1.jpg - tj. screeny z dreamweavera - struktura divow
http://adas.csns.pl/Olimpia/default.css - plik css : )
Wiem ze ciężki temat - raczej na siłę robię tego cssa jak widać ...
RE: footer - majowydejf - 29-03-2010
Witam wszystkich swoim pierwszym postem. Ciesze sie, ze takie miejsce w sieci istnieje:)
Na poczatek taka sprawa: moje poczatki w cssie nie pozwlaja mi na dokonanie takiej rzeczy:
Probuje przerobic szablon wklejony tutaj przez Dhofca tak, aby bez wzgledu na ilosc tresci w content Footer zawsze byl u dolu strony natomiast tresc mogla sie przesuwac (przewijac) tylko w content lub innym kontenerze. Czyli wszystko dookola statyczne strona sie 'nie scrolluje' w dol, jedynie pewny obszar. Footer przyklejony na dole.
acha, druga sprawa, czy w powyzszym szablonie footer nie nachodzi czasem na content?
Jak to zrobic ?
pozdro;)
Edit: wszystko wskazuje na to, ze robi sie to za pomoca overflow, ale nie chce dzialac u mnie, moj szablon:
Kod:
html, body {
height: 100%
}
#page {
position:relative;
width:960px;
min-height:100%;
}
#footer {
background-color: blue;
width:100%;
height:10%;
position:absolute;
bottom:0;
margin-bottom: 0;
}
#menu {
float: left;
width: 20%;
margin-left: 0px;
padding-left: 0px;
clear: both;
color: #ffffff;
}
#content {
width: 80%;
height: 90%;
position: relative;
overflow: auto;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 4px;
padding-right: 4px;
padding-bottom: 0px;
padding-left: 4px;
}natomiast moj szatemel ;) :
Kod:
<div id="page">
<div id="banner"></div>
<div id="status"></div>
<div id="menu"></div>
<div id="content">
<jsp:doBody/>
</div>
<div id="footer">
stopka
</div>
</div>RE: footer - kace29 - 29-03-2010
Nie wiem czy Cie dobrze zrozumiałem, ale ja bym tak rozwiązał Twój problem.
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<link href="style.css" type="text/css" rel="stylesheet" />
<title>Strona</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div id="page">
<div id="banner">BANER</div>
<div id="status"></div>
<div id="menu">MENU</div>
<div id="content">CONTENT<br><br>Przykładowy tekst....<br>Przykładowy tekst....<br>Przykładowy tekst....<br>Przykładowy tekst....<br>Przykładowy tekst....<br>Przykładowy tekst....<br>Przykładowy tekst....<br>Przykładowy tekst....<br>
</div>
<div id="footer">
STOPKA
</div>
</div>
</body>
</html>Kod:
html, body {
height: 100%
}
#page {
width:960px;
background: white;
margin: 0 auto;
border: 1px solid;
}
#banner {
width: 100%;
min-height: 10%;
background: orange;
}
#footer {
background-color: blue;
height:10%;
width: 100%;
clear: both;
}
#menu {
float: left;
height: 20%;
width: 20%;
background: yellow;
}
#content {
float: left;
width: 80%;
background: pink;
}Page ma kolor biały i dodatkowo nadałem mu ramkę żeby był widoczny jego obszar. Height content zmienia się w zależności od rozmiarów tekstu w nim wrzuconego.
RE: footer - majowydejf - 30-03-2010
Hej, dzieki za odpowiedz:) chyba jednak nie do konca o to chodzilo.
Strona powinna wygladac tak, ze u gory mamy jakis banner, z lewej menu, na dole stopka a pomiedzy nimi (czyli obok menu) content. W zaleznosci od wprowadzonego tekstu, chcialbym, zeby scrollowal sie sam content, natomiast strona jako calosc nie powinna sie ruszac w dol. Dlatego wazne dla mnie jest, zeby stopka caly czas byla u dolu, nawet gdy w content jest malo zawartosci, gdy jes zas duzo, scrolluje sie sam content.
Tu jest mniej wiecej o to, co mi chodzi:
Kod:
@charset "utf-8";
#page {
width: 100%;
margin-right: auto;
margin-left: auto;
min-height:100%;
}
body, html {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 14px;
height: 100%;
margin: 0px;
padding: 0px;
}
#header {
background-color: #00CCFF;
height: 150px;
}
#footer {
background-color: #blue;
height: 5px;
width: 100%;
margin-right: auto;
margin-left: auto;
position:absolute;
bottom:0;
margin-bottom: 0;
}
#content p {
margin: 0px;
padding-top: 5px;
padding-bottom: 5px;
}
#content {
height: 100%;
width: 80%;
overflow: auto;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 4px;
padding-right: 4px;
padding-bottom: 0px;
padding-left: 4px;
}
#menu {
float: left;
width: 20%;
margin-left: 0px;
padding-left: 0px;
clear: both;
color: #ffffff;
}Po ustawieniu hight na auto w content nic sie nie dzieje. Jak to zrobic?