Footer overlapping content/article
Clash Royale CLAN TAG#URR8PPP
Footer overlapping content/article
I have this issue in my HTML/CSS where the footer overlaps the article content.
Yes I have been searching the web and nothing seems to work, I hope you know what is wrong with it.
I made a codepen here:
CodePen LINK
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href='https://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
</head>
<body>
<header>
<h1>Welcome to me site</h1>
</header>
<nav>
<h2>Menu</h2>
<ul>
<li><a href="#">Katte</a></li>
<li><a href="#">Geolocation</a></li>
</ul>
</nav>
<section id="content">
<article>
<h2>Lorem Ipsum</h2>
<p class="paragraph">
If you xxx give up, you will achieve nothing. Practice won’t get you anywhere if you mindlessly xxx practice the same thing. Change only occurs when you work deliberately with purpose toward a goal. Sometimes it is appropriate to place various typographic elements on the outside of the xxx left margin of text to maintain a strong vertical axis. This practice is referred to as exdenting and is most often used with bullets and quotations. While having drinks with Tibor Kalman one night, he told me, “When you make something no one hates, no one xxx loves it.” Don’t xxx
</p>
<br>
<p>Kunne du lide Lorem Ipsum?</p>
<form action="First Name">
Navn: <br><br>
<input type="text" name="firstname" placeholder="Jesper">
<br><br>
<p>Hvor godt kunne du lide det på en skala fra 0 til 100?</p>
<input type="range" name="range">
<br>
<input type="submit" name="submit">
</form>
</article>
<article>
<h2>Katte video</h2>
<video width="400" controls>
<source src="Kitty.mp4" type="video/mp4">
</video>
</article>
<article>
<h2>One Fine Circle Son!</h2>
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
</article>
</section>
<footer>
<p><small> Jesper Andersen</small></p>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/2000px-HTML5_logo_and_wordmark.svg.png" width="70">
<p><small> Copyright 2015</small></p>
</footer>
</body>
</html>
position:fixed
position:relative
That did it thanks
– Jesper Andersen
Sep 7 '15 at 18:49
Try the
position:relative.– user1012181
Sep 7 '15 at 18:49
position:relative
Just remove the
position:fixed property.– Tushar Khatiwada
Sep 7 '15 at 18:50
position:fixed
1 Answer
1
The problem is due to position:fixed. Change it to position:relative.
position:fixed
position:relative
footer
clear: both;
font-size: 20px;
bottom:0;
width:100%;
text-align: center;
background-color: rgba(0, 0, 0, 0.7);
color: white;
font-family: 'Oxygen';
position: relative;
http://codepen.io/anon/pen/WQvRbo
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
That's because u made it as
position:fixed. Change it toposition:relative– user1012181
Sep 7 '15 at 18:48