How would I take a liquid layout from a site such as http://www.graceworkskids.com/index.html

and use that same design style on a sitle like http://1stbytes.com/

What am I looking for in he html code?

The best way to understand the css or html code for a site is to use chrome inpect element or "firebug" of mozilla and check "CSS" ,HTML n script for it
To view example of liquid layout,click here

Member Avatar for Zagga

Hi Garrett85,

A liquid layout would be created using CSS rather than HTML, so you would need to look at and edit the stylesheet.

There isn't really anything you can 'copy' from a liquid layout and 'paste' into a static layout to change it.

Basically a static layout uses fixed widths (eg. width: 45px;) whereas a liquid layout uses relative widths (eg. width: 15%;), or doesn't define widths.

Bear in mind that liquid layouts can look a bit silly (wide and short) on very large screens. You can get round this problem by setting the max-width.

Hi,

PLease allow me to add something. I think the closest design you can probably use that is similar to 1stbyste.com is the twitter bootstrap. It is easy to use and easy to implement. In fact, I use it a lot with smarty templating engine as a parent template...

There is another one, but for some reason I cannot remember its name.. I will post back as soon as I remember the name.. :)

I added this line <link href="a_data/resize.css" rel="stylesheet" type="text/css" media="screen"> to my html code and this line body { width: 100%; } to my resize.css file but I couldn't see a difference.

Hey garett85 thanks for the code, and helping

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.