Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów
Ułożenie szablonu - Wersja do druku

+- 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: Ułożenie szablonu (/thread-ulozenie-szablonu)

Ułożenie szablonu - xtaz - 19-11-2009

Witam. Chciałbym zapytać jak ułożyć divy, aby w każdej przeglądarce wyglądały jednakowo? Próbowałem to rozwiązać w ten sposób:
// style css
Kod:
#news {
width: 800px;
min-height: 100px;
...
}

#panel_lewo {
width: 100px;
float: left;
min-height: 100px;
...
}
Analogicznie do tego tworzyłem panel prawo i osadzałem to w HTML w ten sposób:
Kod:
<div id="news">
<div id="panel_lewo">
TRESC PANELU
</div>
<div>
////////////////////

Ale pojawił się taki oto problem: Gdy rozszerzał się panel prawo(lewo) to panel news się nie rozszerzał. Więc chyba nie może to być zrobione tak, a ważne jest to, aby te divy się nie rozkraczyły. Proszę o pomoc Wink

Poprawiłem sobie styl:
Kod:
#panel_prawy {
width: 100px;
min-height: 100px;
float: right;
margin-right: 300px;
background-color: white;
}
pod firefoxem wszystko gra.. ale pod IE już nie bardzo ;/

RE: Ułożenie szablonu - razorskate - 20-11-2009

Jeżeli divy o id panel_prawy i panel_lewy mają szerokości 100 px, mają ustawione floaty i są zagnieżdżone i w divie o id "news" to chyba tenże div nie powinien się rozszerzać, tylko pomieścić te dwa divy, i na treść zostaje Ci wtedy szerokość diva news mniejsza o szerokości divów panel_prawy i lewy. Mam nadzieję że dość jasno to opisałem ;] . Pozdrawiam.

PS. Kod pisz w znacznikach [code.] [/code.] (bez kropek) , wszystko będzie wtedy czytelniejsze ;D .

RE: Ułożenie szablonu - xtaz - 20-11-2009

wybacz, ale chyba źle mnie zrozumiałeś. Jak pewnie zauważyłeś każdy div ma wartość min-height. Skutkiem jej użycia jest to, że gdy np dla wartości tej podamy 20px; a wklejony tekst będzie miał 40px; to ten div się wydłuży. I gdy były one umieszczone w divie NEWS, to kiedy wydłużały się panele, to div news pozostawał taki sam, czego skutkiem było to, że najeżdżał on na stopkę i wystawał.

RE: Ułożenie szablonu - razorskate - 21-11-2009

Sprawdź jeszcze czy w Operze wszystko działa jak należy, wtedy będziesz miał pewność czy to wina tylko IE. Jeśli nadal nie będzie działać, poczytaj trochę o hackach w CSS do IE.

Ja na twoim miejscu zrobił bym to inaczej, tak:

1. Kod CSS:
Kod:
#panel_lewy {
width:20%;
min-height:100px;
float:left;
}

#news {
width:60%;
min-height:100px;
float:left;
}

#panel_prawy {
width:20%;
min-height:100px;
float:left;
}

2. Kod HTML:
Kod:
<div id="panel_lewy">
<!--Tekst w panelu lewym -->
</div>
<div id="news">
<!-- Teks w divie "news" -->
</div>
<div id="panel_prawy">
<!-- Tekst w panelu prawym -->
</div>
Mam nadzieję, że zrozumiałeś o co mi chodzi. Mowiąc krótko, nie zagnieżdżasz, tylko po kolei umieszczas divy w kodzie. Jako że div jest elementem blokowym, po nadaniu floatów, automatycznie ustawią się obok siebie, zapełniając cały ekran monitora. Można zmienić ilości procentowe, na inną wartość i nadać ograniczenia dla diva spinającego całość:
Kod:
max-width:1440px;
min-width:800px;
I wtedy cały układ nie będzie szerszy niż 1440px, ani nie zwęzi się do szerokości mniejszej niż 800px.
Mam nadzieję, że mnie zrozumiałeś Wink
Pozdrawiam, Mikołaj.