Ingo Siemon: margin-top: 10px; will nicht klappen

Guten Tag

Ich bin noch neu auf dem CSS-Gebiet, bitte darum um etwas Nachsicht
für meine vielleicht etwas böde folgende Frage:

Ich habe eine kleine Testseite gemacht: http://www.spaceart.de/_WC3_Test.shtml.

Der Quelltext sieht folgendermassen aus:
----------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">  
  
<head>  
  
<meta http-equiv="Content-Style-Type" content="text/css" />  
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />  
<link rel="stylesheet" type="text/css" media="screen" href="css-screen.css" />  
  
<title>SPACEart</title>  
  
</head>  
  
<body>  
  
<h1>Neuheiten</h1>  
  
<h2>Star Wars : AT-AT (Einzelstück)</h2>  
  
<p>Es handelt sich um den Original Modell-Bausatz der Firma mpc/ERTL aus dem Jahr 1989. Die vorderen Beine und das Kontroll-Modul ("Kopf") sind beweglich. Die Base und der Snow Speeder sind nicht enthalten. -- ACHTUNG: wir haben nur ein einziges Exemplar !</p>  
  
<p>Es handelt sich um den Original Modell-Bausatz der Firma mpc/ERTL aus dem Jahr 1989. Die vorderen Beine und das Kontroll-Modul ("Kopf") sind beweglich. Die Base und der Snow Speeder sind nicht enthalten. -- ACHTUNG: wir haben nur ein einziges Exemplar !</p>  
  
</body>  
</html>

----------------------------------------------------------------

Die dazu gehörieg CSS-Datei sieht so aus:
----------------------------------------------------------------

body{  
  background-color : #235f70;  
  font-family : Arial, Verdana, Helvetica, sans-serif;  
  font-size:100.01%;  
  color: #ffffff;  
}  
  
h1, h2, p{  
  background-color: #004559;  
  padding: 5px;  
  border: 1px solid #ffffff;  
  margin-top: 10px;  
  width: 508px;  
}  
h1,h2{  
  font-weight: bold;  
  color: #fff000;  
}  
h1{  
  font-size:1.5em;  
}  
h2{  
  font-size:1.3em;  
}

----------------------------------------------------------------

Somit sollte doch der Abstand der beiden Überschriften (h1 und h2)
nach oben jweils 10 Pixel sein. Ist er aber nicht.
Kann mir jamand erklären, was ich da nun falsche gemacht habe?

