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 Thomas Hewitt
Thomas Hewitt
17,691 Points

Help displaying these images as inline elements.

Hello everyone,

I'm having a mind fart and I need help with displaying some images as inline elements.

I'm practicing working with sprites and the thing I want to do now is display them inline rather than as blocks. Is anyone able to help?

The images/ initial code has been taken from: https://www.w3schools.com/Css/css_image_sprites.asp

Thank you

<!DOCTYPE html> <html> <head> <style>

        .homenav {
            width: 46px;
            height: 44px;
            background: url(img_navsprites.gif);
        }

        #home,
        #next,
        #back {
            display: inline-block;
        }

        #home {
            background-position: 0 0;
        }

        #next {
            width: 43px; 
            background-position: -91px 0;
        }

        #back {
            width: 43px;
            background-position: -181px;
        }
    </style>
</head>

<body>

    <div class="homenav">
        <img id="home" class="homenav" src="img_trans.gif"><br><br>
        <img id="next" class="homenav" src="img_trans.gif">
        <img id="back" class="homenav" src="img_trans.gif">
    </div>
</body>

</html>

1 Answer

Daniel Oviedo
Daniel Oviedo
16,804 Points
Daniel Oviedo
Daniel Oviedo
16,804 Points

Hello Thomas:

  1. The <div> container and the <img> childs have the same "homenav" class which generates unwanted results. Change the class name of the <div> for something like "container".

  2. Remove the two <br> tags of the first <img>.

  3. You are using CSS image backgrounds and html <img> with "src" attribute, using both is not necessary. In this case what you need is CSS backgrounds for the sprite, so remove the "src" attribute of <img>.

Check this link to see solution.