スクロールすると一緒にfooterが上がってきてしまいます。
また、左側部分に隙間ができてしまいます。
スクロールの方はz-index: 2;やposition: absolute; などを試してみました。
また、左側の隙間の方は、width:100%を試しました。
宜しくお願いします。
<html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ちづる1</title> <link rel="stylesheet" href="chizuru.css"/> <title>ちづる</title> </head> <body> <header> <div class="container"> <div class="logo"> <img src="logo.png"></div> <div class="header-list"> <ul> <li>Cute</li> <li>Cute</li> <li>Cute</li> </ul> </div> </div> </header> <div class="main"> <div class="copy-container"><img src="header.jpg"></div> <div class="copy"><h1>Our Ability</h1></div> <div class="contents"> <div class="contents-item"><img src="img1.png"> <h3>Heal</h3> <p>We are excellent.</p></div> <div class="contents-item"> <img src="img2.png"> <h3>Fly</h3> <p>We are talented.</p></div> <div class="contents-item"> <img src="img3.png"> <h3>Sleep</h3> <p>We are clever.</p></div> </div> <div class="section-title"> <h2>We are necessary for<br>human life</h2> <p>Because we are very cute.<br> Please leave it to us if you need help.</p> <div class="btn sinup">MORE</div> </div> <div class="section-title-logo"> <img src="img-right.jpg"></div> </div> <footer> <footer class="footer">copyright 2019 Shima-Enaga</footer> </footer> </body> </html>
body
1 font-family: "Avenir Next";height: 100%; 2} 3 4.container{width: 1280px; height: 26px; } 5.logo{padding:0px 150px; float: left; } 6.header-list{ font-size:18px; font-family:ヒラギノ角ゴ ProN W3; text-align:right; margin-right: 150px;} 7.header-list li{ list-style: none; float: right; display: inline-block; padding: 16px 30px 16px 0px; color:#555555; 8 } 9.main{width:1280px; } 10.copy-container{width:980px; height: 600px;} 11 .copy h1{ text-align: center; color:#555555;; margin:70px 548px; border-bottom: 5px solid #51A2BC; width:185px; display: inline-block; } 12 13.contents{margin:52px ; text-align: center; color:#555555;} 14 .contents-item{ padding:50px; display: inline-block;} 15.contents-item h3{margin:20px; font-size:32px;} 16.contents-item p{font-size:20px; margin:32px;} 17 18.section-title{float:left; width:335px; margin-left:150px; color:#555555;} 19.h2{margin:80px; font-size:32px; } 20.p{color:#555555;margin-top:30px;} 21.sinup{font-size:22px;text-align:center;line-height: 50px;} 22.btn{color:#51A2BC; border-radius:25px ; 23 border: solid 3px #51A2BC; height:50px;width:165px; display:inline-block; } 24.section-title-logo{float: right;margin:20px 130px; margin-bottom:124.99px;} 25 26footer{background-color: #D5D5D5;height:50px; width:100%; margin-top:74.99px; 27 position: fixed; bottom: 0;} 28.footer{ color:#FFFFFF; font-size:12px;text-align:center; line-height:50px;}
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/29 10:36