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
Dakota Conway
517 PointsMake images horizontal
Can anybody help me with this code, the images are running vertical and I need them to be horizontally beside each other
9 Answers
Andrew Shook
31,709 Points#crossfade{
width:auto;
display:inline-block;
vertical-align:top;
}
Andrew Shook
31,709 PointsAre you wanting to know how to line up the crossfade divs? Also, you need to change crossfade from and id to a class. Id's are only suppose to be used once per page. If an element has a selector that is used multiple times on a page then the selector needs to be a class.
Dakota Conway
517 PointsYes i want to know how to line them up horizontally
Heres the codepen http://codepen.io/anon/pen/lLjdb
James Barnett
39,199 PointsDakota Conway - Use inline-block:
#crossfade { display: inline-block; }
Read more about inline block over on learnlayout.com
Also as Andrew Shook mentioned you really should change crossfade from an id to a class as it's currently not valid CSS.
Dakota Conway
517 Pointsit's still not working, it seperates the images
James Barnett
39,199 PointsUpdate your codepen with what you've got so far
Dakota Conway
517 PointsOnly shows 1 image
Tom Bedford
15,645 PointsYou have the images set at position: absolute; left: 0; which is why they are all ontop of one another.
#crossfade img {
position:absolute;
left:0;
}
Tom Bedford
15,645 PointsAlso your anchor tags look a bit broken.
You have
<a href="#"</a>
They should be
<a href="#">content to link</a>
If you are wanting :hover to change the appearance of the images it may not be best having two different images for each in the .html. You could use background images (changing on :hover - I would normally use sprites for these so there is no white flash when the second image loads in) or just apply an opacity affect when hovering (try a decimal so you can still see part of the original image).
Dakota Conway
517 Pointsthank you
Dakota Conway
517 PointsOne last question, when i tried to space the images apart with <hr> it just put it under the next image
Tom Bedford
15,645 PointsAdd a margin to .crossfade to space things out.
Do look at your anchor tags though as (for the way you have it set out) you should have the .html like this:
<a href="#"><img class="bottom" src="http://i.imgur.com/lIB0lAZ.png" /></a>
NOT like this:
<img class="bottom" src="http://i.imgur.com/lIB0lAZ.png" /><a href="#"</a>
James Barnett
39,199 PointsJames Barnett
39,199 PointsIt's easier to help someone debug an issue when it's in an interactive code playground like codepen rather then a static block of text.