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