Problème code CSS

Résolu/Fermé
Signaler
Messages postés
180
Date d'inscription
jeudi 16 juin 2011
Statut
Membre
Dernière intervention
15 août 2012
-
Messages postés
180
Date d'inscription
jeudi 16 juin 2011
Statut
Membre
Dernière intervention
15 août 2012
-
Bonjour,
voila j'ai un problème sur mon code css car quand je zoom 1 élément ce délace et l'autre ce déforme.
j'aurais aimé que vous m'aidiez à trouver l'erreur ou a rajouter un code pour le faire fonctionné correctement.

Code CSS:

body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
/* Simple page reset */
margin:0;
padding:0;
}
html{
background:url('img/bg_1.jpg') no-repeat 50% #707c18;
margin:0;
padding:0;
}

body{
font-size:15px;
color:#000;
font-family:Arial, Helvetica, sans-serif;
padding-top:0px;
width:100%;
height:100%;
margin-top:100px;
margin-left:auto;
margin-right:auto;
margin-bottom:auto;

}

Code CSS de l'élément bougeant (après zoom ou de-zoom):

#button{
cursor: pointer;
border:none;
background:url('img/barrerecherche.png') no-repeat;
width: 40px;
height:40px;
margin-left:5px;
margin-top:-3px;
position:relative;
}

Code CSS de l'élément ce déformant (après zoom ou de-zoom):

.menuUL li{

display:inline;

}

.menuUL li a,.menuUL li a:visited{

float:left;
font-weight:bold;
background:url(img/button_bg.jpg) repeat-x center bottom #666666;

/* display:block allows for additinal CSS rules to take effect, such as paddings: */
display:block;
border:1px solid #4D4D4D;
color:#CCCCCC;
border-top-color:#565656;

padding:4px 6px;
margin:4px 5px;
height:16px;



-moz-box-shadow:0 0 1px black;
-webkit-box-shadow:0 0 1px black;
box-shadow:0 0 1px black;

/* CSS3 text shadow */
text-shadow:0 1px black;
}

.menuUL li a:hover{
/* On hover show the top, lighter, part of the background: */
background-position:center top;
text-decoration:none;
}

#navigation{
/* The navigation menu bar: */
background:#313131;
border:1px solid #111111;
padding:5px 10px;
width:347px;
margin-top:10px;
margin-left:auto;
margin-right:auto;
position:relative;
}

#navigation,.menuUL li a{
-moz-border-radius:4px;
-webkit-border-radius:4px;
-khtml-border-radius:4px;
border-radius:4px;
}


.dot{
float:left;
height:25px;
width:25px;
}

.clear{
clear:both;

}
je veut bien centrer le 1er élément et le 2emme le place a un endroit décrit.
Merci d'avance pour l'aide ;)

1 réponse

Salut, cela vient certainement que les tailles sont en pixels, unité peu adaptées au zoom(le zoom agrandit tout mais les marges et autres décalages restent au valeurs indiquées en pixels).

Pour y remédier il faut utiliser le quadratin(em) ou le pourcentage(%) pour les tailles.
Messages postés
180
Date d'inscription
jeudi 16 juin 2011
Statut
Membre
Dernière intervention
15 août 2012
5
merci pour ta réponse