[résolu] Probléme de résolution d'image en CSS

Bonsoir,


Sir mon site -www.micro-astuce.com j'ai installé une barre de navigation en CSS.
Avec des écran 17 ou 19" même en 16/9 avec une résolution de 1440 x 900 pas de problème. Bien que la barre de navigation soit plus épaisse avec un 17 qu'avec un 19.
Avec un écran 22 en 1680 x 1050 c'est la cata !

En fait l'image est étirée mais les normes de hauteur de sont plus respectéés.

[b]Voici le CSS correspondant à cette bannière :[/b]
 

/* barre de navigation - haut - */
#onglets
        { 
	position : absolute;	
   	padding : 0;
    /*font : bold 11px Batang, arial, serif;  //pas sûr ...//*/
    background-image: url(/Forum/images/Blue_background);
	list-style-type : none;
    margin-left : -1px;
    margin-top : 0;
	float : left; 
	height: 20px;
	text-align: center;
    width : 100%;
	        }
#onglets li {
	float : right;
	width: 12.5%;
	text-align: center;
	}
#onglets li.annonce {
    float : left;
	width : 55%;
	text-align: left;
     }
#onglets li.moyen { 
    overflow: hidden; 
	width : 20%;
	zoom: 1; 
     }
#onglets a {
	display : block;
	padding : 3px;
	border: 1px solid #FFFFFF;
	border-left: 0px;
	color : #666;
	height: 15px;  /* Pour Firefox*/
	padding-bottom : 0px;  /* Pour Firefox*/
	text-decoration : none;
    }
#menu
        {
    padding-bottom : 20px;
	 }
    
     /* bas*/
#onglets-bas
        { 
    position : absolute;
    padding : 0;
    /*font : bold 11px Batang, arial, serif;  //pas sûr...//*/
    background-image: url(/Forum/images/Sylver_background);
	height: 20px;
	list-style-type : none;
    margin-left : 0px;
    margin-right : 0px;
    margin-top : 0;
    width : 100%;
        }		
		
#onglets-bas li {
	float : left;
	width: 12.5%;
	text-align: center;
}
#onglets-bas li.gold {
/* Rien du tout */	
}
#onglets-bas li.last-gold { 
    overflow: hidden;
	zoom: 1; 
}
#onglets-bas a {
	display : block;
	padding : 3px;
	border: 1px solid #DFE8FF;
	border-left : 0px;
	color : #666;
	height: 15px; /* Pour Firefox*/
	padding-bottom : 0px; /* Pour Firefox*/
	text-decoration : none;
}
 
#menu-bas
        {
    padding-bottom : 20px;
    }
    	
        /* Couleur police bannière */
.nav-red
{color:#B61E21;
 font-size: 10px;
 text-decoration: none;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-weight: bold;
 }
.nav-red:link {color:#B61E21;}
.nav-red:hover{color:#F77968;}

.nav-blue
{color:#0077BF;
 font-size: 10px;
 text-decoration: none;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-weight: bold;
 }
.nav-blue:link {color:#0077BF;}
.nav-blue:hover{color:#FF9900;}

.nav-gold
{color:#9f9f9f;
 font-size: 10px;
 text-decoration: none;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 }
.nav-gold:link {color:#9f9f9f;}
.nav-gold:hover{color:#F77968;}

Dans le document php :

<div id="menu">
  <ul id="onglets">
    <li class="annonce"><a href="/" title="Micro-Astuce"><span class="nav-red">Bienvenue sur Micro-Astuce</span></a></li>
    <li class="moyen"><a href="/Forum/profile.php?mode=register" title="Rejoignez les membres du Forum !"><span class="nav-blue">Pas encore membre !</span></a></li>  
	<li class="petit"><a href="/annuaire" title="Inscrivez votre site !!"><span class="nav-blue">Annuaire</span></a></li>
	<li class="petit"><a href="/Forum" title="Forum Micro-Astuce"><span class="nav-red">Le forum</span></a></li>
  </ul>
</div>
<div>
<a href="/Forum"><img class="center" src="http:/Forum/templates/subSilver/images/logo_phpBB.gif" width="100%" height="110" alt="Index du forum Micro-Astuce !!" /></a>
</div>

<!-- SiteSearch Google -->
<div id="recherche">
<form method="get" action="http://www.google.fr/custom">
<p class="google-recherche">
<img class="img-recherche" src="http://www.micro-astuce.com/Forum/images/recherche" alt="Google"></img>
<input type="hidden" name="domains" value="www.micro-astuce.com" />
<input type="text" name="q" size="24" maxlength="255" value="" />
<input type="submit" name="sa" value="Google" />
<input type="radio" name="sitesearch" value="" checked="checked" />
<span class="google">Web</span>
<input type="radio" name="sitesearch" value="www.micro-astuce.com" />
<span class="google">Micro-Astuce</span>
<input type="hidden" name="client" value="pub-x" />
<input type="hidden" name="forid" value="1" />
<input type="hidden" name="ie" value="ISO-8859-1" />
<input type="hidden" name="oe" value="ISO-8859-1" />
<input type="hidden" name="cof" value="GALT:#x/>
<input type="hidden" name="hl" value="fr" /></p>
</form>
</div>
<!-- SiteSearch Google -->
<div id="menu-bas">
  <ul id="onglets-bas">
   <li class="gold"><a href="/Forum/topic910.html" title="Veuillez lire la charte avant de poster"><span class="nav-gold">La charte</span></a></li>
   <li class="gold"><a href="/" title="Acceuil du site"><span class="nav-gold">Accueil</span></a></li>  
   <li class="gold"><a href="/Forum/portal.php" title="Portail"><span class="nav-gold">Portail</span></a></li>
   <li class="gold"><a href="/Forum/profile.php?mode=editprofile" title="Modifier votre profil"><span class="nav-gold">Profil</span></a></li>
   <li class="gold"><a href="/Forum/search.php" title="Recherche sur le forum"><span class="nav-gold">Rechercher</span></a></li>
   <li class="gold"><a href="/Forum/memberlist.php" title="Rechercher un membre"><span class="nav-gold">Nos membres</span></a></li>  
   <li class="gold"><a href="/Forum/profile.php?mode=register" title="Rejoignez-nous !"><span class="nav-gold">S'enregistrer</span></a></li>
   <li class="last-gold"><a href="/Forum/sitemaps" title="Plan du site"><span class="nav-gold">Plan du site</span></a></li>
  </ul>
</div>

Je ne comprends pas ce qui peut déformer l'image étant donné que la hauteur des celulles est signifiées ?
Modifié par renard11 (24 Oct 2007 - 17:48)