Witam, nie potrafie poradzic sobie z takim problemem:
Chodzi mi o #sidebar_bottom
Ma przylegać do dolnej krawędzi, próbowalem robić
postion:relative;
height:100px
bottom:100px
ale dziala poprawnie tylko w FF i Safari, a vertical-align niezbyt dziala
Dodam że nie znam wysokości elementu #left_content, dlatego nie moge tego na "sztywno" policzyc
Myśle że jest to problem podobny jak przy pozycjonowaniu stopki tak by była zawsze na dole strony. Powinno Ci pomóc:
Niestety nie umiem tego wykorzystac w tym przypadku.
Poniżej podaje kod, który dziala dobrze w nowych przegladarkach ale w starych już nie:
<html >
<head>
<style>
#content {
margin: 0 auto;
padding: 0;
text-align: center;
width:700px;
}
#left_content {
background-color:#06F;
width:500px;
float:left;
display:inline;
}
#sidebar_top {
background-color:#0C3;
width:200px;
float:right;
display:inline;
}
#sidebar_bottom {
background-color:#F90;
width:200px;
height:100px;
float:right;
display:inline;
clear : both;
margin-top: -100px;
}
#footer {
background-color:#FF0;
clear : both;
}</style>
</head>
<div id="content">
<div id="left_content"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
<div id="sidebar_top"><br /><br /><br /><br /></div>
<div id="sidebar_bottom"></div>
<div id="footer"><br /><br /></div>
</div>
<body>
</body>
</html>
Prosze o pomoc.
Na Twoim miejscu otoczył bym całą kolumnę boczną dodatkowym divem i wtedy próbował pozycjonowania relatywnego, ale tak pewnie próbowałeś.
Daj #sidebar_bottom pozycjonowanie bezwzględne (absolute). Ale nie określaj własności top, tylko daj bottom: 0 (lub np. 20px, jeśli ma być odległe o 20px od dolnej krawędzi ekranu).
Musimy jeszcze się zabezpieczyć, by #sidebar_bottom nie naszedł na #sidebar_top gdy lewa kolumna jest bardzo niska.
To na szczęście proste gdy założymy, że wysokość #sidebar_bottom jest ustalona na sztywno. Załóżmy, że to 100px. Wystarczy więc dać #sidebar_top dolny margines 100px (plus ewentualny odstęp). Dzięki temu nawet przy niskiej lewej kolumnie, obie części prawej kolumny nie zajdą na siebie.
Aha -- mam nadzieję, że dokument ma poprawny DOCTYPE i tylko urwało Ci go w tym listingu. DOCTYPE jest bardzo ważny, bo bez niego przeglądarki wejdą w tryb quirks.
PS. Fajnie, że chciało Ci się zrobić tę graficzkę. Czasem trudno zrozumieć po samym opisie o co chodzi. A tu wystarczy spojrzeć.
Właśnie chodzi o to że to nie ma byc 20px od dolnej krawędzi ekranu(czy przegladarki) tylko 20px wyżej od footera który znajduje sie na pozycji Y w zaleznosci od ilości tekstu w #LEFT_CONTENT
Czyli pod tym wszystkim jest jeszcze footer?
To nie ma problemu! Otocz te 3 elementy, które widzisz na screenie jednym elementem (powiedzmy: #main) i daj mu position: relative. Resztę zrób tak, jak opisałem wcześniej. #mainowi daj tylko jakiegoś clearfixa, np. overflow: hidden + dla IE zoom: 1. main otoczy wtedy te 3 elementy, które masz na ekranie. Pod mainem będzie stopka. A #sidebar_bottom będzie przyklejone do dolnej krawędzi maina, jeśli dasz mu pozycjonowanie bezwzględne i bottom: 0.
Sorki za offtop, @bswierczynski jest nowsze wydanie "PHP. Zaawansowane programowanie. Vademecum profesjonalisty" jak te z 2004 roku?
Dobra efekt wyglada w wszystkich przegladarkach tak samo.
Po raz kolejny mi pomogłeś, dzięki! :)
@piochu:
Jest coś takiego, z 2009. Ale to ma już zupełnie innych autorów i nawet trochę inny tytuł. Ludzie jednak polecają tę książkę. Ja jej jeszcze nie czytałem; mam to wydanie z 2004 roku właśnie.
Dosłownie wczoraj byłem w 2 księgarniach i chciałem kupić to nowsze, z 2009, ale akurat nie było tego na półkach, więc kupiłem sobie jakąś książkę o interfejsach.
Radzę Ci kupić tę nową książkę (na tyle, na ile mogę się wypowiedzieć przed jej przeczytaniem).
edit:
@JimMorrison:
Pogooglaj o tym clearfixie, przyda Ci się na 10000% w przyszłości jeśli będziesz robił layouty. Są różne metody clearfixów. Poniżej jedna:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#main {
margin: 0 auto;
padding: 0;
text-align: center;
width:700px;
}
#content {
position:relative;
overflow: hidden; /* clearfix */
width: 100%; /* hasLayout dla starych IE */
}
#left_content {
background-color:#06F;
width:500px;
float:left;
display:inline;
}
#sidebar_top {
background-color:#0C3;
width:200px;
float:right;
display:inline;
}
#sidebar_bottom {
background-color:#F90;
width:200px;
height:100px;
float:right;
display:inline;
clear : both;
position:absolute;
bottom:0px;
right:0px;
}
#footer {
background-color:#FF0;
clear : both;
}
</style>
</head>
<div id="main">
<div id="content">
<div id="left_content"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
<div id="sidebar_top"><br /><br /><br /><br /></div>
<div id="sidebar_bottom"></div>
</div>
<div id="footer"><br /><br /></div>
</div>
<body>
</body>
</html>
Zmieniłem tylko te 2 linijki. Jakby Ci to width: 100% przeszkadzało, to możesz zamiast tego dać zoom: 1. To tylko dla starego IE.
edit2: No, zrobiłem edita z tym kodem, ale Ty sobie w międzyczasie poradziłeś i też zrobiłeś edita :). No problemos.