Doc Taxon: Farbunterlegung Überschrift

Hi Ihr,

ich hab es schon mal versucht, in diesem Forum eine Antwort auf ein Problem zu finden, aber ohne Erfolg, ich mach es jetzt gleich noch einfacher:

Quell-Text:

<html>
<head>
<style type="text/css">
h1 { font-family:"Monotype Corsiva";
     color:#000000;
     font-size:20pt;
     vertical-align:middle;
     font-weight:bold;
     background-color:#ff6644;
     margin:0px; padding:0px; }
</style>
</head>
<body margin="0px" padding="0px">
    <h1>Farbig unterlegte &Uuml;berschrift</h1>
</body>
</html>

Ganz einfach: Einen Stylesheet für h1 definiert, um die einzelne Textzeile im body-Tag farbig zu unterlegen.

Obwohl ich es gar nicht eingegeben habe, erscheint immer noch ein nackiger (unfarbiger) Rand um die Farbunterlegung herum im IE6. Ich wollte aber den Farbbalken mit dem BROWSER-Rand bündig abschließen lassen, ohne Lücken.

Ich habe jetzt in den Quelltext schon zweimal margin und padding = 0px eingegeben, ohne Erfolg, auch habe ich schon versucht, den Bereich tabellarisch bündig in die Seite einzubinden, ohne Erfolg. Auch ohne CSS-Eingabe kein Erfolg...

Ist es überhaupt möglich, bis an den Browserrand so einen Farbbereich zu definieren? Und wie?

