Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by kirkbyo
kirkbyo
15,791 Points

Help fixing this quick issue

I am working on my personal website and I am having trouble with combining two un-ordered list into one. I want the social links and the pages on the same line (in the blue box). My code is bellow

HTML

    <footer>
        <section>
            <div id="footer">
                    <div class="footerElements">
                        <ul id="footSocial">
                            <li>
                                <a href="https://twitter.com/firespread_">
                                    <img class="twitter" src="img/Social/Twitter.png" alt="Tiwtter Profile"/>
                                </a>
                            </li>
                            <li>
                                <a href="https://github.com/kirkbyo">
                                    <img class="github" src="img/Social/Github.png" alt="Github Profile"/>
                                </a> 
                            </li>
                            <li>
                                <a href="mailto:ozzie@firespread.co">
                                    <img class="mail" src="img/Social/Mail.png" alt="Email Me"/>
                                </a>                        
                            </li>
                            <li>
                                <a href="https://www.behance.net/firespread">
                                    <img class="behance" src="img/Social/Behance.png" alt="Behance"/>
                                </a>     
                            </li>
                            <li>
                                <a href="http://codepen.io/firespread/">
                                    <img class="CodePen" src="img/Social/Code-Pen.png" alt="Code Pen"/>
                                </a>     
                            </li>
                        </ul>
                        <ul id="footerLinks">
                            <li>
                                <p>SERVICES</p>
                            </li>
                            <li>
                                <p>PORTFOLIO</p>
                            </li>
                            <li>
                                <p>SHOP</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </section>
    </footer>

CSS

#footSocial {
    list-style: none;
}

#footSocial li {
    padding-top: 10px;
    display: inline-block;
}

#footSocial li img {
    padding-top: 10px;
    padding-bottom: 0px;
    height: 29px;
    width: 29px;
}

/**********  
Alignment
**********/

div.footerElements {
    text-align:center;
}

What it looks in the browser alt text

If you would like to see the footer in action you can view my Github Repo. Any help is greatly appreciated :)

Ozzie

1 Answer

Chris Shaw
Chris Shaw
26,676 Points

Hi firespread,

The easiest and least convoluted way would be to display both unordered lists as inline-block which will cause them to sit next to each other and because you have text-align: center on your div.footerElements selector they will both remain centered.

div.footerElements ul {
  display: inline-block;
}
kirkbyo
kirkbyo
15,791 Points

Thank you very Much :)

Ozzie

Chris Shaw
Chris Shaw
26,676 Points

You're welcome =)