Forum PHP.pl > [HTML][CSS]Problem z przesuwaniem się niektórych divów

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][CSS]Problem z przesuwaniem się niektórych divów

MysticPL

20.10.2008, 16:42:35

Wszystkie jest cacy z moją stronką oprócz tego że przy zmianie szerokości okna div z menu i miejscem na tekst. Rozjeżdzają się

.Divy które się rozjeżdzają mają poustawiane na float left Proszę o pomoc. :-(

Kod CSS:

Kod

body{<BR> background-color: #9ACBEA;<BR> font: normal 100% Verdana, Tahoma, Helvetica, sans-serif;<BR> margin: 0 auto;<BR>}</P> <P>#top{<BR> background: url(../../grafika/podstawa/top.jpg);<BR> margin:0 auto;<BR> height:156px;<BR> width: 801px;<BR>}<BR>#menu{<BR> background: url(../../grafika/podstawa/menu.jpg);<BR> margin: 0 auto;<BR> height:40px;<BR> width: 801px;<BR>}<BR>#left_menu_top{<BR> background: url(../../grafika/podstawa/left_menu_top.jpg);<BR> height: 8px;<BR> width: 174px;</P> <P>}<BR>#left_menu_bg{<BR> background: url(../../grafika/podstawa/left_menu_bg.jpg);<BR> width: 174px;</P> <P>}<BR>#left_menu_bottom{<BR> background: url(../../grafika/podstawa/left_menu_bottom.jpg);<BR> width: 174px;<BR> height: 8px;</P> <P>}<BR>#right_menu_top{<BR> background: url(../../grafika/podstawa/left_menu_top.jpg);<BR> height: 8px;<BR> width: 174px;</P> <P>}<BR>#right_menu_bg{<BR> background: url(../../grafika/podstawa/left_menu_bg.jpg);<BR> width: 174px;<BR>}<BR>#right_menu_bottom{<BR> background: url(../../grafika/podstawa/left_menu_bottom.jpg);<BR> height: 8px;<BR> width: 174px;</P> <P>}<BR>#center_top{<BR> background: url(../../grafika/podstawa/center_top.jpg);<BR> height: 10px;<BR> width: 440px;<BR>}<BR>#center_bg{<BR> background: url(../../grafika/podstawa/center_bg.jpg);<BR> width: 440px;<BR>}<BR>#center_bottom{<BR> background: url(../../grafika/podstawa/center_bottom.jpg);<BR> height: 10px;<BR> width: 440px;<BR>}</P> <P>#line{<BR> background: url(../../grafika/podstawa/line.jpg);<BR> height:8px;<BR> width: 428px;<BR>}<BR>#test{<BR> margin: 0 auto;<BR> background: Fuchsia;<BR>}<BR>#bottom{<BR> background: url(../../grafika/podstawa/bottom.jpg);<BR> height:72px;<BR> width: 801px;<BR> clear:both<BR>}<BR>#text-center{<BR> text-align: left;</P> <P>}<BR>#center{<BR> padding-left:245px;<BR>}

Kod HTML

Kod

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<A href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</A>"><BR><html xmlns="<A href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</A>" lang="en" xml:lang="en"><BR><head><BR> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /><BR> <meta http-equiv="Content-Language" content="pl" /><BR> <meta name="Author" content="Leszek240" /><BR> <meta http-equiv="Reply-To" content="<A href="mailto:leszek240@hotmail.com">leszek240@hotmail.com</A>" /><BR> <link rel="stylesheet" href="style/podstawowy/domyslny.css" type="text/css" /><BR> <title>Ze świata simów - Centrum Simy 2.0</title><BR></head><BR><body><BR><div id='top'><BR></div><BR><div id='menu'><BR></div><BR><DIV id="center" style="float:left; "><BR> <DIV id="left_menu_top"><BR> </DIV><BR> <DIV id="left_menu_bg"><BR> </DIV><BR> <DIV id="left_menu_bottom"><BR> </DIV><BR> </DIV><BR><BR> <DIV style="float:left; "><BR> <DIV id="center_top"><BR> </DIV><BR> <DIV id="center_bg"><BR> <DIV id="text-align"></DIV><BR> </DIV><BR> <DIV id="center_bottom"><BR> </DIV><BR> </DIV><BR><BR> <DIV style="float:left; "><BR> <DIV id="right_menu_top"><BR> </DIV><BR> <DIV id="right_menu_bg"><BR> </DIV><BR> <DIV id="right_menu_bottom"><BR> </DIV><BR> </DIV><BR><CENTER><DIV id="bottom"></DIV></CENTER><BR></body><BR></html>

hiszpanespaniol

20.10.2008, 16:56:05

jeżeli możesz, popraw kod na prawidłowy, teraz jest w ogóle nieczytelny. Mniemam, ze tagi <br> w css'ie to pomyłka i tak naprawdę ich nie ma.

Spróbuj usunąć margin: 0 auto z elementów i zobacz co się stanie

MysticPL

20.10.2008, 17:46:32

Nie dokońca to pomogło. Te 3 divy koło siebie wraz ze zmianą szerokości strony przechodzą do nastpnego wiersza.

hiszpanespaniol

20.10.2008, 17:58:08

no bo ja tu nic nie widze w tym kodzie i dlatego nie mogę Ci poradzić.

Jeżeli się rozjeżdżają przy zmniejszaniu szerokości, to musisz objąć je czymś o stałych wymiarach np div'em i tylko jemu ustalić margines 0 auto (i oczywiście szerokość która jest sumą szerokości, odstępów, paddingów i borderów bocznych).

To, że sie divy rozjeżdżają jest zachowaniem właściwym i porządanym w wielu przypadkach. jezeli tego nie chcesz, to tak jak mówiłem.

MysticPL

20.10.2008, 20:40:51

Dzięki bardzo mi to pomogło co napisałeś ale wciążjak się zmniejsza okno to te divy z float left znowu idą do następnego wiersza. Ale jak już pisałem jest znaczna poprawa. Pozdrawiam

ferrero2

20.10.2008, 21:18:47

Hiszpan espaniol dał Ci wskazówki które zawsze pomogą jeśli odpowiednio je zastosujesz.
Ogólnie zasada jest taka jeśli chcesz rozmieścić sobie jakieś elementy blokowe (np div) to przy ustawieniu float left czy right
divy układają się obok siebie dopóki ich szerokość(szeroko rozumiana szerokość) jest mniejsza niż element nadrzędny w którym się znajdują.
Jak wiadomo na szerokość elementu blokowego składa się margines zewnętrzny (margin) następnie obramowanie(border), potem margines wewnętrzny (padding) i szerokość przeznaczona na wartość tekstową czyli (width).
Także dla przykładu tworzysz strukturę następującą :

Kod

pojemnik "zerujesz" czyli ustawiasz mu margin, border, padding na 0 i np width na 1000px
Teraz wspólna szerokość lewego i prawego elementu musi wynosić mniej niż 1000px.
Czyli jeżeli np lewy element bedzie mial border 1px i width 498 i to samo z elementem prawym to element prawy znajdzie się w kolejnej lini ponieważ border jest zarówno z lewej jak i z prawej czyli 498 + 2x1px = 500 to samo z elementem prawym co przekracza dozwoloną wielkość diva nadrzędnego.
Najprostrzym sposobem poradzenia sobie z tym problemem jest przypisanie różnych kolorów tła każdemu z elementów blokowych i eksperymentować z ich szerokością korzystając ze wszystkich trzech przeglądarek internetowych. Wtedy dokładnie będziesz mógł stwierdzić co powoduje przekroczenie szerokości elementu nadrzędnego.

Mam nadzieję że te wskazówki będą pomocne.

Pozdrawiam
Mariusz

MysticPL

21.10.2008, 19:32:52

Dzięki ogromne! Wszystko już działa jak należy. Jeszcz raz dziękuje.

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.