2017-05-03 6 views
-1

その他メインが表示されています。私はそれがオーバーフローする必要があります:目に見える; 助けてください?私の#OthersMainに見た目のオーバーフローが欲しいですが、うまく動作しません。

body, html { 
 
\t height: 100%; 
 
\t width: 100%; 
 
\t margin: 0px; 
 
\t padding: 0px; 
 
\t overflow: hidden; 
 
} 
 
* { 
 
\t box-sizing: border-box; 
 
} 
 

 
/* Home.html */ 
 

 
#LeftMainSection { 
 
\t background-color:#FFA500; 
 
\t width: 180px; 
 
\t height: 100%; 
 
\t display: inline-block; 
 
\t float: left; 
 
\t margin-left: -180px; 
 
\t animation: LeftMove 1s; 
 
\t animation-fill-mode: forwards; 
 
    border-right:10px solid black; 
 
} 
 
#LeftMainSection a { 
 
\t padding-top: 9px; 
 
\t text-align: center; 
 
\t text-decoration: none; 
 
\t color: black; 
 
\t background-color:rgba(153, 99, 0, .6); 
 
\t width: 180px; 
 
\t height: auto; 
 
    padding:10px; 
 
\t display: block; 
 
    border-bottom:10px solid black; 
 
    border-right:10px solid black; 
 
} 
 

 

 
@keyframes LeftMove { 
 
\t 0% { 
 
\t \t margin-left: -180px; 
 
\t } 
 
\t 100% { 
 
\t \t margin-left: 0; 
 
\t } 
 
} 
 
#BorderBottomBlack { 
 
\t border-bottom: 10px solid black; 
 
} 
 
#BorderTopBlack { 
 
\t border-top: 10px solid black; 
 
} 
 
#RandomInfo { 
 
\t text-align: center; 
 
} 
 
#HomeMain, #OthersMain{ 
 
     text-align:center; 
 
\t overflow: visible; 
 
\t text-indent: 40px; 
 
\t color: white; 
 
\t height: 100%; 
 
\t background-color:#664200; 
 
\t margin-right: 245px; 
 
\t margin-left: -180px; 
 
\t animation: LeftMove 1s; 
 
\t animation-fill-mode: forwards; 
 
} 
 

 
#OthersMain{ 
 
font-size:.8em; 
 
    overflow:visible !important; 
 
} 
 
#TopHR, #BottomHR{ 
 
    border:solid black; 
 
height:10px; 
 
    background-color:black; 
 
} 
 
#HomeMain p{ 
 
    font-size:1.3em; 
 
    text-align:center; 
 
\t padding: 10px; 
 
} 
 
#AboutPG{ 
 
    font-size:1.3em; 
 
text-align:left; 
 
    padding: 10px; 
 
} 
 
#Flip { 
 
transform:rotateY(180deg); 
 
} 
 
#RightMainSection { 
 
\t border-top: 10px solid black; 
 
\t position: absolute; 
 
\t right: 0; 
 
\t top: 0; 
 
    background-color:#FFA500; 
 
\t width: 250px; 
 
\t height: 100%; 
 
\t display: inline-block; 
 
\t float: right; 
 
} 
 
#News1, #News2, #News3, #News4 { 
 
\t background-color:#C27D00; 
 
    border-left:10px solid black; 
 
    border-bottom:10px solid black; 
 
\t height: 140px; 
 
\t width: 250px; 
 
    
 
} 
 
#itm1, #itm2, #itm3, #itm4{ 
 
    text-align:center; 
 
width:100%; 
 
    height:121px; 
 
    background-color:black; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
#ShopLink1, #ShopLink2, #ShopLink3, #ShopLink4{ 
 
    text-align:center; 
 
    color:white; 
 
    display:inline-block; 
 
    background-color:black; 
 
} 
 
#News4{ 
 
height:150px; 
 
} 
 
#News2 h1, #News3 h1, #News4 h1 { 
 
    margin:0; 
 
    padding:0; 
 
