liquid layouts with css

27
CSS the joy, the pain, the tears liquid layouts using

Upload: russ-weakley

Post on 28-Jan-2015

127 views

Category:

Technology


1 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Liquid layouts with CSS

CSSthe joy, the pain, the tears

liquid layouts using

Page 2: Liquid layouts with CSS

harddesigning liquid layouts is

work

Page 3: Liquid layouts with CSS
Page 4: Liquid layouts with CSS

things move

Page 5: Liquid layouts with CSS

things break

Page 6: Liquid layouts with CSS

things stretch

Page 7: Liquid layouts with CSS

things squash

Page 8: Liquid layouts with CSS

gaps appear

Page 9: Liquid layouts with CSS

elements poke out

Page 10: Liquid layouts with CSS

layouts collapse

Page 11: Liquid layouts with CSS

colors don’t extend

Page 12: Liquid layouts with CSS

columns disappear

Page 13: Liquid layouts with CSS

funny indents

Page 14: Liquid layouts with CSS

now is the perfect time toIt is my professional opinion that

panic

Page 15: Liquid layouts with CSS
Page 16: Liquid layouts with CSS

stop whinging and

solutionsgive us some

Page 17: Liquid layouts with CSS

Content can bemade to slide

around, over orunder other

elements

Page 18: Liquid layouts with CSS

Navigation can be designed soline breaks are not an issue

Page 19: Liquid layouts with CSS

Gutters can be set topercentages to avoidlong lines of text

Page 20: Liquid layouts with CSS

Min-width canbe used tostop columncollapse

Page 21: Liquid layouts with CSS

Pages can belaid out to

allow forcollapse

Page 22: Liquid layouts with CSS

Funny indents such as the threepixel text jog can be solved

The IE Three pixel text-jog

Page 23: Liquid layouts with CSS

CSS can beused to scaleform elementsand images

extras img{width: 100%;max-width: 250px;}

input#email{width: 100%;max-width: 200px;}

Page 24: Liquid layouts with CSS

Users can be given layout options

Page 25: Liquid layouts with CSS

CSS/Javascript can be used tochange layout

Page 26: Liquid layouts with CSS

Backgroundimages can be

used to addcolumn color

#container{background: #fff url(images/back01.gif) repeat-y 50% 0;}

#container2{background: url(images/back02.gif)repeat-y 80% 0;}

Page 27: Liquid layouts with CSS

mutilateGo forth and