Your SlideShare is downloading. ×
Steps for CSS Layout
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Steps for CSS Layout

1,405
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 …

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
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,405
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
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. CSS Layout – Steps http://flic.kr/p/9P5DTb
  • 2. CSS Layout – Steps1. Consider each element! Which box belongs where? Create a declaration for each element.
  • 3. News Static Login#news #info #login
  • 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. The Golden Ratio goldenratiocalculator.com
  • 6. Grid Based Designs http://grid-based.com/
  • 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. 28% + 2% + 50% + 2% + 18% = 100%220px + 20px + 480px + 20px + 220px = 960px It needs to add up or your layout will break!
  • 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. #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. 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. 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. 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. 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. #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. 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. #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. #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. #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. #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. 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!