I'm learning HTML5 and CSS but having this error that the divs are presented behind other div. I am trying to separate diamonds with the boxes to show below and when clicked on the diamonds it will jump to that part of the page (which I am still working on, no need for help there).
Can someone help me please been on this for hours. I am trying to show the rectangle boxes below the diamonds, I know there is something wrong with the CSS part but cant find the error help will be appreciated thank you.
/*layout of body page*/
*{
margin:0;
padding:0;
background-color: #000;
font-family: poppins, sans-serif;
}
/*dimonds cover page top*/
.main-nav{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
margin:0;
padding: 0;
width:600px;
height:150px;
}
.main-nav li{
list-style: none;
position: absolute;
width: 200px;
height: 200px;
transform:rotate(45deg);
transition: 0.5s;
margin: -100px;
overflow: hidden;
opacity: 0.6;
border-color: rgb(236, 39, 236);
border: solid rgb(236, 39, 236)
}
.main-nav li:hover{
opacity: 1;
cursor: pointer;
}
/*about me button*/
.main-nav li.item1{
top: 0;
left: 0;
color: white;
font-size: 47px;
-webkit-text-stroke: 1px #6531a8;
text-shadow: 0px 2px 4px #8c31b6;
}
.main-nav li.item2{
bottom: 0;
left: 25%;
color: white;
font-size: 47px;
}
.main-nav li.item3{
top:0;
left: 50%;
color: white;
font-size: 47px;
}
.main-nav li.item4{
top: 100%;
left: 75%;
color: white;
font-size: 47px;
}
.main-nav li.item5{
top: 0%;
left: 100%;
color: white;
font-size: 47px;
}
.main-nav li.bg{
width: 100%;
height: 100%;
transform: scale(1.1);;
}
.title{
background-color: rgb(192, 183, 183);
top: 0;
width: 75px;
height: 0;
margin: 70px;
transform: rotate(-45deg);
justify-content: center;
display: flex;
text-align: center;
font-family: popping, sans-serif;
font-size: x-large;
font-weight: 700;
position: relative;
left: -40px;
}
.main-nav li.item1 .bg{
background-size:cover;
background-position: center;
}
.nav-title{
border-radius: 25%;
border: solid 2px rgb(236, 39, 236);
height: 71%;
width: 386px;
align-content: center;
color: white;
display: inline;
}
.nav-title:nth-child(n 2){
margin-left: -1px;
}
/*border lines for dimonds bottom page */
#container{
padding:5px;
width:100%;
height:500px;
}
.row{
min-height:50px;
margin-top:25px;
width:90%;
margin-left:auto;
margin-right:auto;
padding:2%;
}
.half-row{
display:inline-block;
width:50%;
margin:1%;
height:25%;
color:white;
border: 2px solid yellow;
border-radius: 25px;
}
.textting{
color:white;
height: auto;
width: auto;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page Jump</title>
</head>
<body>
<ul >
<button onclick=""> <!--jump to first section box-->
<!-- first is picked-->
<li >
<div >
<div >
First
</div>
</div>
</li>
</button>
<!-- second button is clicked-->
<button onclick=""> <!--jump to 2 section box-->
<li >
<div >
<div >
Second
</div>
</div>
</li>
</button>
<!--Third box info is clicked-->
<button onclick=""> <!--jump to first section box-->
<li >
<div >
<div >
Third
</div>
</div>
</li>
</button>
<!--fourth div is cliked-->
<button onclick=""> <!--jump to first section box-->
<li >
<div >
<div >
Fourth
</div>
</div>
</li>
</button>
<!--firth is cliked -->
<button onclick=""> <!--jump to first section box-->
<li >
<div >
<div >
Fifth
</div>
</div>
</li>
</button>
</ul>
<div id="container">
<div >
<div style="width:15%;">
<div >
<h1>
First Info
</h1>
</div>
</div>
<div >
<h3>
blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah
</h3>
</div>
</div>
<div >
<div style="width:15%;">
<div >
<h1>
Second Info
</h1>
</div>
</div>
<div >
<h3>
blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah
</h3>
</div>
</div>
<div >
<div style="width:15%;">
<div >
<h1>
Third Info
</h1>
</div>
</div>
<div >
<h3>
blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah
</h3>
</div>
</div>
<div >
<div style="width:15%;">
<div >
<h1>
Third Info
</h1>
</div>
</div>
<div >
<h3>
blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah
</h3>
</div>
</div>
<div >
<div style="width:15%;">
<div >
<h1>
Fourth Info
</h1>
</div>
</div>
<div >
<h3>
blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah
</h3>
</div>
</div>
<div >
<div style="width:15%;">
<div >
<h1>
Fifth Info
</h1>
</div>
</div>
<div >
<h3>
blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah
</h3>
</div>
</div>
</div>
</body>
<script>
</script>
</html>CodePudding user response：
Try to add padding-top to #container css i.e padding-top:350px;
/*layout of body page*/
*{
margin:0;
padding:0;
background-color: #000;
font-family: poppins, sans-serif;
}
/*dimonds cover page top*/
.main-nav{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
margin:0;
padding: 0;
width:600px;
height:150px;
}
.main-nav li{
list-style: none;
position: absolute;
width: 200px;
height: 200px;
transform:rotate(45deg);
transition: 0.5s;
margin: -100px;
overflow: hidden;
opacity: 0.6;
border-color: rgb(236, 39, 236);
border: solid rgb(236, 39, 236)
}
.main-nav li:hover{
opacity: 1;
cursor: pointer;
}
/*about me button*/
.main-nav li.item1{
top: 0;
left: 0;
color: white;
font-size: 47px;
-webkit-text-stroke: 1px #6531a8;
text-shadow: 0px 2px 4px #8c31b6;
}
.main-nav li.item2{
bottom: 0;
left: 25%;
color: white;
font-size: 47px;
}
.main-nav li.item3{
top:0;
left: 50%;
color: white;
font-size: 47px;
}
.main-nav li.item4{
top: 100%;
left: 75%;
color: white;
font-size: 47px;
}
.main-nav li.item5{
top: 0%;
left: 100%;
color: white;
font-size: 47px;
}
.main-nav li.bg{
width: 100%;
height: 100%;
transform: scale(1.1);;
}
.title{
background-color: rgb(192, 183, 183);
top: 0;
width: 75px;
height: 0;
margin: 70px;
transform: rotate(-45deg);
justify-content: center;
display: flex;
text-align: center;
font-family: popping, sans-serif;
font-size: x-large;
font-weight: 700;
position: relative;
left: -40px;
}
.main-nav li.item1 .bg{
background-size:cover;
background-position: center;
}
.nav-title{
border-radius: 25%;
border: solid 2px rgb(236, 39, 236);
height: 71%;
width: 386px;
align-content: center;
color: white;
display: inline;
}
.nav-title:nth-child(n 2){
margin-left: -1px;
}
/*border lines for dimonds bottom page */
#container{
padding:5px;
padding-top:350px; /*edit here*/
width:100%;
height:500px;
}
.row{
min-height:50px;
margin-top:25px;
width:90%;
margin-left:auto;
margin-right:auto;
padding:2%;
}
.half-row{
display:inline-block;
width:50%;
margin:1%;
height:25%;
color:white;
border: 2px solid yellow;
border-radius: 25px;
}
.textting{
color:white;
height: auto;
width: auto;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page Jump</title>
</head>
<body>
<ul >
<button onclick=""> <!--jump to first section box-->
<!-- first is picked-->
<li >
<div >
<div >
First
</div>
</div>
</li>
</button>
<!-- second button is clicked-->
<button onclick=""> <!--jump to 2 section box-->
<li >
<div >
<div >
Second
</div>
</div>
</li>
</button>
<!--Third box info is clicked-->
<button onclick=""> <!--jump to first section box-->
<li >
<div >
<div >
Third
</div>
</div>
</li>
</button>
<!--fourth div is cliked-->
<button onclick=""> <!--jump to first section box-->
<li >
<div >
<div >
Fourth
</div>
</div>
</li>
</button>
<!--firth is cliked -->
<button onclick=""> <!--jump to first section box-->
<li >
<div >
<div >
Fifth
</div>
</div>
</li>
</button>
</ul>
<div id="container">
<div >
<div style="width:15%;">
<div >
<h1>
First Info
</h1>
</div>
</div>
<div >
<h3>
blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah
</h3>
</div>
</div>
<div >
<div style="width:15%;">
<div >
<h1>
Second Info
</h1>
</div>
</div>
<div >
<h3>
blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah
</h3>
</div>
</div>
<div >
<div style="width:15%;">
<div >
<h1>
Third Info
</h1>
</div>
</div>
<div >
<h3>
blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah
</h3>
</div>
</div>
<div >
<div style="width:15%;">
<div >
<h1>
Third Info
</h1>
</div>
</div>
<div >
<h3>
blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah
</h3>
</div>
</div>
<div >
<div style="width:15%;">
<div >
<h1>
Fourth Info
</h1>
</div>
</div>
<div >
<h3>
blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah
</h3>
</div>
</div>
<div >
<div style="width:15%;">
<div >
<h1>
Fifth Info
</h1>
</div>
</div>
<div >
<h3>
blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah
</h3>
</div>
</div>
</div>
</body>
<script>
</script>
</html>CodePudding user response：
You are positioning your diamonds using position: absolute. This positions them to the body element unless you put them in a div and style that div using position: relative. The positioning of the li elements in that div will then be positioned relative to that div. So wrap the ul and li elements inside a div, set a class on that div to posiiton: relative then that will push the other markup below that div.
I also see that you're using transform:translate and pushing the diamonds up so add a margin-top to the container div to allow the diamonds to be seen. Example below.
* {
margin: 0;
padding: 0;
background-color: #000;
font-family: poppins, sans-serif;
}
.ul-container {
position: relative;
margin-top: 300px;
}
/*dimonds cover page top*/
.main-nav {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
padding: 0;
width: 600px;
height: 150px;
}
.main-nav li {
list-style: none;
position: absolute;
width: 200px;
height: 200px;
transform: rotate(45deg);
transition: 0.5s;
margin: -100px;
overflow: hidden;
opacity: 0.6;
border-color: rgb(236, 39, 236);
border: solid rgb(236, 39, 236)
}
.main-nav li:hover {
opacity: 1;
cursor: pointer;
}
/*about me button*/
.main-nav li.item1 {
top: 0;
left: 0;
color: white;
font-size: 47px;
-webkit-text-stroke: 1px #6531a8;
text-shadow: 0px 2px 4px #8c31b6;
}
.main-nav li.item2 {
bottom: 0;
left: 25%;
color: white;
font-size: 47px;
}
.main-nav li.item3 {
top: 0;
left: 50%;
color: white;
font-size: 47px;
}
.main-nav li.item4 {
top: 100%;
left: 75%;
color: white;
font-size: 47px;
}
.main-nav li.item5 {
top: 0%;
left: 100%;
color: white;
font-size: 47px;
}
.main-nav li.bg {
width: 100%;
height: 100%;
transform: scale(1.1);
;
}
.title {
background-color: rgb(192, 183, 183);
top: 0;
width: 75px;
height: 0;
margin: 70px;
transform: rotate(-45deg);
justify-content: center;
display: flex;
text-align: center;
font-family: popping, sans-serif;
font-size: x-large;
font-weight: 700;
position: relative;
left: -40px;
}
.main-nav li.item1 .bg {
background-size: cover;
background-position: center;
}
.nav-title {
border-radius: 25%;
border: solid 2px rgb(236, 39, 236);
height: 71%;
width: 386px;
align-content: center;
color: white;
display: inline;
}
.nav-title:nth-child(n 2) {
margin-left: -1px;
}
/*border lines for dimonds bottom page */
#container {
padding: 5px;
padding-top: 350px;
/*edit here*/
width: 100%;
height: 500px;
}
.row {
min-height: 50px;
margin-top: 25px;
width: 90%;
margin-left: auto;
margin-right: auto;
padding: 2%;
}
.half-row {
display: inline-block;
width: 50%;
margin: 1%;
height: 25%;
color: white;
border: 2px solid yellow;
border-radius: 25px;
}
.textting {
color: white;
height: auto;
width: auto;
}<div >
<ul >
<button onclick="">
<!--jump to first section box-->
<!-- first is picked-->
<li >
<div >
<div >
First
</div>
</div>
</li>
</button>
<!-- second button is clicked-->
<button onclick="">
<!--jump to 2 section box-->
<li >
<div >
<div >
Second
</div>
</div>
</li>
</button>
<!--Third box info is clicked-->
<button onclick="">
<!--jump to first section box-->
<li >
<div >
<div >
Third
</div>
</div>
</li>
</button>
<!--fourth div is cliked-->
<button onclick="">
<!--jump to first section box-->
<li >
<div >
<div >
Fourth
</div>
</div>
</li>
</button>
<!--fifth is cliked -->
<button onclick="">
<!--jump to first section box-->
<li >
<div >
<div >
Fifth
</div>
</div>
</li>
</button>
</ul>
</div>
<div id="container">
<div >
<div style="width:15%;">
<div >
<h1>
First Info
</h1>
</div>
</div>
<div >
<h3>
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</h3>
</div>
</div>
<div >
<div style="width:15%;">
<div >
<h1>
Second Info
</h1>
</div>
</div>
<div >
<h3>
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</h3>
</div>
</div>
<div >
<div style="width:15%;">
<div >
<h1>
Third Info
</h1>
</div>
</div>
<div >
<h3>
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</h3>
</div>
</div>
<div >
<div style="width:15%;">
<div >
<h1>
Third Info
</h1>
</div>
</div>
<div >
<h3>
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</h3>
</div>
</div>
<div >
<div style="width:15%;">
<div >
<h1>
Fourth Info
</h1>
</div>
</div>
<div >
<h3>
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</h3>
</div>
</div>
<div >
<div style="width:15%;">
<div >
<h1>
Fifth Info
</h1>
</div>
</div>
<div >
<h3>
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</h3>
</div>
</div>
</div>