Über Eure Hilfe würde ich mich wieder sehr freuen.
Gruß aus Münster
Ingo

  1. Hallo Ingo,

    Somit sollte doch der Abstand der beiden Überschriften (h1 und h2)
    nach oben jweils 10 Pixel sein. Ist er aber nicht.
    Kann mir jamand erklären, was ich da nun falsche gemacht habe?

    Nichts falsch gemacht, aber vermutlich vergessen, daß alle Elemente bestimmte Abstände (auch nach unten) bereits standardmäßig mitbringen, wenn Du sie nicht explizit definierst.

    Folgen nun mehrere solcher Elemente aufeinander, summieren sich margin-top und margin-bottom zum eigentlichen Abstand der Elemente zueinander.

    Versuch mal folgendes:

      
    * {margin:0;padding:0;}  
    
    

    (setzt margin und padding für *alle* Elemente auf 0, ist die brutalste, aber auch effektivste Methode, um default-Abstände auszuschalten.)

    Gruß aus Köln-Ehrenfeld,

    Elya

    --
    1. Hi,

      Folgen nun mehrere solcher Elemente aufeinander, summieren sich margin-top und margin-bottom zum eigentlichen Abstand der Elemente zueinander.

      Nein, die summieren sich nicht. Das Maximum wird genommen.
      Collapsing Margins

      cu,
      Andreas

      --
      Warum nennt sich Andreas hier MudGuard?
      Schreinerei Waechter
      Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
      1. Hallo MudGuard,

        Nein, die summieren sich nicht. Das Maximum wird genommen.
        Collapsing Margins

        ups. Wieder was dazugelernt am frühen Morgen :-) Danke.

        Gruß aus Köln-Ehrenfeld,

        Elya

        --
      2. Lieber Andreas

        Folgen nun mehrere solcher Elemente aufeinander, summieren sich margin-top und margin-bottom zum eigentlichen Abstand der Elemente zueinander.
        Nein, die summieren sich nicht. Das Maximum wird genommen.
        Collapsing Margins

        Also Du meinst das größere, richtig?
        Wie groß sind denn diese h1 und h2 margins des Browsers?

        Und betrachtest Du die Lösung von Elya als sauber und OK?
        Ich meine im Sinne meines Anspruchs, bei meiner neuen Seite
        von Anfang an alles richtig zu machen und nicht irgendwas
        nur deshalb hinzuwurschteln, weils halt einfach funktioniert.

        Wie ist Deine Meinung dazu?

        Gruß
        Ingo

        1. Hi,

          Folgen nun mehrere solcher Elemente aufeinander, summieren sich margin-top und margin-bottom zum eigentlichen Abstand der Elemente zueinander.
          Nein, die summieren sich nicht. Das Maximum wird genommen.
          Collapsing Margins

          Also Du meinst das größere, richtig?

          Bei zwei Beteiligten ist das Größere auch das Maximum.

          Wie groß sind denn diese h1 und h2 margins des Browsers?

          So groß wie es im Browser eingestellt ist.

          Und betrachtest Du die Lösung von Elya als sauber und OK?

          Also ich bin nicht so für die Holzhammermethode.
          Aber mir sind in vielen Fällen ein paar Pixel Unterschied auch egal.

          Aber daß man, wenn man einen bestimmten Wert für eine Eigenschaft haben will, diesen Wert selbst explizit setzt und sich nicht auf irgendwelche Vorgaben verläßt, ist schon die richtige Vorgehensweise.

          cu,
          Andreas

          --
          Warum nennt sich Andreas hier MudGuard?
          Schreinerei Waechter
          Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
          1. Lieber Andreas

            Wie groß sind denn diese h1 und h2 margins des Browsers?
            So groß wie es im Browser eingestellt ist.

            Ist denn dieser Standarsabstand von h1 zum nachfolgenden
            Element im IE z.B. eine feste Größe in Piceln?
            Oder ist das abhängig von der im Browser eingestellten
            Schriftgrad-Größe.

            Also ich bin nicht so für die Holzhammermethode.
            Aber mir sind in vielen Fällen ein paar Pixel Unterschied auch egal.

            Aber daß man, wenn man einen bestimmten Wert für eine Eigenschaft haben will, diesen Wert selbst explizit setzt und sich nicht auf irgendwelche Vorgaben verläßt, ist schon die richtige Vorgehensweise.

            Also meinst Du, es geht schon als OK durch.
            Ich bin da doch eher der Fan, die Abstände zwischen den Elementen sebst zu bestimmen.

            Gruß
            Ingo

            1. Hi,

              Wie groß sind denn diese h1 und h2 margins des Browsers?
              So groß wie es im Browser eingestellt ist.

              Ist denn dieser Standarsabstand von h1 zum nachfolgenden
              Element im IE z.B. eine feste Größe in Piceln?

              Warum wohl habe ich keinen festen Wert genannt?
              Es ist abhängig von Lust und Laune des Browserprogrammierers.

              Oder ist das abhängig von der im Browser eingestellten
              Schriftgrad-Größe.

              Vermutlich auch das.

              cu,
              Andreas

              --
              Warum nennt sich Andreas hier MudGuard?
              Schreinerei Waechter
              Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
              1. Lieber Andreas

                Warum wohl habe ich keinen festen Wert genannt?
                Es ist abhängig von Lust und Laune des Browserprogrammierers.

                Ja, das habe ich schon auch so verstanden.
                Aber ist denn für den IE6 z.B. diese Größe auch bekannt?

                Gruß
                Ingo

                1. Aber ist denn für den IE6 z.B. diese Größe auch bekannt?

                  Ingo,
                  Was würde dir das helfen? Du willst doch deine Seiten nicht etwa „für IE6 optimieren“, oder?

                  Live long and prosper,
                  Gunnar

                  --
                  „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
                  1. Lieber Gunnar

                    Aber ist denn für den IE6 z.B. diese Größe auch bekannt?

                    Was würde dir das helfen? Du willst doch deine Seiten nicht etwa „für IE6 optimieren“, oder?

                    Um Gottes willen, nein, natürlich nicht.
                    Hatte mich nur mal so interssiert.
                    Aber ist ja auch egal.
                    Kümmere ich mich lieber weiter um mein Layout.

                    Gruß
                    Ingo

            2. Ist denn dieser Standarsabstand von h1 zum nachfolgenden
              Element im IE z.B. eine feste Größe in Piceln?
              Oder ist das abhängig von der im Browser eingestellten
              Schriftgrad-Größe.

              Ingo,
              Das ist abhängig vom Gutdünken der Browserentwickler, was diese für ihren Browser als Defaultwert eingestellt haben. Sinvollerweise werden sie solche Abstände in em angegeben haben, also abhängig von der Schriftgröße. Linke und rechte Abstände haben wohl eher Defaultwerte in px.

              Ich bin da doch eher der Fan, die Abstände zwischen den Elementen sebst zu bestimmen.

              Du musst nicht mit dem Holzhammer zuhauen:
              h1, h1 {margin-bottom: 0}

              Live long and prosper,
              Gunnar

              --
              „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
              1. Hallo Gunnar.

                h1, h1 {margin-bottom: 0}

                Nicht sonderlich sinnvoll...

                Einen schönen Samstag noch.

                Gruß, Ashura

                --
                Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
                30 Days to becoming an Opera8 Lover -- Opera Mini on Treo
                Meine Browser: Opera 8.02 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
                [Deshalb frei! - Argumente pro freie Software]
                1. h1, h1 {margin-bottom: 0}

                  Nicht sonderlich sinnvoll...

                  :-)

                  h1, h2 {margin-bottom: 0}

                  Live long and prosper,
                  Gunnar

                  --
                  „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
              2. Hallo Gunnar

                Du musst nicht mit dem Holzhammer zuhauen:
                h1, h1 {margin-bottom: 0}

                Ich würde ihm ausdrücklich zur Holzhammermethode raten.

                Wenn du, die Abstände selbst definierst, die dir wichtig sind, kannst du
                aufgrund deiner Erfahrungen sehr gut einschätzen, wie dies dann mit den
                übrig bleibenden (verschiedenen) Defaultwerten der Browser harmoniert.

                Ingo, der über diese Erfahrungen noch nicht verfügt, wird voraussichtlich
                immer wieder darüber stolpern, dass es in einem Browser wie gewünscht ausseht,
                in einem Anderen aber nicht. Da an jedem Abstand mehrere Margins und/oder
                Paddings beteiligt sind, dürfte es für ihn sehr schwer sein, dann die
                eigentliche Ursache der ungewollten Darstellung zu finden.

                Ich halte es desshalb für sinnvoll (für CSS-Anfäger), zumindest, wenn das
                Layout auch auf definierte Abstände aufbaut, ersteinmal alle Werte auf 0 zu
                setzen.

                  
                * {  
                  margin:0;  
                  padding:0;  
                }  
                
                

                Damit ist er gezwungen, alle Abstände selbst zu definieren, und läuft nicht
                Gefahr, sich bei einem ihm wichtigen Abstand auf einen zufällig passenden
                Browserdefaultwert zu verlassen.

                Auf Wiederlesen
                Detlef

                --
                - Wissen ist gut
                - Können ist besser
                - aber das Beste und Interessanteste ist der Weg dahin!
    2. Liebe Elya

      Nichts falsch gemacht, aber vermutlich vergessen, daß alle Elemente bestimmte Abstände (auch nach unten) bereits standardmäßig mitbringen, wenn Du sie nicht explizit definierst.

      Folgen nun mehrere solcher Elemente aufeinander, summieren sich margin-top und margin-bottom zum eigentlichen Abstand der Elemente zueinander.

      Versuch mal folgendes:

      • {margin:0;padding:0;}
      
      >   
      > (setzt margin und padding für \*alle\* Elemente auf 0, ist die brutalste, aber auch effektivste Methode, um default-Abstände auszuschalten.)  
        
      Ich habe das sogleich ausprobiert und es klappt.  
      Vielen Dank für den Tipp also.  
        
      Warim geht das eigentlich nicht, wenn ich das in boy schreibe  
      also so: body {margin:0;padding:0;}  
      Müsste es da nicht auch an h1,h2,p usw. vererbt werden?  
        
      Und noch ne Frage:  
      Diese \* {margin:0;padding:0;} Lösung leuchtet mir natürlich ein.  
      Damit hat man alle "Voreinstellungen" der Browser-internen Stys-Cheets  
      bezüglich Abständer abgestellt ... richtig?  
      Klingt natürlich ungemein praktisch, wenn man dann alle seine  
      gewünschten Abstände selbst "bestimmen" kann.  
      Aber ist das denn auch eine "saubere" Lösung?  
      Ich meine, jetz, wo ich mich gerade nei mit CSS-Layout usw.  
      beschäftige, will ich natürlich auch alles richtig machen  
      und nicht gleich wieder mit hingewurschtelten Tricks anfangen,  
      verstehst Du?  
        
      Oder ist diese Lösung durchaus angesagt und verbreiet?  
        
      Würde mich sehr freuen, wenn Du (und Ihr anderen auch)  
      mir da nochmal Deine/Eure Meinung zu sagen könntet.  
        
      Gruß  
      Ingo
      
      1. Hi,

        Warim geht das eigentlich nicht, wenn ich das in boy schreibe
        also so: body {margin:0;padding:0;}
        Müsste es da nicht auch an h1,h2,p usw. vererbt werden?

        nein. Nicht alle Eigenschaften werden vererbt. Wäre ja auch übel, wenn Du einem DIV ein margin gibst und alle hierin gruppierten Elemente hätten dieses ebenfalls, oder?

        Diese * {margin:0;padding:0;} Lösung leuchtet mir natürlich ein.
        Damit hat man alle "Voreinstellungen" der Browser-internen Stys-Cheets
        bezüglich Abständer abgestellt ... richtig?
        Klingt natürlich ungemein praktisch, wenn man dann alle seine
        gewünschten Abstände selbst "bestimmen" kann.
        Aber ist das denn auch eine "saubere" Lösung?

        Ich finde nicht. Dies machen eigentlich nur "Pixelschubser" so. ;-)
        Die achten aber auch peinlich genau drauf, jeden Abstand explizit anzugeben.

        Gehe davon aus, daß die Browser für alle Elemente sinnvolle Voreinstellungen haben, womit eine Seite auch ganz ohne CSS vernünftig dargestellt werden kann. Es ist nun wesentlich einfacher, nur die gewünschten Formatierungen explizit anzugeben, als sämtliche Voreinstellungen zu löschen und dann selbst neu zu setzen - zu leicht kann man da ein Element vergessen.
        In Deinem Beispiel willst Du für h1, h2 und p nur Abstände von 10px nach oben und keine (gesonderten) Abstände nach unten; also definiere einfach h1, h2, p {margin 10px 0 0}.
        Dabei mußt Du natürlich darauf achten, daß andere daruntergesetzte Elemente möglicherweise ohne Abstand sind (wenn z.B. ein Browser für h3 nur ein margin-bottom vorsieht). Günstiger wäre deshalb vielleicht h1, h2, p {margin:10px 0}. Der Unterschied zeigt sich dann nur bei nicht definierten Elementen sowie beim letzten so definiertem Element (für das Du dann ggfls. margin-bottom:0 gesondert angeben könntest).

        Übrigens ist 10px hier kein sinnvoller Wert. Wer die Schriftgröße stark heraufsetzt, wird von dem margin kaum noch etwas sehen und wer sie herabsetzt, hat übermäßig große Abstände. Verwende besser em, wobei Du natürlich drauf achten mußt, daß diese Einheit sich auf die Schriftgröße bezieht und Du für gleiche Abstände unterschiedliche Werte passend zur Schriftgröße angeben mußt. Also z.B. h2 {font-size:1em; margin:0.75em 0;} und h1 {font-size:1.5em; margin:0.5em 0;} ergibt gleiche Abstände, die zu jeder Schriftgröße passen.

        freundliche Grüße
        Ingo

        1. Lieber Ingo

          Warim geht das eigentlich nicht, wenn ich das in boy schreibe
          also so: body {margin:0;padding:0;}
          Müsste es da nicht auch an h1,h2,p usw. vererbt werden?

          nein. Nicht alle Eigenschaften werden vererbt. Wäre ja auch übel, wenn Du einem DIV ein margin gibst und alle hierin gruppierten Elemente hätten dieses ebenfalls, oder?

          Stimmt, das hatte ich nicht bedacht (und nicht gewusst).

          Ich finde nicht. Dies machen eigentlich nur "Pixelschubser" so. ;-)

          Ok, ud nso einer zu sein, will ich mir ja gerade abgewöhnen.

          Gehe davon aus, daß die Browser für alle Elemente sinnvolle Voreinstellungen haben, womit eine Seite auch ganz ohne CSS vernünftig dargestellt werden kann.

          Es ist nun wesentlich einfacher, nur die gewünschten Formatierungen explizit anzugeben, als sämtliche Voreinstellungen zu löschen und dann selbst neu zu setzen - zu leicht kann man da ein Element vergessen.
          In Deinem Beispiel willst Du für h1, h2 und p nur Abstände von 10px nach oben und keine (gesonderten) Abstände nach unten; also definiere einfach h1, h2, p {margin 10px 0 0}.
          Dabei mußt Du natürlich darauf achten, daß andere daruntergesetzte Elemente möglicherweise ohne Abstand sind (wenn z.B. ein Browser für h3 nur ein margin-bottom vorsieht). Günstiger wäre deshalb vielleicht h1, h2, p {margin:10px 0}. Der Unterschied zeigt sich dann nur bei nicht definierten Elementen sowie beim letzten so definiertem Element (für das Du dann ggfls. margin-bottom:0 gesondert angeben könntest).

          Übrigens ist 10px hier kein sinnvoller Wert. Wer die Schriftgröße stark heraufsetzt, wird von dem margin kaum noch etwas sehen und wer sie herabsetzt, hat übermäßig große Abstände. Verwende besser em, wobei Du natürlich drauf achten mußt, daß diese Einheit sich auf die Schriftgröße bezieht und Du für gleiche Abstände unterschiedliche Werte passend zur Schriftgröße angeben mußt. Also z.B. h2 {font-size:1em; margin:0.75em 0;} und h1 {font-size:1.5em; margin:0.5em 0;} ergibt gleiche Abstände, die zu jeder Schriftgröße passen.

          Ich habe gerade mal alle margins weggelassen, um mir das mal nur
          mit den "sinnvollen" Voreinstellungen der Browser anzusehen.
          Dabei fallen mir 2 Dinge auf:

          1.) h1, h2 und p scheinen da alle die gleichen Voreinstellungen zu haben.
          Ich meinte mal gelesen zu haben, dass die Überschriften
          einen etwas größeren Abstand haben, bin mir aber nicht sicher.

          2.) Firefox passt die Abstände auch bei Schriftgrad-Änderung
          immer schön mit an. Opera macht das auch, wobei dieser dann
          aber sogar die Angabe width: 508px; ignoriert.
          Und der IE passt die vertikalen Abstände NICHT mit an,
          wenn man den Schrtgrad im Browser ändert.

          Das ist ja fürchterlich ;-(
          Sollte man sich aufgrund dieses ganzen durcheinanders vielleicht
          dann doch lieber ein Layout ausdenken, was vollkommen auf
          Breitanangaben verzichtet?

          Gruß
          Ingo

          1. Hallo Ingo.

            Ich finde nicht. Dies machen eigentlich nur "Pixelschubser" so. ;-)

            Ok, ud nso einer zu sein, will ich mir ja gerade abgewöhnen.

            Vergiss' den Smiley nicht.
            Diese „Holzhammermethode“ kann durchaus erfolgreich eingesetzt werden, wenn man sich nicht auf das browserseitige CSS verlassen will.

            Einen schönen Samstag noch.

            Gruß, Ashura

            --
            Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
            30 Days to becoming an Opera8 Lover -- Opera Mini on Treo
            Meine Browser: Opera 8.02 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
            [Deshalb frei! - Argumente pro freie Software]
          2. Hi,

            2.) Firefox passt die Abstände auch bei Schriftgrad-Änderung
            immer schön mit an. Opera macht das auch, wobei dieser dann
            aber sogar die Angabe width: 508px; ignoriert.

            Hast Du evtl. keinen Doctype angegeben? Opera bemüht sich dann, die Fehler des IE zu kopieren. ;-)

            Und der IE passt die vertikalen Abstände NICHT mit an,
            wenn man den Schrtgrad im Browser ändert.

            Das spricht gegen das Browser-Stylesheet des IE und für eine eigene Angabe der Abstände, um dieses Manko zu beseitigen. Vermulich gehen die IE-Entwickler davon aus, daß Schriftgrößen meist in px angegeben werden und sich daher ja ohnehin nicht im IE skalieren lassen. ;-)

            Sollte man sich aufgrund dieses ganzen durcheinanders vielleicht
            dann doch lieber ein Layout ausdenken, was vollkommen auf
            Breitanangaben verzichtet?

            wieso Breitenangaben? Ich denke, es geht um Abstände?

            freundliche Grüße
            Ingo

            1. Lieber Ingo

              2.) Firefox passt die Abstände auch bei Schriftgrad-Änderung
              immer schön mit an. Opera macht das auch, wobei dieser dann
              aber sogar die Angabe width: 508px; ignoriert.

              Hast Du evtl. keinen Doctype angegeben? Opera bemüht sich dann, die Fehler des IE zu kopieren. ;-)

              Doch, habe ich :
              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
              Oder hat dieses width-Verhalten evtl. was mit "XHTML 1.0 Strict" zu tun?

              Sollte man sich aufgrund dieses ganzen durcheinanders vielleicht
              dann doch lieber ein Layout ausdenken, was vollkommen auf
              Breitanangaben verzichtet?

              wieso Breitenangaben? Ich denke, es geht um Abstände?

              Ja, das mit der Breitenangabe im Opera war mir nur zusätlich aufgefallen.
              Hier zur Veranschaulichung nochmal mein HTML-Code und die CSS:

              HTML
              -------------------------------------------------------------------

              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
                "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
              <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">  
                
              <head>  
                
              <meta http-equiv="Content-Style-Type" content="text/css" />  
              <meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />  
              <link rel="stylesheet" type="text/css" media="screen" href="css-screen.css" />  
                
              <title>SPACEart</title>  
                
              </head>  
                
              <body>  
                
              <h1>Neuheiten</h1>  
                
              <h2>Star Wars : AT-AT (Einzelstück)</h2>  
                
              <img src="Artikel/2001007-b.jpg">  
                
              <p>Es handelt sich um den Original Modell-Bausatz der Firma mpc/ERTL aus dem Jahr 1989. Die vorderen Beine und das Kontroll-Modul ("Kopf") sind beweglich. Die Base und der Snow Speeder sind nicht enthalten. -- ACHTUNG: wir haben nur ein einziges Exemplar !</p>  
                
              <p>Es handelt sich um den Original Modell-Bausatz der Firma mpc/ERTL aus dem Jahr 1989. Die vorderen Beine und das Kontroll-Modul ("Kopf") sind beweglich. Die Base und der Snow Speeder sind nicht enthalten. -- ACHTUNG: wir haben nur ein einziges Exemplar !</p>  
                
              </body>  
              </html>
              

              -------------------------------------------------------------------

              CSS
              -------------------------------------------------------------------

              * html body {font-size:101%;}  
                
              body{  
                background-color : #235f70;  
                font-family : Arial, Verdana, Helvetica, sans-serif;  
                color: #ffffff;  
              }  
                
              h1, h2, p{  
                background-color: #004559;  
                padding: 5px;  
                border: 1px solid #ffffff;  
                width: 498px;  
                margin: 10px 0 0;  
              }  
                
              h1,h2{  
                font-weight: bold;  
                color: #fff000;  
              }  
                
              h1{  
                font-size:1.5em;  
              }  
                
              h2{  
                font-size:1.3em;  
              }  
                
              img{  
                border: 1px solid #ffffff;  
                margin: 10px 0 0;  
              }
              

              -------------------------------------------------------------------

              Und hier auch nochmal der Link, wo Du Dir das praktisch
              ansehen kannst: http://http://www.spaceart.de/_WC3_Test.shtml

              Im IE und Firefox wird die Breite von h1, h2 und p in 498px eingehalten
              (natürlich zusatzlich des 1px borders und 5px paddings)
              aber im Opera wird die Breite der angezeigten Element immer
              größer, je weiter ich die ..... ähhh moment mal ....
              .... ich sehe gerade, dass das da Zoomfaktor heisst.
              Das würde natürlich alles erklären.
              Kann man im Opera überhaupt die Schriftgröße verändern?

              Gruß
              Ingo

              1. Hi,

                aber im Opera wird die Breite der angezeigten Element immer
                größer, je weiter ich die ..... ähhh moment mal ....
                .... ich sehe gerade, dass das da Zoomfaktor heisst.

                Opera folgt mit der Zoom-Funktion dem IE, der den style "zoom" kennt, und vergrößert sämtliche Seitenelemente inkl. der Bilder. Dies ist auf einigen Seiten durchaus positiv, wenn z.B. durch alleinige Schriftgradänderung das Layout auseinanderfallen würde, kann aber ebenso nachteilhaft sein, da die gezoomten Bilder nicht unbedingt mehr ansehnlich sind.

                Denselben Effekt kann man - für alle Browser - durch durchgängige Verwendung der Einheit em erreichen, da solche Größenangaben ja mit dem Schriftgrad skaliert werden. Sogar den "Bilderzoom" kann man über em allgemeingültig erzielen, wie dieses Beispiel nebenbei zeigt.

                freundliche Grüße
                Ingo

                1. Lieber Ingo

                  Opera folgt mit der Zoom-Funktion dem IE, der den style "zoom" kennt, und vergrößert sämtliche Seitenelemente inkl. der Bilder.

                  Kann man denn im Opera auch nur den Svhriftgrad verändern?

                  Gruß
                  Ingo

              2. Hi Ingo,

                <img src="Artikel/2001007-b.jpg">

                Fehler: Das zwingend notwendige alt-Attribut fehlt.

                Doppelfehler: Das img-Element wird nicht geschlossen.

                Live long and prosper,
                Gunnar

                --
                „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
                1. Lieber Gunnar

                  <img src="Artikel/2001007-b.jpg">
                  Fehler: Das zwingend notwendige alt-Attribut fehlt.

                  Danke für den Hinweis. Hätte ich aber noch nachgeholt.
                  Mir gin es ja erstmal nur darum, wie ich mit dem img-Element in CSS überhaupt umzugehen habe.

                  Doppelfehler: Das img-Element wird nicht geschlossen.

                  Ist erledigt.

                  Danke und Gruß aus Münster
                  Ingo