Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Gina Bégin
PLUS
Gina Bégin
Courses Plus Student 8,613 Points

I was told we can ask questions about our own projects? Trying to overlay a button on top of video header on site.

Hi All! I haven't been asking questions about my project because I didn't know we were allowed to :) but a moderator said that's what forums were in part, for! So I've been stuck on this site I'm trying to create for my dad. I'm using a template right now, but will be building from the ground up, just trying to figure out the pieces.

test.kgshowroom.com

As you'll see, there is a looping video in the header of the home page (not ours — this site is not advertised to the public, so just needed an example to play with). However, before I put that in, the part just underneath that ("KG Showroom" + "You're on our site." + the "Hello!" button) was up at the top and centered on top of a photo of a kitchen.

When I put in the video, all of that got pushed down, below the div, is what I'm guessing. So I tried messing with the div, but I'm not getting it to work. I want those items to sit on top of the looping video. I don't want the video to be clickable, but I want the "Hello!" button to be clickable.

Ideas?

Do you need the code here, or can you grab it from the URL using source code?

2 Answers

Jeff Lemay
Jeff Lemay
14,266 Points

Add/update these:

.header-video {
  position: absolute;
  z-index: -1;
}
#header {
  text-align: center;
}

Absolute positioning of the video will take it out of "normal flow" so your content will sit on top of it. Adding a z-index of -1 will make it sit behind everything else and also be unclickable.

Gina Bégin
Gina Bégin
Courses Plus Student 8,613 Points

Thanks so much, Jeff Lemay! I tried adding those things, but it didn't seem to do anything, though it makes sense that it would. Is there something in the current code that might be overriding it?

Jeff Lemay
Jeff Lemay
14,266 Points

You have position:relative set to .header-video in the code snippet you provided. You can change that to position:absolute and then add the z-index right below.

Jeff Lemay
Jeff Lemay
14,266 Points

I tested it and the layout adjusted accordingly (although you'll still need to adjust some font colors so they show up over the video).

Gina Bégin
Gina Bégin
Courses Plus Student 8,613 Points

Hey Jeff Lemay — I'm not sure what's going on then... in my code, it's showing the way you have it set up. We're talking in the style.css right? I have:

``

/*********************************** New Code for Video Header **************/

.header-video {

position: absolute;

z-index: -1;

}

/**** OLD Code for video header

.header-video {

position: relative;

overflow: hidden;

}

********************************/ ``

Edit: Minus the "``" that start and end it... I can never remember how to post code in treehouse forums.

Jeff Lemay
Jeff Lemay
14,266 Points

That should do it. Maybe you have some media queries that are overriding these styles?

You can test it in your browser. Use Inspect Element, select the .header-video div, change the position property from relative to absolute and then add the z-index: -1.

Gina Bégin
PLUS
Gina Bégin
Courses Plus Student 8,613 Points

Jeff Lemay I can definitely see it working in the browser test (thank you!); do you know how I would check to see if media queries are overriding the styles? Also, is there a way to center the button and text over the video instead of to the left? I tried messing with the z-index, but it was just moving it behind or to the front of the video itself.

Thanks SO much. This has been stumping me for months.