1
私は練習用のウェブサイトを作り、これまでに学んだことをテストしています。私は私のCSS（私は信じて）に問題があります。私がしようとしているのは、<header>の下に、<main>と<section>要素を隣り合わせに浮かべることです。<section>にCSSを追加すると、サイズに望ましくない変更が加えられています<body>
私の問題は、私は<section>にCSSを追加するとき、それは<header>の大きさと、ボディの下に、その後<main>と<section>フロートの両方に<body>の大きさを変えることです。私は研究に時間を費やして助けてくれる調整をしようとしており、私は運がなかった。
私の他の質問は、私のサイト（半）を反応的にしようとして自分自身を先取りしていると思いますか？これは結局私の最初のページです。私はちょうど今ピクセルとポイントを付けるべきですか？
何か助力や提案をいただければ幸いです。ありがとう
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "utf-8">
<title>Home</title>
<link rel = "shortcut icon" href = "images/favicon.ico">
<link rel = "stylesheet" href = "styles/sharedstyles.css">
<link rel ="stylesheet" href="styles/homestyle.css">
</head>
<body>
<header>
<img id="logo" src="images/logo.png" alt="B-more Neighborly Logo" height="181" width="273">
<nav id="nav_menu_3">
<ul>
<li><a href="index.html" >Home</a></li>
<li><a href="pages/donate.html">Local Donations</a></li>
<li><a href="pages/volunteer.html">Volunteer</a></li>
<li><a href="pages/other.html">Other Ways You Can Help</a></li>
<li><a href="pages/contact.html">Contact Us</a></li>
</ul>
</nav>
</header>
<main>
<h1>This page will contain:</h1>
<p> Gibberish dsfhaskdjfhaslkjdhfaslkjdhfaklsjdhfasjhdfajshdfjsahdfjssskljbsbsaksjhdfkashfkjashdfkjashdfkjashdfkasjhdfaksjhdfaksjhdfkajshdlfjhasdjhfalskdjfhalsjdhflasjhdflkajshdflajshdflkjashdfljkhasldjfhaskjdhfalsjkdhfalksjhdfajkshdfkajshdflkajshdflashdflajshdfashdfhasldkjfhasldfhaskdflaskdjhfalsdjhfalksflasjkdhfalskjhdflaskjdhfalskjdhflaksdjhflaskjdhfalskjdhfalsjkdhflasjkdhflsakjdhflasdjfhalsdjfhalsdjkhfalsdjhf
</p>
</main>
<section>
<p><img src="images/skyline.jpg" alt="Baltimore Skyline" height="300" width="431"></p>
<p><img src="images/hands.jpg" alt="Helping Hands" height="300" width="431"></p>
</section>
</body>
</html>
ここにCSSがあります。私はそれが簡単にあなたがここに持っていることは、容器を崩壊した場合である
body{
background-color: #bae2c2;
border: 2px solid black;/**/
}
header{
height:16em;
width:100%;
}
#logo{
margin:1em;
}
#nav_menu_3{
float:right;
margin-top:4em;
margin-right:5em;
}
#nav_menu_3 ul {
list-style: none;
}
#nav_menu_3 ul li {
float: left;
}
#nav_menu_3 ul li a {
text-align: center;
display: block;
width: 210px;
height:35px;
padding: 1em 0;
text-decoration: none;
background-color: #CC7814;
color: white;
font-weight: bold;
border-right: 2px solid white;
}
#nav_menu_3 ul li a:hover, #nav_menu_3 ul li a:focus {
background-color:#6f19ff;
}
p {
font-family:"Arial";
font-size:"20px";
}
/*here is the CSS i believe is causing me the problems*/
main{
float:left;
height: 40%;
width: 40%;
}
section{
float:left;
height:50%;
width:40%;
}
あなたは自分のコンテナによって占めべき高さのためにフロートをクリアする必要があります。 https://css-tricks.com/all-about-floats/をお読みください –