logo-dw

Go Back   Dreamweaver Club Forums > Graphic Design > Web Design
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 02-09-2010, 06:17 PM   #1
the137
 
Join Date: Feb 2010
Posts: 17
Default What is this design called?

Whats up all, first post. I apologize if this has been answered before, but I don't know what to search.

I want to know what a design of this type is called.

example www.hondahookup.com

It has multiple columns that change size with the browser. It also "floats"? as in you can see the boxes slide apart slightly when the browser size is changed.

Specifically, I'm just looking for a term or name to search so that I can figure out how to build my own.

Optimistically, if anyone has a tutorial they can link me to (I run CS4), I would greatly appreciate it, but honestly I can deal with just what the layout is called.

Thanks to all who respond.
the137 is offline   Reply With Quote
Old 02-09-2010, 10:33 PM   #2
walkamongus
walkamongus's Avatar
 
Join Date: Aug 2008
Posts: 145
Default

hey, welcome. i believe the term is "liquid layout". the one of these that ive had experience with was tricky but it is a cool effect!
walkamongus is offline   Reply With Quote
Old 02-09-2010, 10:36 PM   #3
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,164
Default

dont use that as a code role model, apart from using tables (not good) it returns 99 errors and 7 warnings which although im not saying they are a crime it is a lot.
it seems to me all you need is a fluid design if you wanrt a name, there isnt a name for that design you mention, well not a polite one at least
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Old 02-10-2010, 01:00 AM   #4
the137
 
Join Date: Feb 2010
Posts: 17
Default

Thanks for looking at the example code, how do you get it to throw errors?

I'm good with a less than polite name, as long as it brings me to my final destination :-p

"Liquid" is actually one of the templates in cs4, but the different columns are part of one bigger column, which can't be separated (as far as I can tell)

Thanks for the help you guys.
the137 is offline   Reply With Quote
Old 02-10-2010, 06:09 AM   #5
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

102 errors & 19 warnings by W3C

validator.w3c.org

Anyways apart from all these errors and a shitty table based layout... to achieve an effect like that (liquid, fluid, whatever) you need to set the widths of your divs in percentages rather then pixels and your font sizes in em's and make use of a min-width. Like mentioned by Walkamongus it is tricky, but of course there are javascript and CSS hacks (if that's what you want) to resize your images as well and that will make it easier for you to achieve cross-browser, liquid layout.

Last edited by gentleone; 02-10-2010 at 06:26 AM..
gentleone is offline   Reply With Quote
Old 02-10-2010, 04:45 PM   #6
the137
 
Join Date: Feb 2010
Posts: 17
Default

Great resource, great information. Thanks guys.
the137 is offline   Reply With Quote
Old 02-11-2010, 01:44 PM   #7
the137
 
Join Date: Feb 2010
Posts: 17
Default

lol, thanks for sending me in the right direction
the137 is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 06:56 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com