SlideShare a Scribd company logo
CSS Layout – Steps



               http://flic.kr/p/9P5DTb
CSS Layout – Steps
1. Consider each element!
  Which box belongs where? Create a declaration for each element.
News    Static   Login




#news   #info    #login
CSS Layout – Steps
1. 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?
The Golden Ratio




        goldenratiocalculator.com
Grid Based Designs   http://grid-based.com/
CSS Layout – Steps
1. 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…
28% + 2% + 50% + 2% + 18% = 100%

220px + 20px + 480px + 20px + 220px = 960px




         It needs to add up
         or your layout will break!
CSS Layout – Steps
1. 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!
#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;
}
CSS Layout – Steps
1. 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?
VS
http://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)
VS
http://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
CSS Layout – Steps
1. 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!
#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%;
                                      }
CSS Layout – Steps
1. 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!
#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;
}
#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;
}                              }
#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%;



                             }
#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;
}
CSS Layout – Steps
1. 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!

More Related Content

More from Alexander Sperl

Videos in der Lehre
Videos in der LehreVideos in der Lehre
Videos in der Lehre
Alexander Sperl
 
E-Learning in der wissenschaftlichen Weiterbildung
E-Learning in der wissenschaftlichen WeiterbildungE-Learning in der wissenschaftlichen Weiterbildung
E-Learning in der wissenschaftlichen Weiterbildung
Alexander Sperl
 
Das ICM als Modell für die praxisnahe Ausbildung im Lehramt
Das ICM als Modell für die praxisnahe Ausbildung im LehramtDas ICM als Modell für die praxisnahe Ausbildung im Lehramt
Das ICM als Modell für die praxisnahe Ausbildung im Lehramt
Alexander Sperl
 
Vortrag WS 7, Arbeitstagung Weimar
Vortrag WS 7, Arbeitstagung WeimarVortrag WS 7, Arbeitstagung Weimar
Vortrag WS 7, Arbeitstagung Weimar
Alexander Sperl
 
Präsentation M.Sc. Kinderzahnheilkunde
Präsentation M.Sc. KinderzahnheilkundePräsentation M.Sc. Kinderzahnheilkunde
Präsentation M.Sc. Kinderzahnheilkunde
Alexander Sperl
 
Präsentation AG E-Learning, Fachforum JLU 2014
Präsentation AG E-Learning, Fachforum JLU 2014Präsentation AG E-Learning, Fachforum JLU 2014
Präsentation AG E-Learning, Fachforum JLU 2014
Alexander Sperl
 
E-Learning-Unterstützung im WM³-Projekt
E-Learning-Unterstützung im WM³-ProjektE-Learning-Unterstützung im WM³-Projekt
E-Learning-Unterstützung im WM³-Projekt
Alexander Sperl
 
Präsentation AG E-Learning, Projektgesamttreffen
Präsentation AG E-Learning, ProjektgesamttreffenPräsentation AG E-Learning, Projektgesamttreffen
Präsentation AG E-Learning, Projektgesamttreffen
Alexander Sperl
 
Layout
LayoutLayout
Analysing Prototypes
Analysing PrototypesAnalysing Prototypes
Analysing Prototypes
Alexander Sperl
 
Struktur, Layout und Design
Struktur, Layout und DesignStruktur, Layout und Design
Struktur, Layout und Design
Alexander Sperl
 
Wissensvermittlung in allen drei Phasen der Lehrerbildung
Wissensvermittlung in allen drei Phasen der LehrerbildungWissensvermittlung in allen drei Phasen der Lehrerbildung
Wissensvermittlung in allen drei Phasen der Lehrerbildung
Alexander Sperl
 
Color
ColorColor
Aspects of good design
Aspects of good designAspects of good design
Aspects of good design
Alexander Sperl
 

More from Alexander Sperl (15)

Videos in der Lehre
Videos in der LehreVideos in der Lehre
Videos in der Lehre
 
E-Learning in der wissenschaftlichen Weiterbildung
E-Learning in der wissenschaftlichen WeiterbildungE-Learning in der wissenschaftlichen Weiterbildung
E-Learning in der wissenschaftlichen Weiterbildung
 
Das ICM als Modell für die praxisnahe Ausbildung im Lehramt
Das ICM als Modell für die praxisnahe Ausbildung im LehramtDas ICM als Modell für die praxisnahe Ausbildung im Lehramt
Das ICM als Modell für die praxisnahe Ausbildung im Lehramt
 
Vortrag WS 7, Arbeitstagung Weimar
Vortrag WS 7, Arbeitstagung WeimarVortrag WS 7, Arbeitstagung Weimar
Vortrag WS 7, Arbeitstagung Weimar
 
Präsentation M.Sc. Kinderzahnheilkunde
Präsentation M.Sc. KinderzahnheilkundePräsentation M.Sc. Kinderzahnheilkunde
Präsentation M.Sc. Kinderzahnheilkunde
 
