2013-03-21 105 views
0

我在做錯相對&絕對定位,但我不知道如何清除它。 我試圖更改widht:auto & 100%,但沒有任何工作。在給予%的寬度時,div最小化時崩潰。css根據尺寸定位差異

現在頁面並未放置在筆記本電腦的中間(其他屏幕分辨率)。我的代碼有什麼問題。

HTML

[complete source][1] http://jsfiddle.net/X5RDL/ 

CSS

h1 { 
    color: #fff; 
     font-weight: normal;  
} 
body { 
    margin: 0px 10px 10px 10px; 
    background: #C5DA99 url(images/img01.jpg) repeat; 
    color: #787878; 
     position:absolute; 
     font:15px Georgia, "Times New Roman", Times, serif; 
} 
#header { 
    width: auto; 
    height: 100px; 
     margin:15px 05px ; 
    padding: 0px 50px; 
    background: url(images/img02.jpg) repeat; 
     position:relative; 
} 
#logo { 
    float: right; 
    width: 300px; 
    margin: 0; 
    padding: 13px; 
    color: #FFFFFF;   
} 
#menu { 
    padding:30px 10px 0 30px; 
     position:absolute;  
} 
#menu li { 
    display: inline; 
     -moz-border-radius-topleft: 12px; 
     -webkit-border-top-left-radius:12px; 

} 
#menu li a { 
    text-decoration: none; 
     float:left; 
     width:; 
     height:20px; 
    padding: 10px; 
    color: black; 
     font:14px Georgia, "Times New Roman", Times, serif;  
} 


#menu li a:hover { 
    margin-top:; 
     color:#FFF; 
    padding-bottom:12px; 
    text-shadow:5px 5px 5px white; 
background:url(images/vline.jpg) no-repeat bottom 
} 

#contentbg 
    { 
     width:1004px; 
     float:left; 
      background: #FFFFFF; 
    } 
#content 
     { 
       padding:; 
     }  
/* contentleft */ 
#contentleft 
     { 
     width:190px; 
     float: left; 
     margin:0px; 
     padding:34px 0 33px 23px; 
     } 
/* content middle */ 
#contentmid 
    { 
     width:500px; 
     float:left; 
     margin:0px; 
     padding:34px 5px 33px 15px; 
     background-image:url(images/vline.jpg); 
     background-repeat:repeat-y; 
    } 
/* content Right */ 
#contentright 
    { 
     width:240px; 
     float: right; 
     padding:34px 0 40px 12px; 
     background-image:url(images/vline.jpg); 
     background-repeat:repeat-y; 
    } 
/* login box */ 
#loginPan form 
     { 
       padding:5px; 
       width:200px; 
       height:188px; 
       background:#FCF6E6; 
       color:#705D20; 
       position:relative; 
       border:1px dashed #BFB492; 
     } 
#loginPan form label 
     { 
       width:91px; 
       height:22px; 
      display:block; 
      float:left; 
     } 
+0

只需創建一個搗鼓你的代碼.. – 2013-03-21 04:55:09

+0

http://jsfiddle.net/X5RDL/ – 2013-03-21 04:57:22

回答