NorseMan
Member
Here is my HTML and CSS.
I can't find why the div class="top" dosent get STICKY. Can some of you find out of it?
I have tried every value for the position property. I have tried and tried for hours... Nothing!!! :-x :help: None of them work on "top". HTML and CSS below. Can you find out of it?
HTML
CSS
I can't find why the div class="top" dosent get STICKY. Can some of you find out of it?
I have tried every value for the position property. I have tried and tried for hours... Nothing!!! :-x :help: None of them work on "top". HTML and CSS below. Can you find out of it?
HTML
Code:
<!doctype html lang="no" trnslate="yes">
<html>
<head><meta name="viewport" content="width=device-width,initial-scale=1">
<link rel='stylesheet' href='https://www.w3schools.com/w3css/4/w3.css'>
<link href="css/main.css" rel="stylesheet" type="text/css">
<link rel="icon" href="images/favicon48x48.png">
<meta charset="utf-8">
<title></title>
</head>
<body class="body">
<div class="top"><div class="symbol"><div class="logo"></div></div></div>
<div class="bar"></div>
<div class="menu_col"></div>
<div class="main"></div>
</body>
</html>CSS
Code:
div.logo {
background-image: url("../image/logo_bg_transp.png");
width: 382px;
height: 84px;
margin-top: 48px;
margin-left: 173px;
position: static;
}
div.symbol {
background-image: url("../image/symbol.png");
width: 145px;
height: 145px;
margin-left: 0px;
margin-top: 0px;
position: fixed;
}
div.top {
background-color: #000000;
margin: auto;
width: 100%;
height: 142px;
margin-top: 0px;
position: sticky;
}
div.menu_col {
background-color: #000000;
margin-left: 0px;
margin-top: 0px;
width: 197px;
height: 100%;
position: fixed;
}
div.bar {
background-color: #222222;
border-radius: 0px;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
margin: auto;
margin-top: 0px;
width: 100%;
height: 37.5px;
padding: 0px;
position: fixed;
}
div.main {
width: 70%;
height: 800px;
padding: 15px;
margin-left: 220px;
margin-top: 60px;
border: medium;
border-radius: 5px;
box-shadow: rgba(51, 51, 51, 0.4) 0px 2px 8px 0px;
position: initial;
}
div.menu {
display: flex;
flex-direction: row;
border: solid thin;
border-color: #ffffff;
margin-top: 35px;
margin-left: 30px;
width: 200px;
height: 400px;
position: fixed;
top: 75px;
}