Präsentation AG E-Learning, Fachforum JLU 2014
Präsentation AG E-Learning, Fachforum JLU 2014Präsentation AG E-Learning, Fachforum JLU 2014
Präsentation AG E-Learning, Fachforum JLU 2014
 
E-Learning-Unterstützung im WM³-Projekt
E-Learning-Unterstützung im WM³-ProjektE-Learning-Unterstützung im WM³-Projekt
E-Learning-Unterstützung im WM³-Projekt
 
Präsentation AG E-Learning, Projektgesamttreffen
Präsentation AG E-Learning, ProjektgesamttreffenPräsentation AG E-Learning, Projektgesamttreffen
Präsentation AG E-Learning, Projektgesamttreffen
 
Layout
LayoutLayout
Layout
 
Analysing Prototypes
Analysing PrototypesAnalysing Prototypes
Analysing Prototypes
 
Struktur, Layout und Design
Struktur, Layout und DesignStruktur, Layout und Design
Struktur, Layout und Design
 
Wissensvermittlung in allen drei Phasen der Lehrerbildung
Wissensvermittlung in allen drei Phasen der LehrerbildungWissensvermittlung in allen drei Phasen der Lehrerbildung
Wissensvermittlung in allen drei Phasen der Lehrerbildung
 
Lernplattformen
LernplattformenLernplattformen
Lernplattformen
 
Color
ColorColor
Color
 
Aspects of good design
Aspects of good designAspects of good design
Aspects of good design
 

Recently uploaded

Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
sonalibook860
 
The Death of Slim Shady HatThe Death of Slim Shady Hat
The Death of Slim Shady HatThe Death of Slim Shady HatThe Death of Slim Shady HatThe Death of Slim Shady Hat
The Death of Slim Shady HatThe Death of Slim Shady Hat
TeeFusion
 
Unit-1 OOMD- Inthhro- class modeling.ppt
Unit-1 OOMD- Inthhro- class modeling.pptUnit-1 OOMD- Inthhro- class modeling.ppt
Unit-1 OOMD- Inthhro- class modeling.ppt
ChiragSuresh
 
Professional Document Editing Services / Bank Statement Editing
Professional Document Editing Services / Bank Statement EditingProfessional Document Editing Services / Bank Statement Editing
Professional Document Editing Services / Bank Statement Editing
Edit Bank Statement
 
ITR Filing for the year of the 2023-24 .pdf
ITR Filing for the year of the 2023-24 .pdfITR Filing for the year of the 2023-24 .pdf
ITR Filing for the year of the 2023-24 .pdf
shyamraj39
 
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in CityIndore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
bookneha89
 
The Wise Way (Slideshow by: Kal-el Marcus)
The Wise Way (Slideshow by: Kal-el Marcus)The Wise Way (Slideshow by: Kal-el Marcus)
The Wise Way (Slideshow by: Kal-el Marcus)
Kal-el Shows
 
Glasgow University degree Certificate
Glasgow University degree CertificateGlasgow University degree Certificate
Glasgow University degree Certificate
tezeqes
 
Right Choice Landscaping offers exceptional villa landscape maintenance servi...
Right Choice Landscaping offers exceptional villa landscape maintenance servi...Right Choice Landscaping offers exceptional villa landscape maintenance servi...
Right Choice Landscaping offers exceptional villa landscape maintenance servi...
rightchoicelandscapi
 
A Journey Through Islamic Architecture.pdf
A Journey Through Islamic Architecture.pdfA Journey Through Islamic Architecture.pdf
A Journey Through Islamic Architecture.pdf
Mostafa Abd Elrahman
 
The Stone (Slideshow by: Kal-el Marcus Renne Go)
The Stone (Slideshow by: Kal-el Marcus Renne Go)The Stone (Slideshow by: Kal-el Marcus Renne Go)
The Stone (Slideshow by: Kal-el Marcus Renne Go)
Kal-el Shows
 
Girls Call Jogeshwari 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Jogeshwari 9910780858 Provide Best And Top Girl Service And No1 in...Girls Call Jogeshwari 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Jogeshwari 9910780858 Provide Best And Top Girl Service And No1 in...
77sayre
 
Girls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model Safe
Girls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model SafeGirls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model Safe
Girls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model Safe
bookkdreambebe
 
Vip Today Girls Call Indore 000XX00000 Provide Best And Top Girl Service And ...
Vip Today Girls Call Indore 000XX00000 Provide Best And Top Girl Service And ...Vip Today Girls Call Indore 000XX00000 Provide Best And Top Girl Service And ...
Vip Today Girls Call Indore 000XX00000 Provide Best And Top Girl Service And ...
monikaservice00
 
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
monikaservice00
 
High End Girls Call Navi Mumbai 9930245274 Provide Best And Top Girl Service ...
High End Girls Call Navi Mumbai 9930245274 Provide Best And Top Girl Service ...High End Girls Call Navi Mumbai 9930245274 Provide Best And Top Girl Service ...
High End Girls Call Navi Mumbai 9930245274 Provide Best And Top Girl Service ...
sharonblush
 
