Forum PHP.pl > [HTML][CSS]Pozycjonowanie stopki

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][CSS]Pozycjonowanie stopki

web_newb

19.01.2011, 01:05:30

Witam wszystkich. Mój pierwszy post na forum a więc z krótkim wstępem.

Postanowiłem se dziś iż czas najwyższy nauczyć się tworzyć strony (HTML, CSS, PHP) . Siedzę więc od rana i składam jakiś podstawowy wygląd. Niestety nie idzie mi coś z wypozycjonowaniem stopki. Mój kod:

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
      <title>Moja strona</title>
      <link rel="Stylesheet" type="text/css" href="mystyle.css" />
 
</head>
 
<body>
<div>
<div class="banner">banner</div>
<div class="lewy">lewy</div>
<div class="tresc">tresc
<br />a<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br />a<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br />a<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br />a<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br />a<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br />a<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br />a<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />a
</div>
<div class="prawy">prawy</div>
<div class="stopka">stopka</div>
</div>
</body>
</html>
[HTML] pobierz, plaintext

[CSS] pobierz, plaintext 
body{
padding-centre: 11em;
font-family: Georgia, "Times New Roman", Times, serif;
color: black;
background-image: url(grafika/tlo4.png);
background-attachment: fixed;
}
 
div{
position: relative;
width: 1004px;
margin: 0 auto;
padding: 0px;
}
 
div.banner{
width: 1004px;
height: 200px;
background-color: #000000;
}
 
div.lewy{
position: absolute;
left: 0px;
top: 202px;
width: 200px;
height: 600px;
background-color: #00A000;
}
 
div.tresc{
position: absolute;
left: 202px;
top: 202px;
width: 600px;
background-color: #4F4F4F;
}
 
div.prawy{
position: absolute;
right: 0px;
top: 202px;
width: 200px;
height: 600px;
background-color: #00A000;
}
 
div.stopka{
position: fixed;
height: 40px;
bottom: 0;
width: 1004;
background-color: #00B000;
}
[CSS] pobierz, plaintext

Aktualnie stopka przyczepiona jest do dolnej krawędzi przeglądarki. Zależy mi jednak aby zawsze była przyczepiona do spodu najniżej umieszczonego diva. Czyli jeśli tekst w div.tresc jest krótki, stopka przylega do spodu div-ow prawego i lewego. Jeżeli natomiast tekstu w div.tresc jest bardzo dużo, stopka styka się z dnem tego właśnie div-a.

Mam nadzieję że nie namotałem za bardzo

PS. Poczytałem trochę forum i napotkałem na uwagi dotyczące zbyt częstego stosowania position-absolute, a nie bardzo wiem jak się bez tego obejść.

ciekawskiii

19.01.2011, 02:19:35

Hmm te BRy sa super:) wywal position: fixed; ze stopki, chyba

Damonsson

19.01.2011, 02:35:05

[CSS] pobierz, plaintext 
body {
    background: none repeat scroll 0 0 #FF0000;
    background-image: url("grafika/tlo4.png");
    color: black;
    font-family: Georgia,"Times New Roman",Times,serif;
}
div {
    margin: 0 auto;
    padding: 0;
    position: relative;
    width: 1004px;
}
div.banner {
    background-color: #000000;
    height: 200px;
    width: 1004px;
}
div.lewy {
    background-color: #00A000;
    float: left;
    height: 600px;
    width: 200px;
}
div.tresc {
    background-color: #4F4F4F;
    float: left;
    width: 600px;
}
div.prawy {
    background-color: #00A000;
    float: left;
    height: 600px;
    width: 200px;
}
div.stopka {
    background-color: #00B000;
    clear: both;
    height: 40px;
}
[CSS] pobierz, plaintext

Praktycznie musiałbyś jeszcze zamienić kolejnością divy prawy,lewy,srodek i wyśrodkować srodek margin: 0 auto. Ale nie chciało mi się edytować HTML

Masz zagadkę na całą noc, dlaczego tak, a nie tak jak Ty zrobiłeś

web_newb

19.01.2011, 12:37:24

Kilka modyfikacji i działa jak należy. Wielkie dzięki

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.