1. 首頁
  2. 問答
  3. 身體寬度小於我的一個容器HTML/CSS

身體寬度小於我的一個容器HTML/CSS

2016-09-28 24 views
0

我完成了爲初學者的html/css項目編寫代碼，但不久後我得知，容納另外兩個較小容器的主父容器需要寬度爲960像素。較小的一個必須是650px和270px。當我改變兩個較小的寬度時，我沒有任何問題，但是當我將父容器寬度更改爲960時，內容似乎僅在瀏覽器中約2/3的方式中斷了。我在下方有一個標題部分和頁腳部分，它們橫跨整個瀏覽器。我不確定爲什麼我的主父容器會這樣做。包含所有代碼的<body>被列爲寬度爲831，高度爲1060或其他東西。爲什麼我的身體比容器小？當我沒有將父容器的寬度設置爲960像素時，我的頁面看起來很完美。身體寬度小於我的一個容器HTML/CSS

section.sidebar { 
 
    background-color: #ffffff; 
 
    margin-top: 0; 
 
    padding-top: 0; 
 
    overflow: auto; 
 
} 
 
h1.HeadOne { 
 
    color: white; 
 
    font-size: 30px; 
 
    font-weight: bold; 
 
    background-color: #4aaaa5; 
 
    padding-top: 30px; 
 
    padding-bottom: 30px; 
 
    padding-right: 20px; 
 
    padding-left: 20px; 
 
    overflow: auto; 
 
    margin-left: 135px; 
 
    margin-bottom: auto; 
 
    margin-top: auto; 
 
    float: left; 
 
} 
 
section.main { 
 
    width: 960px; 
 
    background-image: url(../images/vichy.png); 
 
    border-top: solid; 
 
    border-color: black; 
 
    border-width: thin; 
 
    clear: both; 
 
    overflow: auto; 
 
} 
 
ul { 
 
    margin-left: 575px; 
 
    padding-top: 35px; 
 
    float: left; 
 
    margin-top: auto; 
 
    list-style-type: none; 
 
} 
 
li { 
 
    display: inline-block; 
 
    font-size: 23px; 
 
} 
 
a { 
 
    text-decoration: none; 
 
    color: #A9A9A9; 
 
    font-size: 18px; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    font-family: "Times New Roman", Times, serif; 
 
} 
 
a.blue:hover { 
 
    color: blue; 
 
} 
 
a.contact:hover { 
 
    color: orange; 
 
} 
 
a:link { 
 
    color: orange; 
 
} 
 
a:hover { 
 
    color: green; 
 
} 
 
a.contact { 
 
    border-left: solid; 
 
    border-right: solid; 
 
    border-color: #A9A9A9; 
 
    border-width: thin; 
 
    padding-right: 10px; 
 
    padding-left: 10px; 
 
} 
 
#Profile { 
 
    width: 190px; 
 
    height: 160px; 
 
    float: left; 
 
    margin-left: 20px; 
 
    margin-right: 20px; 
 
    padding-top: 25px; 
 
} 
 
#Profile:hover { 
 
    -ms-transform: rotate(-160deg); 
 
    -webkit-transform: rotate(-160deg); 
 
    -moz-transform: rotate(-160deg); 
 
    -o-transform: rotate(-160deg); 
 
    transform: rotate(-160deg); 
 
} 
 
.mainDiv { 
 
    background-color: white; 
 
    border: solid; 
 
    border-color: black; 
 
    border-width: thin; 
 
    width: 650px; 
 
    float: left; 
 
    margin-left: 130px; 
 
    margin-top: 50px; 
 
    margin-bottom: 50px; 
 
    padding-right: 30px; 
 
    padding-left: 10px; 
 
    overflow: auto; 
 
} 
 
h1.mainDivH1 { 
 
    font-size: 30px; 
 
    font-weight: bold; 
 
    color: #4aaaa5; 
 
    padding-top: 35px; 
 
    padding-bottom: 25px; 
 
    padding-left: 0px; 
 
    margin-left: 20px; 
 
    border-bottom: solid; 
 
    border-width: medium; 
 
    border-color: #cccccc; 
 
} 
 
p { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    padding-top: 25px; 
 
    padding-right: 10px; 
 
    padding-left: 20px; 
 
    padding-bottom: 25px; 
 
    line-height: 150%; 
 
    font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif; 
 
} 
 
p.p2 { 
 
    padding-top: 5px; 
 
} 
 
div.DivConnect { 
 
    float: left; 
 
    border: solid; 
 
    border-color: black; 
 
    border-width: thin; 
 
    background-color: white; 
 
    width: 270px; 
 
    height: 160px; 
 
    */ padding-left: 0; 
 
    padding-bottom: 5px; 
 
    padding-top: 1px; 
 
    margin-left: 50px; 
 
    margin-top: 50px; 
 
    overflow: auto; 
 
} 
 
