I have a <div> and I have an image in the background. Now I want to put the list in this div the way I can put it in
http://i.stack.imgur.com/VWmB2.png
You can see in the picture above. I have a background and a list, but I can’t arrange it.
My code
<div id="footer"> <div id="footer-content"> <div id="footer-list"> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">Blog</a></li> <li><a href="#contact">About FF</a></li> <li><a href="#about">FAQ</a></li> <li><a href="#about">How To Play</a></li> <li><a href="#about">Terms of Use</a></li> <li><a href="#about">Privacy Policy</a></li> </ul> </div> </div> </div>
CSS -
#footer-list ul { list-style-type: none; margin: 0; padding: 0; margin-left: 500px; margin-top: 100px; } #footer { background-image: url(/img/footer.png); height: 140px; width: 1820px; background-repeat: no-repeat; left:0px; bottom: 0px; }
The problem with my css is that I give "margin-top: 100px" to ul, but it crashes, but the background is also reduced.
So how can I put a list in a div?
source share