font-size:.89em; 
 
} 
 

 
#News2, #News3, #News4 { 
 
    font-size:1.1em; 
 
text-align:center; 
 
} 
 
#myProgress { 
 
\t width: 100%; 
 
\t background-color: #000; 
 
} 
 
#myBar { 
 
\t font-size: 10pt; 
 
\t width: 40%; 
 
\t height: 30px; 
 
\t background-color: #4CAF50; 
 
\t text-align: center; 
 
\t line-height: 30px; 
 
\t color: white; 
 
} 
 
#Percent, #pollsP { 
 
\t text-align: center; 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 
button { 
 
\t position: absolute; 
 
\t width: 100%; 
 
\t top: 112px; 
 
} 
 

 
#tezt{ 
 
width:50%; 
 
    height:10px; 
 
} 
 
#HomeMainDivTop { 
 
\t border-top: 10px solid black; 
 
\t width: 100%; 
 
\t height: 90px; 
 
\t background-color:#C27D00; 
 
    border-bottom:10px solid black; 
 
\t text-align: center; 
 
} 
 
#Flip{ 
 
    margin-left:10px; 
 
} 
 
#LeftMain, #RightMain{ 
 
height:100%; 
 
    width:100%; 
 
} 
 

 
#CatImg2{ 
 
     margin-right:10px; 
 
} 
 
/* index.html */ 
 

 

 
#Indexh1{ 
 
    text-align:center; 
 
width:auto; 
 
    height:50px; 
 
} 
 
#IndexA { 
 
    display:inline-block; 
 
width:100%; 
 
    height:100px; 
 
    text-decoration:none; 
 
    color:gray; 
 
} 
 
video { 
 
    background-color:black; 
 
    margin:0; 
 
    padding:0; 
 
    width:100%; 
 
    height:100%; 
 
} 
 

 

 
#ClickToHome{ 
 
    z-index:99; 
 
    background:rgba(50, 50, 50, .5); 
 
width:100%; 
 
    height:100px; 
 
    position:absolute; 
 
    top:0; 
 
}
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title></title> 
 
    <link rel="stylesheet" href="/Candidate/CSSFiles/styles.css"> 
 
