MM 08-11 - Präsentation vom 4.1.2010 Elemente mit CSS "float" und "position" positionieren.

1. XHTML & CSS
Lektionen 17-20
© 2009 by Noël Bossart

2. welcome.
« Happy New Year. »
Noël Bossart
© 2009 by Noël Bossart

3. the flow.

4. Dokumentfluss Modernes Webdesign Seite 75-70
delicious.com/noelboss/zbw+float+position

5. position is everything.
Spiel mit den Elementen

6. absolut relativ
Block HTML-Elemente haben grundsätzlich die position-
Eigenschaft “static” und folgen dementsprechend eines
dem anderen entsprechend Ihrer Position im Code:
Paragraph 1
Paragraph 2
Paragraph 3
Paragraph 4
Paragraph 5

7. absolut relativ
Mit der Eigenschaft “position: relative” können Elemente
relativ zu ihrer aktuelle Position welche sie im Fluss
haben platziert werden:
Paragraph 1
Paragraph 2
Paragraph 3
Paragraph 4
Paragraph 5

8. absolut relativ
Mit der Eigenschaft “position: relative” können Elemente
relativ zu ihrer aktuelle Position welche sie im Fluss
haben platziert werden:
Paragraph 1
Paragraph 2
Paragraph 3
Paragraph 4
Paragraph 5

9. absolut relativ
Mit der Eigenschaft “position: relative” können Elemente
relativ zu ihrer aktuelle Position welche sie im Fluss
haben platziert werden:
Paragraph 1
Paragraph 2
Paragraph 3
Paragraph 4
Paragraph 5

10. absolut relativ
Mit der Eigenschaft “position: absolute;” können Elemente absolut zu
einem Bezugselement positioniert werden. Sie orientieren sich dabei
am nächsten Ankerpunkt, dies ist das nächst übergeordnete
Element mit der Eigenschaft position: absolute oder relative.
html (Ankerpunkt)
Paragraph 1
Paragraph 2
Paragraph 3
Paragraph 4
Paragraph 5

11. absolut relativ
Mit der Eigenschaft “position: absolute;” können Elemente absolut zu
einem Bezugselement positioniert werden. Sie orientieren sich dabei
am nächsten Ankerpunkt, dies ist das nächst übergeordnete
Element mit der Eigenschaft position: absolute oder relative.
html (Ankerpunkt)
Paragraph 3
Paragraph 1
Paragraph 2
Paragraph 4
Paragraph 5

12. absolut relativ
Mit der Eigenschaft “position: absolute;” können Elemente absolut zu
einem Bezugselement positioniert werden. Sie orientieren sich dabei
am nächsten Ankerpunkt, dies ist das nächst übergeordnete
Element mit der Eigenschaft position: absolute oder relative.
html (Ankerpunkt)
Paragraph 1
Paragraph 2
Paragraph 3
Paragraph 4
Paragraph 5

13. floats in Modernes Webdesign Seite75-84

15. break free.
Aus dem Fluss ausbrechen

16. float
Elemente können mit Float aus dem Dokumentfluss
genommen werden und so relativ zum Mutter-Element
positioniert werden:
float: none;
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Quisque velit odio, sagittis ac,
elementum ac, venenatis ac, mi.

17. float
Elemente können mit Float aus dem Dokumentfluss
genommen werden und so relativ zum Mutter-Element
positioniert werden:
Lorem ipsum dolor sit
float: left; amet, consectetuer
adipiscing elit. Quisque
velit odio, sagittis ac,
elementum ac,
dolor sit amet, consectetuer adipiscing elit.
Quisque velit odio, sagittis ac, elementum ac,
venenatis ac, mi.

18. float
Elemente können mit Float aus dem Dokumentfluss
genommen werden und so relativ zum Mutter-Element
positioniert werden:
Lorem ipsum dolor sit
amet, consectetuer
float: right;
adipiscing elit. Quisque
velit odio, sagittis ac,
elementum ac,
dolor sit amet, consectetuer adipiscing elit.
Quisque velit odio, sagittis ac, elementum ac,
venenatis ac, mi.

19. alles clear?
Wenn ein Element “gefloated” wird, wird es aus dem
Fluss genommen und verliert seine Höhe für die
umliegenden Elemente. Dies ist kein Problem wenn
der Inhalt rundherum grösser ist:
Lorem ipsum dolor sit
float: left; amet, consectetuer
adipiscing elit. Quisque
velit odio, sagittis ac,
elementum ac,
dolor sit amet, consectetuer adipiscing elit.
Quisque velit odio, sagittis ac, elementum ac,
venenatis ac, mi.

