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
Ray Mak
4,667 PointsHow to display next and prev on the image with CSS styling?
Hello everyone,
I am trying to put left and right arrows on the image in the middle. I tried z-index and position absolute and it doesn't show on the image.
I have uploaded jsfiddle sample code here: http://jsfiddle.net/rahilmaknojia/47qddyjy/1/
3 Answers
Iago Wandalsen Prates
21,699 PointsTry putting this on the slider-nav
position: relative;
top: -155px;
left: 10px;
width: 480px;
Iago Wandalsen Prates
21,699 PointsThen try this on slider-nav
position: absolute;
width: 73%;
top: 40%;
left: 10%;
James Barnett
39,199 PointsYou want to relatively position a container div and then position your slider absolutely inside of it.
Ray Mak
4,667 PointsRay Mak
4,667 PointsThanks Lago. That did the trick. However, I am looking for more of responsive nav's. If I resize the browser width, it then doesn't stay in the middle and goes more on the top. I also tried to use top: -50%, which didn't work either.
If you resize the jsfiddle browser window, you will see the arrows go upwards and don't stay in the middle. http://jsfiddle.net/rahilmaknojia/47qddyjy/4/