SlideShare a Scribd company logo
Layout




         Presenting Content – Session “CSS Layout Techniques”
CSS Layout Aspects

1.   Width and Height
2.   Margin and Padding
3.   Floating Elements
4.   Positioning
5.   “Semantic” Layout
Exkursion: The Box Model
                margin
                border
                padding
              Content



        margin edge       padding edge
        border edge       content edge
The Box Model in Real Life
The Box Model in Real Life
                        margin
                             ca. 20px

                        border
                             0px

                        padding
                             ca. 10px

                        content
                             width:
                             ca. 100px
1. Width and Height
                      width and height
                      always refer to the
                      content, all other
                      values add up to that.
2. Margin and Padding
                                    better usability



•   Use to implement perception laws
•   Use to make the layout less stuffed
                             better readability
3. Floating Elements

                        floats left

                        floats right


                       relation of image to
                       surrounding text?!?
4. Positioning

•   static    (no specific position,
               normal flow)
•   relative (relative to itself)
•   absolute (in relation to parent)
•   fixed     (in relation to viewport)
4. Positioning

•   new HTML file
•   3 divs
•   3 different colors
•   CSS for document only
5. “Semantic” Layout

a. Importance and Position



b. <div> vs HTML5
   An area in XHTML…   …becomes an element in HTML5
   <div id="header">   <header>
   <div id="menu">     <nav>
   <div id="footer">   <footer>
5. “Semantic” Layout

c. 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.

More Related Content

Similar to Layout

Trendsetting: Web Design and Beyond
Trendsetting: Web Design and BeyondTrendsetting: Web Design and Beyond
Trendsetting: Web Design and Beyond
Andy Stratton
 
CSS
CSSCSS
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflow
Peter Kaizer
 
Role of Design in Accessibility — VilniusJS Meet-up
Role of Design in Accessibility — VilniusJS Meet-upRole of Design in Accessibility — VilniusJS Meet-up
Role of Design in Accessibility — VilniusJS Meet-up
Adrian Roselli
 
Designing CSS Layouts for the Flexible Web
Designing CSS Layouts for the Flexible WebDesigning CSS Layouts for the Flexible Web
Designing CSS Layouts for the Flexible Web
Zoe Gillenwater
 
Future-Proof Responsive Web Design #RWD
Future-Proof Responsive Web Design #RWDFuture-Proof Responsive Web Design #RWD
Future-Proof Responsive Web Design #RWD
Digital Surgeons
 
Future proof rwd
Future proof rwdFuture proof rwd
Future proof rwd
Adam Chambers
 
Static layouts with css
Static layouts with cssStatic layouts with css
Static layouts with css
Dan Phiffer
 
Journey To The Front End World - Part2 - The Cosmetic
Journey To The Front End World - Part2 - The  CosmeticJourney To The Front End World - Part2 - The  Cosmetic
Journey To The Front End World - Part2 - The Cosmetic
Irfan Maulana
 
Introduction 2 css
Introduction 2 cssIntroduction 2 css
Introduction 2 css
Md Tarik Mahmud
 
Content strategy for mobile
Content strategy for mobileContent strategy for mobile
Content strategy for mobile
Karolina Szczur
 
Article css
Article cssArticle css
Article css
testing4444
 
Open Standards in the Walled Garden
Open Standards in the Walled GardenOpen Standards in the Walled Garden
Open Standards in the Walled Garden
digitalbindery
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS Troubleshooting
Denise Jacobs
 
Ppt ch06
Ppt ch06Ppt ch06
Ppt ch06
niruttisai
 
Ppt ch06
Ppt ch06Ppt ch06
Ppt ch06
1geassking
 
Dimensions of elements.pdf
Dimensions of elements.pdfDimensions of elements.pdf
Advanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & EfficiencyAdvanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & Efficiency
Denise Jacobs
 
Building Responsive Layouts
Building Responsive LayoutsBuilding Responsive Layouts
Building Responsive Layouts
Zoe Gillenwater
 
Castro Chapter 11
Castro Chapter 11Castro Chapter 11
Castro Chapter 11
Jeff Byrnes
 

Similar to Layout (20)

Trendsetting: Web Design and Beyond
Trendsetting: Web Design and BeyondTrendsetting: Web Design and Beyond
Trendsetting: Web Design and Beyond
 
CSS
CSSCSS
CSS
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflow
 
Role of Design in Accessibility — VilniusJS Meet-up
Role of Design in Accessibility — VilniusJS Meet-upRole of Design in Accessibility — VilniusJS Meet-up
Role of Design in Accessibility — VilniusJS Meet-up
 
Designing CSS Layouts for the Flexible Web
Designing CSS Layouts for the Flexible WebDesigning CSS Layouts for the Flexible Web
Designing CSS Layouts for the Flexible Web
 
Future-Proof Responsive Web Design #RWD
Future-Proof Responsive Web Design #RWDFuture-Proof Responsive Web Design #RWD
Future-Proof Responsive Web Design #RWD
 
Future proof rwd
Future proof rwdFuture proof rwd
Future proof rwd
 
Static layouts with css
Static layouts with cssStatic layouts with css
Static layouts with css
 