</head> 
 

 
<body> 
 
    <div id="LeftMainSection"> 
 
     <a id="BorderTopBlack" href="Index.html">Video</a> 
 
     <a id="" href="Home.html">Home</a> 
 
     <a id="" href="Bio.html">Bio</a> 
 
     <a id="" href="Shop.html">Shop</a> 
 
     <a id="" href="Campaign.html">About The Campaign</a> 
 
     <a id="Others" href="Others.html">About The Other Candidates</a> 
 
     <a id="" href="citations.html">Citations</a> 
 
     <a id="BorderBottomBlack" href="Contact.html">Contact</a> 
 
     <div id="RandomInfo"> 
 
      <h3>Random Info</h3> 
 
     </div> 
 
    </div> 
 
    <main id="OthersMain"> 
 
     <div id="HomeMainDivTop"> 
 
      <h2>About The Other Canidates</h2> 
 
     </div> 
 
     
 
     <div> 
 

 
      <h1>Burton (Gus) Guster</h1> 
 
      <hr id=""> 
 
      <h2 id="AboutPG">About "Gus"</h2> 
 
      <p>Crime</p> 
 
      <p></p> 
 
      <p>Economy</p> 
 
      <p></p> 
 
      <p>Education</p> 
 
      <p></p> 
 
     
 
     </div> 
 
     <div> 
 
      <hr id="TopHR"> 
 
      <h1>Rickey</h1> 
 
      <hr> 
 
      <h2 id="AboutPG">About "Rickey"</h2> 
 
      <p>Crime</p> 
 
      <p></p> 
 
      <p>Economy</p> 
 
      <p></p> 
 
      <p>Education</p> 
 
      <p></p> 
 
     
 
     </div> 
 
     <div> 
 
      <hr id="TopHR"> 
 
      <h1>Rick Grimes</h1> 
 
      <hr> 
 
      <h2 id="AboutPG">About "Rick Grimes"</h2> 
 
      <p>Crime</p> 
 
      <p></p> 
 
      <p>Economy</p> 
 
      <p></p> 
 
      <p>Education</p> 
 
      <p>sdasdasd ad asd ih uh uhu ih uihu hui hui hui hui hu ihsdasdasd ad asd ih uh uhu ih uihu hui hui hui hui hu ihsdasdasd ad asd ih uh uhu ih uihu hui hui hui hui hu ihsdasdasd ad asd ih uh uhu ih uihu hui hui hui hui hu ihsdasdasd ad asd ih uh uhu ih uihu hui hui hui hui hu ihsdasdasd ad asd ih uh uhu ih uihu hui hui hui hui hu ihsdasdasd ad asd ih uh uhu ih uihu hui hui hui hui hu ihsdasdasd ad asd ih uh uhu ih uihu hui hui hui hui hu ihsdasdasd ad asd ih uh uhu ih uihu hui hui hui hui hu ihsdasdasd ad asd ih uh uhu ih uihu hui hui hui hui hu ih iuh uih iuh uih iu hui hiu </p> 
 
     </div> 
 
    </main> 
 
    
 
    <div id="RightMainSection"> 
 
     <div id="News2"><h1>Campaign News</h1>This just in Burton Guster, Ricky, and Rick Grimes are found to be lying in the campaign just to get ahead in the polls that Puss In Boots swept away from them.</div> 
 
     
 
     <div id="News3"><h1>World News</h1>Today in America Donald Trump is talking about visiting kim jong-un with Puss in Boots by his side.</div> 
 
     
 
     <div id="News4"><h1>Local News</h1>Tomorrow Puss In Boots is planning to meet with local schools to find out what kids like most about school. And what teachers want to see changed for the childrens education.</div> 
 
    </div> 
 
</body> 
 
</html>

私が使用しようとしました目に見える

のオーバーフローを持っている#OthersMainのIDを持つ私のメインを持ちたい!重要な私のCSSスタイルにアドオンが、それでも表示されないようにデバッグすることはできません

+1

トライオーバーフロー:自動; – Chiller

答えて

0

overflow: scrollまたはautoは表示しないでください。!important

body, html { 
 
\t height: 100%; 
 
\t width: 100%; 
 
\t margin: 0px; 
 
\t padding: 0px; 
 
\t overflow: hidden; 
 
} 
 
* { 
 
\t box-sizing: border-box; 
 
} 
 

 
/* Home.html */ 
 

 
#LeftMainSection { 
 
\t background-color:#FFA500; 
 
\t width: 180px; 
 
\t height: 100%; 
 
\t display: inline-block; 
 
\t float: left; 
 
\t margin-left: -180px; 
 
\t animation: LeftMove 1s; 
 
\t animation-fill-mode: forwards; 
 
    border-right:10px solid black; 
 
} 
 
#LeftMainSection a { 
 
\t padding-top: 9px; 
 
\t text-align: center; 
 
\t text-decoration: none; 
 
\t color: black; 
 
\t background-color:rgba(153, 99, 0, .6); 
 
\t width: 180px; 
 
\t height: auto; 
 
    padding:10px; 
 
\t display: block; 
 
    border-bottom:10px solid black; 
 
    border-right:10px solid black; 
 
} 
 

 

 
@keyframes LeftMove { 
 
\t 0% { 
 
\t \t margin-left: -180px; 
 
\t } 
 
\t 100% { 
 
\t \t margin-left: 0; 
 
\t } 
 
} 
 
#BorderBottomBlack { 
 
\t border-bottom: 10px solid black; 
 
} 
 
#BorderTopBlack { 
 
\t border-top: 10px solid black; 
 
} 
 
#RandomInfo { 
 
\t text-align: center; 
 
} 
 
#HomeMain, #OthersMain{ 
 
     text-align:center; 
 
\t overflow: auto; 
 
