PDA

View Full Version : Overflow for tables & divs?


scifin
02-07-2008, 07:47 AM
Making this page for a friend http://giuntababy.scifinmusic.com/gparents.html but I need to set it up so that just the table in the "main" DIV will scroll vertically (only vert not horiz) if the content expands beyond the visible bottom of the table. As an example, this particular page, The Grandparents, currently only has one set of grandparents on the page but I'll need to add the other set which will increase the vertical size of the table

I am trying to make it so that the overall size of page doesn't expand any bigger than it already is @ 750x660 and since all of the individual page content is going to go in the table in the "main" DIV I need to set the code so that that table will scroll.

I can post the source here if it'd help but I figure if you are in this forum that you already know how to view it.

Any help would be greatly appreciated!!!

domedia
02-07-2008, 03:03 PM
Not really sure yet what you're trying to do :)
But if you want a vertical scroll, simply set a wider width on the inner element and make sure that the outer elements overflow in CSS is set to auto.

scifin
02-07-2008, 03:58 PM
Basically I just need to make sure that the table, where the text and pic of the grandparents is, is a set vertical size and that once the content in that table goes beyond that set size that the table will scroll.

I just don't want the page to ever exceed 660px vertically and the only thing that'd make it go beyond the 660 is if that table grows beyond it's set size.

This is a link to a screen capture of DW that illustrates what I am talking about: http://giuntababy.scifinmusic.com/gp-page.gif

domedia
02-07-2008, 04:19 PM
Just set a height on your table.
To make it even better, make it a DIV instead. No reason to put in table as a container for text. Then set a height on the DIV, whichever you want, and set overflow to auto like this:

<div id="main">
<div style="height: 400px; overflow: auto;">Your text and stuff about grandparents here</div>
</div>

This would be a great time for you to drop tables all together.. they're very hard to work with and they're really intended for tabular data :)

scifin
02-08-2008, 06:46 AM
I took out the table and tweaked size and margins of the main div; can you check it out and see if the code is OK?

http://giuntababy.scifinmusic.com/gparents2.html

domedia
02-08-2008, 12:24 PM
Looks great!

scifin
02-08-2008, 02:19 PM
Right on, thanks! Now all I need to do is fix the code on the other 11 pages, lol.

domedia
02-08-2008, 02:25 PM
The *only* comment is design-wise. Creating a minibox like that to put the scroll in can be very frustrating for some. You're trying to control the content instead of letting the browsers automatic scrollbars take care of it.

Here's a nice rant: http://www.peterme.com/?p=621

scifin
02-10-2008, 02:55 PM
I redid all of the pages and filled most of them with content but I am having a MAJOR PROBLEM!!! On my computer I've tried each page in FF, IE7, and Safari and all of the pages look exactly like they are supposed to, HOWEVER when my friend Jessica (who is the one having the kid) looks at any of the pages on her computer all of the stuff that should be in the 'minihead div' and 'main div' (the ones on the right of the page) she says that they display under the bottom of the menu.

I'm figuring that the size of those 2 divs is too wide but even when I shrink them a bit she still sees them under the "Contact Us" menu button.

I honestly have no clue how to fix this; any ideas?

domedia
02-10-2008, 07:20 PM
You would have to get some info on her environment. She could be using NN4, with images and js disabled for all you know. You can't fix something you don't know what is.

scifin
02-11-2008, 06:34 AM
Well, I had a few other people try the pages out and they all had the same problem; the content of the mini-head & main divs shows up under the bottom of the menu.

I made a whole new testing page from scratch at http://giuntababy.scifinmusic.com/testing.html. I tried to just make it as simple as possible and dumped the mini-head div all together and just put that image at the top of the main div.

Again it looks to me like it works just fine in FF, IE, and Safari but I'm waiting for word from a few people I just sent the link to to see if it is displaying properly.