2017-03-08 68 views
0

我試過包裹我的頁面,並將margin設置爲0,寬度設置爲960px,但沒有任何效果。頁面不會中心

body { 
 
    background-image: url('http://wallpapercave.com/wp/adsKXLw.png'); 
 
    background-repeat: no-repeat; 
 
    overflow: scroll; 
 
    background-size: cover; 
 
    height: 100%; 
 
} 
 

 
#everything { 
 
    margin: 0 auto; 
 
    width: 960px; 
 
} 
 

 
#huge { 
 
    width: 900px; 
 
    height: 100%; 
 
    position: absolute; 
 
    background-color: rgba(255, 103, 48, 0.5); 
 
    left: 75px; 
 
    top: 0%; 
 
} 
 

 
.navbar div, .navbar div p { 
 
    position: fixed; 
 
} 
 

 
#navbar-background { 
 
    width: 820px; 
 
    height: 110px; 
 
    border-radius: 70px; 
 
    top: 11px; 
 
    left: 115px; 
 
    background-color: rgba(255,255,255, .2); 
 
    z-index: 1 
 
} 
 

 
#home-div { 
 
    background-color: rgb(249, 162, 100); 
 
    width: 210px; 
 
    height: 60px; 
 
    border-radius: 30px; 
 
    position: fixed; 
 
    left: 135px; 
 
    top: 30px; 
 
    z-index: 2; 
 
    border-top: 1px white solid; 
 
    border-left: 1px solid white 
 
} 
 

 
#home-div-button { 
 
    background-color: rgb(200, 131, 78); 
 
    width: 215px; 
 
    height: 60px; 
 
    border-radius: 30px; 
 
    z-index: 1; 
 
    top: 40px; 
 
    left: 140px; 
 
    position: fixed; 
 
} 
 

 
#home-text { 
 
    font-family: Comfortaa; 
 
    text-align: center; 
 
    top: 10px; 
 
    left: 145px; 
 
    font-size: 30px; 
 
    color: #FFFFFF; 
 
} 
 

 

 

 
#clan-div { 
 
    width: 90px; 
 
    height: 45px; 
 
    border: 2px white solid; 
 
    left: 505px; 
 
    top: 40px; 
 
    position: fixed; 
 
    border-radius: 10px 0px 0px 10px; 
 
} 
 

 
#clan-text { 
 
    left: 512px; 
 
    top: 35px; 
 
    font-size: 14px; 
 
    font-family: Comfortaa; 
 
    text-align: center; 
 
    color: #FFFFFF; 
 
} 
 

 
#clan-div-2 { 
 
    width: 90px; 
 
    height: 45px; 
 
    border: 2px white solid; 
 
    left: 597px; 
 
    top: 40px; 
 
    position: fixed; 
 
    border-radius: 0px 10px 10px 0px; 
 
} 
 

 
#clan-text-2 { 
 
    left: 610px; 
 
    top: 35px; 
 
    font-size: 14px; 
 
    font-family: Comfortaa; 
 
    text-align: center; 
 
    color: #FFFFFF; 
 
} 
 

 
#games-div { 
 
    width: 90px; 
 
    height: 45px; 
 
    border: 2px white solid; 
 
    left: 712px; 
 
    top: 40px; 
 
    position: fixed; 
 
    border-radius: 10px; 
 
} 
 

 
#games-text { 
 
    font-size: 20px; 
 
    font-family: Comfortaa; 
 
    color: #FFFFFF; 
 
    top: 35px; 
 
    left: 723px; 
 
}
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title></title> 
 
    <link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet"> 
 
    <link href="style.css" rel="stylesheet" text="text/css"> 
 
    <link href="script-1.js" type="text/javascript"> 
 
    </head> 
 
    <body> 
 
    <div id="everything"> 
 
     <div id="huge"></div> 
 
     <div class="navbar"> 
 

 
     <div id="navbar-background"></div> 
 

 
     <div id="home-div"> 
 
      <p id="home-text"></p> 
 
     </div> 
 

 
     <div id="home-div-button"></div> 
 

 
     <div id="clan-div"> 
 
      <p id="clan-text"></p> 
 
     </div> 
 

 
     <div id="clan-div-2"> 
 
      <p id="clan-text-2"></p> 
 
     </div> 
 

 
     <div id="games-div"> 
 
      <p id="games-text"></p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

展開的片斷,你會看到它是如何堅持到左邊。如果我將位置設置爲相對位置,那麼導航欄不會保持固定在頂部。

回答

1

我強烈建議閱讀不同定位類型的確切方式,以及它們如何影響兒童。我已經實現了我在下面的代碼片段中所期望的行爲,主要更改是給出最低高度#everything,並將容器作爲背景使用而不是單獨的div。確保你將它與你的代碼進行比較,如果你有任何問題,請不要猶豫,放棄評論。