20. alles clear?
Aber was wenn nicht?
Lorem ipsum dolor sit
float: left; amet, consectetuer
adipiscing elit. Quisque
velit odio, sagittis ac,
elementum ac,
dolor sit amet, consectetuer adipiscing elit.
Quisque velit odio, sagittis ac, elementum ac,
venenatis ac, mi.

21. alles clear?
Aber was wenn nicht?
Lorem ipsum dolor sit
float: left; amet, consectetuer
adipiscing elit.

22. alles clear?
Wir müssen also das Eltern-Element irgendwie dazu
bringen, wieder um das ganze gefloatete Element zu
verlaufen. Aber wie?
Lorem ipsum dolor sit
float: left; amet, consectetuer
adipiscing elit.

23. alles clear?
Wir fürgen ein zusätzliches HTML Element mit der
Eigenschaft “clear: left;” ein, welches unter dem
gefloateten Element zu liegen kommt und damit das
Eltern-Element “aufzieht”.
Lorem ipsum dolor sit
float: left; amet, consectetuer
adipiscing elit.

24. alles clear?
Dann verstecken wir dieses Element, damit es keinen
Einfluss auf das weitere Design hat mit der Eigenschaft
“visibility: hidden;” und geben ihm eine möglichst kleine
Höhe und Breite.
Lorem ipsum dolor sit
float: left; amet, consectetuer
adipiscing elit.

25. alles clear?
Dann verstecken wir dieses Element, damit es keinen
Einfluss auf das weitere Design hat mit der Eigenschaft
“visibility: hidden;” und geben ihm eine möglichst kleine
Höhe und Breite.
Lorem ipsum dolor sit
float: left; amet, consectetuer
adipiscing elit.

26. alles clear?
Lorem ipsum dolor sit
float: left; amet, consectetuer
adipiscing elit.

27. alles clear?
Ist das cool?
Lorem ipsum dolor sit
float: left; amet, consectetuer
adipiscing elit.

28. alles clear?
Ist das cool?
Nein.
W ie
float: left;
s o?
Lorem ipsum dolor sit
amet, consectetuer
adipiscing elit.

29. Es ist nicht cool weil...

30. Es ist nicht cool weil...
... es zusätzliches Markup für’s Design hinzufügt

31. Es ist nicht cool weil...
... es zusätzliches Markup für’s Design hinzufügt
... “Intelligenz” vorausgesetzt wird

32. Es ist nicht cool weil...
... es zusätzliches Markup für’s Design hinzufügt
... “Intelligenz” vorausgesetzt wird
... IE je nach clear-Element Probleme macht

33. Es ist nicht cool weil...
... es zusätzliches Markup für’s Design hinzufügt
... “Intelligenz” vorausgesetzt wird
... IE je nach clear-Element Probleme macht
... es auch anders geht

34. Overflow & hasLayout

35. Overflow & hasLayout
Statt ein zusätzliches Element hinzuzufügen welches für das
clearen des Floats zuständig ist, kann der umliegenden Box
die Eigenschaft “overflow: hidden;” oder “overflow: auto;”
gegeben werden (je nach Situation):
delicious.com/noelboss/zbw+overflow

36. Overflow & hasLayout
Statt ein zusätzliches Element hinzuzufügen welches für das
clearen des Floats zuständig ist, kann der umliegenden Box
die Eigenschaft “overflow: hidden;” oder “overflow: auto;”
gegeben werden (je nach Situation):
delicious.com/noelboss/zbw+overflow
Für IE 6 und kleiner muss noch die Eigenschaft “hasLayout”
getriggert werden. Dies erreicht man z.B. in dem man der Box
eine Breite gibt:
delicious.com/noelboss/zbw+haslayout

37. floats in Modernes Webdesign Seite 84-95
clear in Modernes Webdesign Seite 85

38. Prüfung 60+15 Minuten

39. home
work

40. Hausaufgaben
Slides zu Float studieren
Menus: Modernes Webdesign 241-248
Block vs. Inline: Optional aber sehr
empfehlenswert zur Festigung des Wissens:
delicious.com/noelboss/zbw+blockvsinline