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

JavaScript

Posted by Timur Girgin
Timur Girgin
1,163 Points

How to have a slideshow similar to aa.com

Hello everyone,

I am currently creating a design similar to the aa.com website, just for training purposes and I was wondering if someone could help me figure out how to 'use' a slideshow similar to the one at http://www.aa.com.

I know that they are using javascript for the slideshow, and my question is not about how to make the slideshow, but how did they get the slideshow positioned at that exact spot with the menus (Find flights) right at the bottom of it.

I am using Fireworks with a 12 column-grid. Currently, I only have created the header (for the logo, and a links).

Thank you,

Tim

3 Answers

samiff
samiff
31,206 Points
samiff
samiff
31,206 Points

Have you tried opening the site in something like Chrome using the dev tools? That allows you to "inspect" elements/containers on the page, and their corresponding CSS values. You can even edit the values yourself to see exactly what they're doing.

Looking at the page (I'm a beginner at this), I see that there is a div with the class of "site-content" and that it's using relative positioning. Editing the margin-top value for that div class (it's set to -180px which pushes it up over the big image/slider thing, and has a z-index set so it appears above), you can see how it basically works.

There's of course lots of other CSS being inherited and canceled out, but you can sorta get the idea usually. Like I said, I'm new to this, so maybe someone else can chime in.

Macklin Underdown
Macklin Underdown
1,822 Points
Macklin Underdown
Macklin Underdown
1,822 Points

A recent JQuery plug-in I came across called Backstretch can achieve a similar effect and is definitely worth checking out.

Ricardo Diaz
Ricardo Diaz
30,415 Points
Ricardo Diaz
Ricardo Diaz
30,415 Points

Good Morning,

That effect is actually pretty simple to do. Its a combination of using margin-top, positioning, and z-index. Sam was actually dead on with his explanation and I also believe Nick talks about this in one of his videos. Not sure which one but you might have to get Gold membership to access that video. This is what they used and make the content go above the slider.

.site-content { margin-top: -180px; position: relative; z-index: 1000; }