Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 3 1 2 3 LastLast
Results 1 to 10 of 23

Thread: liquid design

  1. #1
    Member
    Join Date
    Aug 2005
    Posts
    87
    Member #
    10945
    Hi, I came across a huge problem today: I don't know if I should design for 800X600 15" monitors or for the 17" monitors. I was wondering if anyone knew where I can find tutorials on "liquid design" that I keep hearing about. Also, is it true that a Flash movie or CSS-formatted HTML are two design elements that can "shrink or enlarge" images in order to stay proportional with the monitor size?

    Right now I created this design using a 17" monitor but when I viewed it on my client's site, the design had to be scrolled to the right and down in order to be fully viewed!!!

    help!

  2.  

  3. #2
    Senior Member Rince's Avatar
    Join Date
    Nov 2004
    Posts
    183
    Member #
    8318
    There are two camps here. You either design for 800 wide screens and put up with the large borders on bigger screens. Or you use % sizes in your widths so that the page expands and contracts with the window size. For example:
    Code:
    <table width="100%">
    <tr><td width="200px">left menu</td><td width="100%">center content expands</td><td width="200px">right menu</td></tr>
    </table>
    This table will change size to perfectly fit whatever screen resolution is used.

    In general, resizing images does not work well at all. But there are tricks you can get up to. If you have a graphic that is constant in one direction, then you can tile the image in that direction. This can be done simply by putting the image in the background of the element and setting the css to repeat or repeat-y or whatever. This will create the illution that the image is streached right accross the background of the page element. While it is infact say 1px wide and 100px high, it looks like it's 800px wide and 100px high.

    You can use such tiled images to fill the gaps between other images to look like they are all joined together. For example, look at the header of my site www.goto-domain.com It looks like one contineous image. But it's really 3 images. One on the left, one onthe right and one in the background tiled across the space between them so that it all looks like one whole. Whatever size of screen/window you use, the graphic just looks like it fits perfectly.

  4. #3
    Member
    Join Date
    Jul 2005
    Posts
    39
    Member #
    10659
    Tables are your solution? Tables are dead, use DIV tags. They render faster, organize data more logically, and are more accessible to blind people (text to speech readers can make more sense of DIV tags than tables).

    *edit*
    http://www.devarticles.com/c/a/Web-S...ut-with-CSS/7/

    Correction, DIV tags are easier to parse and makes sense of for any thing that reads source code text. This includes: humans, web browsers, text-to-speech readers, and search engines. With table layouts associated fields are not side by side, they can be dozens of lines away depending on the complexity of the table.

  5. #4
    Senior Member Rince's Avatar
    Join Date
    Nov 2004
    Posts
    183
    Member #
    8318
    Tables are your solution?
    No - table are not my solution. Tables are my example.

    There are more ways to make a web site that there are web sites listed in google. But when you make an example you have to choose one. So quit flaming at me for metioning the "table" word and answer the thread starter's question.

  6. #5
    Member
    Join Date
    Jul 2005
    Posts
    39
    Member #
    10659
    I'm not flaming you, I'm just trying to help put an end to table misuse. There are better ways now and that's what people should learn. Tables are for spreadsheets and statistics. If you like them then that is fine, but DIV tags are the better method and I will let people know this. If you ever find an error with something I say, then feel free to correct me. I like learning and I seek to do things in the best way possible.

  7. #6
    Senior Member Fallout's Avatar
    Join Date
    Aug 2003
    Location
    Richmond, Virginia
    Posts
    543
    Member #
    2748
    T1, it was just an example of something being liquid. He could have used divs or even explained it in relation to rubber bands or something.

    Deffvaltez, for a liquid design you usually only pick one element that will expand or contract. A three-column site usually has the main/center content area as the liquid element and static side columns.

  8. #7
    Senior Member
    Join Date
    Feb 2005
    Location
    Canada
    Posts
    435
    Member #
    8983
    if you are wanting a fluid design without tables use css percentages:
    HTML Code:
    <div style='width:70%;margin-left:15%;'>content will be centered</div>
    you can scale most any element useing the above method

    I'm just trying to help put an end to table misuse. There are better ways now and that's what people should learn. Tables are for spreadsheets and statistics. If you like them then that is fine, but DIV tags are the better method and I will let people know this.
    many pages are written in tables to insure compatability on non-javascript browsersas the w3c states in its accessability documentation:
    tables may be used for positioning but should not be embeded
    Thee Pyro Wolf

  9. #8
    Senior Member MoRpHeUs's Avatar
    Join Date
    Apr 2005
    Location
    UHS-VILLE
    Posts
    139
    Member #
    9568
    instead of using tables, wouldn't it be better to use css?

    I'm not here for you, I'm here to raise your discomfort

  10. #9
    Member
    Join Date
    Jul 2005
    Posts
    39
    Member #
    10659
    many pages are written in tables to insure compatability on non-javascript browsersas the w3c states in its accessability documentation:
    tables may be used for positioning but should not be embeded
    What do DIV tags with CSS have to do with javascript? Also your example used inline CSS, its better give the DIV tag a class and put the CSS either in the header or on a separate file. All modern browsers support CSS (Opera, Mozilla, IE, AOL Explorer) and almost everyone online has a modern browser. Supporting older browsers is mostly a waste unless you want cell phones and PDA's to be able to view your site and they likely support DIV tags with CSS too. This isn't a recent invention and it doesn't require any scripting to work.

  11. #10
    Senior Member MoRpHeUs's Avatar
    Join Date
    Apr 2005
    Location
    UHS-VILLE
    Posts
    139
    Member #
    9568
    this is true,As a matter of prefrence I prefer to use a hybrid over just css or just tables.

    I'm not here for you, I'm here to raise your discomfort


Page 1 of 3 1 2 3 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:30 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com