\t text-indent: 40px; 
 
\t color: white; 
 
\t height: 100%; 
 
\t background-color:#664200; 
 
\t margin-right: 245px; 
 
\t margin-left: -180px; 
 
\t animation: LeftMove 1s; 
 
\t animation-fill-mode: forwards; 
 
} 
 

 
#OthersMain{ 
 
font-size:.8em; 
 
    overflow:auto; 
 
} 
 
#TopHR, #BottomHR{ 
 
    border:solid black; 
 
height:10px; 
 
    background-color:black; 
 
} 
 
#HomeMain p{ 
 
    font-size:1.3em; 
 
    text-align:center; 
 
\t padding: 10px; 
 
} 
 
#AboutPG{ 
 
    font-size:1.3em; 
 
text-align:left; 
 
    padding: 10px; 
 
} 
 
#Flip { 
 
transform:rotateY(180deg); 
 
} 
 
#RightMainSection { 
 
\t border-top: 10px solid black; 
 
\t position: absolute; 
 
\t right: 0; 
 
\t top: 0; 
 
    background-color:#FFA500; 
 
\t width: 250px; 
 
\t height: 100%; 
 
\t display: inline-block; 
 
\t float: right; 
 
} 
 
#News1, #News2, #News3, #News4 { 
 
\t background-color:#C27D00; 
 
    border-left:10px solid black; 
 
    border-bottom:10px solid black; 
 
\t height: 140px; 
 
\t width: 250px; 
 
    
 
} 
 
#itm1, #itm2, #itm3, #itm4{ 
 
    text-align:center; 
 
width:100%; 
 
    height:121px; 
 
    background-color:black; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
#ShopLink1, #ShopLink2, #ShopLink3, #ShopLink4{ 
 
    text-align:center; 
 
    color:white; 
 
    display:inline-block; 
 
    background-color:black; 
 
} 
 
#News4{ 
 
height:150px; 
 
} 
 
#News2 h1, #News3 h1, #News4 h1 { 
 
    margin:0; 
 
    padding:0; 
 
font-size:.89em; 
 
} 
 

 
#News2, #News3, #News4 { 
 
    font-size:1.1em; 
 
text-align:center; 
 
} 
 
#myProgress { 
 
\t width: 100%; 
 
\t background-color: #000; 
 
} 
 
#myBar { 
 
\t font-size: 10pt; 
 
\t width: 40%; 
 
\t height: 30px; 
 
\t background-color: #4CAF50; 
 
\t text-align: center; 
 
\t line-height: 30px; 
 
\t color: white; 
 
} 
 
#Percent, #pollsP { 
 
\t text-align: center; 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 
button { 
 
\t position: absolute; 
 
\t width: 100%; 
 
\t top: 112px; 
 
} 
 

 
#tezt{ 
 
width:50%; 
 
    height:10px; 
 
} 
 
#HomeMainDivTop { 
 
\t border-top: 10px solid black; 
 
\t width: 100%; 
 
\t height: 90px; 
 
\t background-color:#C27D00; 
 
    border-bottom:10px solid black; 
 
\t text-align: center; 
 
} 
 
#Flip{ 
 
    margin-left:10px; 
 
} 
 
#LeftMain, #RightMain{ 
 
height:100%; 
 
    width:100%; 
 
} 
 

 
#CatImg2{ 
 
     margin-right:10px; 
 
} 
 
/* index.html */ 
 

 

 
#Indexh1{ 
 
    text-align:center; 
 
width:auto; 
 
    height:50px; 
 
} 
 
#IndexA { 
 
    display:inline-block; 
 
width:100%; 
 
    height:100px; 
 
    text-decoration:none; 
 
    color:gray; 
 
} 
 
video { 
 
    background-color:black; 
 
    margin:0; 
 
    padding:0; 
 
    width:100%; 
 
    height:100%; 
 
} 
 

 

 
#ClickToHome{ 
 
    z-index:99; 
 
    background:rgba(50, 50, 50, .5); 
 
