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

nicholas maddren
nicholas maddren
12,793 Points

Why is my text showing behind my chevron shaped wrap?

Hey guys I am a struggling to understand why my text is sitting under the background of the div in my slider.

As you can see here: http://www.dealerbyte.co.uk/

You will notice that there should be a caption that sits on top of the background that says "97.2%". Any idea where I am going wrong? I have tried inspecting it but can't find a thing.

Thanks :)

5 Answers

Calvin Nix
Calvin Nix
43,828 Points

Hey Nicholas,

Could you post a snippet of your CSS and HTML that correlate with this code?

I'd like to get a closer look on how exactly you are setting this element.

Thanks, Calvin

nicholas maddren
nicholas maddren
12,793 Points

Because it uses a jquery slider it might have some hidden CSS somewhere however I am using this:

.chevron {
  position: relative;
  top: 5px !important;
  text-align: center;
  padding: 10px;
  margin-bottom: 6px;
  height: 200px;
  width: 200px;
  color: red;
  font-size: 6em;
}

.chevron:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 51%;
  background: blue;
  -webkit-transform: skew(0deg, 6deg);
  -moz-transform: skew(0deg, 6deg);
  -ms-transform: skew(0deg, 6deg);
  -o-transform: skew(0deg, 6deg);
  transform: skew(0deg, 6deg);
}
.chevron:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  background: blue;
  -webkit-transform: skew(0deg, -6deg);
  -moz-transform: skew(0deg, -6deg);
  -ms-transform: skew(0deg, -6deg);
  -o-transform: skew(0deg, -6deg);
  transform: skew(0deg, -6deg);
}​

And here is the HTML:

<div class="ms-slide">

        <!-- slide Image --> 
        <img class="ms-layer" style="width:500px;" alt="sarah customer satisfaction"
         data-offset-x      = "10"
         data-offset-y      = "15"
         data-origin        = "tr"
         data-type          = "image"
         data-effect        = "right(90)"
         data-duration      = "800"
         data-ease          = "easeOutQuart" 
         src="media/img/customer-satisfaction.png"/>
        <!-- slide text layer -->
        <div class="ms-layer ms-caption chevron">97.2%</div>

    </div>

Thanks :)

Calvin Nix
Calvin Nix
43,828 Points

Hey Nicholas,

I would look more into exactly what the JQuery plugin is doing. From what I could tell with the information made available to me is that everything is being implemented correctly.

I would check to see if there are any example templates of that jQuery plugin being implemented so you can make sure that you have everything in place correctly.

Regards, Calvin

Why don't you just use an actual background image? Using ::before and ::after should be a last resort. I personally almost never use either of those as it makes it harder to debug in my opinion.

Hi Nicholas,

It looks like you figured out z-index: -1; on the pseudo elements while I was looking at it.

Check it out in all the browsers you're looking to support. I seem to remember reading negative z-indexes not being supported in some version of iPad. I could be wrong on that though.

You should be able to get around the negative z-index by putting your % text in an element within your div. then give that element relative positioning and a higher z-index value.