Humans have long had a complex and dynamic relationship with the natural world
Humans have long had a complex and dynamic relationship with the natural worldHumans have long had a complex and dynamic relationship with the natural world
Humans have long had a complex and dynamic relationship with the natural world
Mostafa Abd Elrahman
 
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdfPreserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Mostafa Abd Elrahman
 
Design Impulse: Boost the power of design
Design Impulse: Boost the power of designDesign Impulse: Boost the power of design
Design Impulse: Boost the power of design
Pieter van Langen
 
This is Diva abaya look book portfolio .pdf
This is Diva abaya look book portfolio .pdfThis is Diva abaya look book portfolio .pdf
This is Diva abaya look book portfolio .pdf
divathisis
 

Recently uploaded (20)

Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
 
The Death of Slim Shady HatThe Death of Slim Shady Hat
The Death of Slim Shady HatThe Death of Slim Shady HatThe Death of Slim Shady HatThe Death of Slim Shady Hat
The Death of Slim Shady HatThe Death of Slim Shady Hat
 
Unit-1 OOMD- Inthhro- class modeling.ppt
Unit-1 OOMD- Inthhro- class modeling.pptUnit-1 OOMD- Inthhro- class modeling.ppt
Unit-1 OOMD- Inthhro- class modeling.ppt
 
Professional Document Editing Services / Bank Statement Editing
Professional Document Editing Services / Bank Statement EditingProfessional Document Editing Services / Bank Statement Editing
Professional Document Editing Services / Bank Statement Editing
 
ITR Filing for the year of the 2023-24 .pdf
ITR Filing for the year of the 2023-24 .pdfITR Filing for the year of the 2023-24 .pdf
ITR Filing for the year of the 2023-24 .pdf
 
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in CityIndore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
 
The Wise Way (Slideshow by: Kal-el Marcus)
The Wise Way (Slideshow by: Kal-el Marcus)The Wise Way (Slideshow by: Kal-el Marcus)
The Wise Way (Slideshow by: Kal-el Marcus)
 
Glasgow University degree Certificate
Glasgow University degree CertificateGlasgow University degree Certificate
Glasgow University degree Certificate
 
Right Choice Landscaping offers exceptional villa landscape maintenance servi...
Right Choice Landscaping offers exceptional villa landscape maintenance servi...Right Choice Landscaping offers exceptional villa landscape maintenance servi...
Right Choice Landscaping offers exceptional villa landscape maintenance servi...
 
A Journey Through Islamic Architecture.pdf
A Journey Through Islamic Architecture.pdfA Journey Through Islamic Architecture.pdf
A Journey Through Islamic Architecture.pdf
 
The Stone (Slideshow by: Kal-el Marcus Renne Go)
The Stone (Slideshow by: Kal-el Marcus Renne Go)The Stone (Slideshow by: Kal-el Marcus Renne Go)
The Stone (Slideshow by: Kal-el Marcus Renne Go)
 
Girls Call Jogeshwari 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Jogeshwari 9910780858 Provide Best And Top Girl Service And No1 in...Girls Call Jogeshwari 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Jogeshwari 9910780858 Provide Best And Top Girl Service And No1 in...
 
Girls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model Safe
Girls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model SafeGirls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model Safe
Girls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model Safe
 
Vip Today Girls Call Indore 000XX00000 Provide Best And Top Girl Service And ...
Vip Today Girls Call Indore 000XX00000 Provide Best And Top Girl Service And ...Vip Today Girls Call Indore 000XX00000 Provide Best And Top Girl Service And ...
Vip Today Girls Call Indore 000XX00000 Provide Best And Top Girl Service And ...
 
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
 
High End Girls Call Navi Mumbai 9930245274 Provide Best And Top Girl Service ...
High End Girls Call Navi Mumbai 9930245274 Provide Best And Top Girl Service ...High End Girls Call Navi Mumbai 9930245274 Provide Best And Top Girl Service ...
High End Girls Call Navi Mumbai 9930245274 Provide Best And Top Girl Service ...
 
Humans have long had a complex and dynamic relationship with the natural world
Humans have long had a complex and dynamic relationship with the natural worldHumans have long had a complex and dynamic relationship with the natural world
Humans have long had a complex and dynamic relationship with the natural world
 
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdfPreserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdf
 
Design Impulse: Boost the power of design
Design Impulse: Boost the power of designDesign Impulse: Boost the power of design
Design Impulse: Boost the power of design
 
This is Diva abaya look book portfolio .pdf
This is Diva abaya look book portfolio .pdfThis is Diva abaya look book portfolio .pdf
This is Diva abaya look book portfolio .pdf
 

Steps for CSS Layout

  • 1. CSS Layout – Steps http://flic.kr/p/9P5DTb
  • 2. CSS Layout – Steps 1. Consider each element! Which box belongs where? Create a declaration for each element.
  • 3. News Static Login #news #info #login
  • 4. CSS Layout – Steps 1. 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 – Steps 1. 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 – Steps 1. 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 – Steps 1. 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. VS http://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. VS http://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 – Steps 1. 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 – Steps 1. 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 – Steps 1. 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!