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

CSS

Posted by Jacob Thomson
Jacob Thomson
757 Points

CSS (STUCK!)

Hey guys!

I'm currently trying to style my header (with no luck). In my header i have a logo (image), 2 smaller images which represent a phone, and an email. Then a UL with 3 list items (About, Contact etc). I want me logo on the left, my 2 images in the middle, and the 3 buttons spaced on the right.. I have tried countless times to style this accordingly, but it all jumbles up. I had all my header in a div tag, but since i could not get it right. I have now put them in seperate div tags to style individually, I'm not sure if that will work either.

    <header>
        <div id="navlogo">
            <img id="navagationlogo"src="images/navlogo.jpg" alt="">
        </div>
            <nav>   
                <div id="phoneandemail">
                    <img class="navbuttons" src="images/navphone.jpg" alt="">
                    <img class="navbuttons" src="images/navemail.jpg" alt="">
                </div>
                <div id="a">
                    <ul>
                        <li><a href="#aboutsection" class="links">About</a></li>
                        <li><a href="" class="links">View Plans</a></li>
                        <li><a href="#contactsection" class="links">Contact</a></li>
                    </ul>
                </div>
            </nav>
    </header>

Could anyone give me any advice on how to style this, if my html is incorrect and would respond better if i were to change anything, please tell me! Thanks so much

1 Answer

Jesse Fisher
Jesse Fisher
10,830 Points

It sounds like you could benefit from studying the CSS attritibute "display".

This video might help.

http://teamtreehouse.com/library/css-layout-techniques/display/block-vs-inline-elements

I created a codepen with your HTML and added a bit of CSS.

The default display for div, nav, and li elements is "block" which means it will take up all the horizontal space. By setting them to display: inline-block; they take up only the horizontal space their content needs.

http://codepen.io/anon/pen/wBKjPR

Jacob Thomson
Jacob Thomson
757 Points

I was messing around with inline-block, but because i didn't completely understand the differences between, block/inline/inline-block. I wasn't using it correctly. Thank you for helping me understand Jesse Fisher