Your SlideShare is downloading. ×
0
Liquid layouts with CSS
Liquid layouts with CSS
Liquid layouts with CSS
Liquid layouts with CSS
Liquid layouts with CSS
Liquid layouts with CSS
Liquid layouts with CSS
Liquid layouts with CSS
Liquid layouts with CSS
Liquid layouts with CSS
Liquid layouts with CSS
Liquid layouts with CSS
Liquid layouts with CSS
Liquid layouts with CSS
Liquid layouts with CSS
Liquid layouts with CSS
Liquid layouts with CSS
Liquid layouts with CSS
Liquid layouts with CSS
Liquid layouts with CSS
Liquid layouts with CSS
Liquid layouts with CSS
Liquid layouts with CSS
Liquid layouts with CSS
Liquid layouts with CSS
Liquid layouts with CSS
Liquid layouts with CSS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Liquid layouts with CSS

3,505

Published on

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.

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,505
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
182
Comments
0
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. liquid layouts using CSS the joy, the pain, the tears
  • 2. designing liquid layouts is hard work
  • 3. things move
  • 4. things break
  • 5. things stretch
  • 6. things squash
  • 7. gaps appear
  • 8. elements poke out
  • 9. layouts collapse
  • 10. colors don’t extend
  • 11. columns disappear
  • 12. funny indents
  • 13. It is my professional opinion that now is the perfect time to panic
  • 14. stop whinging and give us some solutions
  • 15. Content can be made to slide around, over or under other elements
  • 16. Navigation can be designed so line breaks are not an issue
  • 17. Gutters can be set to percentages to avoid long lines of text
  • 18. Min-width can be used to stop column collapse
  • 19. Pages can be laid out to allow for collapse
  • 20. Funny indents such as the three pixel text jog can be solved The IE Three pixel text-jog
  • 21. extras img { CSS can be width: 100%; max-width: 250px; used to scale } form elements input#email { and images width: 100%; max-width: 200px; }
  • 22. Users can be given layout options
  • 23. CSS/Javascript can be used to change layout
  • 24. 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; }
  • 25. Go forth and mutilate

×