Journey To The Front End World - Part2 - The Cosmetic
Journey To The Front End World - Part2 - The  CosmeticJourney To The Front End World - Part2 - The  Cosmetic
Journey To The Front End World - Part2 - The Cosmetic
 
Introduction 2 css
Introduction 2 cssIntroduction 2 css
Introduction 2 css
 
Content strategy for mobile
Content strategy for mobileContent strategy for mobile
Content strategy for mobile
 
Article css
Article cssArticle css
Article css
 
Open Standards in the Walled Garden
Open Standards in the Walled GardenOpen Standards in the Walled Garden
Open Standards in the Walled Garden
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS Troubleshooting
 
Ppt ch06
Ppt ch06Ppt ch06
Ppt ch06
 
Ppt ch06
Ppt ch06Ppt ch06
Ppt ch06
 
Dimensions of elements.pdf
Dimensions of elements.pdfDimensions of elements.pdf
Dimensions of elements.pdf
 
Advanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & EfficiencyAdvanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & Efficiency
 
Building Responsive Layouts
Building Responsive LayoutsBuilding Responsive Layouts
Building Responsive Layouts
 
Castro Chapter 11
Castro Chapter 11Castro Chapter 11
Castro Chapter 11
 

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
 
Steps for CSS Layout
Steps for CSS LayoutSteps for CSS Layout
Steps for CSS Layout
Alexander Sperl
 
Analysing Prototypes
Analysing PrototypesAnalysing Prototypes
Analysing Prototypes
Alexander Sperl
 
Design Prototyping
Design PrototypingDesign Prototyping
Design Prototyping
Alexander Sperl
 
Visualisierung
VisualisierungVisualisierung
Visualisierung
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 (17)

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
 
Steps for CSS Layout
Steps for CSS LayoutSteps for CSS Layout
Steps for CSS Layout
 
Analysing Prototypes
Analysing PrototypesAnalysing Prototypes
Analysing Prototypes
 
Design Prototyping
Design PrototypingDesign Prototyping
Design Prototyping
 
Visualisierung
VisualisierungVisualisierung
Visualisierung
 
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

SMACNA - DUCT CONSTRUCTION STANDARDS-2005.pdf
SMACNA -  DUCT CONSTRUCTION STANDARDS-2005.pdfSMACNA -  DUCT CONSTRUCTION STANDARDS-2005.pdf
SMACNA - DUCT CONSTRUCTION STANDARDS-2005.pdf
Magdiel70
 
Overview to the Oracle Fixed Assets Module
Overview to the Oracle Fixed Assets ModuleOverview to the Oracle Fixed Assets Module
Overview to the Oracle Fixed Assets Module
lakshmichitra031
 
Acclerating_the_energy_transition_Microsoft_x_WindEurope_1711355110.pdf
Acclerating_the_energy_transition_Microsoft_x_WindEurope_1711355110.pdfAcclerating_the_energy_transition_Microsoft_x_WindEurope_1711355110.pdf
Acclerating_the_energy_transition_Microsoft_x_WindEurope_1711355110.pdf
ssuserdee4d8
 
Fear and Faith (Slideshow by: Kal-el Go)
Fear and Faith (Slideshow by: Kal-el Go)Fear and Faith (Slideshow by: Kal-el Go)
Fear and Faith (Slideshow by: Kal-el Go)
Kal-el Shows
 
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
 
Google UX Design Certificate - Portfolio Project 1 - Case study slide deck -T...
Google UX Design Certificate - Portfolio Project 1 - Case study slide deck -T...Google UX Design Certificate - Portfolio Project 1 - Case study slide deck -T...
Google UX Design Certificate - Portfolio Project 1 - Case study slide deck -T...
philipjuuu
 
Girls Call Vadodara 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Vadodara 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Vadodara 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Vadodara 000XX00000 Provide Best And Top Girl Service And No1 in City
chandadutta02102
 
Abortion pills in Kuwait 🌈+966_505195917 cytotec pills in Kuwait City salmiya...
Abortion pills in Kuwait 🌈+966_505195917 cytotec pills in Kuwait City salmiya...Abortion pills in Kuwait 🌈+966_505195917 cytotec pills in Kuwait City salmiya...
Abortion pills in Kuwait 🌈+966_505195917 cytotec pills in Kuwait City salmiya...
drmarathore
 
A Green City is an urban area that prioritizes sustainability
A Green City is an urban area that prioritizes sustainabilityA Green City is an urban area that prioritizes sustainability
A Green City is an urban area that prioritizes sustainability
Mostafa Abd Elrahman
 
SS26 Men's Fashion Trend Book Peclers Paris
SS26 Men's Fashion Trend Book Peclers ParisSS26 Men's Fashion Trend Book Peclers Paris
SS26 Men's Fashion Trend Book Peclers Paris
Peclers Paris
 
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
 
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENGPortfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG
Rostyslav Kasyanenko
 
The Ultimate Logo Design Checklist for Entrepreneurs
The Ultimate Logo Design Checklist for EntrepreneursThe Ultimate Logo Design Checklist for Entrepreneurs
The Ultimate Logo Design Checklist for Entrepreneurs
illuminz
 
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
 
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
 
