18041 sujets

Questions générales et questions de débutants

Zoom en css?

Bonjour,

comment faire pour que le zoom : 1; soit accepté par le validateur css? Si c'est possible en fait...

Parce que ici, ça pose problème...

Merci!
le rouge a écrit :
comment faire pour que le zoom : 1; soit accepté par le validateur css? Si c'est possible en fait...

zoom étant une propriété non standard, n'appartenant pas à une quelconque spécification CSS, ça n'est effectivement pas possible.

Les commentaires conditionnels sont effectivement la solution si on veut se débarasser de l'erreur donnée par le validateur.
Bonjour,

Dans le cadre d'un menu et a travers ma boule de cristal (compte tenu de l'absence de code), tu devrais essayer de remplacer la balise zoom par overflow: hidden; ... Il est des fois ou ça marche
ghost a écrit :
Bonjour,

Dans le cadre d'un menu et a travers ma boule de cristal (compte tenu de l'absence de code), tu devrais essayer de remplacer la balise zoom par overflow: hidden; ... Il est des fois ou ça marche

Si la propriété zoom est là pour doter un élément de layout (à part ça, j'avoue n'avoir aucune idée de son utilité Smiley ohwell ), on peut très souvent utiliser height: 1%; à la place, ce qui a l'avantage de fonctionner ausi pour IE 5.5, il me semble ...

Utiliser overflow: hidden reste délicat, il ne faut pas oublier que cela risque de faire disparaître une partie du contenu de la page dans certaines circonstances Smiley cligne
Ben je vais te montrer en quoi il est utile...

avec le zoom : 1
sans le zoom : 1

Regarde le menu... (sous IE évidemment, parce que sous Firefox, ça joue...)

Avec le height : 1%, ça fonctionne à moitié et avec le overflow, ça joue pas...

Merci.
Modifié par le rouge (22 Oct 2006 - 16:04)

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
			
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>

<title>un menu en CSS avec puces</title>

<style type="text/css">
/*  CORPS PRINCIPAL
*/

* {
border: 0;
margin: 0 auto;
padding: 0;
font: normal 13px trebuchet ms;
color: #666;
text-shadow: #000;
text-align: justify;
text-decoration: none;
list-style-type: none;
}

body {
background: #ccccff;
}

/* STRUCTURE
*/

#site, #banniere, #bas {
width: 840px;
background: #fff;
}

#marge_haut, #contenu {
width: 800px;
}

#site, #banniere, #marge_haut, #contenu, #bas {
font-size: 1px;
}

/* SITE
*/

#site {
background-image: url('img/bg/bg.gif');
}

/* BANNIERE
*/

#banniere {
height: 208px;
}

/* MARGE HAUT, FOND ROSE PEU OPAQUE
*/

#marge_haut {
height: 32px;
background-image: url('img/bg/mh.gif');
}

#marge_haut li {
display: inline;
}

#marge_haut li a {
float: left;
margin: 1px 5px 1px 4px;
padding: 0 0 0 12px;
font-size: 11px;
color: #666;
display: block;
background: url("img/liste.gif") left center no-repeat; 
}

#marge_haut li a:hover {
color: #000;
}

/* CONTENU
*/

#contenu {
background-image: url('img/bg/cont.gif');
}

/* CONTENU GAUCHE
*/

#gauche {
float: left;
width: 200px;
padding: 10px 0;
}

#gauche p, #gauche p.trait_tire {
font-size: 11px;
margin: 3px 10px;
}

#gauche .trait_tire, #gauche .trait_plein {
margin: 0 auto;
}

#gauche .trait_tire {
padding-bottom: 3px;
background: url(img/bg/bdt.gif) left bottom repeat-x;
}

#gauche .trait_plein {
padding-bottom: 7px;
background: url(img/bg/bdp.gif) left bottom repeat-x;
}

/* CONTENU GAUCHE MENU
*/

#menu {
margin-top: 15px;
border-top: 1px solid #d5d5d5;
border-bottom: 1px solid #fdfdfd;
}

#menu ul {
padding:0;
margin:0;
list-style-type:none;
}

