How can I put a list in a <div>?

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?

+5
source share
2 answers

I think this is what you want. When you use <ul> , you cannot use <div> inside this. So check it out

 #footer-content ul { list-style-type: none; margin: 0; padding: 0; margin-left: 500px; } #footer-content ul li { display: inline; } #footer { background-image: url('http://i.stack.imgur.com/VWmB2.png'); height: 140px; width: 1820px; background-size: 1820px 140px; background-repeat: no-repeat; left:0px; bottom: 0px; padding-top:50px; } 
 <div id="footer"> <div id="footer-content"> <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> 
+4
source

You also need to change the 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; } #footer-list{ text-align: center; } 
+1
source

All Articles