I've exhausted all resources searching for a solution to my issue, but nothing seems to quite fit. The floats on my page are extending beyond the boundaries, and when I load in the footer, it stubbornly sits at the bottom of the initial viewport before proper scrolling. Help!
UPDATE: I have removed the
position: fixed
, and experimented with alternative approaches. Every attempt still results in the footer stubbornly clinging to the bottom of the window, allowing me to scroll right past it effortlessly. Are there any other suggestions or code tweaks worth trying out?
I am also curious about avoiding the use of negative margins, as that's been my primary structuring method. How can I achieve the same effect using different techniques without discarding what I already have? Thank you
html:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<link href = "../Design/Designwork.css" type="text/css" rel="Stylesheet">
<title>Interactive Site</title>
</head>
<body>
<header>
<div id="navbar">
<ul>
<li><a href="#">Forum</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">More</a></li>
</ul>
</div>
<div id="textlogo">
<h2><a type="logo" href="#">Gamers Forum</a></h2>
</div>
</header>
<div class="square">Hi, I'm your console</div>
<div class="square2"></div>
<div class="view1"></div>
</div>
<footer>
<div id="footer">
</footer>
</div>
</body>
</html>
css:
header {
background-color: hsl(0, 67%, 37%);
padding: 10px 40px;
width: 90%;
margin: auto;
background-position: fixed;
}
#navbar {
display: inline;
font-family: webfont, sans-serif;
word-spacing: 45px;
}
li {
display: inline-block;}
a {
color: white;
text-decoration: none;
font-size: 40px;
letter-spacing: 2px;
color: white;
font-weight: 200px;
}
#navbar, li, a {
text-indent: 60px;
text-align: right;}
h2 {
font-family: futurblock, sans-serif !important;
font-size: 30px !important;
letter-spacing: 0em !important;
margin-top: -65px;
color: white;
font-weight: 250px;
}
body {
background-color: #336666;
margin: 0 auto;}
a #logo {
color: black !important;}
a:hover {
color: black;
font-style: italic;}
a:active {
color: yellow;
font-style: none;}
.center {
margin: 0 auto;}
.square {
width: 65%;
background-color: #993333;
margin: 0 auto;
position: center;
margin-top: 75px;
margin-right: 250px;
padding-bottom: 45%;
box-shadow: 0 0 15px #000;}
.square2 {
width: 40%;
padding-bottom: 40%;
background-color: #333;
position: center;
margin-top: -820px;
margin-left: 650px;
box-shadow: 0 0 10px #000;
}
.square {
font-family: ivyjournal, sans-serif;
font-size: 50px;
font-weight: 5em;
text-indent: 350px;
vertical-align: text-bottom;
color: #333;
text-shadow: 1px 1px #000;
}
.view1 {
width: 450px;
padding-bottom: 10%;
background-color: #fff;
position: center;
margin: 0 auto;
margin-top: -600px;
margin-right: 650px;
height: 200px;
box-shadow: 0 0 5px #000;
}
#footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
background-color: #333;
clear: both;
}
My apologies for the lack of organization in the code. Still learning the ropes!