www.webdeveloper.com
Results 1 to 4 of 4

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

Hybrid View

  1. #1
    Join Date
    May 2013
    Posts
    3

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

    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 overflow: visible;, but than the information at the top and the bottom side is shown as well. How do I make the overflow:visible; just apply to the left and the right side, so that the top/bottom information outside the frame is still hidden?

  2. #2
    Join Date
    Mar 2011
    Posts
    1,137
    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.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    May 2013
    Posts
    3

    Post example

    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.

  4. #4
    Join Date
    Mar 2011
    Posts
    1,137
    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.
    Rick Trethewey
    Rainbo Design

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles