I already figured out how to keep the footer at the bottom of the other pages of the website I am trying to develop. But I can't figure out how to do it on my page with a photo gallery. The footer stays in the middle of the page. :(
Here is my HTML code for that page:
html {
margin: 0;
padding: 0;
height: 100%;
}
body {
color: #FF6347;
font-family: 'Ceviche One', cursive;
font-size: 2em;
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
margin: 0;
padding: 0;
min-height: 100%;
position:relative;
}
#footer {
background-color: #E9967A;
color: black;
margin: 0;
padding: 0 30px;
height: 50px;
width: 100%;
position: absolute;
bottom:0;
}
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
height: auto;
width: 45%;
margin: 2.5%;
background-color: #FFEBCD;
color: #FF6347;
}
<body>
<div id="wrapper">
<p class="sectionheader">Beautiful Places in Tyria</p>
<ul id="gallery">
<li><p class="captionheader">Garden of Dawn</p>
<a href="img/treehouse Garden of Dawn.jpg">
<img src="img/treehouse Garden of Dawn.jpg" alt="">
</a>
</li>
<li><p class="captionheader">The Planetarium</p>
<a href="img/treehouse The Planetarium.jpg">
<img src="img/treehouse The Planetarium.jpg" alt="">
</a>
</li>
<li><p class="captionheader">Wizard's Fief</p>
<a href="img/treehouse Wizard's Fief.jpg">
<img src="img/treehouse Wizard's Fief.jpg" alt="">
</a></li>
<li><p class="captionheader">Black Citadel Statues</p>
<a href="img/treehouse Black Citadel Statues.jpg">
<img src="img/treehouse Black Citadel Statues.jpg" alt="">
</a></li>
<li><p class="captionheader">Shrine of the Six</p>
<a href="img/treehouse Shrine of the Six.jpg">
<img src="img/treehouse Shrine of the Six.jpg" alt="">
</a></li>
</ul>
<div id="footer">
<a href="http://facebook.com/rejisama">
<img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon">
</a>
<a href="http://twitter.com/nogoodreji">
<img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon">
</a>
<p>© 2016 All rights reserved.</p>
</div>
</div>
</body>
html {
margin: 0;
padding: 0;
height: 100%;
}
body {
color: #FF6347;
font-family: 'Ceviche One', cursive;
font-size: 2em;
margin: 0;
padding: 0;
}
.content{
width:100%;
display:block;
}
#wrapper {
margin: 0;
padding: 0;
width:100%;
display: block;
}
.content{
display: block;
}
#footer {
background-color: #E9967A;
color: black;
margin: 0;
padding: 0 30px;
height: 50px;
width: 100%;
display:block;
}
#gallery {
margin: 0;
padding: 0;
list-style: none;
width:100%;
}
#gallery li {
display: inline-block;
height: auto;
width: 40%;
margin: 2.5%;
background-color: #FFEBCD;
color: #FF6347;
}
<body>
<div id="wrapper">
<div class="content">
<p class="sectionheader">Beautiful Places in Tyria</p>
<ul id="gallery">
<li><p class="captionheader">Garden of Dawn</p>
<a href="img/treehouse Garden of Dawn.jpg">
<img src="img/treehouse Garden of Dawn.jpg" alt="">
</a>
</li>
<li><p class="captionheader">The Planetarium</p>
<a href="img/treehouse The Planetarium.jpg">
<img src="img/treehouse The Planetarium.jpg" alt="">
</a>
</li>
<li><p class="captionheader">Wizard's Fief</p>
<a href="img/treehouse Wizard's Fief.jpg">
<img src="img/treehouse Wizard's Fief.jpg" alt="">
</a></li>
<li><p class="captionheader">Black Citadel Statues</p>
<a href="img/treehouse Black Citadel Statues.jpg">
<img src="img/treehouse Black Citadel Statues.jpg" alt="">
</a></li>
<li><p class="captionheader">Shrine of the Six</p>
<a href="img/treehouse Shrine of the Six.jpg">
<img src="img/treehouse Shrine of the Six.jpg" alt="">
</a></li>
</ul>
</div>
</div>
<div id="footer">
<a href="http://facebook.com/rejisama">
<img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon">
</a>
<a href="http://twitter.com/nogoodreji">
<img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon">
</a>
<p>© 2016 All rights reserved.</p>
</div>
</body>
I found that if you make the ul#gallery have a property of display:inline-block; it will give the gallery a physical height (because at the moment my browser says the height is zero) and push the footer to the bottom.
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
For some unknown reason I tried to make a gallery using Grid but the footer doesn't show up on this page, I tried on other pages footer works just to find where I'm mistaken?
my HTML and CSS codes:
*{
margin: 0;
align-items: center;
padding: 0 ;
margin-left: auto;
margin-right: auto;
}
/*/****************HEADER/****************/
header img.ab {
width: 35%;
display: block;
text-align: center;
margin-bottom: 25px;
}
header ul {
list-style-type: none;
overflow: hidden;
background-color: #FFA07A;
width: 100%;
text-align: center;
}
header ul li {
display: inline-block;
float: center;
}
header ul li a {
display: block;
color: white;
text-align: center;
padding: 10px 20px;
text-decoration: none;
}
li a:hover {
background-color: #1F1300;
}
.photographehead{
text-align: center;
padding-bottom: 100px;
}
hr {
height: 12px;
border: 0;
box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
}
.grid-container {
display: grid;
grid-template-columns: 400px 400px 400px ;
grid-template-rows: 200px 200px 200px 200px ;
grid-gap: 2px;
justify-content: center;
z-index: -999;
}
div img.sadlife{
float: left;
width: 400px;
height: 200px;
object-fit: cover;
padding: 10px;
border-radius: 25px;
}
.grid-container > div {
text-align: center;
padding: 10px 0;
padding-bottom: 200px;
font-size: 30px;
}
.lightbox {
display: none;
background: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.lightbox:target {
display: block;
}
.lightbox span {
display: block;
width: 100%;
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
footer.graphfooter{
clear: both;
position: relative;
height: 300px;
margin-top: -10px;
background-color:#A2B29F ;
text-align: center;
line-height: 25px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Salah Eddine Laouina</title>
<link rel="stylesheet" type="text/css" href="stylephotographe.css">
</head>
<body>
<header>
<img class="ab"src="logo.png">
<nav>
<ul>
<li> ACCUEIL</li>
<li> OEUVRES</li>
<li> MAKING OF</li>
<li> PRESS AND MEDIA</li>
<li> PHOTOGRAPHIE</li>
<li> CONTACT</li>
</ul>
</nav>
</header>
<div class="photographehead">
<h2 style="margin-top: 10px;">BORN TO SHOOT THE WORLD AROUND ME</h2>
<h6>Artist photographe Marocain</h6>
<br>
<hr>
<p>"La photographie est un instant qui se reflechit pas, suspendue à une fraction de seconds qui laisse à réfléchir."</p>
<address class="author">-Rémy Donnadieu</address>
<br>
<h3> SALAH EDDINE LAOUINA ARTISTE PHOTOFRAPHE MAROCAIN </h3>
</div>
<div class="grid-container">
<div><a href="#p1">
<img class="sadlife" src="photographie/photo1.jpg">
</a>
<a href="#" class="lightbox" id="p1">
<span style="background-image: url('photographie/photo1.jpg')"></span>
</div>
<div><a href="#p2">
<img class="sadlife" src="photographie/photo2.jpg">
</a>
<a href="#" class="lightbox" id="p2">
<span style="background-image: url('photographie/photo2.jpg')"></span>
</div>
<div><a href="#p3">
<img class="sadlife" src="photographie/photo3.jpg">
</a>
<a href="#" class="lightbox" id="p3">
<span style="background-image: url('photographie/photo3.jpg')"></span>
</div>
<div><a href="#p4">
<img class="sadlife" src="photographie/photo4.jpg">
</a>
<a href="#" class="lightbox" id="p4">
<span style="background-image: url('photographie/photo4.jpg')"></span>
</div>
<div><a href="#p5">
<img class="sadlife" src="photographie/photo5.jpg">
</a>
<a href="#" class="lightbox" id="p5">
<span style="background-image: url('photographie/photo5.jpg')"></span>
</div>
<div><a href="#p6">
<img class="sadlife" src="photographie/photo6.jpg">
</a>
<a href="#" class="lightbox" id="p6">
<span style="background-image: url('photographie/photo6.jpg')"></span>
</div>
<div><a href="#p7">
<img class="sadlife" src="photographie/photo7.jpg">
</a>
<a href="#" class="lightbox" id="p7">
<span style="background-image: url('photographie/photo7.jpg')"></span>
</div>
<div><a href="#p8">
<img class="sadlife" src="photographie/photo8.jpg">
</a>
<a href="#" class="lightbox" id="p8">
<span style="background-image: url('photographie/photo8.jpg')"></span>
</div>
<div><a href="#p9">
<img class="sadlife" src="photographie/photo9.jpg">
</a>
<a href="#" class="lightbox" id="p9">
<span style="background-image: url('photographie/photo9.jpg')"></span>
</div>
<div><a href="#p10">
<img class="sadlife" src="photographie/photo10.jpg">
</a>
<a href="#" class="lightbox" id="p10">
<span style="background-image: url('photographie/photo10.jpg')"></span>
</div>
</div>
<footer class="graphfooter" >
<figure>
<img src="biographie/salaheddinelaouina-1.png" alt="S.LAOUINA" style="width:15%">
<figcaption><span>S.LAOUINA</span></figcaption>
<p>SALAH EDDINE LAOUINA ARTISTE PEINTRE ET PHOTOGRAPHE MAROCAIN</p>
<p>Copyright 2020 © LAOUINA</p>
</div>
</figure>
</footer>
</body>
</html>
The problem is in some of your anchors ("<a>") in your HTML.
Some of them are not closed, like , for example:
<div>
<a href="#p7">
<img class="sadlife" src="photographie/photo7.jpg">
</a>
<a href="#" class="lightbox" id="p7">
<span style="background-image: url('photographie/photo7.jpg')"></span>
</div>
Look that the second anchor (id="p7") was left open (without close tag ). Leave tags unclosed can mess with all your document structure.
That problem was repeated in some tags of your HTML. Use a good code editor like VSCode to avoid that kind of error.
The link below is of a codepen with your HTML fixed. You can use a file compare tool like winmarge to see what I've changed.
https://codepen.io/niconeves/pen/ExXdRBG
I would like to align the image links to the center of the page. This is what I have tried so far:
HTML:
<section id="Contact">
<h1 class="other-section">Contact</h1>
<div class="contact-links">
<a id="profile-link" href="https://facebook.com/" target="_blank">
<img src="https://image.flaticon.com/icons/svg/21/21155.svg" />
</a>
<a id="profile-link" href="https://github.com/jadenadams329" target="_blank">
<img src="https://image.flaticon.com/icons/svg/25/25231.svg" />
</a>
<a id="profile-link" href="https://instagram.com" target="_blank">
<img src="https://image.flaticon.com/icons/svg/87/87390.svg" />
</a>
</div>
</section>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
CSS:
#Contact {
margin:0 auto;
padding:3em 0 0 0;
min-height:100vh;
background-color: var(--contact-bg);
}
.other-section{
font-size: 30pt;
text-align:center;
color: #EDF5E1;
margin-bottom: 10px;
}
.contact-links{
text-align: center;
}
#profile-link img{
width: 50px;
}
I cannot for the life of me get them to stay in the center of the page evenly spaced under Contact.
Actually you can achieve that using inline-block.
:root{--contact-bg: white}
#Contact {
margin:0 auto;
padding:3em 0 0 0;
min-height:100vh;
background-color: var(--contact-bg);
}
.other-section{
font-size: 30pt;
text-align:center;
color: #EDF5E1;
margin-bottom: 10px;
}
.contact-links{
text-align: center;
}
.profile-link{
display: inline-block;/*just add this*/
}
.profile-link img{
width: 50px;
}
<section id="Contact">
<h1 class="other-section">Contact</h1>
<div class="contact-links">
<a class="profile-link" href="https://facebook.com/" target="_blank">
<img src="https://image.flaticon.com/icons/svg/21/21155.svg" />
</a>
<a class="profile-link" href="https://github.com/jadenadams329" target="_blank">
<img src="https://image.flaticon.com/icons/svg/25/25231.svg" />
</a>
<a class="profile-link" href="https://instagram.com" target="_blank">
<img src="https://image.flaticon.com/icons/svg/87/87390.svg" />
</a>
</div>
</section>
I created a small website using two flex containers and the result is good. Is it possible to achieve the same result by using only one flexbox container on the container class?
I have been trying to do it but it does not work and I don't want to have two flexbox containers at the same time.
/* Framework.css */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
body {
font-family: 'Electrolize', sans-serif;
}
.container {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
.gallery {
display: flex;
}
.gallery li {
width: 200px;
background-color: #1c1c1c;
color: #bdc3c7;
margin: 0% 0.5% 0% 0.5%;
}
.gallery img {
width: 100%;
height: auto;
}
.gallery p {
margin: 0;
padding: 6%;
font-size: 1.25em;
background-color: #483636;
color: #bdc3c7;
text-align: center;
}
.galleryproducts {
display: flex;
}
.galleryproducts li {
width: 200px;
margin: 2%;
}
.galleryproducts img {
width: 100%;
height: auto;
border: 3px solid white;
}
.latest {
margin-top: 1%;
background-color: #1c1c1c;
}
.latest h1 {
color: white;
font-size: 1.5em;
font-weight: 300;
border-bottom: 3px solid white;
margin-bottom: 5%;
padding: 2%;
}
a {
text-decoration: none;
}
<!-- index.html -->
<div class="container">
<section class="boxes">
<ul class="gallery">
<li>
<a href="img/electrical.png">
<img src="img/electrical.png" alt="">
<p>Electrical Installations</p>
</a>
</li>
<li>
<a href="img/lighting.png">
<img src="img/lighting.png" alt="">
<p>Lighting Decorations</p>
</a>
</li>
<li>
<a href="img/homeappliances1.png">
<img src="img/homeappliances1.png" alt="">
<p>Electrical Appliances</p>
</a>
</li>
<li>
<a href="img/homeappliances2.png">
<img src="img/homeappliances2.png" alt="">
<p>Kitchen Appliances</p>
</a>
</li>
</ul>
</section>
<section class="latest">
<h1>Our latest products</h1>
<ul class="galleryproducts">
<li>
<a href="img/1.jpg">
<img src="img/1.jpg" alt="">
</a>
</li>
<li>
<a href="img/2.jpg">
<img src="img/2.jpg" alt="">
</a>
</li>
<li>
<a href="img/3.jpg">
<img src="img/3.jpg" alt="">
</a>
</li>
<li>
<a href="img/4.jpg">
<img src="img/4.jpg" alt="">
</a>
</li>
</ul>
</section>
</div>
No, you can't set display: flex on the containter an have the gallery's/galleryproducts's children behave as they do now, as they aren't direct children of the container.
If you would change it like that, the boxes/latest will become flex children and the gallery's/galleryproducts's children will just become normal li items, stacked on top of each other, not side by side.
So what you have is what you need, to get the result you say is good (if to assume you want to use flex of course).
Does anyone know how I can remove the space between the top of my menu and the bottom of the image on top of the page. I tried to do it with margin and padding. But that didn't work.
This is a picture of the result I get now
#charset "UTF-8";
body {
background-color: #ADF1F5;
}
html,
body {
margin: 0;
padding: 0;
}
#Anouk {
text-align: center;
margin: 0 auto;
padding: 0;
}
#header {
height: 80px;
background: #000000;
}
li {
display: block;
float: left;
}
li a {
color: #FFFFFF;
height: 80px;
}
#contact {
float: right;
}
<div id="Anouk">
<img src="logo/Hout.png" width="1000px" alt="Logo" />
</div>
<div id="header">
<div id="menu">
<!--Home-->
<li id="home">
<a href="index.html">
<img src="Iconen/Home.png" height="80px" alt="home" onmouseover="this.src='Iconen/Home2.png'" onmouseout="this.src='Iconen/Home.png'" />
</a>
</li>
<!--Over Mij-->
<li id="over">
<a href="over.html">
<img src="Iconen/Over.png" height="80px" alt="home" onmouseover="this.src='Iconen/Over2.png'" onmouseout="this.src='Iconen/Over.png'" />
</a>
</li>
<!--Portfolio-->
<li id="portfolio">
<a href="portfolio.html">
<img src="Iconen/Portfolio.png" height="80px" alt="home" onmouseover="this.src='Iconen/Portfolio2.png'" onmouseout="this.src='Iconen/Portfolio.png'" />
</a>
</li>
<!--Contact-->
<li id="contact">
<a href="contact.html">
<img src="Iconen/Contact.png" height="80px" alt="home" onmouseover="this.src='Iconen/Contact2.png'" onmouseout="this.src='Iconen/Contact.png'" />
</a>
</li>
</div>
</div>
Try to add display:block to your top most image.
#Anouk img{
display: block;
}
Here is a solution: https://jsfiddle.net/egjbmp1u/
For your #header style you need to add:
position: relative;
float: left;
width: 100%;
Also, #Anouk style should look like this:
#Anouk {
display: flex;
text-align: center;
padding: 0;
}
#Anouk img {
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Jack Yuan | Web Developer</title>
<link rel="stylesheet" href="CSS/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="CSS/main.css">
<link rel="stylesheet" href="CSS/responsive.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Jack Yuan</h1>
<h2>Web Developer</h2>
</a>
<nav>
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<ul id="gallery">
<li id="pic1">
<a href="img/Jack.jpg">
<img src="img/Jack.jpg" width="500" height="400" alt="">
<p> This is me </p>
</a>
</li>
<li id="pic2">
<a href="img/Life.jpg">
<img src="img/Life.jpg"width="500" height="400" alt="">
<p> This concludes my life(lol!) </p>
</a>
</li>
<li id="pic3">
<a href="img/Study.jpg">
<img src="img/Study.jpg"width="500" height="400" alt="">
<p> This shows what I study </p>
</a>
</li>
<li id="pic4">
<a href="img/2.jpg">
<img src="img/2.jpg"width="500" height="400" alt="">
<p> This is what I believe</p>
</a>
</li>
</ul>
</section>
<footer>
<div id="mus">
<embed src="Neo.mp3" loop="true" autostart="true" height="55mm">
</div>
<div id="logo">
<a href="https://www.facebook.com/jackyuan.jack">
<img src="img/facebook.gif" alt="FaceBook Logo" class="icon">
</a>
<a href="https://twitter.com/Jack19909100">
<img src="img/twitter.png" alt="Twitter Logo" class="icon">
</a>
</div>
<p>Jack Yuan</p>
<p>All Rights Reserved.</p>
</footer>
</div>
</body>
</html>
Here is my CSS
a {
text-decoration:none;
}
#wrapper {
max-width:940px;
margin: 0 auto;
padding: 0 5%;
}
#logo {
text-align: center;
margin: 0;
}
h1 {
margin: 0;
padding-top: 4mm;
font-size: 2em;
font-family: 'Lobster', cursive;
font-weight: normal;
line-height: 0.8em;
}
h2 {
font-family: 'Gloria Hallelujah', cursive;
font-size: 1.5em;
margin: -5px 0 0;
font-weight: normal;
}
body{
font-family: 'Gloria Hallelujah', cursive;
}
a {
color: #6ab47b;
}
header{
background: #6ab47b;
border-color:#599a68;
float:left;
margin: 0;
padding: 5px 0 0 0;
width: 100%;
}
nav{
background: #599a68;
text-align: center;
margin: 20px 0 0;
}
nav a, nav a:visited {
color:#fff;
}
nav ul{
list-style: none;
margin: 0 10px;
padding: 0;
}
nav a{
font-weight: 800;
padding: 15px 10px;
}
h1, h2{
color:#fff;
}
nav a.selected , nav a:hover {
color:#32673f;
}
footer{
font-size: 1em;
text-align: center;
clear:both;
padding-top: 20px;
color: #ccc;
line-height: 0.8em;
background: black;
margin:0;
}
img{
max-width: 100%;
}
#gallery{
margin: 0;
padding: 0;
list-style: none; /** remove bullet point **/
}
#gallery li{
float:left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
#gallery li a p{
margin: 0;
padding: 0;
font-size: 1.5em;
color: #bdc3c7;
}
.icon{
width: 40px;
height: 40px;
margin: 5mm 5px;
}
body{
background: orange;
margin:0;
color:#999;
}
Why it only takes a portion of the width of the webpage?
I tried to set max-width and width 100%, it did not work.
How do I make footer take 100% of the width of the webpage?
That is what I am trying to do.
Your footer is inside the div.wrapper. Move it outside of the div. You'll have to fix the margin.
your current structure is :
<div id="wrapper"> ... <footer> .. </footer> </div>
you have to pull out the footer from wrapper div like :
<div id="wrapper"> ... </div> <footer> .. </footer>
Demo
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Jack Yuan | Web Developer</title>
<link rel="stylesheet" href="CSS/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="CSS/main.css">
<link rel="stylesheet" href="CSS/responsive.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Jack Yuan</h1>
<h2>Web Developer</h2>
</a>
<nav>
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<ul id="gallery">
<li id="pic1">
<a href="img/Jack.jpg">
<img src="img/Jack.jpg" width="500" height="400" alt="">
<p> This is me </p>
</a>
</li>
<li id="pic2">
<a href="img/Life.jpg">
<img src="img/Life.jpg"width="500" height="400" alt="">
<p> This concludes my life(lol!) </p>
</a>
</li>
<li id="pic3">
<a href="img/Study.jpg">
<img src="img/Study.jpg"width="500" height="400" alt="">
<p> This shows what I study </p>
</a>
</li>
<li id="pic4">
<a href="img/2.jpg">
<img src="img/2.jpg"width="500" height="400" alt="">
<p> This is what I believe</p>
</a>
</li>
</ul>
</section>
</div>
<footer>
<div id="mus">
<embed src="Neo.mp3" loop="true" autostart="true" height="55mm">
</div>
<div id="logo">
<a href="https://www.facebook.com/jackyuan.jack">
<img src="img/facebook.gif" alt="FaceBook Logo" class="icon">
</a>
<a href="https://twitter.com/Jack19909100">
<img src="img/twitter.png" alt="Twitter Logo" class="icon">
</a>
</div>
<p>Jack Yuan</p>
<p>All Rights Reserved.</p>
</footer>
</body>
</html>
Woking jsFiddle
Actually you must take out ... outside your main DIV
try this:
css
footer{
font-size: 1em;
text-align: center;
clear:both;
margin:0;
}
.footer_content{
width: 100%;
position: absolute;
left: 0;
font-size: 1em;
text-align: center;
clear:both;
padding-top: 20px;
color: #ccc;
line-height: 0.8em;
background: black;
margin:0;
}
html
<footer>
<div class="footer_content">
<div id="mus">
<embed src="Neo.mp3" loop="true" autostart="true" height="55mm">
</div>
<div id="logo">
<a href="https://www.facebook.com/jackyuan.jack">
<img src="img/facebook.gif" alt="FaceBook Logo" class="icon">
</a>
<a href="https://twitter.com/Jack19909100">
<img src="img/twitter.png" alt="Twitter Logo" class="icon">
</a>
</div>
<p>Jack Yuan</p>
<p>All Rights Reserved.</p>
</div>
</footer>