width:100%; 
 
    height:100px; 
 
    position:absolute; 
 
    top:0; 
 
}
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title></title> 
 
    <link rel="stylesheet" href="/Candidate/CSSFiles/styles.css"> 
 
</head> 
 

 
<body> 
 
    <div id="LeftMainSection"> 
 
     <a id="BorderTopBlack" href="Index.html">Video</a> 
 
     <a id="" href="Home.html">Home</a> 
 
     <a id="" href="Bio.html">Bio</a> 
 
     <a id="" href="Shop.html">Shop</a> 
 
     <a id="" href="Campaign.html">About The Campaign</a> 
 
     <a id="Others" href="Others.html">About The Other Candidates</a> 
 
     <a id="" href="citations.html">Citations</a> 
 
     <a id="BorderBottomBlack" href="Contact.html">Contact</a> 
 
     <div id="RandomInfo"> 
 
      <h3>Random Info</h3> 
 
     </div> 
 
    </div> 
 
    <main id="OthersMain"> 
 
     <div id="HomeMainDivTop"> 
 
      <h2>About The Other Canidates</h2> 
 
     </div> 
 
     
 
     <div> 
 

 
      <h1>Burton (Gus) Guster</h1> 
 
      <hr id=""> 
 
      <h2 id="AboutPG">About "Gus"</h2> 
 
      <p>Crime</p> 
 
      <p></p> 
 
      <p>Economy</p> 
 
      <p></p> 
 
      <p>Education</p> 
 
      <p></p> 
 
     
 
     </div> 
 
     <div> 
 
      <hr id="TopHR"> 
 
      <h1>Rickey</h1> 
 
      <hr> 
 
      <h2 id="AboutPG">About "Rickey"</h2> 
 
      <p>Crime</p> 
 
      <p></p> 
 
      <p>Economy</p> 
 
      <p></p> 
 
      <p>Education</p> 
 
      <p></p> 
 
     
 
     </div> 
 
     <div> 
 
      <hr id="TopHR"> 
 
      <h1>Rick Grimes</h1> 
 
      <hr> 
 
      <h2 id="AboutPG">About "Rick Grimes"</h2> 
 
      <p>Crime</p> 
 
      <p></p> 
 
      <p>Economy</p> 
 
      <p></p> 
 
      <p>Education</p> 
 
      <p>sdasdasd ad asd ih uh uhu ih uihu hui hui hui hui hu ihsdasdasd ad asd ih uh uhu ih uihu hui hui hui hui hu ihsdasdasd ad asd ih uh uhu ih uihu hui hui hui hui hu ihsdasdasd ad asd ih uh uhu ih uihu hui hui hui hui hu ihsdasdasd ad asd ih uh uhu ih uihu hui hui hui hui hu ihsdasdasd ad asd ih uh uhu ih uihu hui hui hui hui hu ihsdasdasd ad asd ih uh uhu ih uihu hui hui hui hui hu ihsdasdasd ad asd ih uh uhu ih uihu hui hui hui hui hu ihsdasdasd ad asd ih uh uhu ih uihu hui hui hui hui hu ihsdasdasd ad asd ih uh uhu ih uihu hui hui hui hui hu ih iuh uih iuh uih iu hui hiu </p> 
 
     </div> 
 
    </main> 
 
    
 
    <div id="RightMainSection"> 
 
     <div id="News2"><h1>Campaign News</h1>This just in Burton Guster, Ricky, and Rick Grimes are found to be lying in the campaign just to get ahead in the polls that Puss In Boots swept away from them.</div> 
 
     
 
     <div id="News3"><h1>World News</h1>Today in America Donald Trump is talking about visiting kim jong-un with Puss in Boots by his side.</div> 
 
     
 
     <div id="News4"><h1>Local News</h1>Tomorrow Puss In Boots is planning to meet with local schools to find out what kids like most about school. And what teachers want to see changed for the childrens education.</div> 
 
    </div> 
 
</body> 
 
</html>

関連する問題