How To: Extending Containing Elements?

For the forward arrow, this is the rule that’s giving you a problem:

div.anythingSlider .arrow.forward {
  background: url("images/next_btn.png") no-repeat scroll 0 0 transparent;
  display: block;
  float: right;
  height: 40px;
  margin: 300px -20px 0 0;
  overflow: hidden;
  position: absolute;
  width: 40px;
  z-index: 9;
}

This will fix it:

div.anythingSlider .arrow.forward {
  margin: 300px -2px 0 0;
}

For the back arrow, the equivalent is:

div.anythingSlider .arrow.back {
  background: url("images/prev_btn.png") no-repeat scroll 0 0 transparent;
  clear: both;
  display: block;
  float: left;
  height: 40px;
  margin: 300px 0 0 -20px;
  overflow: hidden;
  position: absolute;
  width: 40px;
  z-index: 9;
}

One again, this will fix it:

div.anythingSlider .arrow.back {
  margin: 300px 0 0 -2px;
}

Add the new rules to the end of style.css, preferably in a child theme if that’s at all possible.

Cheers

PAE

Thanks for taking a look at this. I really appreciate the fast response.

I made the changes mentioned, however, it still doesn’t bring the “arrows” above the margin/wrap, they are still cut off. Any additional suggestions?

Thank you!

When I looked on your site just now, it’s still referencing the old style rule. So I looked at your style sheet and I see that nothing has been added to the style sheet.

You must add the new style rule I gave you to the end of that style sheet (the one I link to above). Wherever you’ve added it, it’s not to that style sheet.

Cheers

PAE

Ok, thanks for the response, I am a bit of a novice with all of this so I appreciate your help. I have added

div.anythingSlider .arrow.forward {
  margin: 300px -2px 0 0;
}

and 

div.anythingSlider .arrow.back {
  margin: 300px 0 0 -2px;
}

to the very end of the stylesheet. Do I need to make any changes at all to:

div.anythingSlider .arrow.forward {
  background: url("images/next_btn.png") no-repeat scroll 0 0 transparent;
  display: block;
  float: right;
  height: 40px;
  margin: 300px -20px 0 0;
  overflow: hidden;
  position: absolute;
  width: 40px;
  z-index: 9;
}

and

div.anythingSlider .arrow.back {
  background: url("images/prev_btn.png") no-repeat scroll 0 0 transparent;
  clear: both;
  display: block;
  float: left;
  height: 40px;
  margin: 300px 0 0 -20px;
  overflow: hidden;
  position: absolute;
  width: 40px;
  z-index: 9;
}

Right now, you can probably tell by looking at my stylesheet and the changes I made from what I mentioned above, the arrows still appear “tucked”. Thanks!

There’s a parse error in your CSS file that is stopping your new rules being read. Here’s what the parser says:

1883 	body:before 	Parse Error ;
/ div.anythingSlider .arrow.forward {
  margin: 300px -2px 0 0;
}

It’s the forward slash that it’s complaining about. You’ll see it on line 1879 of your style sheet (the very last character on that line). Please delete that character (forward slash), save the file and check your site again. You don’t need to alter the original style. This new one should overwrite it because it occurs later in the file.

Cheers

PAE

Thanks again for the response Peredur – I deleted the forward slash and saved the stylesheet again and still didn’t see a change. I changed the pixels from -2 to -8px as well to push out the arrows a bit and they still tucked under. Hopefully I have done this right.

Looks OK to me, except that you’re using a value of -8px instead of the -2px that I suggested. But it’s done what it’s supposed to and shifted the back and forward arrows to the right and left respectively.

The smaller the negative margin, the better. Changing from -2 to -8 shoves them in the wrong direction.

I suggest you try the value of -2 again and then check in your browser. If it doesn’t look right, refresh your browser and see if that displays it. If not, clear the browser’s cache and check again. Because it all looks fine to me.

Cheers

PAE

I realise I’ve been slightly misunderstanding you. Sorry about that.

I can see, now, that you want the overlap with the border.

The trouble is that your other site uses an image for the forward and next arrows, So it overlays the background much better. This site uses text so the only way I can get it anything like is to move the arrows into the darker background where they show up.

Hmmm

PAE

What happens if you replace the html (for the ‘next’ link):

<a href="#" class="">?</a>

… with

<a href="#" class=""><img src="https://vlkr.com/wp-content/themes/illiam/images/next_btn.png" alt="" /></a>

… and put the margins back to -20px as they were before?

(I know you wouldn’t usually hard code it like this, but just for now…)

Cheers

PAE

Peredur, no worries mate. I would’ve pointed it out sooner had I known myself!

Do you want me to remove the styles you wanted me to add to the bottom as well?

Also, where would I find the html to replace?

Yes, you can remove the styles. We may need to revisit them, but they can go for now.

As for where the HTML is, the problem is that this is obviously a slider of some sort, so I guess that the HTML is being generated by a plugin.

However, the question I have is why it’s not behaving in exactly the same way as on your other site. Is it the same plugin? Is it configured in the same way?

Cheers

PAE

The slider is different than on the other site. This slider on vlkr is the “anything slider” : https://css-tricks.com/3412-anythingslider-jquery-plugin/

The slider on illiam is jflow : https://plugins.jquery.com/project/jFlow

The theme developer changed from jflow to the anything slider because the jflow slider goes a bit haywire after 3 minutes on most browsers

Both don’t appear to be plugins, just jquery written into the stylesheet.

This is the response from the theme developer about this issue:

“For the arrows; this is happening because they have negative margins and extend outside of their containing elements (homeslider, homepagetop, and contenthome). You would need to either change the widths of their containing elements and then style them properly, or move them outside of their containing elements. It can definitely be a bit tricky. You could also try removing the overflow: hidden; on a few of these elements.”

I just don’t know how to do that. I hope this helps at least.

Got it!!

Thanks to your developer.

Add these two style rules to the bottom of the style sheet (styel.css) as before:

#homepagetop #homeslider {
  overflow: visible;
}

div.anythingSlider {
  overflow: visible;
}

That should do it.

Cheers

PAE

Brilliant! Bravo Peredur! That did the trick. So glad that information above helped out. It is looking spot on now! I really appreciate your help/your assistance and patience, I can’t begin to tell you how many hours this week I have been trying to sort that out!

Thank you again!

qubed