0
私はhtmlの& cssで新しく、無料のテンプレートで練習していますが、今は問題があります。私のヘッダーとフッターは右に空白があり、一番下にスクロールバーはありません。 誰かがこの問題を手伝うことができますか？オーバーフローが隠されていても動作しません
スニペット：
@font-face {
font-family: 'Arimo-Bold';
src: url('fonts/Arimo-Bold/Arimo-Bold.eot');
src: url('fonts/Arimo-Bold/Arimo-Bold.woff') format('woff'), url('fonts/Arimo-Bold/Arimo-Bold.ttf') format('truetype'), url('fonts/Arimo- Bold/Arimo-Bold.svg') format('svg');
}
@font-face {
font-family: 'ChangaOne';
src: url('fonts/ChangaOne/ChangaOne-Regular.eot');
src: url('fonts/ChangaOne/ChangaOne-Regular.woff') format('woff'), url('../fonts/ChangaOne/ChangaOne-Regular.ttf') format('truetype'), url('../fonts/ChangaOne/ChangaOne-Regular.svg') format('svg');
}
@font-face {
font-family: 'Comfortaa-Regular';
src: url('fonts/Comfortaa/Comfortaa-Regular.eot');
src: url('fonts/Comfortaa/Comfortaa-Regular.woff') format('woff'), url('fonts/Comfortaa/Comfortaa-Regular.ttf') format('truetype'), url('fonts/Comfortaa/Comfortaa-Regular.svg') format('svg');
}
body {
margin: 0px;
padding: 0px;
background-color: #ededed;
font-family: Arial, Helvetica, Sans-Serif;
line-height: 1;
overflow: scroll;
}
.Header {
position: relative;
top: 0px;
left: 0px;
background-color: #4c8f96;
height: 180px;
margin-left: auto;
margin-right: auto;
padding-right: -5px;
overflow: hidden;
}
.Header--logo {
margin-left: 490px;
margin-top: 55px;
width: 265px;
float: left;
}
.Header--Nav {
float: left;
text-align: center;
list-style-type: none;
}
.Header--Nav li {
float: left;
list-style-type: none;
margin-left: 20px;
margin-right: 0.7px;
margin-top: 100px;
color: white;
font-family: Arial, Helvetica, Sans-Serif;
font-weight: lighter;
text-transform: Uppercase;
}
.Header--Nav li:not(.Header--Nav__selected) {
background-color: #1b2130;
padding: 5px 20px;
border-radius: 5px;
text-align: center;
}
.Header--Nav__selected {
background-color: #335f64;
padding: 5px 20px;
border-radius: 5px;
text-align: center;
}
.Header--Nav li:hover {
color: #ccc;
}
.Image {
clear: left;
position: relative;
left: 490px;
top: 50px;
height: 356px;
border: 2px solid #5fb3bd;
width: 933px;
background: #fff;
}
.Image img {
float: left;
height: 356px;
padding-right: 20px;
}
.Image--description h1 {
float: left;
display: inline;
font-family: 'ChangaOne';
font-weight: normal;
font-size: 40px;
padding-top: 75px;
line-height: 50px;
}
.Sections {
position: relative;
left: 490px;
top: 100px;
width: 956px;
}
.Sections--Sections__1,
.Sections--Sections__2,
.Sections--Sections__3,
.Sections--Sections__4 {
float: left;
width: 234px;
margin-right: 5px;
}
.Sections p {
font-weight: lighter;
font-size: 12px;
line-height: 24px;
margin-right: 10px;
width: 230px;
}
.Sections img {
border: #5fb3bd 5px solid;
}
.Sections span {
font-weight: normal;
font-size: 18px;
text-align: left;
}
.Featured {
clear: both;
float: left;
position: relative;
top: 140px;
left: 490px;
border: #5fb3bd 5px solid;
background-color: #fff;
border-radius: 5px;
width: 450px;
min-height: 579px;
}
.Featured h2 {
background-color: #1b2130;
color: #fff;
width: 75px;
margin-top: -14px;
margin-left: 15px;
margin-bottom: 25px;
padding-left: 30px;
padding-right: 50px;
line-height: 47px;
font-family: 'Comfortaa-Regular';
font-weight: lighter;
font-size: 22px;
}
.Featured h3 {
float: left;
margin-top: -1px;
margin-left: 30px;
font-weight: normal;
font-size: 18px;
text-align: left;
}
.Featured p {
clear: both;
width: 420px;
font-weight: lighter;
font-size: 12px;
line-height: 24px;
margin-right: 10px;
}
.Featured--Image {
float: left;
margin-left: 15px;
margin-right: 0px;
margin-bottom: 25px;
}
.Featured--Article {
margin-left: 15px;
}
.Featured--Article span {
margin-left: 15px;
}
.Sections {
float: left;
overflow: hidden;
}
.Sections--Hairstyle {
position: relative;
top: 40px;
left: 15px;
border: #5fb3bd 5px solid;
background-color: #4c8f96;
border-radius: 5px;
width: 460px;
min-height: 250px;
}
.Sections--Hairstyle h2 {
background-color: #1b2130;
color: #fff;
width: 75px;
margin-top: -14px;
margin-left: 15px;
padding-left: 30px;
padding-right: 50px;
line-height: 47px;
font-family: 'Comfortaa-Regular';
font-weight: lighter;
font-size: 22px;
}
.Sections--Hairstyle p {
clear: both;
width: 420px;
font-weight: lighter;
font-size: 12px;
line-height: 24px;
margin-right: 0px;
margin-left: 15px;
color: #f5f5f5;
}
.Name {
text-decoration: none;
color: #f5f5f5;
}
.Sections--Hairstyle .Name1 {
margin-left: 357px;
font-size: 20px;
padding-top: 19px;
padding-bottom: -10px;
}
.Sections--Hairstyle a:not(.Name) {
text-decoration: none;
text-decoration: underline;
color: #f5f5f5;
}
.Sections--Newsletter {
position: relative;
top: 40px;
left: 15px;
border: #5fb3bd 5px solid;
background-color: #4c8f96;
border-radius: 5px;
width: 460px;
min-height: 225px;
margin-top: 40px;
margin-bottom: 250px;
}
.Sections--Newsletter p {
float: left;
width: 250px;
line-height: 27px;
}
.Sections--Newsletter img {
position: relative;
bottom: 12px;
float: left;
border: none;
height: 245px;
padding-bottom: 20px;
}
.Sections--Newsletter p {
float: left;
border: none;
font-size: 17.25px;
line-height: 30px;
color: #f5f5f5;
font-weight: bold;
width: 230px;
padding-top: 16px;
padding-left: 24.43px;
}
.Footer {
clear: left;
background: #4c8f96;
border-top: 1px solid #9bd9e0;
height: 145px;
overflow: hidden;
margin-bottom: -10px;
}
.Footer > div {
margin: 0 auto;
width: 960px;
color: #ededed;
font-size: 12px;
padding-top: 60px;
text-align: center;
}
.Footer p {
float: left;
margin-left: 230px;
display: inline-block;
overflow: hidden;
}
.Footer ul {
list-style-type: none;
float: right;
background-color: #387a82;
padding-right: 10px;
padding-left: 10px;
padding-top: 20px;
padding-bottom: -50px;
text-align: center;
margin-bottom: 30px;
margin-top: -30px;
height: 50px;
}
.Footer li {
display: inline;
list-style-type: none;
overflow: hidden;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 10px;
margin-right: 10px;
margin-bottom: 20px;
text-align: center;
}
.Footer--connect {
float: left;
display: inline;
overflow: hidden;
}<header class="Header">
<img src="images/Logooo.png" class="Header--logo">
<nav class="Header--Nav">
<ul>
<li class="Header--Nav__selected">Home</li>
<li class="Header--Nav__li2">About</li>
<li class="Header--Nav__li3">Hairstyles</li>
<li class="Header--Nav__li4">News</li>
<li class="Header--Nav__li5">Contact</li>
</ul>
</nav>
</header>
<div class="Image">
<img src="images/great-hairstyle.jpg" class="Image--Img">
<section class="Image--description">
<h1>Great hairstyle comes<br />from the experts.</h1>
</section>
</div>
<section class="Container">
<section class="Sections">
<section class="Sections--Sections__1">
<img src="images/hairstyle17.jpg">
<p><span>Best Hairstylists</span>
<br />Our website templates are created with inspiration, checked for quality and originality and meticulously sliced and coded. What’s more, they’re absolutely free!</p>
</section>
<section class="Sections--Sections__2">
<img src="images/hairstyle18.jpg">
<p><span>Featured Hairstylists</span>
<br />Our website templates are created with inspiration, checked for quality and originality and meticulously sliced and coded. What’s more, they’re absolutely free!</p>
</section>
<section class="Sections--Sections__3">
<img src="images/hairstyle19.jpg">
<p><span>Hair Care</span>
<br />Our website templates are created with inspiration, checked for quality and originality and meticulously sliced and coded. What’s more, they’re absolutely free!</p>
</section>
<section class="Sections--Sections__4">
<img src="images/hairstyle20.jpg">
<p><span>We "Hair" You</span>
<br />Our website templates are created with inspiration, checked for quality and originality and meticulously sliced and coded. What’s more, they’re absolutely free!</p>
</section>
</section>
</div>
<section class="Featured">
<h2>Featured</h2>
<img src="images/featured.jpg" class="Featured--Image">
<article class="Featured--Article">
<h3>Hair, I just meet you</h3>
<p>Our website templates are created with inspiration, checked for quality and originality and meticulously sliced and coded. What’s more, they’re absolutely free! You can do a lot with them. You can modify them. You can use them to design websites
for clients, so long as you agree with the Terms of Use.
<br />
<br />You can even remove all our links if you want to. Looking for more templates? Just browse through all our Free Website Templates and find what you’re looking for. But if you don’t find any website template you can use, you can try our Free Web
Design service and tell us all about it. Maybe you’re looking for something different, something special.
<br />
<br />And we love the challenge of doing something different and something special. If you’re experiencing issues and concerns about this website template, join the discussion on our forum and meet other people in the community who share the same interests
with you. Version 13</p>
</article>
</section>
<section class="Sections">
<section class="Sections--Hairstyle">
<h2>Hairstyle</h2>
<p>This website template has been designed by <a href="">Free Website Templates</a> for you, for free. You can replace all this text with your own text. You can remove any link to our website from this website template, you're free to use this website
template without linking back to us. If you're having problems editing this website template, then don't hesitate to ask for help on the <a href="">Forums</a>.</p>
<p class="Name1"><a href="" class="Name">Mike M</a>.</span>
</p>
</section>
<section class="Sections--Newsletter">
<img src="images/skinhead.png" alt="bald man">
<p>Are you losing your hair? Let us help you in bringing back your confidence.
<br />Call Us at 1800-0000-0000</p>
</section>
</section>
<footer class="Footer">
<div <p class="copyright">© copyright 2023 | all rights reserved.</p>
<ul class="Footer--connect">
<li>
<a href="https://twitter.com/">
<img src="images/icons/icon- twitter2.png">
</a>
</li>
<li>
<a href="https://www.facebook.com">
<img src="images/icons/icon- facebook.png">
</a>
</li>
<li>
<a href="https://plus.google.com/">
<img src="images/icons/googleplus.png">
</a>
</li>
<li>
<a href="https://www.pinterest.com/">
<img src="images/icons/pinterest.png">
</a>
</li>
</ul>
</div>
はHTMLにエラーがあるので、それらを修正し、見て、あなたはまだ問題があるならば、私たちは –
をお知らせ私はあなたの答えを持っていればいいと思う。 '％ '幅、高さ、左スペーシングなどを使用します。 –