1
누구든지 도움을 줄 수 있다면 크게 감사하겠습니다!탄성 배치 관련 문제
나는 ems를 사용하여 탄력적 인 웹 사이트를 만들었는데, 사용자가 브라우저를 확대하거나 축소 할 때 어떤 이유로 든 완전히 왜곡됩니다.
제가 언급 한 웹 사이트에 대한 링크는 www.newstylesignsusa.com.입니다. 여기에 템플릿 용 CSS가 있습니다. 페이지의 나머지 부분에 대한 CSS는 em에서 모든 측정 값을 가지고 있습니다. 나는 이것으로 얻을 수있는 어떤 도움에 정말로 감사 할 것입니다. 고맙습니다!
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;
}