/    Sign up×
Community /Pin to ProfileBookmark

overflow: left/right:visible; top/bottom:hidden

Copy linkTweet thisAlerts:
May 09.2013

Maybe the title says enough, but this is my problem

I’ve got an <iframe> on my page with some information: some pictures from calenders with a few buttons, which are a little bit wider than my <iframe>. The page is centered on the pictures, so the buttons are going out of the frame at the left and the right side. I could fix this problem with [I]overflow: visible;[/I], but than the information at the top and the bottom side is shown as well. [B]How do I make the [I]overflow:visible;[/I] just apply to the left and the right side, so that the top/bottom information outside the frame is still hidden?[/B]

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@rtretheweyMay 09.2013 — You can't limit the 'overflow' property to just the horizontal or vertical boundaries. There may be another alternative approach, but we'd need to see the code. Post your code or a link to an example page.
Copy linkTweet thisAlerts:
@DJAxelauthorMay 09.2013 — I've made an example of the page with the problem. You can find it at http://overflowexample.tk/. Pleas read the text in the popup I've made and is shown when the page is loaded or simply read it below:

This is my for this question adjusted page. Watch the <iframe>: the "samenvatting"button beside the "AK SO §3+§4" is not 100% visible. You know my question: How do I fix this, without making the content at the top and the bottom side visible? Just to make things clear: this is a page for my schoolclass (we are Dutch students) with helping tools for our test and homework. The menu will not work in this example.

By the way: this is a Dutch site.
Copy linkTweet thisAlerts:
@rtretheweyMay 10.2013 — This seems to be a question of the design of the structure of the page. The buttons are set to "position:absolute", so you can move them anywhere you like. Since the calendar images have a fixed size, you'll need to change the size of the <iframe> (mostly the width) to be large enough to display both the images and your buttons. You might use a smaller font size for the buttons first, since the available space is so limited. And centering the calendar images may not be the best choice. You just have to work on the design until you get the result you need.
×

Success!

Help @DJAxel spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.27,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...