Forum Moderators: open

Message Too Old, No Replies

Making a site LIQUID?

How to make you site fit any Browser?

         

bossmanty

12:47 pm on Jul 22, 2003 (gmt 0)

10+ Year Member



How do set up your margins to make your site fit any browser or monitor?

Nick_W

12:48 pm on Jul 22, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Learn HTML and CSS?

Nick

chris_f

12:52 pm on Jul 22, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Use % widths rather then pixels.

ATOB
c

marek

1:00 pm on Jul 22, 2003 (gmt 0)

10+ Year Member



bossmanty, you need not set up anything to achive liquid layout. Liquid width is a nature of HTML. On the contrary, you have to set a fixed width, if you prefere it.

bossmanty

8:46 pm on Jul 22, 2003 (gmt 0)

10+ Year Member



Could someone give me the actual code?

DrDoc

8:52 pm on Jul 22, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Anything without set heights/width is liquid :)

<body>I am liquid...</body>

hartlandcat

8:55 pm on Jul 22, 2003 (gmt 0)

10+ Year Member



<something width="x%">

Obviously substitute "something" with whatever you're using -- this could be table, td, div etc., and substitute "x" with the number from 1 - 100, to be the percentage of the window (or object) that this page element is in.
-----------------------------------------------
Well, that's how I'm assuming you want to do it (the easy way), but the correct way is to use CSS (preferably an externally linked stylesheet) like this:

something {width: x%;}

Nick_W

9:28 pm on Jul 22, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



>>Could someone give me the actual code?

Maybe you'd be better off hiring a designer? - This isn't like a snippet of JS you can cut and paste, you're asking to broad a question and you'll probably find that generous as people are here, not many have the time to write the several dozen pages neccessary to explain liquid design starting from <html>.....

Try www.w3schools.com - That's a good bet for learning basic HTML concepts then try This Google Search [google.com] for the specific theories and techniques.

Good luck...

Nick

g1smd

12:45 am on Jul 23, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



There is a reasonable liquid layout article over at evolt.org too.

SlowMove

12:58 am on Jul 23, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



When W3.ORG releases the CSS4 Specification, this issue will be fully addressed. Don't expect miracles with older browsers.

WibbleWobble

9:37 am on Jul 23, 2003 (gmt 0)

10+ Year Member



lol CSS4; you're living in a dreamworld buddy! We can't even utilise all of CSS2 yet :\

victor

9:48 am on Jul 23, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



More advice than you might ever need over at [alistapart.com...]

limbo

11:22 am on Jul 23, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Bossmanty

There is loads of discussions here on the design and pros and cons of liquid page design

do a search of 'Liquid' in the site search here [webmasterworld.com]

It is a massive area of study and there are so many page elements involved but i would start by playing with the % widths of tables

eg:

<table width="95%">
<tr>
<td>content here</td>
</tr>
</table>

ta

Limbo

John_Caius

2:12 pm on Jul 23, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Test whether your content works as liquid or not just by resizing your browser window. If you have your left column as 20% width and your right column as 80% width then they will work to those percentages regardless of the width of the browser window. If you have your left column as 200px and your right column as the rest then the left column width will be fixed as you resize the window and the right column will fill in the rest of the space, however much that is.