body { 
 
    background-image: url('http://wallpapercave.com/wp/adsKXLw.png'); 
 
    background-repeat: no-repeat; 
 
    overflow: scroll; 
 
    background-size: cover; 
 
    height: 100%; 
 
} 
 

 
#everything { 
 
    position: relative; 
 
    margin: 0 auto; 
 
    width: 960px; 
 
    min-height: 100vh; 
 
    background-color: rgba(255, 103, 48, 0.5); 
 
} 
 

 
#huge { 
 
    width: 900px; 
 
    height: 100%; 
 
    position: absolute; 
 
    background-color: rgba(255, 103, 48, 0.5); 
 
    left: 75px; 
 
    top: 0%; 
 
} 
 

 
.navbar { 
 
    position: fixed; 
 
    width: 960px; 
 
    height: 110px; 
 
    background-color: rgba(255,255,255, .2); 
 
    border-radius: 70px; 
 
} 
 

 
#home-div { 
 
    background-color: rgb(249, 162, 100); 
 
    width: 210px; 
 
    height: 60px; 
 
    border-radius: 30px; 
 
    position: absolute; 
 
    left: 135px; 
 
    top: 22px; 
 
    z-index: 2; 
 
    border-top: 1px white solid; 
 
    border-left: 1px solid white 
 
} 
 

 
#home-div-button { 
 
    background-color: rgb(200, 131, 78); 
 
    width: 215px; 
 
    height: 60px; 
 
    border-radius: 30px; 
 
    z-index: 1; 
 
    top: 32px; 
 
    left: 140px; 
 
    position: absolute; 
 
} 
 

 
#home-text { 
 
    font-family: Comfortaa; 
 
    text-align: center; 
 
    top: 10px; 
 
    left: 145px; 
 
    font-size: 30px; 
 
    color: #FFFFFF; 
 
} 
 

 

 

 
#clan-div { 
 
    width: 90px; 
 
    height: 45px; 
 
    border: 2px white solid; 
 
    left: 505px; 
 
    top: 32px; 
 
    position: absolute; 
 
    border-radius: 10px 0px 0px 10px; 
 
} 
 

 
#clan-text { 
 
    left: 512px; 
 
    top: 35px; 
 
    font-size: 14px; 
 
    font-family: Comfortaa; 
 
    text-align: center; 
 
    color: #FFFFFF; 
 
} 
 

 
#clan-div-2 { 
 
    width: 90px; 
 
    height: 45px; 
 
    border: 2px white solid; 
 
    left: 597px; 
 
    top: 32px; 
 
    position: absolute; 
 
    border-radius: 0px 10px 10px 0px; 
 
} 
 

 
#clan-text-2 { 
 
    left: 610px; 
 
    top: 35px; 
 
    font-size: 14px; 
 
    font-family: Comfortaa; 
 
    text-align: center; 
 
    color: #FFFFFF; 
 
} 
 

 
#games-div { 
 
    width: 90px; 
 
    height: 45px; 
 
    border: 2px white solid; 
 
    left: 712px; 
 
    top: 32px; 
 
    position: absolute; 
 
    border-radius: 10px; 
 
} 
 

 
#games-text { 
 
    font-size: 20px; 
 
    font-family: Comfortaa; 
 
    color: #FFFFFF; 
 
    top: 35px; 
 
    left: 723px; 
 
}
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title></title> 
 
    <link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet"> 
 
    <link href="style.css" rel="stylesheet" text="text/css"> 
 
    <link href="script-1.js" type="text/javascript"> 
 
    </head> 
 
    <body> 
 
    <div id="everything"> 
 
     <div class="navbar"> 
 
     <div id="home-div"> 
 
      <p id="home-text"></p> 
 
     </div> 
 

 
     <div id="home-div-button"></div> 
 

 
     <div id="clan-div"> 
 
      <p id="clan-text"></p> 
 
     </div> 
 

 
     <div id="clan-div-2"> 
 
      <p id="clan-text-2"></p> 
 
     </div> 
 

 
     <div id="games-div"> 
 
      <p id="games-text"></p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

+0

謝謝!我真的不明白你做了什麼,爲什麼它有幫助。是否有您更改的特定屬性? – BOBONA

+0

另外,我不知道如何讓導航欄不佔用#huge的整個長度並以此爲中心。我試着讓.nav有一個較短的寬度,然後使用left:100px,但當我放大或縮小瀏覽器時,它會停止正確縮放。 – BOBONA

0

你必須同時設置width一個positionproperty包裹元素以實現中心;以及您的margin: 0 auto;

即。

.pagewrap { 
    width: 960px; 
    position: relative; 
    margin: 0 auto; 
    height: auto; 
} 

希望這會有所幫助!