Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8

Thread: liquid layout

  1. #1
    New Coder
    Join Date
    Jan 2011
    Posts
    55
    Thanks
    7
    Thanked 0 Times in 0 Posts

    liquid layout

    Hey all,

    I tried my hands on a liquid layout website and it seems that everything turned out alright, its just that (in IE expecially) is that when I zoom the percentage of the browser, the text in the body spills out the divs.

    Not really sure why this happens.
    the site is at http://www.cherryart.co.za

    Thanks
    mc

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    When aiming a liquid layout, the better unit of measurement to be used is em. Otherwise the layout may break even in FF, if the user has set "Zoom text only" under the "View" tab in his browser.

    Have a look at http://jontangerine.com/log/2007/09/...youts-with-css
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Jan 2011
    Posts
    55
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Is there any way to keep a liquid layout and have the div resize with an increase in size?

    And I also wanted to know if I coded anything badly in terms of liquidity, since this is my first attempt at a liquid layout.

    Thanks

  • #4
    New Coder
    Join Date
    Jun 2011
    Posts
    58
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by mr curious View Post
    Is there any way to keep a liquid layout and have the div resize with an increase in size?

    And I also wanted to know if I coded anything badly in terms of liquidity, since this is my first attempt at a liquid layout.

    Thanks
    Try replacing the em with % for your div.

  • #5
    New Coder
    Join Date
    Jan 2011
    Posts
    55
    Thanks
    7
    Thanked 0 Times in 0 Posts
    I haven't used em's. Its all in %. if you'll take a look at the link to the site

  • #6
    New Coder
    Join Date
    Jun 2011
    Posts
    58
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Any value set using % will change as the size of browser window changes: the bigger the browser, the bigger the padding will come.

    If you want your design to scale well with different font sizes, then you use ems. So if users increase their browsers font sizes, then sizes set in ems will also increase accordignly.

    Using px is for precise design with graphical elements that line up exactly, regardless of browser window size or font setting.

    By the way, i checked your source code and you got few errors.
    For the Cherry Art, when using <span> dont use "id" use "class" instead.
    <p><span id="cherry">CHERRY ART</span>&nbsp; produces a wide range of prints…
    For all the <spans id=""> change the id to class <span class="">

  • #7
    New Coder
    Join Date
    Jan 2011
    Posts
    55
    Thanks
    7
    Thanked 0 Times in 0 Posts
    cool thanks Goozex.
    That makes perfect sense. So in a way liquid layouts don't accommodate for everything!
    is there a way to combine a liquid layout with ems?
    so you could still define containers etc with % but the font size with ems?

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    This may mildly interest you.

    Try pulling it around. Size wise.
    "control +" and "control -" will alter the text size without altering the image.
    Frank
    Last edited by effpeetee; 06-18-2011 at 04:38 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •