Witajcie Panowie.

Mam problem z menu, które przy skrolowaniu (powiększaniu i zminiejszaniu strony ctr+scroll) rozjeżdża się. Widać to tutaj.

Co dziwne szerokość tych elementów jest zdeterminowana w cssach, każdy ma określoną, a mimo to ostatni spada na dół.

Zabrakło mi pomysłów jak to rozwiązać, a klient płacze i się wścieka. Zauważyłem też, że na innych stronach robi się podobnie.

Kod:

[HTML] pobierz, plaintext 
 <div id="menu">
<ul class="menu">
<li class="item-101 current active"><a href="/" >Home</a></li><li class="item-102"><a href="/omnie.html" >O mnie</a></li><li class="item-103"><a href="/uslugi.html" >Usługi</a></li><li class="item-104"><a href="/referencje.html" >Referencje</a></li><li class="item-105"><a href="/galeria.html" >Galeria</a></li><li class="item-106"><a href="/kontakt.html" >Kontakt</a></li></ul>
</div>
[HTML] pobierz, plaintext 

Css:

[HTML] pobierz, plaintext 
#menu{ height:57px; margin:0; width:972px; border:1px solid #D2D2D2; padding:3px;}
#menu ul { margin:0; padding:0; list-style:none;}
#menu li{ display:block; float:left; text-align:center; }
#menu li span{ display:block; }
#menu li a{ color: #FFFFFF; font-size:16px; line-height:18px; text-decoration:none; display:block; background:url(../images/bg_topmenu_li_a.gif) top repeat-x; padding:18px 0 21px 0; height:18px; border-right:1px solid #010101; border-left:1px solid #373636; width:160px;}
#menu li a:hover, #menu li.active a{ background:#168FC8  url(../images/bg_topmenu_li_a_hover.png) top repeat-x; color:#FFF; border-right:1px solid #4F6B10; border-left:1px solid #B2CF42;}
[HTML] pobierz, plaintext 

Z góry dzięki za podpowiedź.

Nic się nie rozpada, przynajmniej nie na operze. Pokaż screen aby było widać o co chodzi.

Poza tym zrobiłbyś porządek w kodzie. CSS wrzuć do plików, zrób porządek z jquery (może update?) i usuń komentarze.

Na tej stronie widać lepiej:

www.

Na bank widać w chromie, ale opera też pokazuje się.

Co do nieporządku - fakt, ale postawiłem stronę na darmowej templatce. Sam piszę bardziej uporządkowanie.

Kod tej strony:

[HTML] pobierz, plaintext 
<div id="topmenu">
   <ul class="menu">
     <li class="item-101 current active"><a href="/" >Strona główna</a></li>
     <li class="item-103"><a href="/dodaj-darmowe-ogloszenie.html" >Dodaj darmowe ogłoszenie</a></li>
     <li class="item-104"><a href="/zamow-reklame-graficzna.html" >Zamów reklamę graficzną</a></li>
     <li class="item-105"><a href="/regulamin.html" >Regulamin</a></li>
     <li class="item-106"><a href="/kontakt.html" >Kontakt</a></li>
</ul>
 
<div class="clear"></div>
</div>
[HTML] pobierz, plaintext 

Css:

[HTML] pobierz, plaintext 
div#topmenu { width:inherit; background:url(../images/topmenu.png); border-top:3px solid #282828; margin-bottom:16px; }
			div#topmenu ul {list-style:none; margin:0; padding:0; width:inherit;  }
				div#topmenu ul li { float:left; margin-right:1px;}
				div#topmenu ul li.item-106 {margin-right:0px;}
					div#topmenu ul li a {display:block; height:36px; padding-top:16px; border:1px solid #FFAC03; background: #FFAC03 url(../images/bg_main_menu2.png) top repeat-x; color:#333333; font-size:16px; text-align:center;  font-weight:bold; }
					div#topmenu ul li a:hover, div#topmenu ul li.active a { border:1px solid #1E1714; background: #1E1714 url(../images/bg_main_menu.png) top repeat-x; text-shadow: 0 1px #1E1714; height:38px; color:#fff; }
 
						div#topmenu ul li.item-101 a {width:198px;}
						div#topmenu ul li.item-103 a {width:269px; }
						div#topmenu ul li.item-104 a {width:269px;}
						div#topmenu ul li.item-105 a {width:175px;}
						div#topmenu ul li.item-106 a {width:175px; }
[HTML] pobierz, plaintext 

Pewnie jakiś błąd w sztuce, ale nie mam pojęcia jaki...

Przepisz to jeszcze raz, pozbądź się tych stałych szerokości lub dodaj kilka px do głównego kontenera, bo zwyczajnie jest za wąski. Przynajmniej tak to wygląda.

To nie jest problem jednej strony, tylko większości. Piksele są dobrze obliczone - jakby były za wąskie to by w 100% zoomie(?) rozjeżdżało się.

To coś innego...

Tak to już jest, że jak piszesz źle to później coś może nie działać.
Zrób to jak należy. Usuń stałą szerokość, utwórz min-width i dodaj prawy i lewy padding. Innego wyjścia nie masz, jak napisać to dobrze.

Panie kolego, nie jestem początkującym, ale dobrych parę lat to już robię. Wytłumacz mi jednak ten kod, który się rozjeżdża, bo odkrywam, że czegoś poważnego nie wiem, stąd piszę.

Mówiłem, że to nie jest bałagan, bo dotyczy także tego kodu na tej stronie:

[HTML] pobierz, plaintext 
<div id="head">
    	<div id="left_banermenu">treść</div>
    	<div id="baner">treść</div>
         <div class="clear"></div>
    </div>
[HTML] pobierz, plaintext 

Css:

[HTML] pobierz, plaintext 
div#head {width:1100px; overflow:hidden;} 
      div#left_banermenu {width:198px; margin-right:1px; float:left; border-left:1px solid #282828;}
      div#baner {width:884px; height:170px;  float:left; margin:0 0 0 16px;}
[HTML] pobierz, plaintext 

W operze jest ok, ale problem pojawia się w ff i chromie ponieżej 100% zooma...

Przecież to jest klasyka opływania divów.

Na mój gust to jest niedokładne przeliczanie proporcji przez silnik przeglądarki. Bo przecież kontener ma 1100px, a elementy odpowiednio: 1+198+1+884+16 = 1100px. Ale chcę to wykluczyć.

Jakim cudem to się rozjeżdża przy skrolowaniu?

Kod który przedstawiłeś jest zły. Nie tworzy się pustych znaczników, tylko po to, aby coś osiągnąć. Jak chcesz aby div był obejmowany przez rodzica, używasz w CSS overflow:auto.

Być może że jest to błąd silnika renderującego, jednak jak używasz stałych wartości musisz brać poprawki na ewentualny margines 1px lub nawet czasami 2px zapasu.