Liquid website design using CSS

[bradyj]

I see many liquid websites out there that are extremely flexible for different monitor sizes, example:
phpbb.com (http://www.phpbb.com/)

And I'm wondering how you accomplish certain elements such as the top menu header using CSS positioning in this page?

Most importantly, how do you get the buttons to line up like this and be flexible with their spacing with each other?

...and, how do you make the header background on top (which I'm guessing is a table background) so that it is also flexible, and stretchs for the page without using tables?

[Spookster]

phpbb is not using CSS to layout their pages. They are just using tables set with percentages which of course adjust to the browser size.

For a truly fluid layout using CSS there are examples here:

http://glish.com/css/

This topic would also be better suited in the HTML/CSS forum.

[Vladdy]

You can get some inspiration here www.klproductions.com/home.html ... (hope I'll find time to finish this site one day)....
You are welcome to poach the code...

[bradyj]

Thank you both for the input, I will view the source, read and learn --

Spookster, you are welcome to bump me to the proper forum as you see fit.

[Spookster]

Originally posted by bradyj
Thank you both for the input, I will view the source, read and learn --

Spookster, you are welcome to bump me to the proper forum as you see fit.

I do not have the power of moving in this forum, only my own. :( I am sure the mod for this forum will be along anytime now to move it.

[ronaldb66]

Bradyj,

the main considerations are using percentages for widths, and keeping image size down, at least enough to fit a window with the minimally desired width (I don't mean the background images, they don't matter as much).

A great example of a fluid, full-CSS layout is The Web Standards Project (http://www.webstandards.org/); I especially love the divider lines, which are background images but scale to width as well; very elegant! :thumbsup:

[cg9com]

Originally posted by Spookster
I do not have the power of moving in this forum, only my own. :( I am sure the mod for this forum will be along anytime now to move it.
dun dun da dun!
go go gadget mouse!

*click*

[ionsurge]

Quick pointer, make sure you do some cross-browser testing for that, it often looks different in Opera, NS, Moz and IE. Occasionally you get three to have it look right, but one decides it doesn't like it.


:)

[bradyj]

As we are develing into this, and I imagine it will be transferred to a new forum -- I've read the benefits of the <div> tag to keep things useful, but are they really needed? I have yet to use them, and I have seen their power -- since all those sites that were posted show them in use -- but can't you just make seperate classes for each <p> or img and get away with it?

[liorean]

The divs are really for when there exists no tag that is more semantically correct to use. Note however that div isn't entirely lacking in semantics either, and for divisions of a page (like navigation, branding, contents, sidebar, linkage areas etc.), it might even be the semantically most correct one to use.

But, generally, a too div-infested design is just as bad as a table-infested one. The design that is most appropriate is the design that uses the most semantically appropriate tag in any given situation for any given content. Of course, you sometimes have to make offsteps for this rule to either get your wanted presentation to work, or to appease the validator. Sometimes the specs have a semantically perfect tag, but doesn't allow that tag inside the tag you're wrapping it in. That's a good time to bring up old faithful div.

[bradyj]

Utilizing all of your input (thank you liorean for the div lesson, it's gotten me interested and on the right track), I've done a little test site utilizing the tutorials given to me by Spookster, Vladdy, and Ronaldb66, but I've noticed that the NESTED COLUMNS tend to do some wacky stuff in Mozilla builds.

The padding and margins to the right, go all the way to the edge of the screen on Opera/IE/Safari, but Mozilla puts the columns to the edge of the window, and makes you scroll a tad to the padding.

Any way around this?

Example:
sample site (http://www.dotfive.com/yourhouse/main/templatecol.html)

[liorean]

Oh, I recognise that problem. I was having it in the beginning of my learning css pretty often. Here's the deal:

You set width to 100%, which is fine by itself. This means the width will be 100% of the width of the container. In this case the container is 100% of window width. On that you add a 10px padding and a margin. That means you end up with something larger than 100%. This is a problem with CSS positioning that has no easy answer yet (CSS3 has one coming up), but the best suggestion I can give you is to be consistent; if you use percentages for width, you should for best handling use percentages for margin and padding too. I know this is not ideal, but that's life for the moment. That's why you often see the combination <div style="width:100%;"><div style="padding:10px;">contents</div></div> instead of one single div.

[bradyj]

Ahh, I see -- though unusual, that makes sense, and is an easy change via style sheets -- thank you!!! The change from tables to CSS, though odd at times, is fun to figure out and move ahead... I imagine I'll be posting quite a few more times as I move along; thank you for helping me figure out the quirks as I go:)