-1
Im Wesentlichen versuche ich das <Div> Tag zu verwenden, um einen unteren Rand zu erstellen, um verschiedene Inhalte auf der Seite zu trennen, aber wenn ich nach unten scrolle und div dort einfügen, um sie zu trennen Es ignoriert die anderen Tags, die ich an das vorherige div-Trennzeichen angehängt habe.Versucht, ein div als Trennzeichen für verschiedene Abschnitte zu verwenden
Wie kann ich das beheben? Ich habe versucht, ein HR-Tag zu verwenden, aber es hat das gleiche getan.
Dies ist mein Code:
div {
margin: 0;
padding: 0;
}
#wrapper {
width: 100%;
margin: 0 auto;
}
#leftcolumn,
#rightcolumn {
border: none;
float: left;
min-height: 450px;
color: white;
}
#leftcolumn {
width: 50%;
}
.container {
margin-left: 10%;
width: 40%;
text-align: center;
}
#rightcolumn {
/* height: 100%;*/
width: 40%;
float: right;
background-color: #c9ccc9;
}
.border {
border-bottom: 40px solid #8dc43f;
}
p {
color: black;
}
.infotext {
color: #8dc43f;
margin-left: 30%;
font-family: 'ABeeZee', sans-serif;
font-size: 30px;
}
.infotexttitle {
color: #8dc43f;
margin-left: 25%;
font-family: 'ABeeZee', sans-serif;
font-size: 30px;
}
.infotexttitlepower {
color: #8dc43f;
margin-left: 36%;
font-family: 'ABeeZee', sans-serif;
font-size: 30px;
}
.infotexttitlecomm {
color: #8dc43f;
margin-left: 17%;
font-family: 'ABeeZee', sans-serif;
font-size: 30px;
}
.bluetags {
width: 264px;
padding: 0;
/* transform:rotate(180deg);*/
display: block;
/* border-collapse:collapse;*/
margin-left: 176px;
margin-top: 4px;
}
.greentags {
width: 264px;
padding: 0;
/* transform:rotate(180deg);*/
display: block;
/* border-collapse:collapse;*/
margin-left: 180px;
margin-top: -26px;
}
.orangetags {
width: 280px;
padding: 0;
/* transform:rotate(180deg);*/
display: block;
/* border-collapse:collapse;*/
margin-left: 175px;
margin-top: -15px;
}
.image {
position: relative;
width: 80%;
/* for IE 6 */
}
.titleimg {
margin-left: -60%;
margin-right: 10%;
}
imagetext {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
.bgimg {
background-size: cover;
width: 100%;
height: 60%;
border-collapse: collapse;
display: block;
margin: 0;
padding: 0;
}
#container {
height: 400px;
width: 400px;
position: relative;
}
#text {
z-index: 100;
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
left: 43%;
top: 25%;
font-family: 'ABeeZee', sans-serif;
}
#secondtext {
z-index: 100;
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
left: 37%;
top: 30%;
font-family: 'ABeeZee', sans-serif;
}<div id="cssmenu">
<ul>
<img src="turtletag.png" class="titleimg">
<li><a href="#backtotop"><span>Home</span></a>
</li>
<li><a href="#features"><span>Features</span></a>
</li>
<li><a href="#app"><span>App</span></a>
</li>
<li><a href="#products"><span>Products</span></a>
</li>
<li><a href="#"><span>Support</span></a>
</li>
</ul>
</div>
<img src="googlestore.png" style="position:absolute; top:210px;left:70px; width: 10%;">
<img src="appstore.png" style="position:absolute; top:320px; left:77px; width:10%;">
<a href="#" class="myButton">Order Tags</a>
<img src="iPhone5_Mockup_Template_Free_by_Ray.png" class="bgimg">
<p id="text">Turtle Tags</p>
<p id="secondtext">Always connected to the nest</p>
<div class="border"></div>
<div id="leftcolumn">
<div class="mainbody">
<img src="bluetags.png" class="bluetags hvr-float">
</div>
<div class="mainbody">
<img src="greentags.png" class="greentags hvr-float">
</div>
<div class="mainbody">
<img src="orangetag.png" class="orangetags hvr-float">
</div>
</div>
<a name="features"></a>
<div id="rightcolumn">
<h2 class="infotext">Features</h2>
<hr class="newstyle">
<img src="battery.png" style="margin-left:40%; width:15%">
<p class="infotexttitle">Long battery life</p>
<p rows="4" columns="4" style="width:350px;margin-left:100px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur urna enim, aliquet non sagittis sit amet, euismod luctus risus. Aliquam venenatis arcu quam, id hendrerit dolor fermentum sed. Nullam congue molestie dolor quis egestas. Suspendisse
potenti.
</p>
<img src="speaker-xxl.png" style="margin-left:45%; width:10%; margin-top:30px;">
<p class="infotexttitle">Noise Notifications</p>
<p rows="4" columns="4" style="width:350px;margin-left:100px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur urna enim, aliquet non sagittis sit amet, euismod luctus risus. Aliquam venenatis arcu quam, id hendrerit dolor fermentum sed. Nullam congue molestie dolor quis egestas. Suspendisse potenti.
</p>
<img src="powericon.png" style="margin-left:45%; width:10%; margin-top:30px;">
<p class="infotexttitlepower">Always on</p>
<p rows="4" columns="4" style="width:350px;margin-left:100px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur urna enim, aliquet non sagittis sit amet, euismod luctus risus. Aliquam venenatis arcu quam, id hendrerit dolor fermentum sed. Nullam congue molestie dolor quis egestas. Suspendisse potenti.
</p>
<img src="twoway.png" style="margin-left:45%; width:10%; margin-top:30px;">
<p class="infotexttitlecomm">Two way communication</p>
<p rows="4" columns="4" style="width:350px; margin-left:100px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur urna enim, aliquet non sagittis sit amet, euismod luctus risus. Aliquam venenatis arcu quam, id hendrerit dolor fermentum sed. Nullam congue molestie dolor quis egestas. Suspendisse potenti.
</p>
</div>Ich habe versucht, die CSS zu ändern, und ich kann nichts finden, dass es dazu führen würde, aber ein frisches Paar Augen in der Lage sein etwas zu finden, was ich nicht kann.
eine [Geige] Erstellen (https://jsfiddle.net/), das funktioniert so, dass ihr leichter, daran zu arbeiten. –
Es ist schwierig, das Problem zu diagnostizieren, wenn Sie einfach Ihren gesamten Code einfügen. Ich kopiere/klebte das auf jsfiddle, aber ich weiß immer noch nicht, was du willst. https://jsfiddle.net/ahmadabdul3/ghogvcsx/3/ –
@AbdulAhmad Die grüne Grenze, die Sie oben sehen Ich versuche, es am Ende der Seite zu bekommen, sowie ich 2 Abschnitte der Seite trennen kann, aber wenn du das div wieder verwendest, wird es auf den grünen Rand am oberen Ende hinzugefügt und verdoppelt es in der Größe –