#menu a {
font-size: 12px;
line-height: 20px;
color: #333;
padding: 1px 0 1px 30px;
border-top: 1px solid #fdfdfd;
border-bottom: 1px solid #d5d5d5;
display: block;	
width: 80%;
margin: auto;
}


#menu a:hover {
background: #f7f7f7;
}

/* CONTENU GAUCHE CONTACT
*/

#contact {
margin-top: 15px;
padding: 0 10px;
background: #f7f7f7;
border-top: #d5d5d5 solid 1px;
border-bottom: #d5d5d5 solid 1px;
}

#contact h1, #contact li, #contact li a, #contact a:hover {
font-size: 10px;
}

#contact h1 {
color: #4b5160;
margin-top: 5px;
font-weight: bold;
}

#contact li, #contact a {
text-indent: 8px;
}

#contact a {
color: #4b5160;
text-decoration: underline;
}

#contact a:hover {
color: #ec88b7;
}

/* CONTENU DROITE
*/

#droite {
float: left;
width: 570px;
padding: 10px 5px 10px 15px;
}

#droite h1 {
font-size: 17px;
font-weight: bold;
margin: 10px 0;
color: #333;
}

#droite h2 {
font-size: 15px;
font-weight: bold;
margin: 8px 0;
color: #666;
}

#droite p {
margin: 5px 0;
}

#droite a {
color: #e25f9c;
}

#droite a:hover {
color: #5b5bf7;
}

#droite .trait_tire, #droite .trait_plein {
margin: 0 auto;
}

#droite .trait_tire {
padding-bottom: 5px;
background: url(img/bg/bdt.gif) left bottom repeat-x;
}

#droite .trait_plein {
padding-bottom: 10px;
background: url(img/bg/bdp.gif) left bottom repeat-x;
}

/* BAS
*/

#bas {
height: 121px;
background-image: url('img/bg/bas.gif');
}

/* ICONES
*/

#icones {
text-align: center;
}

/* DIVERS
*/

.espace {
clear: both;
}
</style>

</head>



<!-- BLOC PRINCIPAL -->

<div id="site">

<!-- BANNIERE -->

<div id="banniere">
<img src="img/bg/ban.gif" alt="" />
</div>

<!-- MARGE DU HAUT -->

<div id="marge_haut">

</div>

<!-- CONTENU -->

<div id="contenu">

<!-- GAUCHE -->

<div id="gauche">
<p class="trait_tire">» 22.10.2006 | 16:38</p>
<div id="menu">
<ul>
<li><a href="accueil.html">Accueil</a></li>
<li><a href="programme.html">Programme</a></li>
<li><a href="plan.html">Situation</a></li>
<li><a href="billeterie.html">Billeterie</a></li>
<li><a href="marchandises.html">Marchandises</a></li>
<li><a href="galeries.html">Galeries</a></li>
<li><a href="historique.html">Historique</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="liens.html">Liens</a></li>
<li><a href="concours.html">Concours</a></li>
</ul>
</div>
<div id="contact">
<h1> Contact :</h1>

</div>
</div>

<!-- DROITE -->

<div id="droite">

</div>

<!-- ON TIRE LE BACKGROUND -->

<div class="espace"></div>

<!-- FIN DU CONTENU -->

</div>

<!-- BAS -->

<div id="bas"></div>

<!-- FIN DU BLOC PRINCIPAL -->

</div>

<!-- ICONES -->

<div id="icones">

</div>

</body>

</html>


Si ça t'aide ?
le rouge a écrit :
Ben je vais te montrer en quoi il est utile...

avec le zoom : 1
sans le zoom : 1

Regarde le menu... (sous IE évidemment, parce que sous Firefox, ça joue...)

Avec le height : 1%, ça fonctionne à moitié et avec le overflow, ça joue pas...

Il me semble qu'on peut s'en tirer en jouant aussi sur le line-height des <li>, dans ce cas. Mais je t'accorde que zoom est plus rapide (une ligne de moins) Smiley cligne
Sujet clos
Aller à