Scroll isn’t working on my HTML/CSS website [closed]

Tjenare! 😀

Removing overflow: hidden on body enables scrolling again.

html, body
{
    height:100%;
}

body
{
    margin:0;
    background-color: #292929;
    /* overflow: hidden; */
}

nav
{
    position: absolute;
    top:50px;
    right: 25%;
    left: 0;
    width: 319px;
    display: table;
    margin: 0 auto;
    transform: translateY(-50%);
}

nav a
{
    position: relative;
    width: 33.333%;
    display: table-cell;
    text-align: center;
    color: #949494;
    text-decoration: none;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: bold;
    padding: 10px 20px;
    transition: 0.2s ease color;
}

nav a:before, nav a:after
{
    content: "";
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    transition: 0.2s ease transform;
}

nav a:before
{
    top: 0;
    left: 10px;
    width: 6px;
    height: 6px;
}

nav a:after
{
    top: 5px;
    left: 18px;
    width: 4px;
    height: 4px
}

nav a:nth-child(1):before
{
    background-color: yellow;
}

nav a:nth-child(1):after
{
    background-color: red;
}

nav a:nth-child(2):before
{
    background-color: #00e2ff;
}

nav a:nth-child(2):after
{
    background-color: #89ff00;
}

nav a:nth-child(3):before
{
    background-color: purple;
}

nav a:nth-child(3):after
{
    background-color: palevioletred;
}

nav a:nth-child(4):before
{
    background-color: rgb(23, 255, 93);
}

nav a:nth-child(4):after
{
    background-color:  purple;
}

nav a:nth-child(5):before
{
    background-color: rgb(27, 23, 255);
}

nav a:nth-child(5):after
{
    background-color: rgb(218, 205, 36);
}

nav a:nth-child(6):before
{
    background-color:rgb(40, 150, 126);
}

nav a:nth-child(6):after
{
    background-color: rgb(219, 58, 219);
}

#indicator
{
    position: absolute;
    left:110px;
    right:50%;
    bottom: 0;
    width: 30px;
    height: 3px;
    background-color: #fff;
    border-radius: 5px;
    transition: 0.2s ease left;
}

nav a:hover
{
    color: #fff;
}

nav a:hover:before, nav a:hover:after
{
    transform: scale(1);
}

nav a:nth-child(1):hover ~ #indicator
{
    background: linear-gradient(130deg, yellow, red);
}

nav a:nth-child(2):hover ~ #indicator
{
    left: 14%;
    background: linear-gradient(130deg, #00e2ff, #89ff00);
}

nav a:nth-child(3):hover ~ #indicator
{
    left: 33%;
    background: linear-gradient(130deg, purple, palevioletred);
}

nav a:nth-child(4):hover ~ #indicator
{
    left: 51%;
    background: linear-gradient(130deg, rgb(23, 255, 93), rgb(170, 20, 70));
}

nav a:nth-child(5):hover ~ #indicator
{
    left: 67%;
    background: linear-gradient(130deg, rgb(27, 23, 255), rgb(218, 205, 36));
}

nav a:nth-child(6):hover ~ #indicator
{
    left: 86%;
    background: linear-gradient(130deg, rgb(40, 150, 126), rgb(219, 58, 219));
}

 
/* Furlundskolans logga lÀngst upp i head */
.furulundlogga {
  height:50px;
  float:relative;
  margin-top:10px;
  margin-left:15px; 
}
 
/* program menyn */
 
.byggbanner {
  display:block;
  margin-left: auto;
  margin-right: auto;
  padding-top:25px;
  width:1220px;
  height:200px;
  text-align:center;
}

.bygger {
  display:block;
  margin-left: auto;
  margin-right: 100px;
  margin-top:20px;
  width:400px;
  height:auto;
  text-align:right;
}

.dab {
  display:block;
  margin-top:20px;
  width:400px;
  height:auto;
  text-align:left;

}
.stycket {
  float: left;
  width: 33.33%;
  padding: 5px;
}

/* https://www.geeksforgeeks.org/how-to-vertically-align-text-next-to-an-image-using-css/ 

How to align and float images on your website
*/
html>
  <title> Furulundskolan 2020</title>
 
  <head> 
    <meta charset="utf-8">
    <link rel="stylesheet" href="stylebygg.css">
<img src="https://i.ibb.co/HP0QW41/furulundskolan.png" class="furulundlogga">
</head>
<body> 
  
  <link href="https://fonts.googleapis.com/css?family=Arvo&display=swap" rel="stylesheet">
 
<nav>
  <a href="index.html">HEM</a>
  <a href="program.html">VÅRA PROGRAM</a>
  <a href="#">ELEV PÅ FURULUND</a>
  <a href="#">STUDERA HOS OSS</a>
  <a href="#">OM FURULUND</a>
  <a href="#">KONTAKTA OSS</a>
  <div id="indicator"></div>
</nav>
  
  <img class="byggbanner" src="https://www.storel.se/medias/sys_Storel/root/hb2/hc6/9622955393054/rexelBuildingAutomationBanner.jpg">
 
  <div class="stycket">
    <p class="dab">"Bygg- och anlÀggningsprogrammet vÀnder sig till dig som tÀnker dig ett framtida arbete inom Bygg- och anlÀggningsbranschen. HÀr fÄr du prova pÄ flera olika hantverk och i Äk 2 specialisera dig i ditt inriktningsval. Det Àr ett plus om du Àr hÀndig, har sinne för fÀrg och form, samt kan arbeta sjÀlvstÀndigt. Du bör inte vara rÀdd för höjder eller obekvÀma arbetsförhÄllanden dÄ detta ingÄr i utbildningen samt i ditt framtida yrkesval" </p> 
    <img class="bygger" src="https://lh3.googleusercontent.com/BX5YGoBBAbL4yGfrzKIRXz-11FBy0azTP3facU9vPQDwKffc-EIb5ibK8UY9jtoUIDmRL2VKWBQzpoLaWtdHyApKonxGz1Y-X9YZCsYPuIVf88vm8oF2pdVlZI-ACWEGJn8ygWia8Rr70zFnHL3m9A7-UB0FKr1nqYC4KOwnrxRB_Q1PrHj3L8dXHDoQR36BD_vmX7G2_J1cBM4StcYqkUEtmmX02uMtUcpsXIC1rUfs061HfDwBxRLHf0kDxkvtTsYcacnTCH7Kl6tUhPyuO_FM-8ypQvrCy8wp2X0-0S4TryyM0x01nvgS4ighnczeD6R7tqO4rQvkfNXQ_LBxUq2GFSGaqFdyR2gqLKqpiDy--6gNspeuByr1iv4wdSDqSXWwN_OcssQjaP_BqGXLdbOsZg8lZyo4y_g3dz8PhxFFlmhA_yVGYb-wX9rgvkMbr8P3AFRE9M8XIB7ZqMI0SvluMDyDg8YIh8Wk6_Dt9KmdZE7Jd1RCPyU4mRNStLbsGLY7jdLcIbf5PmGDe_x22VLlSin8JfISBOikpK0GscWhD9x-3turmsj9oqS8CYo4NfhfAqUh054ddvHKoCIgluTEB9EyTWnTxbdYOLFCnSWkPa-_6gyIBW6lZd24Gzlg-d33S7dgQ_NA4hhy_33WtCY_YuOXvjxbC7IRtCxQeb1d92NxFXnTJX1DTXzq0A=w614-h454-no?authuser=0">
  </div>
 
</body>
 
 
</html>

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top