XHTML & CSS
Lektionen 17-20




 © 2009 by Noël Bossart
welcome.




                           « Happy New Year. »
                                        Noël Bossart

  © 2009...
the flow.
Dokumentfluss Modernes Webdesign Seite 75-70




        delicious.com/noelboss/zbw+float+position
position is everything.
       Spiel mit den Elementen
absolut relativ
Block HTML-Elemente haben grundsätzlich die position-
Eigenschaft “static” und folgen dementsprechend eine...
absolut relativ
Mit der Eigenschaft “position: relative” können Elemente
relativ zu ihrer aktuelle Position welche sie im ...
absolut relativ
Mit der Eigenschaft “position: relative” können Elemente
relativ zu ihrer aktuelle Position welche sie im ...
absolut relativ
Mit der Eigenschaft “position: relative” können Elemente
relativ zu ihrer aktuelle Position welche sie im ...
absolut relativ
Mit der Eigenschaft “position: absolute;” können Elemente absolut zu
einem Bezugselement positioniert werd...
absolut relativ
Mit der Eigenschaft “position: absolute;” können Elemente absolut zu
einem Bezugselement positioniert werd...
absolut relativ
Mit der Eigenschaft “position: absolute;” können Elemente absolut zu
einem Bezugselement positioniert werd...
floats in Modernes Webdesign Seite75-84
break free.
Aus dem Fluss ausbrechen
float
Elemente können mit Float aus dem Dokumentfluss
genommen werden und so relativ zum Mutter-Element
positioniert werden...
float
Elemente können mit Float aus dem Dokumentfluss
genommen werden und so relativ zum Mutter-Element
positioniert werden...
float
Elemente können mit Float aus dem Dokumentfluss
genommen werden und so relativ zum Mutter-Element
positioniert werden...
alles clear?
Wenn ein Element “gefloated” wird, wird es aus dem
Fluss genommen und verliert seine Höhe für die
umliegenden ...
alles clear?
Aber was wenn nicht?




                               Lorem ipsum dolor sit
     float: left;               ...
alles clear?
Aber was wenn nicht?




                       Lorem ipsum dolor sit
     float: left;       amet, consectetu...
alles clear?
Wir müssen also das Eltern-Element irgendwie dazu
bringen, wieder um das ganze gefloatete Element zu
verlaufen...
alles clear?
Wir fürgen ein zusätzliches HTML Element mit der
Eigenschaft “clear: left;” ein, welches unter dem
gefloateten...
alles clear?
Dann verstecken wir dieses Element, damit es keinen
Einfluss auf das weitere Design hat mit der Eigenschaft
“v...
alles clear?
Dann verstecken wir dieses Element, damit es keinen
Einfluss auf das weitere Design hat mit der Eigenschaft
“v...
alles clear?



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




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




                W ie
        float: left;
                     s o?
                  ...
Es ist nicht cool weil...
Es ist nicht cool weil...
... es zusätzliches Markup für’s Design hinzufügt
Es ist nicht cool weil...
... es zusätzliches Markup für’s Design hinzufügt
... “Intelligenz” vorausgesetzt wird
Es ist nicht cool weil...
... es zusätzliches Markup für’s Design hinzufügt
... “Intelligenz” vorausgesetzt wird
... IE je...
Es ist nicht cool weil...
... es zusätzliches Markup für’s Design hinzufügt
... “Intelligenz” vorausgesetzt wird
... IE je...
Overflow & hasLayout
Overflow & hasLayout
Statt ein zusätzliches Element hinzuzufügen welches für das
clearen des Floats zuständig ist, kann de...
Overflow & hasLayout
Statt ein zusätzliches Element hinzuzufügen welches für das
clearen des Floats zuständig ist, kann de...
floats in Modernes Webdesign Seite 84-95



            clear in Modernes Webdesign Seite 85
Prüfung 60+15 Minuten
home
work
Hausaufgaben
 Slides zu Float studieren
 Menus: Modernes Webdesign 241-248
 Block vs. Inline: Optional aber sehr
 empfehle...
Position & Float // MM 08-11
Nächste SlideShare
Wird geladen in …5
×

Position & Float // MM 08-11

921 Aufrufe

Veröffentlicht am

MM 08-11 - Präsentation vom 4.1.2010

Elemente mit CSS "float" und "position" positionieren.

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

Position & Float // MM 08-11

  1. 1. XHTML & CSS Lektionen 17-20 © 2009 by Noël Bossart
  2. 2. welcome. « Happy New Year. » Noël Bossart © 2009 by Noël Bossart
  3. 3. the flow.
  4. 4. Dokumentfluss Modernes Webdesign Seite 75-70 delicious.com/noelboss/zbw+float+position
  5. 5. position is everything. Spiel mit den Elementen
  6. 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. 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. 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. 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. 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. 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. 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. 13. floats in Modernes Webdesign Seite75-84
  14. 14. break free. Aus dem Fluss ausbrechen
  15. 15. 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.
  16. 16. 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.
  17. 17. 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.
  18. 18. 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.
  19. 19. 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.
  20. 20. alles clear? Aber was wenn nicht? Lorem ipsum dolor sit float: left; amet, consectetuer adipiscing elit.
  21. 21. 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.
  22. 22. 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.
  23. 23. 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.
  24. 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. 25. alles clear? Lorem ipsum dolor sit float: left; amet, consectetuer adipiscing elit.
  26. 26. alles clear? Ist das cool? Lorem ipsum dolor sit float: left; amet, consectetuer adipiscing elit.
  27. 27. alles clear? Ist das cool? Nein. W ie float: left; s o? Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  28. 28. Es ist nicht cool weil...
  29. 29. Es ist nicht cool weil... ... es zusätzliches Markup für’s Design hinzufügt
  30. 30. Es ist nicht cool weil... ... es zusätzliches Markup für’s Design hinzufügt ... “Intelligenz” vorausgesetzt wird
  31. 31. 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
  32. 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 ... es auch anders geht
  33. 33. Overflow & hasLayout
  34. 34. 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
  35. 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 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
  36. 36. floats in Modernes Webdesign Seite 84-95 clear in Modernes Webdesign Seite 85
  37. 37. Prüfung 60+15 Minuten
  38. 38. home work
  39. 39. 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

×