Ryoma
21 Luty 2008 15:00
#1
Jak w temacie.
Myślałem, że po uporaniu się z marginesem, droga do ukończenia strony będzie już prosta, jednak myliłem się.
Pozostał jeszcze jeden problem, tym razem odziwo z firefox’em.
Wygląda to następująco:
Kontener po prostu wystaje poza dolną krawędź obszaru głównego, który nie dostosowuje swojej wysokości do wysokości elementów w nim zawartych.
W pozostałych przegladarkach, nie ma tego problemu.
Jeśli ktoś zna odpowiedź na pytanie ‘Jak to naprawić?’, byłbym wdzięczny za podzielenie się wiedzą na ten temat.
system
21 Luty 2008 16:05
#2
Bez kodu można tylko gdybać…ale postaram się. Dopisz elementowi nadrzędnemu
overflow: hidden;
Ryoma
21 Luty 2008 16:38
#3
Przepraszam, umknęło mi to.
Kod CSS:
body {
background-color: #FFFFFA1;
}
#main_area {
position: relative;
left: 100px;
width: 750px;
height: 110%;
border: 7px #FFBC79 solid;
background-color: #FFAA55;
}
#left_panel {
width: 140px;
position: relative;
margin-right: 9px;
top: 5px;
}
*html #left_panel {
margin-right: 0;
top: 0;
line-height: .9em;
}
#right_panel {
width: 150px;
float: right;
background-color: white;
border: 1px #F2F2F2 solid;
position: relative;
top: 5px;
margin: 0;
font-size: 11px;
height: 400px;
}
*html #right_panel{
position: relative;
left: 4px;
}
#content_area {
position: relative;
float: right;
top: 5px;
left: -7px;
width: 440px;
min-height: 600px;
border: 1px lightgray solid;
background-color: white;
margin-bottom: 20px;
}
*html #content_area {
position: relative;
left: -1px;
}
#logo {
position: relative;
left: 5px;
width: 740px;
background-color: #FAFAFA;
height: 130px;
margin-bottom: 5px;
}
*html #logo {
position: relative;
left: 0;
}
Kod html taki jak poprzednio, ale wrzucę główną część, żeby nie szukać:
<?php include(‘pliki/panels/header.php’); ?>
?php include(‘pliki/content/news.php’); ?
?php include(‘pliki/panels/left.html’); ?
?php include(‘pliki/panels/footer.php’); ?
[/code]
A overflow’em próbowałem, ale niebardzo wychodziło.
Poza tym trzeba by było dla każdej treści osobno ustawiać wysokość stron, co raczej mija się nieco z celem.
system
21 Luty 2008 17:04
#4
Gdy dałem overflow: hidden #main_area to przestał wychodzić za kontener.
Daj też #right_panel
height: 100%;
aby zajmował taką wysokość jak kontener w którym jest.
Ryoma
21 Luty 2008 17:13
#5
Fakt. Działa.
Ale pozostaje jeszcze kwestia tego, co robić, gdy tekstu będzie więcej.
Jest jakiś sposób, żeby sam dopasowywał wyskokość, czy trzeba dla każdej strony ustawiać ręcznie?
system
21 Luty 2008 17:21
#6
Sam div będzie się rozciągał. Tylko że w ie nie działa min …trzeba napisać
height: auto !important;
height: 600px; /* IE */
min-height: 600px;
temu div #content_area .
Ryoma
21 Luty 2008 17:38
#7
Dodałem to, ale teraz #content_area “chowa się” dzięki właściwości overflow: hidden, dla obszaru głównego.
Po jej usunięciu wracamy niestety do punktu wyjścia.
Przepraszam, że tak męczę, ale to na prawdę ważne, więc proszę o zrozumienie, chociaż w minimalnym stopniu :).
system
21 Luty 2008 17:42
#8
Mi działa dobrze, dam cały styl bo może coś przeoczyłem.
body {
background-color: #FFFFFA1;
}
#main_area {
overflow: hidden;
position: relative;
left: 100px;
width: 750px;
height: 110%;
border: 7px #FFBC79 solid;
background-color: #FFAA55;
}
#left_panel {
width: 140px;
position: relative;
margin-right: 9px;
top: 5px;
}
*html #left_panel {
margin-right: 0;
top: 0;
line-height: .9em;
}
#right_panel {
width: 150px;
height: 100%;
float: right;
background-color: white;
border: 1px #F2F2F2 solid;
position: relative;
top: 5px;
margin: 0;
font-size: 11px;
}
*html #right_panel{
position: relative;
left: 4px;
}
#content_area {
position: relative;
float: right;
top: 5px;
left: -7px;
width: 440px;
height: auto !important;
height: 600px; /* IE */
min-height: 600px;
border: 1px lightgray solid;
background-color: white;
margin-bottom: 20px;
}
*html #content_area {
position: relative;
left: -1px;
}
#logo {
position: relative;
left: 5px;
width: 740px;
background-color: #FAFAFA;
height: 130px;
margin-bottom: 5px;
}
*html #logo {
position: relative;
left: 0;
}
Ryoma
21 Luty 2008 17:49
#9
Niestety, ale cały czas to samo.
Tu jest link do strony, na moim serwerze:
http://dragon257.ovh.org/oszkole.php
(nie wygląda to specjalnie ciekawie, ale to dopiero projekt :P).
Overflow’em raczej nie da się tego rozwiązać, gdyż wtedy ukrywa treść również w Operze i IE (chociaż w tym przypadku można napisać ustawienia tylko dla IE).
system
22 Luty 2008 08:24
#10
Daj stronie doctype i będzie dobrze. Doctype to podstawa każdej strony!
ramy strony
Ryoma
22 Luty 2008 15:12
#11
Serdecznie dziękuję za pomoc. Teraz wszystko działa jak należy.
