Fluid web design

[ikkitousen]

Hi i was wondering if anyone knew how to create a fluid web design.

An example would be if i updated my site then it would adjust itself automatically without anything breaking such as large gaps on the website.

Is it also possible, to create a website to stretch to the viewer’s resolution without breaking anything?

I mainly use Photoshop and slice it up and place it into dreamweaver but i want to design a "fluid" website.

And am wondering how i would do that. I don’t mind learning CSS and such to do all this but I just am lost right now and just need abit of help

Thanks

[Iain]

http://www.alistapart.com/articles/holygrail

[directhex]

the key to modern web design is separating content and design. this means only using really really simple HTML that serves to describe your document - like <p> for paragraphs and <a> for links, wrap up common sections with <div> or <span> tags (their uses vary slightly), then describing the actual style of the page using CSS. <table> should never be used for layout, and use of the <font> tag should be punishable by hanging.

visit http://www.csszengarden.com/ - if you click the links on the right-hand side of the page, it changes the CSS file being used, and only the CSS file - the rest of the page (i.e. the HTML) remains the same. it's a perfect illustration of separated content/design - if you "view source" on the page, you should spot simple HTML - <p>, <a>, <span>, <div>, and not a lot more.

oh, and check everything you do with all the major rendering engines - gecko, trident, presto and khtml

[mike_w]

Directhex has pretty much hit the nail on the head. Learning (X)HTML is not really that hard owing to the fact that there's very few tags to learn, and there's nothing complex about it. CSS, on the other hand, leads to all sorts of fun, frequently due to battling with Internet Explorer.

WYSIWYG editors aren't always particularly useful since they can add a lot of extra code that is completely unneccesary, as well as not always being compliant with the W3G standards.

Incidentally, having looked at the link from Iain, I would make one suggestion - use relative units where possible i.e. use em instead of px or pt.

[Funkstar]

Those are a couple of really good links. I've been out of the web design thing for almost 5 years now, and things have changed quite a lot in that time (not exactly surprising is it).

A couple of those CSS Zen Garden styles have given me some ideas on how to style my own website/blog etc.

[ikkitousen]

Thanks for the advice guys!

There is so amazing work over at http://www.csszengarden.com, the features of CSS sound great but there is just so much resource for it out there, i don’t know where to begin learning.

Is there a good basic CSS tutorial anyone of you would recommend?

Thanks for the help!

[directhex]

Thanks for the advice guys!

There is so amazing work over at http://www.csszengarden.com, the features of CSS sound great but there is just so much resource for it out there, i don’t know where to begin learning.

Is there a good basic CSS tutorial anyone of you would recommend?

Thanks for the help!

learn the difference between block-level and inline

learn the assorted margin: and padding: settings

that's the important bits for design. the rest's all clever application and font twiddling

[Funkstar]

twiddling

good word

[yamangman]

Zen Garden pages may look nice, but very few of them are fluid layouts. Also you may want to consider the effects of using the CSS presentation/content paradigm on those who posses older machines/software.

[ikkitousen]

Thanks directhex you've been a great help and yamangman thanks for the tip!

Better get learning