Layout

Presenting Content – Session “CSS Layout Techniques”

CSS Layout Aspects

1. Width and Height2. Margin and Padding3. Floating Elements4. Positioning5. “Semantic” Layout

Exkursion: The Box Model

Contentpaddingbordermargin

margin edgeborder edge

padding edgecontent edge

The Box Model in Real Life

The Box Model in Real Life

marginca. 20px

0px

ca. 10px

width:ca. 100px

border

padding

content

1. Width and Heightwidth and height always refer to the content, all other values add up to that.

FF

2. Margin and Padding

• Use to implement perception laws• Use to make the layout less stuffed

better usability

better readability

3. Floating Elements

floats left

floats right

relation of image tosurrounding text?!?

DW

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

DW

5. “Semantic” Layout

a. Importance and Position

b. <div> vs HTML5An 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, seddo eiusmod tempor incididuntut labore et dolore magnaaliqua. Ut enim ad minimveniam, 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.