Krzysztof Durak Przyjmę zlecenia
Łukasz Stępa Front-End developer
konto usunięte
Krzysztof Durak Przyjmę zlecenia
Łukasz Stępa:
Jednolitym tłem się nie da. Proponuje rozbić to na 3 elementy.
<body>
<div class="header">górny pasek</div>
<div class="content">galeria</div>
<div class="footer">dolny pasek</div>
</body>
body { background: #ccc; }
.header { height: 20px; }
.content { height: 300px; border-top: 1px solid #000; }
.footer { height: 20px; border-top: 1px solid #000; border-bottom: 1px solid #000; }
oczywiście height dodałem tak żeby było widać od razu po klejeniu kodu. Normalnie w contencie nie bedzie height i bedzie sie rozwijał na tyle w dół na ile wysoka będzie galeria
Łukasz Stępa Front-End developer
Krzysztof Durak:
Dziki wielkie dopiero się uczę ale chyba rozumiem co napisałeś tylko będę musiał zamiast class zrobić div bo w te paski górny i dolny chce dać jeszcze menu logo i jakiś JPG
ale mniejsza o to dzięki jeszcze raz
Krzysztof Durak Przyjmę zlecenia
Krzysztof Kawa:Panowie siedziałem może z pół dnia i nie mogłem zrobić tej stopki
Jeśli na stronie będzie dużo treści to tak jak napisał Łukasz, natomiast przy małej jej ilości stopka "ucieknie" w górę.
Tutaj rozwiązanie tego problemu: http://stickyfooter.com
p.s. Krzysztof, oczy bolą - chciałbym, chciałbym, rozszerzałaby - tam nie ma miejsca na spacje;)
Łukasz
Z.
Specjalista ds
Informatyki w Mentor
S.A.
Krzysztof Durak:
body {
height:100%;
background-color:#e6e5e5;
margin: 0px;
font-family: verdana, sans-serif;
}
<html>
<head>
<style type="text/css">
body
{
background-color: #efefef;
}
div
{
background-image:url('back.png');
background-repeat: repeat-x;
background-position: bottom;
}
#naglowek
{
height: 50px;
}
#tresc
{
height: 450px;
}
#stopka
{
height: 30px;
}
</style>
</head>
<body>
<div id="naglowek">To jest naglowek</div>
<div id="tresc">Tutaj bedzie tresc</div>
<div id="stopka">Stopka</div>
</body>
</html>
Krzysztof Durak Przyjmę zlecenia
Łukasz Z.:Dałem body na 100% bo tak było w tutku Który podał Krzysztof
Krzysztof Durak:
body {
height:100%;
background-color:#e6e5e5;
margin: 0px;
font-family: verdana, sans-serif;
}
Ustawienie wysokości sekcji body na 100% jakoś mi nie za bardzo pasuje.
Czy konieczne jest aby stopka wyświetlała się na dole okna przeglądarki (nie jestem pewien czy dobrze Cię zrozumiałem)?Chciałem żeby stopka była na dole przeglądarki bo jak ktoś będzie maił duży monitor to stopkę będzie miał w połowie
PS. Jeśli obrazek daje się wyrazić przez powielenie to można ograniczyć się do przygotowania pliku graficznego o szerokości jednego pixela i go potem tylko powtarzać na całą szerokość strony ;)
Edytka dodaje:
Czy takie coś by Cię satysfakcjonowało (działającą wersję wrzuciłem na http://zajonc.pl/test/test.htm)?
Łukasz
Z.
Specjalista ds
Informatyki w Mentor
S.A.
Krzysztof Durak:
Chciałem żeby stopka była na dole przeglądarki bo jak ktoś będzie maił duży monitor to stopkę będzie miał w połowie
nie wiem czy to będzie dobrze ?
#stopka
{
height: 30px;
position: fixed;
bottom: 0px;
width: 100%;
}
konto usunięte
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
* {margin:0; padding:0;}
html, body {height: 100%; }
#header { height: 100px; }
#wrapper { min-height: 100%; }
#content { overflow:auto; }
#footer { position: relative; margin-top: -100px; height: 100px; clear:both; }
/*do celow wizualizacji*/
#header { background-color: red;}
#wrapper { background-color: green;}
#content { background-color: blue;}
#footer { background-color: magenta;}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"> header </div>
<div id="content"> content</div>
</div>
<div id="footer"> footer </div>
</body>
</html>
Łukasz
Z.
Specjalista ds
Informatyki w Mentor
S.A.
Krzysztof Kawa:
Wewnątrz #header, #content i #footer można umieścić co tam się sobie wymyśli. Stopka będzie widoczna do momentu kiedy content będzie się nad nią mieścił, potem jak dobry obywatel przesunie się w dół razem z resztą strony.
konto usunięte
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
html,body { height: 100%; margin: 0; background: #000; }
#wrapper { position: relative; min-height: 100%; background: #FFF; }
#header { height: 100px; background: #f00; }
#content { position: relative; min-height: 100px; background: #0f0; padding-bottom: 100px; }
#overflow { position: absolute; left: 0; bottom: 0; width: 100%; height: 100px; border-top: 1px dotted #F00; }
#footer { position: absolute; left: 0; bottom: 0; width: 100%; height: 100px; background: #00f; }
</style>
</head>
<body>
<div id="wrapper">
<div id="header">HEADER</div>
<div id="content">CONTENT
<div id="overflow">TU BEDZIE NACHODZIC STOPKA</div>
</div>
<div id="footer">FOOTER</div>
</div>
</body>
</html>
Dawid Pierzchalski PHP Developer
Następna dyskusja:
пропозиції роботи
