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
Liz Karaffa
17,576 PointsOverlay CSS Issues
Hey guys!
I'm having a ton of trouble with some overlays that I'm working on. Here's a screen shot of where I'm currently at. http://i.imgur.com/BZw79Qn.jpg
Basically, I need the black bottom-border to be 50% down from the top. The "Test" statement to be just above the bottom-border, and the "Shop Now" statement needs to be 75% from the top of the overlay, or about halfway between the bottom-border and the bottom of the overlay.
Since all my images are different dimensions I have to use percentages instead of pixels. I've played around with both padding and margin to try and bring things down consistently across the board, but as you can see in the screenshot, it looks like it only goes down around 10% on narrow vertical images, 80% on narrow horizontal images, and about 50% on squarish images. (in the my screenshot I'm actual only using a 20% margin from the top because if I did 50%, the words would bleed down in the other images.
Does anyone know why the percentages are not being consistent across the board?
I have a custom function in my functions.php file that spits out the following html for me based on some advanced custom fields I built. (Anything in brackets is just me shorthanding stuff since it's not that relevant"
Also, I need the entire white box to be clickable which is why I used <span> and <p> tags, because in my searching, I believe I can't wrap <div> tags (or any block elements) in <a> tags and maintain older browser compatibility. If I'm wrong in this approach by all means let me know!
<div class="module" id="img-[#]">
<img src="[img url]" />
<a href="#">
<span class="overlay">
<p class="tagline">Test</p>
<p class="cta italics">Shop Now</p>
</span>
</a>
</div>
Here's the CSS I'm currently using (I haven't even touched .cta because I can't get .tagline working):
.module {
position: relative;
}
.module img {
width: 100%;
height: 100%;
padding: 3px;
}
.module a {
position: absolute;
background: #fff;
text-align: center;
z-index: 10;
top: 50%;
left: 50%;
width: -moz-calc(100% - 20px);
width: -webkit-calc(100% - 20px);
width: calc(100% - 20px);
height: -moz-calc(100% - 20px);
height: -webkit-calc(100% - 20px);
height: calc(100% - 20px);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); /* centers overlay vertically and horizontally */
}
.overlay {
display: block;
height: 100%;
width: 100%;
}
.tagline {
font-weight: bold;
border-bottom: 2px solid black;
width: -moz-calc(100% - 20px);
width: -webkit-calc(100% - 20px);
width: calc(100% - 20px);
margin: 20% auto 2%; /* This seems to be the statement that's not working */
}
2 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Liz,
A percentage based margin should be based on the width of the parent element which is the span. Looking at your screenshot, the top/left nearly square image has the shortest width of the 4 you're showing and so 20% of that in pixels isn't going to be that much and so you see the text there closer to the top than any of the others. Your bottom right image is the widest and so 20% of that is going to be more pixels and so that text appears farther down from the top than any other.
How far back do you have to go for browser compatibility? I seem to remember reading that wrapping block level elements with links worked in browsers even before html5 made it officially ok to do so. Right now you have invalid html because a <span> can't wrap a <p> With the new content categories a span is phrasing content and can only contain other phrasing content.
I would move your "overlay' class to the link and get rid of the span.
I personally think it's too soon to be using the calc() function with only around 76% support http://caniuse.com/calc The recommendation is to first set a fallback width and then use calc() to get the more accurate width you want but that won't work for you here because you need a fixed image exposure all the way around the overlay.
Your situation seems to be a good use case for absolute positioning. It should simplify your css. You won't have to use the calc() function or transforms. .tagline can be positioned 50% up from the bottom and .cta can be be positioned 70-75% from the top.
Also, I would set overflow: hidden on the overlay. I think if the user increases their font-size it would look better to have cutoff text rather than having it overflow to other images.
I did a rough codepen demo showing this. Hopefully it helps and is doing what you want..
Liz Karaffa
17,576 PointsI did, but I figured it out so I removed it. Thanks! :)
Liz Karaffa
17,576 PointsLiz Karaffa
17,576 PointsThank you so much! I really appreciate you taking the time on this! You got me exactly where I needed to go. Truly there aren't enough thanks!
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsYou're welcome!
I'm not sure what happened but I have an email saying you had a follow up question and I had seen it earlier here in this discussion but didn't have time to reply. Now it seems to be gone.