CODEWITHSUNDEEP
htmlcss
Bhavik Joshi
Bhavik Joshi

Reputation: 2677

How can I position list in <div>?

I have a <div> and it has a image in background. Now I want to put a list into that Div so how can I position that in

https://i.sstatic.net/VWmB2.png

you can See in above picture I have background and a list but I am not able to position 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 when I am giving the 'margin-top:100px' to ul it goes down but the background pic is also goes down.

So how can I position the list in div?

Upvotes: 5

Views: 627

Answers (2)

Harshana Samaranayake
Harshana Samaranayake

Reputation: 504

I think this is what you want. When u use <ul> u can't use <div> inside that. So checkout this

#footer-content ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-left: 500px;
}
#footer-content ul li {
     display: inline;
}
#footer
{
    background-image: url('https://i.sstatic.net/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>

Upvotes: 4

Lelio Faieta
Lelio Faieta

Reputation: 6669

You also have 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;
}

Upvotes: 1

Related Questions