Danke! (auch wenn ich wahrscheinlich langsam nerve)

  1. Hallo,

    Ich habe jetzt in den Quelltext schon zweimal margin und padding = 0px eingegeben, ohne Erfolg, auch habe ich schon versucht, den Bereich tabellarisch bündig in die Seite einzubinden, ohne Erfolg. Auch ohne CSS-Eingabe kein Erfolg...

    welche Werte für margin und haben denn die umgebenden Elemente?

    Mit freundlichen Grüßen

    André

  2. hi,

    <body margin="0px" padding="0px">

    diese HTML-attribute gibt es für body nicht.

    Ist es überhaupt möglich, bis an den Browserrand so einen Farbbereich zu definieren? Und wie?

    definiere margin (und ggf. padding) für body ebenfalls mit _korrektem_ CSS. wenn du weißt, wie du für h1 CSS-formatierungen notierst - wo ist das problem, das für body analog zu machen?

    Danke! (auch wenn ich wahrscheinlich langsam nerve)

    na ja, wenn du dich ein wenig intensiver mit http://de.selfhtml.org/css/ beschäftigen würdest, könnte das sicher nicht schaden ;-)

    gruß,
    wahsaga

    --
    Rest in peace, Dimebag!
    #
    "Look, that's why there's rules, understand? So that you _think_ before you break 'em."
    1. Danke Euch allen,

      endlich fkt. das - ich muß ja mächtig auf dem Schlauch gestanden haben.

      Aber eine Frage habe ich da noch

      Es gibt zwei Möglichkeiten, den CSS bzgl. des body-Tags zu definieren.

      CSS:  .bodyx { }
      HTML: <body class="bodyx">Text</body>

      und

      CSS:  #bodyx { }
      HTML: <body id="bodyx">Text</body>

      Worin (außer Syntax) liegt denn hier der Unterschied, und wenn es keinen gibt, warum gibt es dann zwei Möglichkeiten?

      1. Hi,

        Es gibt zwei Möglichkeiten, den CSS bzgl. des body-Tags zu definieren.

        nein, unendlich viele. Beispielsweise auch

        body
        html > *:last-child

        Worin (außer Syntax) liegt denn hier der Unterschied,

        Bei einer ID hälst Du das Element für IDentifikationswürdig, bei einer Klasse für klassifizierbar. Unter keinen Umständen werden diese Attribute gesetzt, weil Du speziellen CSS-Code anwenden möchtest - es sind _HTML_-Attribute, also ausschließlich aus struktureller Sicht zu setzen.

        Cheatah

        --
        X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
        X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
        X-Will-Answer-Email: No
        X-Please-Search-Archive-First: Absolutely Yes
      2. hi,

        Es gibt zwei Möglichkeiten, den CSS bzgl. des body-Tags zu definieren.

        nö. dürften eher nahezu unednlich viele sein.

        CSS:  .bodyx { }
        HTML: <body class="bodyx">Text</body>

        und

        CSS:  #bodyx { }
        HTML: <body id="bodyx">Text</body>

        h1 formatierst du doch auch direkt, warum mit body nicht gneauso?

        Worin (außer Syntax) liegt denn hier der Unterschied, und wenn es keinen gibt, warum gibt es dann zwei Möglichkeiten?

        wie ich schon sagte, _beschäftige_ dich bitte intensiver mit dem CSS-kapitel von CSS - dort kannst du u.a. auch etwas über selektoren, klassen und IDs nachlesen.

        gruß,
        wahsaga

        --
        Rest in peace, Dimebag!
        #
        "Look, that's why there's rules, understand? So that you _think_ before you break 'em."
      3. Hallo,

        eine ID (#) darf nur einmal in einem Dokument vorkommen. Insofern ist die Angabe einer ID bei einem <body> eigentlich sinnlos (evtl. Ausnahme: Zugriff mittels Javascript).

        Eine Klasse (.) darf mehrmals vorkommen. Macht sich gut bei gleichartigen Elementen innerhalb eines Dokumentes.

        Mit freundlichen Grüßen

        André

        1. hi,

          eine ID (#) darf nur einmal in einem Dokument vorkommen. Insofern ist die Angabe einer ID bei einem <body> eigentlich sinnlos (evtl. Ausnahme: Zugriff mittels Javascript).

          oder bei einer CSS-ressource, die bodys mehrerer dokumente unterschiedlich formatieren möchte ...

          gruß,
          wahsaga

          --
          Rest in peace, Dimebag!
          #
          "Look, that's why there's rules, understand? So that you _think_ before you break 'em."
          1. Hallo,

            oder bei einer CSS-ressource, die bodys mehrerer dokumente unterschiedlich formatieren möchte ...

            du hast wie immer Recht. Ich habe vergessen anzugeben, dass sich meine Angaben allein auf ein HTML-Dokument beziehen.

            Mit der Bitte um Entschuldigung

            André

            1. hi,

              du hast wie immer Recht.

              ah, nicht doch :-)

              Mit der Bitte um Entschuldigung

              ich hoffe dir kein allzu schlechtes gewissen eingeredet zu haben ;-)

              gruß,
              wahsaga

              --
              Rest in peace, Dimebag!
              #
              "Look, that's why there's rules, understand? So that you _think_ before you break 'em."
  3. Moin,

    probiers nach alter Väter Sitte mit :

    <body leftmargin="0" topmargin="0" marginheight="0" marginwidth="0">

    gruß mipu

    1. Hi,

      probiers nach alter Väter Sitte mit :

      die "alten Väter", die sowas getan haben, unterhielten sich in einer hauptsächlich aus "Ugh!" bestehenden Sprache. Das da stammt nämlich aus der Steinzeit.

      Cheatah

      --
      X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
      X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
      X-Will-Answer-Email: No
      X-Please-Search-Archive-First: Absolutely Yes
      1. Hi,

        probiers nach alter Väter Sitte mit :

        die "alten Väter", die sowas getan haben, unterhielten sich in einer hauptsächlich aus "Ugh!" bestehenden Sprache. Das da stammt nämlich aus der Steinzeit.

        Stimmt. Funktioniert aber.
        Hats sehr weh getan ? :)

        gruß mipu

        1. Hi,

          Stimmt. Funktioniert aber.
          Hats sehr weh getan ? :)

          nö. Recherchiere bitte im </archiv/>, warum "es funktioniert" bestenfalls aussagefrei ist.

          Cheatah

          --
          X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
          X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
          X-Will-Answer-Email: No
          X-Please-Search-Archive-First: Absolutely Yes
  4. Hi,

    <html>

    gib einen hinreichend günstigen DOCTYPE an.

    h1 { font-family:"Monotype Corsiva";

    Nenne *unbedingt* die passende generische Schriftfamilie.

    font-size:20pt;

    "pt" ist die mit großem Abstand ungeeignetste Einheit für Schriftgrößen auf Bildschirmmedien. Nutze "em" oder "%".

    vertical-align:middle;

    <h1> ist standardmäßig kein Element, bei welchem vertical-align zutreffen würde.

    </head>

    Das zwingend benötigte <title>-Element fehlt.

    <body margin="0px" padding="0px">

    Keines dieser Attribute existiert in HTML, keines dieser Attribute hätte in HTML etwas verloren, und wenn es sie gäbe, wäre der Wert ungültig. Verwechsele nicht HTML mit CSS.

    Obwohl ich es gar nicht eingegeben habe,

    Der Browser ist mit einem Basis-CSS ausgestattet, welches Du durch die Anwendung von eigenem CSS nicht ersetzt, sondern erweiterst.

    erscheint immer noch ein nackiger (unfarbiger) Rand um die Farbunterlegung herum

    Natürlich, Du hast ja auch nichts dagegen unternommen, dass der <body> oder das <html> einen solchen Rand erzeugt.

    im IE6.

    Teste primär mit einem Mozilla. Der IE ist - in jeder Beziehung - das Letzte.

    Auch ohne CSS-Eingabe kein Erfolg...

    Ja, eben. Ohne CSS kein Erfolg.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. Hi,

      Teste primär mit einem Mozilla.

      das hätte ich bis vor kurzem auch noch empfohlen. Jetzt würde ich eher zum aktuelle(re)n Firefox raten.
      Firefox hat inzwischen Mozilla den Rang abgelaufen. Auf meinen Seiten z.B. wird er ca. 3.5 mal häufiger als Mozilla identifiziert. Und Firefox 1.0 ist hält sich offenbar noch stärker an die Specs als Mozilla 1.7.3.
      Opera scheidet als erster Testbrowser mMn aus, da er sich in einigen Punkten zu sehr am IE orientiert und er auch einige CSS-Bugs hat.

      freundliche Grüße
      Ingo

      1. Hi,

        Teste primär mit einem Mozilla.
        das hätte ich bis vor kurzem auch noch empfohlen. Jetzt würde ich eher zum aktuelle(re)n Firefox raten.

        Firefox ist in meiner Formulierung durch den unbestimmten Artikel mit enthalten. Ich würde auch von "einem Gecko" reden, nur dürfte das vielerorts weniger verstanden werden als obige Wahl.

        Opera scheidet als erster Testbrowser mMn aus,

        Es sei denn, man weiß _sehr_ genau, was man tut. Empfehlen würde ich es aber nicht.[1]

        Cheatah

        [1] Opera als Primärtestbrowser zu verwenden, nicht sehr genau zu wissen, was man tut ;-)

        --
        X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
        X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
        X-Will-Answer-Email: No
        X-Please-Search-Archive-First: Absolutely Yes
        1. Hi,

          Firefox ist in meiner Formulierung durch den unbestimmten Artikel mit enthalten. Ich würde auch von "einem Gecko" reden, nur dürfte das vielerorts weniger verstanden werden als obige Wahl.

          Das meinte ich doch nicht. Die Unterschiede zwischen Firefox 1.0 und anderen Mozillas (die jüngsten Vorgängerversionen von Firefox vielleicht ausgenommen) sind so erheblich, daß ich wirklich keinen "anderen" Mozilla mehr als Primär-Testbrowser empfehlen würde.

          freundliche Grüße
          Ingo

          1. Hallo,

            daß ich wirklich keinen "anderen" Mozilla mehr als Primär-Testbrowser empfehlen würde.

            Was sind denn »Primär-Testbrowser«? Das ist mir immer noch schleierhaft. Ich sehe keinen Sinn bzw. Mehrwert in dieser Methodik. Was gewinne ich dadurch, inwiefern gibt es mir besondere Erkenntnis, auf die ich anderweitig nicht sowieso stoße; was erspare ich mir, was ich nicht sowieso machen muss?

            Mathias

            1. hi,

              daß ich wirklich keinen "anderen" Mozilla mehr als Primär-Testbrowser empfehlen würde.

              Was sind denn »Primär-Testbrowser«? Das ist mir immer noch schleierhaft. Ich sehe keinen Sinn bzw. Mehrwert in dieser Methodik. Was gewinne ich dadurch, inwiefern gibt es mir besondere Erkenntnis, auf die ich anderweitig nicht sowieso stoße; was erspare ich mir, was ich nicht sowieso machen muss?

              einige leute hier haben wohl nun mal die erfahrung gemacht, dass es für sie weitaus einfacher ist, erstmal zu versuchen validen code zu erstellen, den der die umsetzung der standards am besten beherrschende browser wie gewünscht darstellt, und diesen code dann anschließend mittels diverser kniffe, CSS-hacks und ggf. kleinen browserweichen auch dem/den browser(n) schmackhaft zu machen, die beim darstellen vom vorgesehenen abweichen.

              wenn du ein anderes vorgehen bevorzugst, sei dir das doch gerne gegönnt - und wenn du damit möglicherweise sogar noch in kürzerer zeit gleichwertige ergebnisse erzielst, dann verrate uns doch mal deine tricks ;-)

              gruß,
              wahsaga

              --
              Rest in peace, Dimebag!
              #
              "Look, that's why there's rules, understand? So that you _think_ before you break 'em."
              1. Hallo,

                einige leute hier haben wohl nun mal die erfahrung gemacht, dass es für sie weitaus einfacher ist, erstmal zu versuchen validen code zu erstellen, den der die umsetzung der standards am besten beherrschende browser wie gewünscht darstellt, und diesen code dann anschließend mittels diverser kniffe, CSS-hacks und ggf. kleinen browserweichen auch dem/den browser(n) schmackhaft zu machen, die beim darstellen vom vorgesehenen abweichen.

                wenn du ein anderes vorgehen bevorzugst, sei dir das doch gerne gegönnt

                Das mache ich im Prinzip genauso, nur in kleineren Schritten. Ich erstelle kein fertiges Layout, welches erst einmal nur im ominösen »Primär-Testbrowser« oder »Referenzbrowser« überhaupt sinnvolle Resultate liefert und womöglich in allen anderen Browsern relevanten mehr oder weniger stark ablost. Ich werfe dann nicht solange Browserweichen, Hacks und Extra-Stylesheets drauf, bis die anderen Browser auch irgendwie mitspielen und das Konzept wieder gerettet ist. Jede Grundstruktur teste ich einzeln in den verschiedenen Browsern und bringe in Erfahrung, ob überhaupt eine browserübergreifende Lösung möglich ist und auf welche Weise am effizientesten. Auf diese Erfahrungen kann ich später zurückgreifen. In der Planungsphase und der ersten Umsetzungsphase fasse ich also durchaus verschiedene Browser an und fixiere mich nicht alleinig auf die eine ideale Umsetzung in dem einen Über-Browser, sondern beziehe von Anfang an technisch weniger fähige Browser in die Entwicklung ein. In diesen ständigen Sprüchen, MSIE und Co. erst einmal vollkommen außen vor zu halten, bis die Umsetzung im Referenzbrowser steht, sehe ich keine große Wahrheit. Bei dieser Vorgehensweise entsteht eben eine mehr oder weniger ideale Lösung. Ob es eine praktikable gibt und wie diese aussieht, wird lange außen vor gelassen. Bei mir steht die Vereinbarung zu jeder Zeit im Vordergrund. Ein »auf jeden Fall erst einmal in Browser X umsetzen, dann im Browser Y anpassen« kann es bei mir nicht geben, diese Gegenprüfung und dieser Abgleich findet ständig statt, nicht in einer festgelegten Reihenfolge oder nach einem starren Schema.

                Mathias

                1. hi,

                  Das mache ich im Prinzip genauso, nur in kleineren Schritten.

                  gut, werden die meisten hier wohl auch so oder ähnlich machen.

                  Jede Grundstruktur teste ich einzeln in den verschiedenen Browsern und bringe in Erfahrung, ob überhaupt eine browserübergreifende Lösung möglich ist und auf welche Weise am effizientesten. Auf diese Erfahrungen kann ich später zurückgreifen.

                  gut, als etwas erfahrenere haben wir vielleicht schon beim aufbau der grundstruktur gewisse eigenarten der browser im hinterkopf. (beispielweise zentrierung eines block level containers über margin:auto - dass der IE <6 oder im quirks mode hier mit text-align gerettet werden will, habe ich im hinterkopf - das kann ich am ende regeln, da brauche ich jetzt nicht zwischendurch den IE anschmeißen, um mir das nochmal bestätigen zu lassen)

                  In diesen ständigen Sprüchen, MSIE und Co. erst einmal vollkommen außen vor zu halten, bis die Umsetzung im Referenzbrowser steht, sehe ich keine große Wahrheit.

                  ich gebe dir in so fern recht, dass sie dem anfänger, dem sie oft an den kopf geworfen werden, wahrscheinlich nicht so besonders weiterhelfen, weil er kleinigkeiten wie oben beispielhaft erwähnte nicht so wie wir bereits im hinterkopf hat.
                  und dass es auch bei den erfahreneren, wie du ja ausführst, nicht der weisheit letzter schluß ist, weil auch diese bei komplexeren layouts nicht alle eigenarten der browser sofort von anfang an berücksichtigen können.

                  gruß,
                  wahsaga

                  --
                  Rest in peace, Dimebag!
                  #
                  "Look, that's why there's rules, understand? So that you _think_ before you break 'em."
            2. Hi,

              Was sind denn »Primär-Testbrowser«? Das ist mir immer noch schleierhaft. Ich sehe keinen Sinn bzw. Mehrwert in dieser Methodik.

              Gegenfrage: Was willst Du durch Testen erreichen?

              Ich will verifizieren

              • daß die Seite valide ist -> Validatoren
              • und daß das CSS so erstellt ist, daß die Seite bei korrekter Umsetzung der Specs wunschgemäß dargestellt wird. Dies sehe ich am besten mit dem Browser, der sich am besten daran hält - und das ist nunmal meinr Erfahrung nach Firefox 1.0.

              Oder anders gesagt: ich möchte schon gerne sehen, was meine Fehler sind und was fehlerhafte Umsetzung der Specs. Im Endeffekt kommt natürlich das gleiche heraus, aber so weiß ich, wo ich warum welche Korrekturen vorgenommen habe. Und es dürfte in manchen Fällen Arbeit ersparen.

              freundliche Grüße
              Ingo

          2. Hi,

            Das meinte ich doch nicht. Die Unterschiede zwischen Firefox 1.0 und anderen Mozillas (die jüngsten Vorgängerversionen von Firefox vielleicht ausgenommen) sind so erheblich, daß ich wirklich keinen "anderen" Mozilla mehr als Primär-Testbrowser empfehlen würde.

            ach so. Eine aktuelle Version setze ich schon voraus, egal wie das Produkt heißt, und da sehe ich eigentlich keinen großen Unterschied zwischen Mozilla und Firefox. Mozilla 1.2 würde ich natürlich nicht empfehlen ;-)

            Cheatah

            --
            X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
            X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
            X-Will-Answer-Email: No
            X-Please-Search-Archive-First: Absolutely Yes
            1. Hi,

              und da sehe ich eigentlich keinen großen Unterschied zwischen Mozilla und Firefox.

              ich schon. Z.B. in der Interpretation von 'clear' hat Firefox dazugelernt und bei einigen Postings hier meine ich auch über Probleme bei der Darstellung im Firefox gelesen zu haben, die im Mozilla nicht auftraten.

              freundliche Grüße
              Ingo

              1. Hi,

                und da sehe ich eigentlich keinen großen Unterschied zwischen Mozilla und Firefox.
                ich schon. Z.B. in der Interpretation von 'clear' [...]

                sicher, es werden schließlich Fehler behoben und Fähigkeiten erweitert. Ich sehe dies aber nicht als Grund an, Mozilla im Gegensatz zu Firefox als ungeeignet zu betrachten (überspitzt gesagt). Wahrscheinlich wird Mozilla 1.8, der wohl auch nicht mehr lange auf sich warten lässt, hier wieder aufgeholt oder Firefox vielleicht sogar überholt haben. Aber auch wenn nicht: Mozilla bleibt ganz oben an der Spitze bestehen, nur um ein µ von Firefox überholt, und ist damit nach wie vor hervorragend für Primärtests geeignet.

                Aber ich denke, unsere Meinungen differieren hier bei genauer Betrachtung nur minimal :-)

                Cheatah

                --
                X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
                X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
                X-Will-Answer-Email: No
                X-Please-Search-Archive-First: Absolutely Yes