Forum Moderators: not2easy
Right now, I have 3 sections of the site (header, content, footer) using three seperate tables that are 800px in width and centered in the browser window. This is how I want the main pages of the site to look.
When visiting a member's profile, the member may have added an oversized image (or a friend posted an image) to either a left or right section of the profile page (ie. guestbook, about me, music, etc) which is larger than the table widths nested in the content table. When this occurs, the nested tables automatically adjust to the width of the image, and the content table automatically adjusts and still stays centered in the page. This adjustment takes place until the table hits the left side of the window, then a bottom scroll bar appears in the browser and it is necessary to scroll right.
As the content table expands, the header and footer remain the same 800px width and centered in the page.
Basically, I want the main view of the site to be 800px wide and centered. If a profile does not have oversized images, it will appear this way too. With oversized images, the content will expand like a table does.
So, is there a way to mimic this behavior using only CSS and DIVs?
I've racked my brain on how to accomplish this without tables and I can't think of a solution. Any pointers would be welcome.
If it is necessary to know, I'm using XML and XSLT to output the html code.
Thanks
Of course, you can do the styles in CSS-
#header, #content, #footer {
position:relative;
width: 100%; /* not necessary as it is default if you do not want it to expand, make the width 800px; */
}
Hope this helps,
Marshall
That solution will not work for me. It will just make everything 100% and expand with the browser window, or 800px and not expand the content section like it should.
The content area needs to default to 800px wide and centered in the browser window when there are no oversized images within the sections (left and right columns will contain div sections...about me, music, books, guest book comments, etc.). When there are oversized images placed in these sections, the content area needs to expand and stay centered and not effect the header or footer.
As for using script to resize images, is that possible when the pictures are hosted at other sites like photobucket?
From reading on the net, it seems table widths not being adhered to by browsers when the table contents are larger is an throw back to the old days. At least that is what I get from it. It is no surprise to learn there might not be a way to do this using CSS.
img {
width:?px;
}
img.site { /* This would be use for you site images which would have to have class="site" added to them*/
width: 100%
}
-or-
If the content section contains only images your members post:
#content > img {
width:?px;
}
In either case, just assign the width and the height should auto adjust.
Marshall
Otherwise... your left with what you sowed. Fixed width pages I think are silly, and it's especially silly if the chances are high there'll be images wider than the container.
Other options: have the images overflow outside of the container, have the images cut off by the container boundary (one of these is probably already in effect), or have scrollbars for images which are too large, which might be difficult to do for two reasons: 1. you probably wouldn't be able to have divs auto-inserted around images, 2. you'd need to know the size of the image which breaks the container... (which might not be the same for each page?)
Of course you can try dynamically resizing the container with javascript when iamges are too large, but not only would I not recommend it, but it's probably difficult to do.
Xapti: I tend to agree with you. However, I've seen a liquid layout on another community site like mine and it looks like crap.
