stupid question (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility



Message


curious monkey -> stupid question (5/15/2006 13:58:47)

Ok I am trying to teach myself CSS using tutorials on the web and reading forums (I have yet to buy a book, although I think I'm going to get The Zen of CSS design). Anyway, I see people making comments about "liquid designs". I can only infer that it means that it resizes when the window resizes. Am I way off base or just thinking that there is more to it? It is almost embarrassing to have to ask but I cannot find the answer. [&o]

Thank you in advance,
The Curious One




Tailslide -> RE: stupid question (5/15/2006 14:18:10)

No - you're spot on.

Liquid designs have percentages for layout sizing and so expand and contract with the browser window.
Elastic designs expand and contract with font-sizing.
Jello designs make a big mess on the keyboard!




womble -> RE: stupid question (5/15/2006 14:27:39)

Not a silly question at all. Yes, you're right - liquid designs (also known as fluid designs) resize to fit the browser window. Measurements for page elements are usually in %, so for example if you had a two column design you might set the width for your left column as 40% and your right column as 59% (I usually shave a % of two off one of the columns to allow for border/margin differences between browsers), so whatever the window size, the left column would take up 40% of the width of the screen and the right 59%.

You can also have semi-fluid designs where one or more columns have a fixed width in a multi-column layout - you'd have a fixed width column specified in px or ems or whatever, and fluid part in % which again would fill the specified percentage of the page.

There's a lot of info out there on css layouts. The W3Schools is always a good place to start. There are also a lot of tools out there to help with layouts - this is one I found the other day that does 2/3 column layouts that's quite good - http://www.csscreator.com/version2/pagelayout.php - pick your doctype, header, footer, number of columns and widths and it produces the basic html and css for the design and is then something you can build on.

<edit>Grrr! Beaten by Tail again! [:D]</edit>




curious monkey -> RE: stupid question (5/15/2006 14:38:08)

[sm=yupi3ti.gif]
I was on the right track!!!! now to learn and implement it. as you can see on my horrilbe first try (www.treationsinc.com) i guess I tried. there's so much wrong with that site I'm thinking about starting all over.

quote:

original: Womble
<edit>Grrr! Beaten by Tail again! </edit>


ha. [:D] but both are valuable comments.




Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125