XHTML & CSS
Lektionen 9-12




 © 2009 by Noël Bossart
welcome.
« The time is always
 right to do what’s right. »
                              Martin Luther King 1964




     ...
Ablauf heute
                Hello World

                CSS Syntax
Pause


                CSS Syntax

        Box Model...
?
?
hello
hello world.
Los geht’s, wir erstellt mit dem heute angeeigneten Wissen eine Webseite
mit folgenden Kriterien:

  Liste de...
facelifting.
CSS Syntax




 © 2009 by Noël Bossart   Modernes Webdesign Seite 213+
CSS Einbinden
Inline: Sollte vermieden werden da schwer zu überschreiben und Trennung von
Inhalt und Design nicht gegeben....
CSS Einbinden
Im Head verlinken: Dies ist die beste Methode um CSS einzubinden da sie
Inhalt von Design trennt, und ausser...
CSS Syntax - Aufbau
Aufbau                                 Beispiel

selektor {                             ul li.wichtig ...
Selektoren
Es zählt jeweils die letzte Eigenschaft:        Beispiel:

Element { ... }                                 ul l...
Eigenschaften & Werte
Mehrere CSS Eigenschaften können mittels ; separiert werden und dürfen
nacheinander auf einer Zeile ...
Regeln der Kaskade
Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach
Deklarationen umgehen muss?

1. Sort...
Regeln der Kaskade
Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach
Deklarationen umgehen muss?

1. Sort...
Regeln der Kaskade
Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach
Deklarationen umgehen muss?
        ...
Regeln der Kaskade
Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach
Deklarationen umgehen muss?

1. Sort...
Regeln der Kaskade
Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach
Deklarationen umgehen muss?

1. Sort...
Gewichtung / Spezifität
Jeder Selektor hat eine gewisse Gewichtung die sich aus seiner
Zusammensetzung aus Tags, ID’s und K...
Gewichtung / Spezifität
Jeder Selektor hat eine gewisse Gewichtung die sich aus seiner
Zusammensetzung aus Tags, ID’s und K...
Regeln der Kaskade
Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach
Deklarationen umgehen muss?

1. Sort...
Regeln der Kaskade
Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach
Deklarationen umgehen muss?

1. Sort...
Überschreiben
Werte können sich überschreiben.          Beispiel:

Dabei wird der letzte Wert welcher        h2 {
einem El...
CSS - Ordnung
Lies selbständig Kapitel 8.4 (Seite 219)
aus “Modernes Webdesign”. Falls Du
Fragen hast, löse diese mit dein...
the box model.
Das Box Model




          Modernes Webdesign Kapitel 2.2.5
Das Box Model



   Inhalt




            Modernes Webdesign Kapitel 2.2.5
Das Box Model
            width




   Inhalt




               Modernes Webdesign Kapitel 2.2.5
Das Box Model
            width




   Inhalt




                                                  height
               ...
Das Box Model
             width



  Innenabstand
    Inhalt




                                                    heig...
Das Box Model
             width                         border



  Innenabstand
    Inhalt




                         ...
Das Box Model
                width                        border


Aussenabstand
   Innenabstand
     Inhalt




        ...
Das Box Model

Aussenabstand                             Lorem ipsu
                                          amet, cons
 ...
Das Box Model

margin                                    Lorem ipsu
                                          amet, cons
 ...
Das Box Model

margin                                    Lorem ipsu
                                          amet, cons
 ...
Das Box Model

                                          Lorem ipsu
                                          amet, cons
 ...
Das Box Model... immer?

                                          Lorem ipsu
                                          am...
Das Box Model... immer?

                                          Lorem ipsu
                                          am...
Das Box Model... immer?



                          IN !            Lorem ipsu



                E
                     ...
Box Model Bug
                                                           width

                                   margin
...
CSS Notation
margin:    ;
                   margin
padding:       ;       padding
                            object
CSS Notation
margin:    ;                        top
                          margin
padding:       ;              paddin...
CSS Notation
margin: 10px ;                     top
                         margin
padding: 10px ;              padding

...
CSS Notation
margin-right:   ;
                    margin
padding-left:   ;       padding
                        object
CSS Notation
margin-right: 0 ;
                    margin
padding-left:   ;       padding
                        object
 ...
CSS Notation
margin-right: 0 ;
                           margin
padding-left: 0 ;              padding

                 ...
Short Notation
margin:    ;
                   margin
padding:       ;    padding
                    object
Short Notation
margin:    ;                 top
                   margin
padding:       ;    padding
                    ...
Short Notation
margin: 10px    ;                 top
                        margin
padding: 10px       ;    padding
     ...
Short Notation
margin: 10px    ;                        top
                               margin
padding: 10px       ;   ...
Short Notation
margin: 10px 0 ;                     top
                           margin
padding: 10px 0 ;           padd...
Short Notation
margin: 10px 0 ;             ➊
                           margin
                                     top
p...
Short Notation
margin: 10px 0 ;               ➊
                             margin
                                      ...
CSS Notation
margin:               ;


          margin

            padding
             object
CSS Notation
margin: 10px                  ;

                        top
               margin

                 padding
...
CSS Notation
margin: 10px 0                  ;

                          top
                 margin

                   ...
CSS Notation
margin: 10px 0 20px          ;

                       top
              margin

                padding
    ...
CSS Notation
margin: 10px 0 20px 5px ;

                          top
                 margin

                   padding
...
CSS Notation
margin: 10px 0 20px 5px ;

                  top


          left            right



                 bottom
CSS Notation
padding:                        ;


           margin

             padding
              object




        ...
CSS Notation
padding: 10px 5px 15px 5px ;

                          top
                 margin

                   paddi...
CSS Notation
padding: 10px 5px 15px 5px ;

                   top


          left                 right



              ...
Block vs. Inline




            Modernes Webdesign Seite 69 - 75
Block vs. Inline




            Modernes Webdesign Seite 69 - 75
Block vs. Inline
  Block Elemente nehmen den ganzen Platz ein.




                    Modernes Webdesign Seite 69 - 75
Block vs. Inline
   Block Elemente nehmen den ganzen Platz ein.

 Auch wenn sie ihn nicht brauchen.




                  ...
Block vs. Inline
   Block Elemente nehmen den ganzen Platz ein.

 Auch wenn sie ihn nicht brauchen.

Inline   sind   spars...
Block vs. Inline
   Block Elemente nehmen den ganzen Platz ein.

 Auch wenn sie ihn nicht brauchen.

Inline   sind   spars...
Block vs. Inline
   Block Elemente nehmen den ganzen Platz ein.

 Auch wenn sie ihn nicht brauchen.

Inline    sind   spar...
Block vs. Inline
   Block Elemente nehmen den ganzen Platz ein.

 Auch wenn sie ihn nicht brauchen.

Inline    sind   spar...
home
work
homework
 Modernes Webdesign Kapitel 2.2.5
 Aufgaben in den Unterlagen lösen
 Hello World mit DIV und margin/padding/borde...
Ressourcen public.me.com/noelboss

            Links delicious.com/noelboss+zbw

        Link Feed feeds.delicious.com/rss...
CSS Basics and Box Model // MM 08-11
Nächste SlideShare
Wird geladen in …5
×

CSS Basics and Box Model // MM 08-11

1.353 Aufrufe

Veröffentlicht am

MM 08-11 - Präsentation vom 11.12.2009

Erklärt die CSS Grundlagen und das Box Model.
Explaining the basics of CSS and the Box Model.

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

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.353
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
8
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?
  • Die wichtigsten HTML Elemente: little boxes Seite 51...
  • little boxes Seite 97
  • little boxes Seite 97
  • little boxes Seite 97
  • little boxes Seite 115 - 118
  • little boxes Seite 118 -124
  • Abkürzungen, Reigenfolge (oben, rechts, unten, link) / (oben unten) (alle seiten) , Important
    little boxes Seite 197 - 206
  • Abkürzungen, Reigenfolge (oben, rechts, unten, link) / (oben unten) (alle seiten) , Important
    little boxes Seite 197 - 206
  • Abkürzungen, Reigenfolge (oben, rechts, unten, link) / (oben unten) (alle seiten) , Important
    little boxes Seite 197 - 206
  • Abkürzungen, Reigenfolge (oben, rechts, unten, link) / (oben unten) (alle seiten) , Important
    little boxes Seite 118 - 120
  • Übungsblatt
    little boxes Seite 118 - 120
  • Abkürzungen, Reigenfolge (oben, rechts, unten, link) / (oben unten) (alle seiten) , Important
    little boxes Seite 197 - 206
  • Abkürzungen, Reigenfolge (oben, rechts, unten, link) / (oben unten) (alle seiten) , Important
    little boxes Seite 197 - 206
  • Abkürzungen, Reigenfolge (oben, rechts, unten, link) / (oben unten) (alle seiten) , Important
    little boxes Seite 197 - 206
  • little boxes Seite 128 - 132
  • little boxes Seite 128 - 132
  • little boxes Seite 128 - 132
  • little boxes Seite 128 - 132
  • little boxes Seite 128 - 132
  • little boxes Seite 128 - 132
  • little boxes Seite 128 - 132
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • little boxes Seite 48
  • Fragen, Verbesserungsvorschläge, Kritik, Lob?
  • Lies Seite 43 bis 49 als Vertiefung (Little Boxes)
  • CSS Basics and Box Model // MM 08-11

    1. 1. XHTML & CSS Lektionen 9-12 © 2009 by Noël Bossart
    2. 2. welcome. « The time is always right to do what’s right. » Martin Luther King 1964 © 2009 by Noël Bossart
    3. 3. Ablauf heute Hello World CSS Syntax Pause CSS Syntax Box Model & Block vs. Inline
    4. 4. ? ?
    5. 5. hello
    6. 6. hello world. Los geht’s, wir erstellt mit dem heute angeeigneten Wissen eine Webseite mit folgenden Kriterien: Liste der persönliche Daten (Name, Adresse, E-Mail etc. Hobbies) Foto von sich falls vorhanden, oder sonst ein Bild einer Person Links zu den Seiten der Banknachbarn (links & rechts) Nummerierte Link-Liste mit persönlichen Lieblingswebseiten Externe CSS-Datei einbinden Wichtige Tags: Modernes Webdesign Seite 194-208
    7. 7. facelifting. CSS Syntax © 2009 by Noël Bossart Modernes Webdesign Seite 213+
    8. 8. CSS Einbinden Inline: Sollte vermieden werden da schwer zu überschreiben und Trennung von Inhalt und Design nicht gegeben. <tag style=”eigenschaft1: wert1 wert2;” /> <h1 style=”color: #ff0000;”>Hallo Welt</h1> Direkt im head-Tag: Sollte vermieden werden weil der weitere Aufbau der Seite dadurch verzögert wird, bis das CSS geladen ist. Ausserdem ist die Trennung von Design und Inhalt nicht gegeben. <head> <style type="text/css" media="screen"> h1 { color: #ff0000; } </style> </head>
    9. 9. CSS Einbinden Im Head verlinken: Dies ist die beste Methode um CSS einzubinden da sie Inhalt von Design trennt, und ausserdem auch Performance Vorteile hat – Caching der Dateien, Weiterladen der Seite wärend das CSS geladen wird, weniger Code als bei Inline Styles, usw. <head> <link type="text/css" rel="stylesheet" href="css/main.css" /> <link type="text/css" rel="stylesheet" href="css/forms.css" /> <link type="text/css" rel="stylesheet" href="css/print.css" media= "print"/> </head> Tipp: Es können auch mehrere CSS-Dateien eingebunden werden. Sollten zwei Rules in Konflikt miteinander geraten, wird diejenige aus dem zuletzt geladenen File Anwendung finden. Modernes Webdesign Kapitel 8.1 & 8.3
    10. 10. CSS Syntax - Aufbau Aufbau Beispiel selektor { ul li.wichtig { eigenschaft1: wert1 wert2; font-weight: bold; eigenschaft2: wert1 wert2 wert3; border: 1px solid #f5a5e6; } } Modernes Webdesign Kapitel 8
    11. 11. Selektoren Es zählt jeweils die letzte Eigenschaft: Beispiel: Element { ... } ul li { ... } Klassen { ... } .wichtig { ... } Pseudo-Klassen { ... } a:hover { ... } ID’s { ... } #hauptmenu { ... } Kombination: tag#id tag.klasse tag { ... } ul#main li.wichtig a { ... } Mehrere Selektoren: selektor1, selektor2 { ... } h1, h2, .titel { ... } Modernes Webdesign Seite 213 + 222
    12. 12. Eigenschaften & Werte Mehrere CSS Eigenschaften können mittels ; separiert werden und dürfen nacheinander auf einer Zeile stehen. CSS Ignoriert Leerzeichen zwischen Eigenschaften. Die meisten Eigenschaften können einen oder mehrere Werte haben: border: 3px dotted blue; color: red; margin: 0px 12px 3em; padding-right: 2%; background: red url(verlauf.jpg) repeat-x top left; overflow: hidden; float: left; font: italic normal bold 1em/1.5em Arial, sans-serif; Modernes Webdesign Kapitel 8.2
    13. 13. Regeln der Kaskade Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach Deklarationen umgehen muss? 1. Sortieren nach Ursprung Modernes Webdesign Kapitel 8.3 und Seite 29-30
    14. 14. Regeln der Kaskade Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach Deklarationen umgehen muss? 1. Sortieren nach Ursprung Modernes Webdesign Kapitel 8.3 und Seite 29-30
    15. 15. Regeln der Kaskade Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach Deklarationen umgehen muss? Webseite 1. Sortieren nach Ursprung Modernes Webdesign Kapitel 8.3 und Seite 29-30
    16. 16. Regeln der Kaskade Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach Deklarationen umgehen muss? 1. Sortieren nach Ursprung & Wichtigkeit 2. Sortieren nach Spezifität Modernes Webdesign Kapitel 8.3
    17. 17. Regeln der Kaskade Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach Deklarationen umgehen muss? 1. Sortieren nach Ursprung & Wichtigkeit 2. Sortieren nach Spezifität enu li { col or: blue; } ul#m ul li { colo r: yellow; } li.box { co lor: red; } #menu lor: grey; } l i.wichtig { co li { colo r: black; } Modernes Webdesign Kapitel 8.3
    18. 18. Gewichtung / Spezifität Jeder Selektor hat eine gewisse Gewichtung die sich aus seiner Zusammensetzung aus Tags, ID’s und Klassen ergibt. Für die Deklaration immer die schwächst mögliche Form wählen damit sich Werte überschreiben lassen! Tags = 1 Punkt Klassen = 10 Punkte ID’s = 100 Punkte Inline-Styles = 1000 Punkte !important = 8 Important wenn immer möglich vermeiden! Modernes Webdesign Kapitel 8.3
    19. 19. Gewichtung / Spezifität Jeder Selektor hat eine gewisse Gewichtung die sich aus seiner Zusammensetzung aus Tags, ID’s und Klassen ergibt. Für die Deklaration immer die schwächst mögliche Form wählen damit sich Werte überschreiben lassen! Tags = 1 Punkt Klassen = 10 Punkte ul li = 2 ID’s = 100 Punkte li.wichtig = 11 Inline-Styles = 1000 Punkte ul#menu li.box a = 113 !important = u l#menu = 101 8 li a:hover = 12 Important wenn immer möglich <p style=”. ..”></p> = 1000 vermeiden! Modernes Webdesign Kapitel 8.3
    20. 20. Regeln der Kaskade Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach Deklarationen umgehen muss? 1. Sortieren nach Ursprung & Wichtigkeit 2. Sortieren nach Spezifität 3. Sortieren nach Reihenfolge im CSS Modernes Webdesign Kapitel 8.3
    21. 21. Regeln der Kaskade Wie geht nun der Browser vor, wenn er mit Konflikten durch mehrfach Deklarationen umgehen muss? 1. Sortieren nach Ursprung & Wichtigkeit 2. Sortieren nach Spezifität body { 3. Sortieren nach Reihenfolge im CSS color: red; color: blue; color: yellow; } Modernes Webdesign Kapitel 8.3
    22. 22. Überschreiben Werte können sich überschreiben. Beispiel: Dabei wird der letzte Wert welcher h2 { einem Element zugeordnet wird border: 1px solid red ; verwendet. border-color: blue; Sich überschreibende Werte können } auch an unterschiedlichen Stellen in der CSS Datei, in einem anderen File, oder Der Rand ist blau. sogar direkt im HTML stehen. Es ist daher wichtig, eine gute Ordnung im CSS zu behalten. Modernes Webdesign Kapitel 8.3
    23. 23. CSS - Ordnung Lies selbständig Kapitel 8.4 (Seite 219) aus “Modernes Webdesign”. Falls Du Fragen hast, löse diese mit deinem Partner.
    24. 24. the box model.
    25. 25. Das Box Model Modernes Webdesign Kapitel 2.2.5
    26. 26. Das Box Model Inhalt Modernes Webdesign Kapitel 2.2.5
    27. 27. Das Box Model width Inhalt Modernes Webdesign Kapitel 2.2.5
    28. 28. Das Box Model width Inhalt height Modernes Webdesign Kapitel 2.2.5
    29. 29. Das Box Model width Innenabstand Inhalt height Modernes Webdesign Kapitel 2.2.5
    30. 30. Das Box Model width border Innenabstand Inhalt height Modernes Webdesign Kapitel 2.2.5
    31. 31. Das Box Model width border Aussenabstand Innenabstand Inhalt height Modernes Webdesign Kapitel 2.2.5
    32. 32. Das Box Model Aussenabstand Lorem ipsu amet, cons Innenabstand adipiscing Inhalt Quisque ve sagittis ac, elementum venenatis a Done Lorem ipsum dolor sit amet, consectetuer adipiscing Quisque velit odio, sagittis ac, elementum ac, venen
    33. 33. Das Box Model margin Lorem ipsu amet, cons adipiscing Inhalt Quisque ve sagittis ac, elementum venenatis a Done Lorem ipsum dolor sit amet, consectetuer adipiscing Quisque velit odio, sagittis ac, elementum ac, venen
    34. 34. Das Box Model margin Lorem ipsu amet, cons adipiscing Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ve Quisque velit odio, sagittis ac, sagittis ac, elementum venenatis a Done Lorem ipsum dolor sit amet, consectetuer adipiscing Quisque velit odio, sagittis ac, elementum ac, venen
    35. 35. Das Box Model Lorem ipsu amet, cons adipiscing Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ve Quisque velit odio, sagittis ac, sagittis ac, elementum venenatis a Done Lorem ipsum dolor sit amet, consectetuer adipiscing Quisque velit odio, sagittis ac, elementum ac, venen
    36. 36. Das Box Model... immer? Lorem ipsu amet, cons adipiscing Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ve Quisque velit odio, sagittis ac, sagittis ac, elementum venenatis a Done Lorem ipsum dolor sit amet, consectetuer adipiscing Quisque velit odio, sagittis ac, elementum ac, venen
    37. 37. Das Box Model... immer? Lorem ipsu amet, cons adipiscing Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ve Quisque velit odio, sagittis ac, sagittis ac, elementum venenatis a Done Lorem ipsum dolor sit amet, consectetuer adipiscing Quisque velit odio, sagittis ac, elementum ac, venen
    38. 38. Das Box Model... immer? IN ! Lorem ipsu E amet, cons N adipiscing Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ve Quisque velit odio, sagittis ac, sagittis ac, elementum venenatis a Done Lorem ipsum dolor sit amet, consectetuer adipiscing Quisque velit odio, sagittis ac, elementum ac, venen
    39. 39. Box Model Bug width margin padding Modernes Webdesign Kapitel 6.8.8 Normal height margin padding height IE kleiner 7
    40. 40. CSS Notation margin: ; margin padding: ; padding object
    41. 41. CSS Notation margin: ; top margin padding: ; padding left object right bottom
    42. 42. CSS Notation margin: 10px ; top margin padding: 10px ; padding left object right bottom
    43. 43. CSS Notation margin-right: ; margin padding-left: ; padding object
    44. 44. CSS Notation margin-right: 0 ; margin padding-left: ; padding object right
    45. 45. CSS Notation margin-right: 0 ; margin padding-left: 0 ; padding left object right
    46. 46. Short Notation margin: ; margin padding: ; padding object
    47. 47. Short Notation margin: ; top margin padding: ; padding object bottom
    48. 48. Short Notation margin: 10px ; top margin padding: 10px ; padding object bottom
    49. 49. Short Notation margin: 10px ; top margin padding: 10px ; padding left object right bottom
    50. 50. Short Notation margin: 10px 0 ; top margin padding: 10px 0 ; padding left object right bottom
    51. 51. Short Notation margin: 10px 0 ; ➊ margin top padding: 10px 0 ; padding left object right bottom
    52. 52. Short Notation margin: 10px 0 ; ➊ margin top padding: 10px 0 ; padding ➋ left object right bottom
    53. 53. CSS Notation margin: ; margin padding object
    54. 54. CSS Notation margin: 10px ; top margin padding object
    55. 55. CSS Notation margin: 10px 0 ; top margin padding object right
    56. 56. CSS Notation margin: 10px 0 20px ; top margin padding object right bottom
    57. 57. CSS Notation margin: 10px 0 20px 5px ; top margin padding object left right bottom
    58. 58. CSS Notation margin: 10px 0 20px 5px ; top left right bottom
    59. 59. CSS Notation padding: ; margin padding object Modernes Webdesign Seite 220+221
    60. 60. CSS Notation padding: 10px 5px 15px 5px ; top margin padding object left right bottom Modernes Webdesign Seite 220+221
    61. 61. CSS Notation padding: 10px 5px 15px 5px ; top left right bottom Modernes Webdesign Seite 220+221
    62. 62. Block vs. Inline Modernes Webdesign Seite 69 - 75
    63. 63. Block vs. Inline Modernes Webdesign Seite 69 - 75
    64. 64. Block vs. Inline Block Elemente nehmen den ganzen Platz ein. Modernes Webdesign Seite 69 - 75
    65. 65. Block vs. Inline Block Elemente nehmen den ganzen Platz ein. Auch wenn sie ihn nicht brauchen. Modernes Webdesign Seite 69 - 75
    66. 66. Block vs. Inline Block Elemente nehmen den ganzen Platz ein. Auch wenn sie ihn nicht brauchen. Inline sind sparsamer. Modernes Webdesign Seite 69 - 75
    67. 67. Block vs. Inline Block Elemente nehmen den ganzen Platz ein. Auch wenn sie ihn nicht brauchen. Inline sind sparsamer. Inline Elemente sind nur so gross wie ihr Inhalt & brechen am Zeilenende um. Modernes Webdesign Seite 69 - 75
    68. 68. Block vs. Inline Block Elemente nehmen den ganzen Platz ein. Auch wenn sie ihn nicht brauchen. Inline sind sparsamer. Inline Elemente sind nur so gross wie ihr Inhalt & brechen am Zeilenende um. Block erzwingt immer einen Umbruch. Modernes Webdesign Seite 69 - 75
    69. 69. Block vs. Inline Block Elemente nehmen den ganzen Platz ein. Auch wenn sie ihn nicht brauchen. Inline sind sparsamer. Inline Elemente sind nur so gross wie ihr Inhalt & brechen am Zeilenende um. Block erzwingt immer einen Umbruch. Selbst wenn etwas daneben Platz hätte. Modernes Webdesign Seite 69 - 75
    70. 70. home work
    71. 71. homework Modernes Webdesign Kapitel 2.2.5 Aufgaben in den Unterlagen lösen Hello World mit DIV und margin/padding/border anreichern
    72. 72. Ressourcen public.me.com/noelboss Links delicious.com/noelboss+zbw Link Feed feeds.delicious.com/rss/noelboss/zbw Fragen & Feedback noel.zbw@me.com more.

    ×