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 5 of 5
  1. #1
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts

    How to build scaleable, elastic layouts?

    Is it possible to build, at once, a scaleable AND elastic layout?

    If so, does anyone know how this is done? I have been wracking my brains to try and work it out.

    It makes sense to (and I'm recently familiar with the process to) use em measurements in the layout but - and this is where I'm coming unstuck - ems are not good for inline images for, when they scale, they can not only pixelate badly but also defy their original positioning. It also causes problems with background tiling.

    I have tried to make a mixed em and px layout but this makes certain columns disappear and I cannot, for the life of me, work out why this is happening.

    I've scrubbed everything and started from scratch. A whole week's work in the bin. This time, I want to start out as I mean to carry on and avoid wasting any time. Can anyone please advise on the best, most portable and most efficient way of laying out simple columns, so they don't fall apart when actually used on the www?

    This whole can of worms is making me wonder if claims that CSS P portability, across screen sizes and types of devices, is actually true.

    Please?

    Thanks

    Dr. V
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #2
    Regular Coder
    Join Date
    Mar 2009
    Posts
    116
    Thanks
    29
    Thanked 1 Time in 1 Post
    You get your images pixalated couse you are using bitmaps instad of SVG files. A vector graphic has a pattern to draw a line, shape, whatever so its scalable.
    http://a.deveria.com/svg/css_svg_test.html
    http://a.deveria.com/svg/css_svg_test.html

    You should transform lor bitmaps to SVG files, with inkscape maybe.

    And btw, many sites use a simple image repited so get a styled background.
    http://www.gamesitetemplates.com/ima...late-Fluid.JPG

  • #3
    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
    Last edited by effpeetee; 08-29-2010 at 09:32 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #4
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Cheers Frank. Been reading through some of those. Especially the layouts with no tricks and hacks. Certainly puts all this this faux columns nonsense into perspective. Great link, many thanks, mate.

    Dr. V
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #5
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to build scaleable, elastic layouts?

    Hi,
    Tips for Elastic layouts
    1. Since the elastic layouts overall sizing is based on the user's default fonts size, they are more unpredictable. Used correctly, they are also more accessible for those that need larger fonts size since the line length remains proportionate.
    2. Sizing of dives in this layout are based on the 100% font size in the body element. If you decrease the text size overall by using a font-size: 80% on the body element or the #container, remember that the entire layout will downsize proportionately. You may want to increase the widths of the various divs to compensate for this.
    3. If font sizing is changed in differing amounts on each div instead of on the overall design (ie: #sidebar1 is given a 70% font size and #mainContent is given an 85% font size), this will proportionately change each of the divs overall size. You may want to adjust based on your final font sizing

    _____________________
    Profile Design
    Last edited by Drummond Lorn; 10-08-2010 at 09:36 AM.


  •  

    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
    •