vendredi 1 novembre 2019

HTML page grey scroll bars and not scrolling

The issue I am currently facing is that I can't get my HTML page to scroll.

I tried adding CSS properties for Overflow (scroll, auto, visible etc.), but I didn't manage to get my page to be scollable. At this point, I think that I am doing something wrong that is completely trivial and I am adding some text here to satisfy the word counter..

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <title>Liftsnetwork - Home </title>
    <link rel="stylesheet" type="text/css" href="css/default.css" />
</head>

<body>
<img class="logo" alt="Liftsnetwork Logo" src="assets/ln.png" />
<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">Discover</a>
  <a href="#contact">Gallery</a>
  <a href="#about">Search</a>
  <a href="#about">Help</a>
  <a href="#about">Add</a>
  <a href="#about">Account</a>
  <a href="#add">Discord</a>
  <a href="#about">Forum</a>
</div>
 <div class="maintext" id="mymaintext">
    <h1>Find Lifts around the Globe.</h1>

 </div>

<img class="mainimg" alt="Map screenshot" src="assets/mappic.png"/>

<h1 class="sidetext">Insert lorem ipsum text here that doesn't make the slightest bit of sense and is just here to act as a placeholder. Insert lorem ipsum text here that doesn't make the slightest bit of sense and is just here to act as a placeholder.Insert lorem ipsum text here that doesn't make the slightest bit of sense and is just here to act as a placeholder.Insert lorem ipsum text here that doesn't make the slightest bit of sense and is just here to act as a placeholder.</h1>    

<h1 class="line">__________________________________________________________________________</h1>    

</div>
 <div class="maintest" id="mymaintext">
    <h1>Insert lorem ipsum text here that doesn't make the slightest bit of sense and is just here to act as a placeholder.Insert lorem ipsum text here that doesn't make the slightest bit of sense and is just here to act as a placeholder.Insert lorem ipsum text here that doesn't make the slightest bit of sense and is just here to act as a placeholder.</h1>

 </div>


</body>
</html>

CSS:

html *
{
   font-family: Gill Sans MT!important;
        overflow: visible;

}

body {
 background-color: #3d3c3a;
 color: #333333;
    font-family: "Gill Sans";
    overflow-y: auto;

}

.logo {

float: left;
    position: fixed;
}

.topnav {
  overflow: hidden;
  background-color: #333;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;    
    margin-top: 15px; 
    margin-left: 300px;
    position: fixed;
}

.topnav a {
  float: left;
  display: block;
  color: #47c6e6;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #e0640b;
  color: white;
}

.topnav .icon {
  display: none;
}

.maintext h1 {
    color:azure;
    margin-top: 150px;
    position: fixed;
    font-size: 150px;
    font-family: "courier new"!important;
    font-weight: 100;

}

.mainimg {
    margin-top: 750px;
    margin-left: 750px;
    position: fixed;
}

.sidetext {
    color: azure;
    font-family: "Corbel Light"!important;
    margin-top: 550px;
    position: fixed;
    margin-left: 60px;
    font-weight: 50;
    margin-right: 1200px;
}

.line {
    color: darkorange;
    position: fixed;
    margin-left: 270px;
    margin-right: 100px;
    margin-top: 1000px;
}

.maintest {
    color:azure;
    margin-top: 1150px;
    position: fixed;
    font-size: 150px;
    font-family: "courier new"!important;
    font-weight: 100;

}

Either no scroll bar shows up or a completely grey one shows that I can't use.




Aucun commentaire:

Enregistrer un commentaire