I'm still a beginner when it comes to HTML and CSS but I've decided to try my hand at coding an information sheet for my friend's discord server that will list the staff list on the first page and the rules and info on the second page.
At the top, I have two buttons. Everything works perfectly when the page loads up and even continues to work as I switch to the second page. The problem arises when I try to return to the staff page. Now, I'm not exactly sure what the problem is but I was once told that sections are usually messed up when a <div> tag is missing. I've looked and I'm not exactly sure where I've gone wrong with this though.
https://codepen.io/111dev111/full/LYjqYQR
This is the code project that I am referring to. Any help would be appreciated!
@import url(@import url('https://fonts.googleapis.com/css2?family=Petemoss&family=Shadows Into Light&family=Titillium Web:wght@600&display=swap');
body {
background-image: url("https://i.pinimg.com/originals/e5/9a/ff/e59afffab97c822d319f0a92a4b1b2f1.jpg");
background-size: cover;
background-repeat: no-repeat;
}
.container{
display:flex;
flex-wrap:wrap;
text-align: center;
justify-content: center;
width: 100%;
align-items: center;
/*border-size: 10px;
border-style: solid;
border-color: red;*/
}
.box{
width:100%;
max-width:40%;
margin-top:20px;
margin-bottom:30px;
margin-left:10px;
margin-right:10px;
filter: drop-shadow(8px 8px 10px #211933);
padding:15px;
}
.info {
width:100%;
height:100px;
max-width:40%;
background-color:#ffffff;
margin-top:10px;
margin-bottom:10px;
margin-left:10px;
margin-right:10px;
filter: drop-shadow(8px 8px 10px #211933);
padding:15px;
}
.staff {
width:20%;
max-width:40%;
box-shadow: 8px 10px 23px rgba(0, 0, 0, 0.6) inset;
-webkit-box-shadow: 8px 10px 23px rgba(0, 0, 0, 0.6) inset;
-moz-box-shadow: 8px 10px 23px rgba(0, 0, 0, 0.6) inset;
background:#ffffff;
height: 100%;
padding:10px;
padding-top:30px;
padding-bottom:30px;
margin-left:10px;
margin-right:10px;
}
.staff img {border-radius: 50%;}
#Photo {
border: 2px solid red;
}
h1{ color:#211933;
font-family: 'Petemoss', cursive;
font-size:50px;}
p {color: #3f3359;
font-size: 13px;
font-family: 'Titillium Web', sans-serif;}
.buttonmenu {display: inline-block;
width: 20px;
height: 20px;
margin: 0 3px;
border-radius: 50%;
font-size: 1px;
transition: 0.3s;}
.buttonmenu:hover {border-radius: 25%; box-shadow: 0 0 10px #fff, 0 0 10px #fff, 1px 0 10px #fff, 1px 0 10px #fff, -1px 0 10px #fff, -1px 0 10px #fff;}
.credit {
color: #FCFFFE;
font-family: 'Shadows Into Light', cursive;
margin:15px;
}
/*PLEASE DO NOT REMOVE THE CREDIT, I'VE WORKED HARD ON THIS AND WOULD APPRECIATE IT IF MY NAME REMAINS AT THE END AS A LITTLE SIGNATURE.*/
/*IF YOU HAVE ANY QUESTIONS ABOUT THE CODE, FEEL FREE TO CONTACT ME AT FLINTSTONE#4422*/<body>
<center>
<div class="container">
<div class="box">
<div id="title">
<img src="https://see.fontimg.com/api/renderfont4/mLoV2/eyJyIjoiZnMiLCJoIjo2NSwidyI6MTAwMCwiZnMiOjY1LCJmZ2MiOiIjRkZGRkZGIiwiYmdjIjoiIzM1M0Q0QiIsInQiOjF9/TWVldCBUaGUgU3RhZmY/remover.png">
</div>
<div style="height: 30px;">
<a href="#frontpage" class="buttonmenu" style="background: #2b223f;"> .</a>
<a href="#about" class="buttonmenu" style="background: #352a4c;"> .</a>
</div>
</div>
</div>
<div style="height: 550px; margin-top: 10px; overflow: hidden; ">
<a name="home"></a>
<div class="frontpage" style="overflow-y: auto; overflow-x: hidden;">
<div class="container">
<a name="frontpage"></a>
<div class="staff">
<div id="#Name">
<h1>Staff Name</h1>
</div>
<div id="#Photo">
<img src="http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg" style="width:50%; height: 50%;">
</div>
<div id="#Blurb">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Molestie ac feugiat sed lectus vestibulum mattis. Nunc congue nisi vitae suscipit tellus mauris a. Porta non pulvinar neque laoreet suspendisse interdum consectetur libero id.</p>
</div>
</div>
<div class="staff">
<div id="#Name">
<h1>Staff Name</h1>
</div>
<div id="#Photo">
<img src="http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg" style="width:50%; height: 50%;">
</div>
<div id="#Blurb">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Molestie ac feugiat sed lectus vestibulum mattis. Nunc congue nisi vitae suscipit tellus mauris a. Porta non pulvinar neque laoreet suspendisse interdum consectetur libero id.</p>
</div>
</div>
<div class="staff">
<div id="#Name">
<h1>Staff Name</h1>
</div>
<div id="#Photo">
<img src="http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg" style="width:50%; height: 50%;">
</div>
<div id="#Blurb">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Molestie ac feugiat sed lectus vestibulum mattis. Nunc congue nisi vitae suscipit tellus mauris a. Porta non pulvinar neque laoreet suspendisse interdum consectetur libero id.</p>
</div>
</div>
<div class="staff">
<div id="#Name">
<h1>Staff Name</h1>
</div>
<div id="#Photo">
<img src="http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg" style="width:50%; height: 50%;">
</div>
<div id="#Blurb">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Molestie ac feugiat sed lectus vestibulum mattis. Nunc congue nisi vitae suscipit tellus mauris a. Porta non pulvinar neque laoreet suspendisse interdum consectetur libero id.</p>
</div>
</div>
</div>
<div style="padding: 20px; height: 510px; overflow-y: auto; overflow-x: hidden; display: flex; align-items: center; justify-content: center;">
<a name="about"></a>
</div>
</div>
<!--Content for page 2 goes here-->
<div class="container">
<div class="info">
</div>
<div class="info">
</div>
<div class="info">
</div>
<div class="info">
</div>
</div>
<div class="credit">
Coded by Flintstone#4422
</div>
</div>
</center>
</body>CodePudding user response：
Your issue is that <a href="#frontpage" style="background: #2b223f;"> .</a> is looking for an "ID" frontpage, but your frontpage div is a class
<div class="frontpage" style="overflow-y: auto; overflow-x: hidden;">
change that to
<div id="frontpage" style="overflow-y: auto; overflow-x: hidden;">
and you should be good,
p.s. id's have to be unique, and you have a number of shared id's...
CodePudding user response：
Use id instead of class on your <div >