Title: How To: Extending Containing Elements?
Last modified: August 20, 2016
---
# How To: Extending Containing Elements?
* [qubed](https://wordpress.org/support/users/qubed/)
* (@qubed)
* [14 years, 9 months ago](https://wordpress.org/support/topic/how-to-extending-containing-elements/)
* Hi Everyone,
* I am having a bit of an issue on my site `http://vlkr.com`, I have a pair of
navigation arrows, that I would like to extend beyond the frame of my slider
and above it. Currently the images are best described as being tucked under/partially
hidden. An example of how I would like them to be can be seen @ my other site`
http://illiam.com`
* Can anyone take a look at this and help me implement the changes that need to
be made to get these so they are fully visible and not obstructed partially?
Thanks in advance for any help!
Viewing 15 replies - 1 through 15 (of 16 total)
1 [2](https://wordpress.org/support/topic/how-to-extending-containing-elements/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/how-to-extending-containing-elements/page/2/?output_format=md)
* [peredur](https://wordpress.org/support/users/peredur/)
* (@peredur)
* [14 years, 9 months ago](https://wordpress.org/support/topic/how-to-extending-containing-elements/#post-2237700)
* 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
* Thread Starter [qubed](https://wordpress.org/support/users/qubed/)
* (@qubed)
* [14 years, 9 months ago](https://wordpress.org/support/topic/how-to-extending-containing-elements/#post-2237732)
* 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!
* [peredur](https://wordpress.org/support/users/peredur/)
* (@peredur)
* [14 years, 9 months ago](https://wordpress.org/support/topic/how-to-extending-containing-elements/#post-2237736)
* When I looked on your site just now, it’s still referencing the old style rule.
So I looked at [your style sheet](http://vlkr.com/wp-content/themes/illiam/style.css)
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
* Thread Starter [qubed](https://wordpress.org/support/users/qubed/)
* (@qubed)
* [14 years, 9 months ago](https://wordpress.org/support/topic/how-to-extending-containing-elements/#post-2237745)
* 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!
* [peredur](https://wordpress.org/support/users/peredur/)
* (@peredur)
* [14 years, 9 months ago](https://wordpress.org/support/topic/how-to-extending-containing-elements/#post-2237747)
* 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
* Thread Starter [qubed](https://wordpress.org/support/users/qubed/)
* (@qubed)
* [14 years, 9 months ago](https://wordpress.org/support/topic/how-to-extending-containing-elements/#post-2237764)
* 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.
* [peredur](https://wordpress.org/support/users/peredur/)
* (@peredur)
* [14 years, 9 months ago](https://wordpress.org/support/topic/how-to-extending-containing-elements/#post-2237771)
* 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
* [peredur](https://wordpress.org/support/users/peredur/)
* (@peredur)
* [14 years, 9 months ago](https://wordpress.org/support/topic/how-to-extending-containing-elements/#post-2237774)
* 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
* [peredur](https://wordpress.org/support/users/peredur/)
* (@peredur)
* [14 years, 9 months ago](https://wordpress.org/support/topic/how-to-extending-containing-elements/#post-2237780)
* What happens if you replace the html (for the ‘next’ link):
* `»`
* … with
* `
`
* … 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
* Thread Starter [qubed](https://wordpress.org/support/users/qubed/)
* (@qubed)
* [14 years, 9 months ago](https://wordpress.org/support/topic/how-to-extending-containing-elements/#post-2237786)
* 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?
* Thread Starter [qubed](https://wordpress.org/support/users/qubed/)
* (@qubed)
* [14 years, 9 months ago](https://wordpress.org/support/topic/how-to-extending-containing-elements/#post-2237787)
* Also, where would I find the html to replace?
* [peredur](https://wordpress.org/support/users/peredur/)
* (@peredur)
* [14 years, 9 months ago](https://wordpress.org/support/topic/how-to-extending-containing-elements/#post-2237795)
* 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
* Thread Starter [qubed](https://wordpress.org/support/users/qubed/)
* (@qubed)
* [14 years, 9 months ago](https://wordpress.org/support/topic/how-to-extending-containing-elements/#post-2237798)
* The slider is different than on the other site. This slider on vlkr is the “anything
slider” : [http://css-tricks.com/3412-anythingslider-jquery-plugin/](http://css-tricks.com/3412-anythingslider-jquery-plugin/)
* The slider on illiam is jflow : [http://plugins.jquery.com/project/jFlow](http://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.
* [peredur](https://wordpress.org/support/users/peredur/)
* (@peredur)
* [14 years, 9 months ago](https://wordpress.org/support/topic/how-to-extending-containing-elements/#post-2237811)
* 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
* Thread Starter [qubed](https://wordpress.org/support/users/qubed/)
* (@qubed)
* [14 years, 9 months ago](https://wordpress.org/support/topic/how-to-extending-containing-elements/#post-2237818)
* 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
Viewing 15 replies - 1 through 15 (of 16 total)
1 [2](https://wordpress.org/support/topic/how-to-extending-containing-elements/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/how-to-extending-containing-elements/page/2/?output_format=md)
The topic ‘How To: Extending Containing Elements?’ is closed to new replies.
* 16 replies
* 2 participants
* Last reply from: [peredur](https://wordpress.org/support/users/peredur/)
* Last activity: [14 years, 9 months ago](https://wordpress.org/support/topic/how-to-extending-containing-elements/page/2/#post-2237851)
* Status: not resolved
## Topics
### Topics with no replies
### Non-support topics
### Resolved topics
### Unresolved topics
### All topics