Trying to make a fluid page

Forum Moderators: open

Message Too Old, No Replies

Trying to make a fluid page

LastZion

8:32 pm on Sep 12, 2004 (gmt 0)

So I finally got my page the way I want it, and I'm quite proud of it... but of course i didn't keep in mind other screen resolutions. So I did a search here and did some reading and relized I want to go the fluid way. However I can't seem to understand the % vs pixels. What is it a % of? I understand if its a table/image in a layer then thits % of the layer. But when I just radomly start assigning percentages I can't seem to grasp it.

So I guess my question is: Is there a way that I can take my existing page (3 frames, 4 tables and 2 images) and "convert" it to a fluid page? Or do I have to start from scratch?

photon

1:55 am on Sep 13, 2004 (gmt 0)

The percentage is based on the container for the element you're sizing.

For example:


<body>
 <div id="one">
 ...
 <div id="two">
 ...
 </div>
 </div>
</body>

with CSS


#one {width:80%;}
#two {width:70%;}

Div "one" will be 80% the width of the <body> which in most cases will be the width of the browser screen. Div "two" will be 70% the witdh of div "one", since it is contained within div "one".

Now if you're talking about font sizes, 100% will be the size of the default font of the browser. That will vary depending on each individual user's browser settings.

limbo

1:20 pm on Sep 13, 2004 (gmt 0)

Or do I have to start from scratch?

Pretty much. It's a pain in the behind but you could do a lot worse than converting. However there are plenty of very successful sites that do not use fluid layout and do very well. Maybe you could just resize your site for the lowest common denominator? 750px seems to be safe enough.

Are you using a WYSIWYG editor? Templates? Dynamic pages? And how large is your site? all these this might influence you decision to switch.

TheDoctor

2:49 pm on Sep 13, 2004 (gmt 0)

LastZion, if you've used CSS then the conversion won't be a particularly difficult job. It'll certainly be easier than losing all the custom from people who don't have screen resolution or browser window the same size as yours :)

LastZion

2:49 pm on Sep 13, 2004 (gmt 0)

Are you using a WYSIWYG editor? Templates? Dynamic pages? And how large is your site? all these this might influence you decision to switch.

I'm quite new at all of this. So I don't know what a WYSIWYG editor is. Templates I am not using, probably should be....
I am using Dreamweaver and what I have is a 3 Frame (which I'm not overly crazy about) setup. When you click in the main frame, on a date say, it launches something in the top right frame, which should be a template but since I don't really know what I'm doing, I just made 15 pages from scratch, then that loads a few links into that table in that frame. AFter you click on one of those links that brings up something in a similar sized table below that frame in the 3rd frame.

So I'm not sure if that is what you mean by dymaic or not...

photon

3:16 pm on Sep 13, 2004 (gmt 0)

WYSIWYG = What You See Is What You Get

Meaning essentially an editor that lets you design a page without having to know the coding that goes into it. Dreamweaver qualifies in that respect.

R1chard

5:17 pm on Sep 13, 2004 (gmt 0)

Yeah, it pretty much does what it says on the tin.

%: usually of the parent element, starting with the page and working down to paragraphs and tables and whatever. photon's example looks very good. If you just want to try sticking numbers in and understand it that way, try starting with 100% and then keep reducing it until you know what's going on.

pixels: fixed width no matter what else happens. Good for images or menus, probably not so good for anything else.

Depending on what DW has done, it should be reasonably straightforward to change the code over to a fluid layout.

Actually, on a related note: I've always wondered why max-width can't be applied to frames... You can set <frameset cols="25%,*", or specify it in pizels, but applying this CSS doesn't seem to work (even in the vast majority of modern browsers, that support it no problem for everything else). Is this just a spec oversight, or is there any reasoning behind it?

LastZion

7:05 pm on Sep 13, 2004 (gmt 0)

What I endend up doing was creating 4 columns with my main page allocated to the central 2 for 800x600 so when I view it at that res its fine, and when I got to a larger one... its still in the center.

Thanks for all your help guys