Neom-The-Futuristic-City-Shaping-Saudi-Arabias-Tomorrow.pdf
Neom-The-Futuristic-City-Shaping-Saudi-Arabias-Tomorrow.pdfNeom-The-Futuristic-City-Shaping-Saudi-Arabias-Tomorrow.pdf
Neom-The-Futuristic-City-Shaping-Saudi-Arabias-Tomorrow.pdf
Mostafa Abd Elrahman
 
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
sexytaniya455
 
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdhBalhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
NakulJain35
 
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
 
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
 

Recently uploaded (20)

SMACNA - DUCT CONSTRUCTION STANDARDS-2005.pdf
SMACNA -  DUCT CONSTRUCTION STANDARDS-2005.pdfSMACNA -  DUCT CONSTRUCTION STANDARDS-2005.pdf
SMACNA - DUCT CONSTRUCTION STANDARDS-2005.pdf
 
Overview to the Oracle Fixed Assets Module
Overview to the Oracle Fixed Assets ModuleOverview to the Oracle Fixed Assets Module
Overview to the Oracle Fixed Assets Module
 
Acclerating_the_energy_transition_Microsoft_x_WindEurope_1711355110.pdf
Acclerating_the_energy_transition_Microsoft_x_WindEurope_1711355110.pdfAcclerating_the_energy_transition_Microsoft_x_WindEurope_1711355110.pdf
Acclerating_the_energy_transition_Microsoft_x_WindEurope_1711355110.pdf
 
Fear and Faith (Slideshow by: Kal-el Go)
Fear and Faith (Slideshow by: Kal-el Go)Fear and Faith (Slideshow by: Kal-el Go)
Fear and Faith (Slideshow by: Kal-el Go)
 
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
 
Google UX Design Certificate - Portfolio Project 1 - Case study slide deck -T...
Google UX Design Certificate - Portfolio Project 1 - Case study slide deck -T...Google UX Design Certificate - Portfolio Project 1 - Case study slide deck -T...
Google UX Design Certificate - Portfolio Project 1 - Case study slide deck -T...
 
Girls Call Vadodara 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Vadodara 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Vadodara 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Vadodara 000XX00000 Provide Best And Top Girl Service And No1 in City
 
Abortion pills in Kuwait 🌈+966_505195917 cytotec pills in Kuwait City salmiya...
Abortion pills in Kuwait 🌈+966_505195917 cytotec pills in Kuwait City salmiya...Abortion pills in Kuwait 🌈+966_505195917 cytotec pills in Kuwait City salmiya...
Abortion pills in Kuwait 🌈+966_505195917 cytotec pills in Kuwait City salmiya...
 
A Green City is an urban area that prioritizes sustainability
A Green City is an urban area that prioritizes sustainabilityA Green City is an urban area that prioritizes sustainability
A Green City is an urban area that prioritizes sustainability
 
SS26 Men's Fashion Trend Book Peclers Paris
SS26 Men's Fashion Trend Book Peclers ParisSS26 Men's Fashion Trend Book Peclers Paris
SS26 Men's Fashion Trend Book Peclers Paris
 
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 ...
 
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENGPortfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG
 
The Ultimate Logo Design Checklist for Entrepreneurs
The Ultimate Logo Design Checklist for EntrepreneursThe Ultimate Logo Design Checklist for Entrepreneurs
The Ultimate Logo Design Checklist for Entrepreneurs
 
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
 
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...
 
Neom-The-Futuristic-City-Shaping-Saudi-Arabias-Tomorrow.pdf
Neom-The-Futuristic-City-Shaping-Saudi-Arabias-Tomorrow.pdfNeom-The-Futuristic-City-Shaping-Saudi-Arabias-Tomorrow.pdf
Neom-The-Futuristic-City-Shaping-Saudi-Arabias-Tomorrow.pdf
 
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
 
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdhBalhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
 
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...
 
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
 

Layout

  • 1. Layout Presenting Content – Session “CSS Layout Techniques”
  • 2. CSS Layout Aspects 1. Width and Height 2. Margin and Padding 3. Floating Elements 4. Positioning 5. “Semantic” Layout
  • 3. Exkursion: The Box Model margin border padding Content margin edge padding edge border edge content edge
  • 4. The Box Model in Real Life
  • 5. The Box Model in Real Life margin ca. 20px border 0px padding ca. 10px content width: ca. 100px
  • 6. 1. Width and Height width and height always refer to the content, all other values add up to that.
  • 7. 2. Margin and Padding better usability • Use to implement perception laws • Use to make the layout less stuffed better readability
  • 8. 3. Floating Elements floats left floats right relation of image to surrounding text?!?
  • 9. 4. Positioning • static (no specific position, normal flow) • relative (relative to itself) • absolute (in relation to parent) • fixed (in relation to viewport)
  • 10. 4. Positioning • new HTML file • 3 divs • 3 different colors • CSS for document only
  • 11. 5. “Semantic” Layout a. Importance and Position b. <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. 5. “Semantic” Layout c. 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.