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

CSS

nicholas maddren
nicholas maddren
12,793 Points
Posted by 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
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
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
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

James Andrews
James Andrews
7,245 Points
James Andrews
James Andrews
7,245 Points

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.

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

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.