1
Si quelqu'un peut aider, je l'apprécierais grandement!Problème avec la disposition élastique
J'ai construit un site Web élastique en utilisant ems, et pour une raison quelconque, il est toujours complètement déformé quand un utilisateur zoome sur ou hors de leur navigateur.
Le lien vers le site Web dont je parle est www.newstylesignsusa.com. Et voici le CSS pour le modèle. Le css pour le reste des pages a aussi toutes les mesures en ems. J'apprécierais vraiment toute aide que je pourrais obtenir avec ceci. Je vous remercie!
CSS:
body{
margin:0 auto;
padding:0em;
background: url(images/bg_gradient_bar.jpg) repeat-x top left #99cccc;
font-size:16px
}
.clear{
clear:both;
}
html{
font-size:100%;
}
/*===============
simple selectors
====================*/
p{
font-family:Arial, Helvetica, sans-serif;
color:white;
float:right;
margin-top:-0.625em;
margin-right:0.75em;
padding:0em;
font-size:1.125em;
}
img{
margin-top:-1.875em;
}
ul{
margin-top:0em;
margin-right:0.6em;
list-style-type:none;
float:left;
background: url(images/nav_bar.gif) repeat-x top left;
font-size:1.135em;
}
ul li{
padding-top:0em;
padding-bottom:0em;
padding-left:3.268em;
padding-right:3.308em;
float:left;
position:relative;
text-align:center;
border-right:0.125em solid orange;
line-height:2.73em;
}
ul a{
padding:1.25em 0em;
line height:2.813em;
margin:0em;
text-decoration:none;
font-family:Geneva, Arial, Helvetica, sans-serif;
color:#003366;
}
ul a:hover{
color:#ff6600;
}
ul li ul{
display:none;
font-size:1em;
padding:0em;
margin:0em;
z-index:100;
position:absolute;
}
ul li ul li{
border:none;
font-size:0.779em;
background: url(images/nav_bar.gif) no-repeat top left;
width:6.695em;
margin-bottom:-0.625em;
position:relative;
z-index:100;
}
ul li:hover ul{
display:block;
position:absolute;
top:2.70em;
left:0em;
}
h3{
color:#003366;
font-family:Geneva, Arial, Helvetica, sans-serif;
}
h4{
color:#003366;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:0.938em;
font-weight:normal;
}
span{
background: url(images/nav_bar.gif) repeat-x top left;
margin-left:0.375em;
color:#003366;
font-family:Geneva, Arial, Helvetica, sans-serif;
padding:0.938em 20.725em 5.625em 21.25em;
border-top:0.75em solid #66cccc;
}
/*===================
specific selectors
=====================*/
#mainWrapper{
width:62.5em;
margin-left: auto;
margin-right:auto;
margin-bottom:12.5em;
zoom:1;
}
#bgWrapper{
background: url(images/skyline.gif) repeat-x bottom center;
position:fixed;
bottom:0em;
padding-top:-12.5em;
height: 7.3em;
width:100%;
z-index:2;
}
#allContent{
margin-top:4.688em;
margin-right:0.0em;
margin-left:0.0em;
padding-right:-0.9em;
padding-left:0.5em;
}
#nav {
margin-top:2em;
margin-left:-0.2em;
}
#contact {
border:none;
}
#info{
background:white;
border-top:0.75em solid #003366;
border-bottom:0.125em solid yellow;
margin-top:-1.25em;
margin-left:0.375em;
margin-right:1.188em;
padding-bottom:1.25em;
}
#flash {
margin-top:0.625em;
margin-right:8.5em;
margin-bottom:3.125em;
margin-left:11.9em;
z-index:0;
top:0em;
left:0.625em;
param-name:wmode;
value:transparent;
}
#bottomContent {
border-top:0.375em solid #003366;
background:white;
margin-top:-2.625em;
margin-right:0.875em;
margin-left:0.875em;
}
#about {
float:left;
width:28.125em;
border-right:0.188em solid #003366;
padding-right:0.563em;
padding-bottom:1.6em;
margin-top:0.688em;
margin-left:0.313em;
}
#from {
float:right;
width:28.125em;
margin-top:2.05em;
}
.aboutPara{
color:#003366;
text-align:justify;
font-size:1.063em;
margin-top:0.013em;
}
.fromPara{
color:#003366;
font-weight:bold;
text-align:justify;
padding-bottom:0.625em;
}
.one{
background: url(images/star_icon.gif) no-repeat bottom left;
padding-top:0.65em;
padding-bottom:0.438em;
padding-left:3.188em;
}
.two{
background: url(images/check_icon.gif) no-repeat bottom left;
padding-top:0.65em;
padding-bottom:0.438em;
padding-left:3.188em;
}
.three{
background: url(images/arrow_icon.gif) no-repeat bottom left;
padding-top:0.65em;
padding-bottom:0.438em;
padding-left:3.188em;
}
.four{
background: url(images/globe_icon.gif) no-repeat bottom left;
padding-top:0.65em;/*0.25*/
padding-bottom:0.438em;
padding-left:3.188em;/*2.188*/
}
#footer{
margin-right:-0.95em;
margin-left:-0.1em;
padding-right:0.5em;
}