h2.ConnectHeader { 
 
    text-align: left; 
 
    color: #4aaaa5; 
 
    font-weight: bold; 
 
    padding-bottom: 20px; 
 
    padding-top: 20px; 
 
    margin-left: 30px; 
 
    font-size: 20px; 
 
} 
 
ol.ConnectList { 
 
    border-top: solid; 
 
    border-width: thin; 
 
    border-color: #cccccc; 
 
    padding-right: 5px; 
 
    padding-left: 1px; 
 
    padding-top: 20px; 
 
    margin-left: 19px; 
 
    margin-right: 5px; 
 
} 
 
li.connectLI { 
 
    float: left; 
 
} 
 
#facebook { 
 
    width: 58px; 
 
} 
 
#facebook:hover { 
 
    -ms-transform: rotate(90deg); 
 
    -webkit-transform: rotate(90deg); 
 
    -moz-transform: rotate(90deg); 
 
    -o-transform: rotate(90deg); 
 
    transform: rotate(90deg); 
 
} 
 
#linked { 
 
    width: 58px; 
 
} 
 
#linked:hover { 
 
    -ms-transform: rotate(270deg); 
 
    -webkit-transform: rotate(270deg); 
 
    -moz-transform: rotate(270deg); 
 
    -o-transform: rotate(270deg); 
 
    transform: rotate(270deg); 
 
} 
 
#twitter { 
 
    width: 58px; 
 
} 
 
#twitter:hover { 
 
    -ms-transform: rotate(-160deg); 
 
    -webkit-transform: rotate(-160deg); 
 
    -moz-transform: rotate(-160deg); 
 
    -o-transform: rotate(-160deg); 
 
    transform: rotate(-160deg); 
 
} 
 
footer.foot { 
 
    height: 60px; 
 
    border-color: black; 
 
    /*border-width: medium;*/ 
 
    border-top: solid; 
 
    border-top-width: 8px; 
 
    background-color: #666666; 
 
    text-align: center; 
 
    padding-top: 30px; 
 
} 
 
form { 
 
    margin-left: 20px; 
 
    color: #A9A9A9; 
 
    font-family: 'Georgia', Times, Times New Roman, serif; 
 
    font-size: 15px; 
 
    margin-bottom: 1px; 
 
    padding-top: 20px; 
 
} 
 
input { 
 
    width: 580px; 
 
} 
 
h3 { 
 
    background-color: #4aaaa5; 
 
    width: 80px; 
 
    margin-left: 20px; 
 
    font-family: 'Georgia', Times, Times New Roman, serif; 
 
    font-weight: lighter; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 10px; 
 
    margin-top: 1px; 
 
    margin-bottom: 30px; 
 
} 
 
h1.PortfolioH1 { 
 
    font-size: 30px; 
 
    font-weight: bold; 
 
    color: #4aaaa5; 
 
    padding-top: 40px; 
 
    padding-bottom: 20px; 
 
    padding-left: 0px; 
 
    padding-right: 20px; 
 
    margin-right: 70px; 
 
    margin-left: 35px; 
 
    margin-right: 20px; 
 
    border-bottom: solid; 
 
    border-width: medium; 
 
    border-color: #cccccc; 
 
} 
 
div.PortIm1 { 
 
    position: relative; 
 
    width: 230px; 
 
    top: 33px; 
 
    left: 35px; 
 
} 
 
#Pic1 { 
 
    width: 275px; 
 
    height: 170px; 
 
    margin-right: -50px; 
 
} 
 
#Pic1:hover { 
 
    outline: 5px solid green; 
 
    outline-offset: 10px; 
 
} 
 
div.mainDivPortfolio { 
 
    background-color: white; 
 
    border: solid; 
 
    border-color: black; 
 
    border-width: thin; 
 
    height: 720px; 
 
    width: 650px; 
 
    float: left; 
 
    margin-left: 130px; 
 
    margin-top: 50px; 
 
    margin-bottom: 50px; 
 
    padding-right: 30px; 
 
    padding-left: 10px; 
 
    overflow: hidden; 
 
} 
 
h4 { 
 
    text-align: center; 
 
    font-family: 'Times New Roman', Georgia, serif; 
 
    font-weight: lighter; 
 
    font-size: 20px; 
 
    color: white; 
 
    width: 275px; 
 
    background-color: #4aaaa5; 
 
    position: absolute; 
 
    bottom: 2px; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    margin-bottom: 10px; 
 
} 
 
