+- The Grimoire (https://grimoire.aegis.moe)
+-- Forum: Grand Archives (https://grimoire.aegis.moe/forumdisplay.php?fid=6)
+--- Forum: Help Desk (https://grimoire.aegis.moe/forumdisplay.php?fid=9)
+--- Thread: Spirits (/showthread.php?tid=6)
Spirits - Tina - 01-29-2023
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
RE: Spirits - Yuuka - 01-29-2023
(01-29-2023, 04:46 PM)Tina Wrote: 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!
RE: Spirits - Tina - 02-01-2023
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
RE: Spirits - Yuuka - 02-07-2023
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.
RE: Spirits - Tina - 02-17-2023
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.
RE: Spirits - Yuuka - 02-18-2023
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.