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

882 Aufrufe

Veröffentlicht am

MM 08-11 - Präsentation vom 4.1.2010

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

Veröffentlicht in: Technologie
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
882
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
22
Aktionen
Geteilt
0
Downloads
22
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • Fragen, Verbesserungsvorschläge, Kritik, Lob?
  • Kapitel 2.2.7 lesen
    3 Fragen an Partner
    Fragen für mich falls unklar
  • little boxes Seite 242
  • little boxes Seite 242
  • floats in little boxes Seite 223 - 237
    clear in little boxes Seite 239 - 243
  • 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

    ×