 [HTML][CSS]Problem z przesuwaniem się niektórych divów |
  |
| [HTML][CSS]Problem z przesuwaniem się niektórych divów |
Post
#1
|
|
|
Grupa: Zarejestrowani Postów: 42 Pomógł: 0 Dołączył: 18.10.2008 Ostrzeżenie: (0%) 
 |
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ę (IMG:http://forum.php.pl/style_emoticons/default/angrysmiley.gif) .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><!--Tu zaczyna się środkowy element strony--><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><!--Tu zaczyna się prawy element strony--><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>
|
 |
 
|
|
Post
#2
|
|
|
Grupa: Zarejestrowani Postów: 213 Pomógł: 39 Dołączył: 7.04.2008 Skąd: 3city Ostrzeżenie: (0%)
|
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 |
|
|
|
|
Post
#3
|
|
|
Grupa: Zarejestrowani Postów: 42 Pomógł: 0 Dołączył: 18.10.2008 Ostrzeżenie: (0%)
|
Nie dokońca to pomogło. Te 3 divy koło siebie wraz ze zmianą szerokości strony przechodzą do nastpnego wiersza.
Ten post edytował MysticPL 20.10.2008, 17:48:18 |
|
|
|
|
Post
#4
|
|
|
Grupa: Zarejestrowani Postów: 213 Pomógł: 39 Dołączył: 7.04.2008 Skąd: 3city Ostrzeżenie: (0%)
|
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. |
|
|
|
|
Post
#5
|
|
|
Grupa: Zarejestrowani Postów: 42 Pomógł: 0 Dołączył: 18.10.2008 Ostrzeżenie: (0%)
|
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
|
|
|
|
|
Post
#6
|
|
|
Grupa: Zarejestrowani Postów: 171 Pomógł: 32 Dołączył: 5.08.2008 Skąd: Lublin Ostrzeżenie: (0%)
|
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 <div id="pojemnik_element_nadrzedny"> <div id = "lewy_element"></div> <div id = "prawy_element"></div> </div> 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 |
|
|
|
|
Post
#7
|
|
|
Grupa: Zarejestrowani Postów: 42 Pomógł: 0 Dołączył: 18.10.2008 Ostrzeżenie: (0%)
|
Dzięki ogromne! Wszystko już działa jak należy. Jeszcz raz dziękuje.
|
|
|
|
|
|
Aktualny czas: 22.08.2025 - 19:26 |
