Steps for CSS Layout

1,826 views

Published on

If you are the copyright holder of one of the photos used in this presentation and you would not like it to be used in an academic context, please contact me and I will remove the image from the presentation. I have made sure that only images are use that are available under the Creative Commons licence.

Published in: Design, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,826
On SlideShare
0
From Embeds
0
Number of Embeds
720
Actions
Shares
0
Downloads
31
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Steps for CSS Layout

  1. 1. CSS Layout – Steps http://flic.kr/p/9P5DTb
  2. 2. CSS Layout – Steps1. Consider each element! Which box belongs where? Create a declaration for each element.
  3. 3. News Static Login#news #info #login
  4. 4. CSS Layout – Steps1. Consider each element! Which box belongs where? Create a declaration for each element.2. Think of the widths! Do design rules like the golden ratio or a grid play a role?
  5. 5. The Golden Ratio goldenratiocalculator.com
  6. 6. Grid Based Designs http://grid-based.com/
  7. 7. CSS Layout – Steps1. Consider each element! Which box belongs where? Create a declaration for each element.2. Think of the widths! Do design rules like the golden ratio or a grid play a role?3. Calculate the values! Sorry, you need to do some maths here…
  8. 8. 28% + 2% + 50% + 2% + 18% = 100%220px + 20px + 480px + 20px + 220px = 960px It needs to add up or your layout will break!
  9. 9. CSS Layout – Steps1. Consider each element! Which box belongs where? Create a declaration for each element.2. Think of the widths! Do design rules like the golden ratio or a grid play a role?3. Calculate the values! Sorry, you need to do some maths here…4. Apply the values in the CSS! Try to be as concise as possible!
  10. 10. #red { background-color: red; width: 18%; height: 400px; margin: 0 2% 0 0;}#green { background-color: green; width: 50%; height: 400px; margin: 0 2% 0 0;}#blue { background-color: blue; width: 28%; height: 400px; margin: 0;}
  11. 11. CSS Layout – Steps1. Consider each element! Which box belongs where? Create a declaration for each element.2. Think of the widths! Do design rules like the golden ratio or a grid play a role?3. Calculate the values! Sorry, you need to do some maths here…4. Apply the values in the CSS! Try to be as concise as possible!5. Choose the method of layout! Is it going to be float or position?
  12. 12. VShttp://flic.kr/p/56L7gN http://flic.kr/p/aeLWkc • text related images • elements in a • varying heights in concreted position column layout • need to overwrite ( less hassle) document flow • listing things • flexible (document flow • need to overlap matters)
  13. 13. VShttp://flic.kr/p/56L7gN http://flic.kr/p/aeLWkc Rule If elements should not interact, use absolute positioning, if they should, use floats. —says Kilian Valkhof kilianvalkhof.com
  14. 14. CSS Layout – Steps1. Consider each element! Which box belongs where? Create a declaration for each element.2. Think of the widths! Do design rules like the golden ratio or a grid play a role?3. Calculate the values! Sorry, you need to do some maths here…4. Apply the values in the CSS! Try to be a concise as possible!5. Choose the method of layout! Is it going to be float or position?6. Apply the method in the CSS! Know where to put things!
  15. 15. #red { #red { background-color: red; background-color: red; width: 18%; width: 18%; height: 400px; height: 400px; position: absolute; margin: 0 2% 0 0; top: 0; float: left; left: 0;} }#green { #green { background-color: green; background-color: green; width: 50%; width: 50%; height: 400px; height: 400px; margin: 0 2% 0 0; position: absolute; top: 0; float: left; left: 20%;} }#blue { #blue { background-color: blue; background-color: blue; width: 28%; width: 28%; height: 400px; height: 400px; margin: 0; position: absolute; float: left; top: 0;} left: 72%; }
  16. 16. CSS Layout – Steps1. Consider each element! Which box belongs where? Create a declaration for each element.2. Think of the widths! Do design rules like the golden ratio or a grid play a role?3. Calculate the values! Sorry, you need to do some maths here…4. Apply the values in the CSS! Try to be as concise as possible!5. Choose the method of layout! Is it going to be float or position?6. Apply the method in the CSS! Know where to put things!7. Rewrite the CSS with combined selectors and shorthand notation!
  17. 17. #red { background-color: red; width: 18%; height: 400px; margin: 0 2% 0 0; float: left;}#green { background-color: green; width: 50%; height: 400px; margin: 0 2% 0 0; float: left;}#blue { background-color: blue; width: 28%; height: 400px; margin: 0; float: left;}
  18. 18. #red { #red { background-color: red; width: 18%; height: 400px; margin: 0 2% 0 0; float: left;} }#green { #green { background-color: green; width: 50%; height: 400px; margin: 0 2% 0 0; float: left;} }#blue { #blue { background-color: blue; width: 28%; height: 400px; margin: 0; float: left;} }
  19. 19. #red, #green, #blue { #red { height: 400px; background-color: red; float: left; width: 18%;}#red, #green { margin: 0 2% 0 0;} }#blue { #green { margin: 0; background-color: green;} width: 50%; } #blue { background-color: blue; width: 28%; }
  20. 20. #red, #green, #blue { height: 400px; float: left;}#red, #green { margin: 0 2% 0 0;}#red { background-color: red; width: 18%;}#green { background-color: green; width: 50%;}#blue { background-color: blue; width: 28%; margin: 0;}
  21. 21. CSS Layout – Steps1. Consider each element! Which box belongs where? Create a declaration for each element.2. Think of the widths! Do design rules like the golden ratio or a grid play a role?3. Calculate the values! Sorry, you need to do some maths here…4. Apply the values in the CSS! Try to be as concise as possible!5. Choose the method of layout! Is it going to be float or position?6. Apply the method in the CSS! Know where to put things!7. Rewrite the CSS with combined selectors and shorthand notation!

×