Question

我有一个网页：http://www.svaspasalon.com/construct2/index.html我的问题是，当我加载我的样式表后面部分，如图像和页面加载正常，没有问题但中间元素（黑色透明背景）当我将其加载到不同的屏幕上时，文本和电子邮件提醒）总是移动，例如我的笔记本电脑和家里的桌面。如何让元素不移动，并将Sva Spa Salon和元素移动到页面的中心。

CSS：

/* Reset */

 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p     ,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-    
 spacing:0;}fieldset,img{border:0;}address,caption,dfn,th,var{font-style:normal;font-   
  weight:normal;}li{list-style:none;}caption,th{text- 
   align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}



 html,body{
 width:1080px;
 height:1920px;
 position: fixed;
 }

 body{
 margin:0 auto;
 padding:0;
 background:#2a1a10;
 font-family:"Helvetica Neue",Helvetica, Arial;
 font-size: 100%;
 }
 /*
 div#shim{
 visibility: hidden;
 width: 100%;
 height: 50%;                                                                     
 margin-top: 375px;
 float: left;
 position: relative;
 }
 */
 .fadein {
position: fixed;
max-width: 100%;
width: 100%;
min-width: 500px;
z-index:-1;
 }

 .fadein img {
   position:fixed;
   max-width: 100%;
   width: 70%;
   min-width: 500px;
   height: 80%;
   margin-top: 90px;
   margin-left: 255px;
  }
  /*
  div#content {
  width: 100%;
  height: 160px;
  margin: 0 auto;
  background: url(../images/content_bg1.png) left bottom repeat-x;
  float: left;
  position: relative;
  top: -80px; */

  /* IE4ever Hack: Hide from IE4 **/
   position: static;
   /** end hack */
   }

   /* Hide from IE5mac \*//*/
   div#shim {
   display: none;
   }
   html, body {
   height: auto;
   }
   /* end hack */
   /* ]]> */

   .logo{
   width: 78.125%;
   /* width: 800px; */
   margin: 0 auto;
   }

   h1{
   font-size: 36px;
   color: #C5953b;
   margin-bottom: 19px;
   letter-spacing: -2px;
   font-weight: 1000;
   text-shadow:-2px -2px 2px #fff, 2px 2px 2px #000;
   text-transform: uppercase;
   text-align: center;
   }

    h2{
 padding: 0px 3px;
 line-height: normal;
 background: #fff;
 font-size: 16px;
 font-weight: 700;
 float: left;
 text-transform: uppercase;
 }



 h1 span{
 font-weight: 500;
 }

 .clear{
  clear: both;
  }


 .right_side{
 width: 85%;
 /* width: 940px; */
 margin: 0 auto;
 }


 .right_content{
 width: 100%;
 /* width: 920px; */
 background: url(../images/blackish.png) repeat;
 height: 50px;
 padding: 23px 0 23px 40px;
 font-family:Candara;
 }


 .right_content h2{
 margin-top: 12px;
 margin-right: 60px;
 }

 form.email{
 padding: 0;
 margin: 10px 0 0 0;
 width: 204px;
 float: left;
 }

 /*.get_notified{
 width: 144px;
 line-height: normal;
 background: url(../images/field.png) left top no-repeat;
 font-family:Candara;
 font-size: 11.4px;
 color: #FF0000;
 border: none;
 padding: 7px 10px;
 margin-right: 6px;
 float: left;
 font-weight: 200;
 letter-spacing:0.4px;
 }
 */
 .go{
 padding: 10px;
 margin: 0 auto;
 width: 34px;
 height: 28px;
 border: none;
 background: url(../images/go.png) left top no-repeat;
 }

 .go:hover{
 background: url(../images/go.png) left bottom no-repeat;
 cursor: pointer;

 }

Answer 1

html, body {
     min-width: 1080px; /* width: 1080px; */
     /* height: 1920px; */
     /*position: fixed;*/
}

HTML / CSS问题，元素在不同的屏幕分辨率下移动

1 个答案: