Liquid layouts with CSS
 

Liquid layouts with CSS

on

  • 4,804 views

A very old presentation from 2005 on Liquid layouts using CSS - some of the common issues and solutions.

A very old presentation from 2005 on Liquid layouts using CSS - some of the common issues and solutions.

Statistics

Views

Total Views
4,804
Views on SlideShare
4,768
Embed Views
36

Actions

Likes
7
Downloads
172
Comments
0

6 Embeds 36

http://www.slideshare.net 19
http://onwebdev.blogspot.com 7
http://www.maxdesign.com.au 5
http://blog.gabrieleromanato.com 3
https://cygnus.cc.kuleuven.be 1
http://mayy.in 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Liquid layouts with CSS Liquid layouts with CSS Presentation Transcript

    • liquid layouts using CSS the joy, the pain, the tears
    • designing liquid layouts is hard work
    • things move
    • things break
    • things stretch
    • things squash
    • gaps appear
    • elements poke out
    • layouts collapse
    • colors don’t extend
    • columns disappear
    • funny indents
    • It is my professional opinion that now is the perfect time to panic
    • stop whinging and give us some solutions
    • Content can be made to slide around, over or under other elements
    • Navigation can be designed so line breaks are not an issue
    • Gutters can be set to percentages to avoid long lines of text
    • Min-width can be used to stop column collapse
    • Pages can be laid out to allow for collapse
    • Funny indents such as the three pixel text jog can be solved The IE Three pixel text-jog
    • extras img { CSS can be width: 100%; max-width: 250px; used to scale } form elements input#email { and images width: 100%; max-width: 200px; }
    • Users can be given layout options
    • CSS/Javascript can be used to change layout
    • Background #container { images can be background: #fff url(images/back01.gif) used to add repeat-y 50% 0; column color } #container2 { background: url(images/back02.gif) repeat-y 80% 0; }
    • Go forth and mutilate