div.PortIm2 { 
 
    position: relative; 
 
    width: 230px; 
 
    left: 355px; 
 
    top: -140px; 
 
    bottom: 170px; 
 
} 
 
#Pic2 { 
 
    width: 275px; 
 
    height: 170px; 
 
} 
 
#Pic2:hover { 
 
    -ms-transform: rotate(45deg); 
 
    -webkit-transform: rotate(45deg); 
 
    -moz-transform: rotate(45deg); 
 
    -o-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
} 
 
div.PortIm3 { 
 
    position: relative; 
 
    width: 230px; 
 
    left: 355px; 
 
    top: -100px; 
 
} 
 
#Pic3 { 
 
    width: 275px; 
 
    height: 170px; 
 
} 
 
#Pic3:hover { 
 
    outline: thin solid orange; 
 
    outline-offset: 10px; 
 
} 
 
div.PortIm4 { 
 
    position: relative; 
 
    width: 230px; 
 
    bottom: 273px; 
 
    right: -35px; 
 
} 
 
#Pic4 { 
 
    width: 275px; 
 
    height: 170px; 
 
} 
 
#Pic4:hover { 
 
    -ms-transform: rotate(-45deg); 
 
    -webkit-transform: rotate(-45deg); 
 
    -moz-transform: rotate(-45deg); 
 
    -o-transform: rotate(-45deg); 
 
    transform: rotate(-45deg); 
 
} 
 
div.PortIm5 { 
 
    position: relative; 
 
    bottom: 235px; 
 
    left: 35px; 
 
} 
 
#Pic5 { 
 
    width: 275px; 
 
    height: 170px; 
 
} 
 
#Pic5:hover { 
 
    outline: medium solid yellow; 
 
    outline-offset: 10px; 
 
}
<section class="Sidebar"> 
 
    <h1 class="HeadOne">Name</h1> 
 
    <ul> 
 
    <li> 
 
     <a href="file:///C:/Users/hen/Desktop/Camp/assignments/Basic-Portfolio/portfolio.html">Portfolio</a> 
 
     <!--CHANGE THE LINKS TO THE CORRECT WEBPAGES--> 
 
    </li> 
 
    <li> 
 
     <a class="contact" href="file:///C:/Users/hen/Desktop/Camp/assignments/Basic-Portfolio/contact.html">Contact</a> 
 
    </li> 
 
    <li> 
 
     <a class="blue" href="file:///C:/Users/hen/Desktop/Camp/assignments/Basic-Portfolio/index.html">About</a> 
 
    </li> 
 
    </ul> 
 
</section> 
 
<section class="main"> 
 
    <div class="mainDiv"> 
 
    <h1 class="mainDivH1">About Me</h1> 
 
    <img id="Profile" src="assets/images/PortfolioPicture.jpg" alt="Mad Hatter" /> 
 
    <p>Content.....</p> 
 
    <p class="p2">Content.....</p> 
 
    </div> 
 
    <div class="DivConnect"> 
 
    <h2 class="ConnectHeader"> Connect with Me </h2> 
 
    <ol class="ConnectList"> 
 
     <li class="connectLI"> 
 
     <a href="https://www.facebook.com/" target="_blank"> 
 
      <img id="facebook" src="assets/images/1474864409_facebook.png" alt="face" /> 
 
     </a> 
 
     </li> 
 
     <li class="connectLI"> 
 
     <a href="https://twitter.com/?lang=en" target="_blank"> 
 
      <img id="twitter" src="assets/images/1474864502_Twitter_icon.png" alt="twitt" /> 
 
     </a> 
 
     </li> 
 
     <li class="connectLI"> 
 
     <a href="https://www.linkedin.com/" target="_blank"> 
 
      <img id="linked" src="assets/images/1474864458_linkedin_circle_black.png" alt="linkedin" /> 
 
     </a> 
 
     </li> 
 
    </ol> 
 
    </div> 
 
</section> 
 
<footer class=f oot> 
 
    &copy; Copyright 2016 Anonymous 
 
</footer>

來源

2016-09-28 henhen

+0

'body'與窗口具有相同的寬度，並且其內容僅僅溢出它。 –

回答

0

你在每格加入利潤率並增加寬度的div元素也和現在的屏幕已經佔據與[小格寬度] + [利潤率]這面積大於960像素，這就是爲什麼當你給主div賦予手動寬度時，更小的元素被截斷

來源

2016-09-28 11:53:45 sheetal

+0

我想出了問題。背景圖像被包含在我製作的960px類中，這就是爲什麼它不跨越整個瀏覽器並切斷。我必須製作一個獨立的父容器，容納960像素容器，並在其中設置backbround圖像，而不是960像素容器。 – henhen

相關問題

 相關問題