0
私はウェブサイトのレイアウトを設計してきましたが、divの重複にいくつか問題がありました。私はこれを防ぐ方法を研究してきたし、フレックスボックスを使用しようとしていましたが、私が正しく使用していれば、まだ結果が見えません。divの垂直オーバーラップを防ぐ方法
私は何が関連しているか分からないので、私は自分のHTMLの本体を共有しようとしています。
<body id="body">
<div id="float">
<div>
<div><strong>Home</strong></div>
<div><strong>Team</strong></div>
<div><strong>Projects</strong></div>
<div><strong>Contact</strong></div>
</div>
</div>
<!-- Background Logo -->
<div id="background">
</div>
<!--End Background Logo -->
<!-- Main Navigation Menu - Top of screen. -->
<div id="NavigationMenu">
<ul style="list-style-type: none;">
<li><strong>Home</strong></li>
<li><strong>Team</strong></li>
<li><strong>Projects</strong></li>
<li><strong>Contact</strong></li>
</ul>
</div>
<!-- Main Navigation Menu - Top of screen. -->
<!-- Page Content -->
<div id="content-main">
<h1>hello world</h1>
<p>hello world </p>
</div>
<div id="relevant-links">
<p>Hello World</p>
</div>
<!-- Page Content -->
</body>
そしてCSS
#body {
background-color: #355e72;
color: #231F20;
display: flex;
flex-flow: column;
height: 100%;
}
#background {
background-image: url(../Images/IncitementStudio-Logo-Color.png);
background-repeat: no-repeat;
background-size: contain;
padding-left: 80%;
padding-bottom: 48%;
position: absolute;
display: block;
}
#NavigationMenu {
padding-bottom: 25%;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
padding-left: 35%;
padding-top: 16%;
font-size: 2.5vw;
position: absolute;
}
#float {
text-align: center;
color: gray;
padding-top: 9%;
margin-top: -10%;
padding-bottom: 100%;
margin-left: 85%;
list-style-type: none;
width: 15%;
background-color: #203A46;
position: fixed;
z-index: 999;
}
#float strong {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
font-size: 3vw;
}
#float div div {
border: solid gray;
border-top: 0px;
border-left: 0px;
border-right: 0px;
padding: 10% 10% 10% 10%
}
#content-main {
position: absolute;
top: 80%;
background-color: #2B4F60;
width: 100%;
display: block;
margin: -1%;
padding-left: 2.5%;
padding-bottom: 1vh;
}
#content-main h1 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
#content-main p {
width: 80%;
}
#footer p {
color: gray;
}
#relevant-links {
position: absolute;
background-color: #203A46;
display: block;
flex-flow: column;
margin-left: -1%;
padding-left: 2%;
top: 100%;
width: 86%;
height: auto;
}
#relevant-links p {
width: 80%;
}
は、私も、Jsfiddleに私のHTML/CSSのコピーを置く：https://jsfiddle.net/Ld3jp7g3/1/
をDreamweaverで、ライブビューがあること、本体を示しているようですページの約5分の1にしか過ぎません。これは問題の一部になる可能性がありますか？なぜそれが起こっているのですか？これをどうやって解決しますか？
ようこそStackOverflow！パーセンテージベースのパディングとマージンを使用している理由は、divオーバーラップを取得する理由を説明しています。また、すべてのものについて 'position：absolute'と' position：fixed'も使用しています。これは応答性の高いWebサイトでの作業を非常に困難にします。私は、ブートストラップや財団のようなフレームワークを使って、要素がどのようにページ上に配置されるべきかを知ることを助けることを検討することをお勧めします。基本的には、サイドバーは1つの列にする必要があり、残りのコンテンツは別の大きな列に入れる必要があります:) –