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
Gina Bégin
Courses Plus Student 8,613 PointsI 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
14,268 PointsAdd/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
Courses Plus Student 8,613 PointsJeff 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.
Gina Bégin
Courses Plus Student 8,613 PointsGina Bégin
Courses Plus Student 8,613 PointsThanks 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
14,268 PointsJeff Lemay
14,268 PointsYou 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
14,268 PointsJeff Lemay
14,268 PointsI 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
Courses Plus Student 8,613 PointsGina Bégin
Courses Plus Student 8,613 PointsHey 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
14,268 PointsJeff Lemay
14,268 PointsThat 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.