There is a <div> with an image in the background. I now want to include a list within that div, but I'm having trouble positioning it.
Check out this image for reference
In the image above, you can see the background and the list, but I'm struggling to position it correctly.
This is 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 issue with my CSS is that when I add 'margin-top: 100px' to the ul, the list goes down but the background image also moves down. How can I properly position the list within the div?