Jump to content

Liquid Layout


Max Quinn

Recommended Posts

Ok so i've designed this web site using photoshop and dreamweaver. I'm not exactly very experienced so i did it using frames. It looks fine in my resolution on Internet Explorer but on any other browser (firefox etc.) or any other resolution, it all goes muckety muck.

I have looked at changing the pixel values to percentages but it just doesn't seem to work and as it's a reasonably complicated design is taking ages. Is there anything else i could do to sort the problem or is there a program i could download that would automatically change the px values to percentages?

I've also tried designing it again in 800x600 but then, when i run the page in a higher res, instead of just going into the middle with space on the outside, it just goes all messed up and all over the place. How could i sort that out?

So what would be my ideal solution and what would be the quickest and easiest way to do it?

Thanks very much in advance, Max.

Link to comment
Share on other sites

Trying to do a Liquid is all well and good, and it may sound super easy, the reality however, is far from that.

I will go on the assumption that you are using a table layout. Which is strike one, tables are for tabular data, not to design a site with (yes i realise trials-shack is a table layout, v3 however isn't.). My next assumption is that you are using images, for banner or whatever, this is strike three. Remember, a cell will only go to what the image restrictions are. Then going back to the table strike. Cell's can't move indepentenly, adjust one, and you have to adjust the others.

Also, check your HTML, check it again, then check it a few times more. Someone asked for help on MSN the other day, and it was in fact an error in his code, he had forgotten to end an attribute value with the ending quotation (").

However, if you are actually using layers (<div>) then thats a completly different matter, and requires a shit load of work. :- It is however easier in the long run then using table layouts.

Hmmmmmm, i rambled quite a bit :P

Link to comment
Share on other sites

I'm not using tables or layers, i'm using frames. :-

Maybe layers would be a better way to do it though? Can you maybe direct me to a tutorial on making a page with layers as i have no idea.

Is there any way of doing liquid layout with frames?

Thanks very much, Max.

P.S. I cant link to the page as it isn't up yet, maybe later on i'll upload it somewhere quickly for you. :P

Link to comment
Share on other sites

Frames? :P

Frames adjust auto as it is. Your doing a left right top layout i guess? With navigation on left, in a frame, banner at top, in a frame, then content on right in a frame. If thats the case, the frames will span the width of the screen anyway.

Unless your using iframe's, but then there has to be a page for it to sit in, so my other comments still stand.

Google for "div website layout" or something to that effect, and find one that best suites your learning style, as theres quite a few.

Link to comment
Share on other sites

I am also interested in learning the correct manner for achieving a liquid layout using div tags. In the past i have created a liquid layout using tables with percentage values in this manner to create a page always appears centrally in a browser window:

<body>

<table width="100%" border="0" cellspacing="0" cellpadding="0">

  <tr>

    <td width="20%">&nbsp;</td>

    <td width="60%"><img src="nemban.jpg" width="600" height="112"></td>

    <td width="20%">&nbsp;</td>

  </tr>

  <tr>

    <td>&nbsp;</td>

    <td><img src="nav2.jpg" width="504" height="19" border="0" usemap="#Map"></td>

    <td>&nbsp;</td>

  </tr>

  <tr>

    <td height="230">&nbsp;</td>

    <td><iframe name="ifrm" src="index_body.htm" width="100%" height="350px" frameborder="0" ></iframe></td>

    <td>&nbsp;</td>

  </tr>

</table>

Is there a way to create a similar effect using the greater flexibility of layers rather than tables? I have looked at div tag tutorials on the web, but non seem to address this particual goal. I have a reasonable knowledge of coding (well i can write code to form a website, how good it is i am unsure), so really i just need a method rather than any detailed coding knowledge.

If anyone can point me in the right direction i would be most grateful.

Link to comment
Share on other sites

Frames adjust auto as it is. Your doing a left right top layout i guess? With navigation on left, in a frame, banner at top, in a frame, then content on right in a frame. If thats the case, the frames will span the width of the screen anyway.

Hmm i think thats the problem there's about 15 frames in the page :P.

I'm using them to have two boxes, one bigger in the middle, one smaller on the right, so that you can scroll down just the content of those frames and everything else stays the same.

I'll search through those tutorials now and see what comes up and also think about redesigning the page differently.

Thanks again, Max.

Link to comment
Share on other sites

I am also interested in learning the correct manner for achieving a liquid layout using div tags. In the past i have created a liquid layout using tables with percentage values in this manner to create a page always appears centrally in a browser window:

Is there a way to create a similar effect using the greater flexibility of layers rather than tables? I have looked at div tag tutorials on the web, but non seem to address this particual goal. I have a reasonable knowledge of coding (well i can write code to form a website, how good it is i am unsure), so really i just need a method rather than any detailed coding knowledge.

If anyone can point me in the right direction i would be most grateful.

http://www.htmldog.com/guides/cssbeginner/

and

http://www.w3schools.com/css/default.asp

Should help alot (Y)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...