Reputation: 51
Recently I have been making a footer for a website that me and my friends are making and the text isn't lined up. I wanted the copyright to be at the bottom and the links and contact information to be all next to each other, sort of like the footer of stackoverflow. The footer has not been working the way that I thought that it would be. I have tried many ways to change the where the text is but it doesn't seem to work. It should be a simple fix so if you have the time please take a look at the code. Here is the code:
<!DOCTYPE html>
<html>
<footer>
<div class="footer">
<div class="contact">
<h3> Contact Us: </h3>
<p>[email protected]</p>
</div>
<div class="popular">
<h3> Popular Games: </h3>
<p><a href="#">Happy Wheels</a></p>
<p><a href="#">Flappy Bird</a></p>
<p><a href="#">Impossible Quiz</a></p>
</div>
<div class="footerNav">
<h3>Pages</h3>
<p><a href="http://www.freeninjagaming.site50.net">Home</a></p>
<p><a href="#">Games</a></p>
<p><a href="#">About Us</a></p>
</div><br>
<div class="copyright">
<p> Copyright 2014 Dylan Maniatakes, Jacob Snarr and Mitchell Conrad </p>
</div>
</div>
<style>
footer{
clear: both;
font-family: Arial;
text-align: center;
border-top: 1px solid black;
}
.contact {
float: left;
}
a {
text-decoration: none;
color: #c23b3b
}
a:hover{
color: darkred;
}
.footerNav {
float: right;
}
</style>
</footer>
</html>
Upvotes: 1
Views: 538
Reputation: 23
<!DOCTYPE html>
<html>
<footer>
<div class="footer">
<div class="contact">
<h3> Contact Us: </h3>
<p>[email protected]</p>
</div>
<div class="popular">
<h3> Popular Games: </h3>
<p><a href="#">Happy Wheels</a></p>
<p><a href="#">Flappy Bird</a></p>
<p><a href="#">Impossible Quiz</a></p>
</div>
<div class="footerNav">
<h3>Pages</h3>
<p><a href="http://www.freeninjagaming.site50.net">Home</a></p>
<p><a href="#">Games</a></p>
<p><a href="#">About Us</a></p>
</div><br>
<div class="copyright">
<p> Copyright 2014 Dylan Maniatakes, Jacob Snarr and Mitchell Conrad </p>
</div>
</div>
<style>
footer{
clear: both;
font-family: Arial;
text-align: center;
border-top: 1px solid black;
}
.contact, .popular, .footerNav {
float: left;
}
.copyright {
clear:both;
float:left;
}
a {
text-decoration: none;
color: #c23b3b
}
a:hover{
color: darkred;
}
.footer div {
margin-left:10px;
margin-right:10px;
}
</style>
</footer>
</html>
Upvotes: 0
Reputation: 20425
I removed float
and used display:inline-block
to the elements you wanted side-by-side. I then added display:block
to the copyright to make it its own line. I also added an H3 tag for Navigation so that they would all line up nice with vertical-align: top
.
OUTPUT
HTML
<footer>
<div class="footer">
<div class="contact">
<h3> Contact Us: </h3>
<p>[email protected]</p>
</div>
<div class="popular">
<h3> Popular Games: </h3>
<p><a href="#">Happy Wheels</a>
</p>
<p><a href="#">Flappy Bird</a>
</p>
<p><a href="#">Impossible Quiz</a>
</p>
</div>
<div class="footerNav">
<h3> Navigation: </h3>
<p><a href="http://www.freeninjagaming.site50.net">Home</a>
</p>
<p><a href="#">Games</a>
</p>
<p><a href="#">About Us</a>
</p>
</div>
<div class="copyright">
<p>Copyright 2014 Dylan Maniatakes, Jacob Snarr and Mitchell Conrad</p>
</div>
</div>
</footer>
CSS
footer {
clear: both;
font-family: Arial;
text-align: center;
border-top: 1px solid black;
}
footer div {
display: inline-block;
vertical-align: top;
margin-right: 20px;
}
footer div:last-child {
margin-right: 0;
}
footer .copyright {
display: block;
}
.contact {
}
a {
text-decoration: none;
color: #c23b3b
}
a:hover {
color: darkred;
}
Upvotes: 1
Reputation: 1095
You have some questionable styling choices, but that's okay! We're all here to learn. I have a JSfiddle that you might use as a starting point. I basically gave a style rule to give all divs inside of footer
a property of display: inline-block
, which will put them all in a line if there's room to accommodate them.
Hope this helps!
Upvotes: 0