Spirits

[Tina]

Hello guys, 

I have a problem and maybe you could help me out. My webclique "Spirits" has a footer image but due to my lack of html knowledge i am unable to put in the center. What am I doing wrong?

http://midnight-cloud.net/spirits

[Yuuka]

Hello guys, 

I have a problem and maybe you could help me out. My webclique "Spirits" has a footer image but due to my lack of html knowledge i am unable to put in the center. What am I doing wrong?

http://midnight-cloud.net/spirits

Hi,

I noticed you had text-align: center; on your #footer container, but since that's not full width, it doesn't do anything.

Try moving the text-align: center; out into the <footer> container, and then add margin: auto; (specifically, make margin-left and margin-right auto) to your #footer container.

Something like this in your css:

Code:

footer {
    margin: 0 auto;
    text-align: center;
}
#footer {
    margin: auto;
    bottom: 0;
    text-align: center;     
    width: 1280px;
}

Generally, to center block elements like this, you want to make the parent container text-align: center; and the child container (what you want to center) have margin-left: auto; and margin-right: auto;

Hope this helps!

[Tina]

Thanks, I'll try it right away. I hate it when there's something wrong with the code, even though I'm no pro anyway. I taught myself everything or learned from others and I wish I could make layouts as cool as you and the rest of the community

[Yuuka]

Also, if this helps, I noticed you used a <font> tag for the footer. Was there a particular reason for this? I think this is causing some of the display issues, since the <font> element is inline, and meant to wrap around words. If you change it to a <div> instead, that may help, since <div> elements are displayed as block elements naturally.

[Tina]

Oh ok, no actually there is no reason for that. I also changed the code now and it looks 100 times better. The only thing that bothers me now is that the footer doesn't stick to the bottom of the screen.

[Yuuka]

yay I'm glad that helped!

for getting the footer to be completely against the bottom, try adding a margin-bottom: 0; to the body.