Layout si scombina quando cambia lo zoom del browser

[BitWeb]

Salve,

sto facendo un layout con un menu orizzontale in alto, definito da dei li distanziati in pixel.

Quando cambio la lo zoom tramite browser ( ctrl + rotellina, per capirsi ), il layout si scombina.

Non riesco a capire da cosa dipenda, anche se sospetto siano i padding, ed un discorso di interpolazione. Ho provato a cambiare le unità di misura in % ed EM, ma pare cambiare poco.

Il sito ( solo la prima pagina, versione statica) è qui

http://www.bit-web.it/temp/ilmioquot...diano.net.html

Qualcuno sa come risolvere ?

Saluti

[BitWeb]

Up

Qualche idea ?

[Bellu]

Il tuo layout ha dimensioni standard, quindi è una cosa normale... se vuoi che non succeda questo devi fare un layout liquido ovvero con le dimensioni in percentuale.

Spero di averti aiutato.

Un saluto

[BitWeb]

ok, ho capito, grazie mille. Ma da cosa dipende ?

[giova95]

Dipende dal fatto che il box contenitore lo hai dichiarato largo 812px, quindi nel momento in cui imposti un zoom del 150% sarà largo effettivamente 1218px del tuo schermo.
Altri elementi invece sono dichiarati in percentuale. Quindi se per esempio hai un elemento dichiarato come 50% di larghezza, questo occupa normalmente metà pagina (se è dichiarato a livello del body)[I], nel momento in cui imposti uno zoom più alto questo elemento non si ingrandisce, ma rimarrà largo il 50% della pagina.

[Prill]

Il problema è che usi delle liste senza dimensioni, distanziando e allineando i link attraverso padding diversi calcolati in base alla larghezza del testo. Ma quando il browser ridimensiona, caratteri e padding non sono ricalcolati esattamente allo stesso modo e perciò i link si sfasano. Converrà dare innanzitutto il background all'elenco, poi un float right e un text-align-right alle voci che devono disporsi a destra, e poi assegnare dimensioni alle voci elenco. Esempio:

css:

#menu {
	clear:both;	
}
#menu a {
	color:#fff;
	text-decoration:none;
}
#menu a:hover {
	text-decoration:underline;
}
#menu ul {
	list-style:none;
	clear:both;
	width:800px;
	margin:0 auto;
}
#menu li {
	float:left;
	display:block;
}

#menu ul#firstmenu {
	background-color:#0082c7;
	padding: 4px 7px;
	font-weight:bold;
	font-size:15px;
	height:20px;
	font-family:Arial,Helvetica,sans-serif
}
#menu ul#firstmenu li{	
	width:130px;
}
#menu ul li.last {
	float:right;
	text-align:right
}
#menu ul#firstmenu li.five {
	text-align:center
}

#menu ul#secondmenu, #menu ul#thirdmenu {
	background-color:#999;
	padding: 4px 7px;
	font-weight:bold;
	font-size:13px;
	height:15px;
	font-family:Arial,Helvetica,sans-serif;
	margin-top:3px;
}
#menu ul#secondmenu li {
	width:155px;	
}
#menu ul#secondmenu li {
	text-align:right;	
}

#menu ul#secondmenu li.first {
	text-align:left;
	width:170px;	
}
#menu ul#thirdmenu li {
	width:140px	
}
#menu ul#thirdmenu li.second {
	width:240px;	
}

html (ho rimosso i riferimenti al sito)

   <div id="menu">
	<ul id="firstmenu">
        <li class="first">News[*]Eventi
	[*]Politica
	[*]Fatti e Persone
	<li class="five">Sport
	<li class="last">Arte e Cultura
 [/list]
        
        <ul id="secondmenu">
	<li class="first">Eccellenze del Territorio
	[*]Viaggiare
	[*]Salute
	[*]Cerco/Offro
	<li class="last">Numeri Utili
  [/list]
        
        <ul id="thirdmenu">[*]Cucina Tipica
	<li class="second">Orari Attività Commerciali
	[*]L'opinionista
	[*]Esperto Risponde
	<li class="last">I nostri Video[/list]
        
    </div>