Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Layout         Presenting Content – Session “CSS Layout Techniques”
CSS Layout Aspects1.   Width and Height2.   Margin and Padding3.   Floating Elements4.   Positioning5.   “Semantic” Layout
Exkursion: The Box Model                margin                border                padding              Content        ma...
The Box Model in Real Life
The Box Model in Real Life                        margin                             ca. 20px                        borde...
1. Width and Height                      width and height                      always refer to the                      co...
2. Margin and Padding                                    better usability•   Use to implement perception laws•   Use to ma...
3. Floating Elements                        floats left                        floats right                       relation...
4. Positioning•   static    (no specific position,               normal flow)•   relative (relative to itself)•   absolute...
4. Positioning•   new HTML file•   3 divs•   3 different colors•   CSS for document only
5. “Semantic” Layouta. Importance and Positionb. <div> vs HTML5   An area in XHTML…   …becomes an element in HTML5   <div ...
5. “Semantic” Layoutc. Position and Relation   „Lorem ipsum dolor sit amet,   consectetur adipisicing elit, sed   do eiusm...
Nächste SlideShare
Wird geladen in …5
×

Layout

  • Loggen Sie sich ein, um Kommentare anzuzeigen.

  • Gehören Sie zu den Ersten, denen das gefällt!

Layout

  1. 1. Layout Presenting Content – Session “CSS Layout Techniques”
  2. 2. CSS Layout Aspects1. Width and Height2. Margin and Padding3. Floating Elements4. Positioning5. “Semantic” Layout
  3. 3. Exkursion: The Box Model margin border padding Content margin edge padding edge border edge content edge
  4. 4. The Box Model in Real Life
  5. 5. The Box Model in Real Life margin ca. 20px border 0px padding ca. 10px content width: ca. 100px
  6. 6. 1. Width and Height width and height always refer to the content, all other values add up to that.
  7. 7. 2. Margin and Padding better usability• Use to implement perception laws• Use to make the layout less stuffed better readability
  8. 8. 3. Floating Elements floats left floats right relation of image to surrounding text?!?
  9. 9. 4. Positioning• static (no specific position, normal flow)• relative (relative to itself)• absolute (in relation to parent)• fixed (in relation to viewport)
  10. 10. 4. Positioning• new HTML file• 3 divs• 3 different colors• CSS for document only
  11. 11. 5. “Semantic” Layouta. Importance and Positionb. <div> vs HTML5 An area in XHTML… …becomes an element in HTML5 <div id="header"> <header> <div id="menu"> <nav> <div id="footer"> <footer>
  12. 12. 5. “Semantic” Layoutc. Position and Relation „Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercita- tion ullamco laboris nisi ut ali- quip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

×