xia: h1 image

hallo mal ne frage:

<h1 style=" h1:11px; padding:10px 0px 10px;
background-image:url(balken.jpg)">bild<h1>

wenn ich ein bild mit höhe 31px nehme wird es nochmal darunter angezeigt, d.h meine h1 box ist höher als 31px(leeraum oberhal/unterhalb der buchstaben?).

wie kannich mir jetzt die benötigte höhe(der h1 box) fürs bild ausrechnen?

lg
xia

  1. hallo,

    <h1 style=" h1:11px;

    ist ungültig.

    wenn ich ein bild mit höhe 31px nehme wird es nochmal darunter angezeigt

    Worunter?

    wie kannich mir jetzt die benötigte höhe(der h1 box) fürs bild ausrechnen?

    Gar nicht. <h1> ist eine Überschrift. Wenn du ein Bild haben möchtest, nimmst du <img>.

    Grüße aus Berlin

    Christoph S.

    --
    Visitenkarte
    ss:| zu:) ls:& fo:) va:) sh:| rl:|
    1. hallo mal ne frage:

      <div>
      <h1 style=" font-size:11px; padding:10px 0px 10px;
      background-image:url(balken.jpg)">bild<h1>
      </div>

      das background image sollte ja als hintergrund dienen und wenn das bild jetzt 31px hoch ist müsste es doch in h1 box passen, da aber zu den 11px fontsize noch ein wert kommt(der leerraum oberhalb/unterhalb der buchstaben)ist die ganze höhe mehr als 31 px und das image wird dann höher gemacht sodass es die ganze box ausfüllt.

      ich würde gerne wissen wie ich es schaffe dass mein bild genau in die h1 box passt.

      lg
      xia

      1. Hallo

        <div>
        <h1 style=" font-size:11px; padding:10px 0px 10px;
        background-image:url(balken.jpg)">bild<h1>
        </div>

        das background image sollte ja als hintergrund dienen und wenn das bild jetzt 31px hoch ist müsste es doch in h1 box passen, da aber zu den 11px fontsize noch ein wert kommt(der leerraum oberhalb/unterhalb der buchstaben)ist die ganze höhe mehr als 31 px und das image wird dann höher gemacht sodass es die ganze box ausfüllt.

        ich würde gerne wissen wie ich es schaffe dass mein bild genau in die h1 box passt.

        <h1> ist ein Blockelement. Es hat, je nach Browser, verschiedene Standardwerte für margin, padding, font-size (daraus resultierend auch für line-height) etc. pp.. Du fügst, mit padding: 10px 0px 10px;[1], oben und unten einen Innenabstand von jeweils 10 Pixeln zur line-height hinzu. In diesem Bereich wird auch das Hintergrundbild angezeigt.

        Wenn du Abstand zu vorhergehenden und folgenden Elementen schaffen willst, benutze margin und setze die anderen Werte explizit auf die gewünschte Größe, damit es in allen (besser: möglichst vielen) Browsern gleich dargestellt wird.

        [1] Wenn die Werte für oben und unten identisch sind, reicht auch padding: 10px 0; (siehe: http://de.selfhtml.org/css/eigenschaften/innenabstand.htm#padding).

        Tschö, Auge

        --
        Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
        (Victor Hugo)
        Veranstaltungsdatenbank Vdb 0.1
        1. <h1> ist ein Blockelement. Es hat, je nach Browser, verschiedene Standardwerte für margin, padding, font-size (daraus resultierend auch für line-height) etc. pp.. Du fügst, mit padding: 10px 0px 10px;[1], oben und unten einen Innenabstand von jeweils 10 Pixeln zur line-height hinzu. In diesem Bereich wird auch das Hintergrundbild angezeigt.

          das vesteh ich nicht: mein bild ist ja 31px hoch die
          h1{ fon-size:11px; padding: 10px 0px;} box aber anscheinend nicht sonst würde mein bild ja genau passen.

          ist es dann irgenwie möglich die grafik genau anzupassen wenn der browser seine schriftgrößen selber wählt?

          das <div> hab ich wegen 100% breite gemacht.

          1. sollte ich line-height:0em nehmen um so zu garantiern dass die zeilenbox wirklich 11px ist?

            1. Hallo

              sollte ich line-height:0em nehmen um so zu garantiern dass die zeilenbox wirklich 11px ist?

              Wie hoch wäre dann die Zeile?

              Tschö, Auge

              --
              Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
              (Victor Hugo)
              Veranstaltungsdatenbank Vdb 0.1
              1. ach des war quatsch...

                aus meinem css büchlein:

                line-height - font-size = ist durchschuss

                ich weiss aber nicht ob line-height standartmäßig 0 ist, wenn ja dann wäre es ja kein problem:

                fontsize: 11px;
                +
                padding: 10px 0px;
                =31px

                grafik(31px hoch) würde genau in die h1 box passen, ist aber nicht so

                mann bin ich verwirrt.
                :)

                1. Hallo

                  line-height - font-size = ist durchschuss

                  ich weiss aber nicht ob line-height standartmäßig 0 ist

                  Wie sollte sie? Der Text ist mit einer Schriftgröße von 11px (warum eigentlich so klein?) versehen. Die Zeilenhöhe _muss_ also größer sein.

                  Hast du die anderen Hinweise in diesem Thread (feste Höhe, anpassen der Angaben für's Hintergrundbild) verfolgt?

                  Tschö, Auge

                  PS: <lamentier>Standard wird mit zwei "d"s und nur _einem_ "t" geschrieben.</lamentier>

                  --
                  Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
                  (Victor Hugo)
                  Veranstaltungsdatenbank Vdb 0.1
                  1. Hallo

                    line-height - font-size = ist durchschuss

                    ich weiss aber nicht ob line-height standartmäßig 0 ist

                    Wie sollte sie? Der Text ist mit einer Schriftgröße von 11px (warum eigentlich so klein?) versehen. Die Zeilenhöhe _muss_ also größer sein.

                    basiert die feststellung jetzt auf dem rechenbeispiel, sonst verstehe ich es nicht.

                    ja habe auch die anderen post gelesen, und werde jetzt mit

                    h1{
                    height:50 px;
                    }

                    da das background image nicht wiederholt werden sollte.

                    lg
                    xia

                    1. Hi,

                      h1{
                      height:50 px;

                      Warum nimmst Du einen ungültigen Wert?

                      cu,
                      Andreas

                      --
                      Warum nennt sich Andreas hier MudGuard?
                      Schreinerei Waechter
                      O o ostern ...
                      Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
                      1. arrrgggg
                        ich beis mir selber in den ar...

                        ich komm grad rüber wie ein voll depp,hab alles miteinander verwechselt.

                        so nochmal, eigentlich wollte ich nur wissen wie ich zum durchschuss komme, der ergibt sich aber aus den werten line-height - font-size,
                        da ich ja fontsize immer gegeben habe da ich es mir ja selber definiere(ja ich weiss die browser hauen den plan zusammen).
                        die lineheight muss ja irgendwie mit der fot-size zusammenhäneg z.b font-size * 1,5 oder so.
                        ich woolte eigentlich nur wissen ob der factor von schrift zu schrift verschieden ist oder immer gleich ist.

                        naja wenigstens weiss ich jetzt dass denken und das gedachte dann so zu formulieren eine echte herausforderung ist.

                        1. Hallo

                          so nochmal, eigentlich wollte ich nur wissen wie ich zum durchschuss komme, der ergibt sich aber aus den werten line-height - font-size,
                          da ich ja fontsize immer gegeben habe da ich es mir ja selber definiere(ja ich weiss die browser hauen den plan zusammen).

                          Die Browser nicht unbedingt, 11px sollten überall, wo dies beachtet wird, 11px sein. Der Benutzer haut "den plan zusammen". und genau für den, und nicht für Browser, solltest du deine Seite gestalten.

                          die lineheight muss ja irgendwie mit der fot-size zusammenhäneg z.b font-size * 1,5 oder so.
                          ich woolte eigentlich nur wissen ob der factor von schrift zu schrift verschieden ist oder immer gleich ist.

                          Kann ich dir nicht sagen. Sagen kann ich dir aber, dass du dir nicht sicher sein kannst, ob die von dir vorgesehene Schriftart auf dem Rechner des Besuchers installiert ist. Auch die von dir vorgesehene Schriftgröße kann vom Besucher übergangen werden, z.B. indem er eine Mindestschriftgröße vorgibt.

                          Du kannst nichts voraussetzen, außer, dass der Text einer Seite angezeigt wird. Das musst du _immer_ berücksichtigen, besonders, wenn du exzessiv mit Graphiken als gestalterischen Elementen arbeitest.

                          Sie sollten sich also gut kacheln lassen (in eine oder beide Richtungen) oder sie sollten einzeln angezeigt werden können. Und genau das kannst du, für Hintergrundgraphiken, mit der Angabe von [code: lang=css]background-repeat:no-repeat;[/code] erreichen.

                          Tschö, Auge

                          --
                          Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
                          (Victor Hugo)
                          Veranstaltungsdatenbank Vdb 0.1
                          1. hi und anke für die erklärungen,

                            wollte aber noch eines fragen: oben würde ja gesagt dass man auf alle block elemente die gleichen css eigenschaften anwenden darf.

                            nehen alle block elemente jetzt automatisch 100% breite an wie es bei den div boxen der fall ist?

                            lg
                            xia

                            1. Hi xia!

                              nehen alle block elemente jetzt automatisch 100% breite an wie es bei den div boxen der fall ist?

                              Zumindest nehmen sie in der Breite den ganzen, ihnen zur Verfügung gestellten Platz ein.

                              MfG H☼psel

                              --
                              "It's amazing I won. I was running against peace, prosperity, and incumbency."
                              George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
                              Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)
                      2. Hi,

                        h1{
                        height:50 px;

                        Warum nimmst Du einen ungültigen Wert?

                        hab mich verlesen

                        h1{
                         height:50 em;

                        1. Hallo

                          h1{
                          height:50 px;

                          Warum nimmst Du einen ungültigen Wert?

                          hab mich verlesen

                          h1{
                          height:50 em;

                          Der ist immer noch ungültig. Wenn schon Leerzeichen, dann zwischen Doppelpunkt und Beginn des Wertes.

                          Tschö, Auge

                          --
                          Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
                          (Victor Hugo)
                          Veranstaltungsdatenbank Vdb 0.1
                2. Hallo xia

                  ich weiss aber nicht ob line-height standartmäßig 0 ist

                  Wenn line-height 0 wäre, wo sollte dann der Text angezeigt werden?

                  Und wenn line-height gleich der font-size wäre - meinst du, der Text wäre gut lesbar, wenn die Buchstaben jeweils mit denen der nächsten Zeile aneinanderstoßen?

                  fontsize: 11px;

                  Also 11px sind mir ein wenig zu klein, um sie entspannt lesen zu können, also drücke ich ganz automatisch die Strg-Taste und drehe ein wenig am Mausrad und schon habe ich angenehme 14 oder 15px. (Bei meiner Mutter, 76 Jahre, sie sieht etwas schlechter als ich, da werden es wohl ganz schnell 25 oder 30px)

                  Verlasse dich _niemals_ darauf, dass irgendetwas und ganz besonders Schrift bei allen Nutzern in allen Browsern genau das Maß hat, dass du dir wünschst!

                  Und lies noch einmal ganz genau https://forum.selfhtml.org/?t=133843&m=868031.

                  Auf Wiederlesen
                  Detlef

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

            das vesteh ich nicht: mein bild ist ja 31px hoch die
            h1{ fon-size:11px; padding: 10px 0px;} box aber anscheinend nicht sonst würde mein bild ja genau passen.

            Du gibst deine CSS-Angaben ja nicht dem Bild, sondern dem Element. Du kannst also:

            1. Dem Element eine feste Höhe geben. Das schert aber moderne Browser nicht, wenn vom Benutzer die Schriftgröße angepasst wird.
            2. Für das Hintergrundbild background-repeat:no-repeat; festlegen. Eventuell wäre noch eine Angabe zu background-position sinnvoll. Damit hätte sich auch das Schriftgrößenproblem erledigt. Das Hintergrundbild würde nur einmal angezeigt werden.

            ist es dann irgenwie möglich die grafik genau anzupassen wenn der browser seine schriftgrößen selber wählt?

            Nein.

            das <div> hab ich wegen 100% breite gemacht.

            Diese, wie auch die anderen Angaben kannst du auch der Überschrift zuweisen. Du brauchst das <div> an der Stelle nicht.

            Tschö, Auge

            --
            Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
            (Victor Hugo)
            Veranstaltungsdatenbank Vdb 0.1
      2. Hello out there!

        <div>
        <h1 style=" font-size:11px; padding:10px 0px 10px;
        background-image:url(balken.jpg)">bild<h1>
        </div>

        Das umschließende div soll wozu gut sein?

        Die Angabe der font-size wird von Browsern überschrieben, wenn die vom Nutzer eingestellte Mindestschriftgröße größer ist. Und das ist auch gut so. [tm]

        ich würde gerne wissen wie ich es schaffe dass mein bild genau in die h1 box passt.

        Du müsstest dafür sorgen, dass die h1-Box zuzüglich padding-top und padding-bottom 31 Pixel hoch ist.

        Die Schrift ragt eventuell aus der Box heraus.

        Vielleich möchtest du auch background-repeat setzen?

        See ya up the road,
        Gunnar

        --
        “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
      3. Hi,

        das background image sollte ja als hintergrund dienen und wenn das bild jetzt 31px hoch ist müsste es doch in h1 box passen, da aber zu den 11px fontsize noch ein wert kommt(der leerraum oberhalb/unterhalb der buchstaben)ist die ganze höhe mehr als 31 px und das image wird dann höher gemacht sodass es die ganze box ausfüllt.

        ich würde gerne wissen wie ich es schaffe dass mein bild genau in die h1 box passt.

        wenn Du willst, dass das Element 31px hoch ist, warum formulierst Du dann nicht einfach genau das mit CSS?

        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. wenn Du willst, dass das Element 31px hoch ist, warum formulierst Du dann nicht einfach genau das mit CSS?

          mit eineer div box?

          habe die h1 "methode" bei anderen homepages abgeschaut...

          1. Hallo

            wenn Du willst, dass das Element 31px hoch ist, warum formulierst Du dann nicht einfach genau das mit CSS?

            mit eineer div box?

            Sowohl <div>, als auch <h1> bis <h6>, <p>, etc pp. sind Blockelemente, die sich, in Sachen CSS, gleich verhalten. Du kannst allen auf die gleiche Weise eine Höhe zuweisen.

            Tschö, Auge

            --
            Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
            (Victor Hugo)
            Veranstaltungsdatenbank Vdb 0.1
            1. Hi,

              Sowohl <div>, als auch <h1> bis <h6>, <p>, etc pp. sind Blockelemente, die sich, in Sachen CSS, gleich verhalten. Du kannst allen auf die gleiche Weise eine Höhe zuweisen.

              identisches gilt natürlich auch für <span>, <strong>, <body> und <title>. CSS sieht keinen Unterschied in Elementen, sondern nur in CSS-Eigenschaften. Ob ein Element nun <blockquote>, <dfn> oder <flubberdiwubber> heißt, interessiert CSS nicht die Bohne.

              Dass manche Browser dies en detail anders sehen, tut der Sache an sich übrigens keinen Abbruch.

              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. Hallo

                Ob ein Element nun <blockquote>, <dfn> oder <flubberdiwubber> heißt, interessiert CSS nicht die Bohne.

                Letzteres Element macht, meines Wissens nach, ein HTML-Dokument aber invalid. ;-)

                Tschö, Auge

                --
                Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
                (Victor Hugo)
                Veranstaltungsdatenbank Vdb 0.1
                1. Hi,

                  Ob ein Element nun <blockquote>, <dfn> oder <flubberdiwubber> heißt, interessiert CSS nicht die Bohne.
                  Letzteres Element macht, meines Wissens nach, ein HTML-Dokument aber invalid. ;-)

                  Wer sagt denn, daß CSS auf ein HTML-Dokument angewendet werden muß?

                  cu,
                  Andreas

                  --
                  Warum nennt sich Andreas hier MudGuard?
                  Schreinerei Waechter
                  O o ostern ...
                  Fachfragen unaufgefordert 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

                    Ob ein Element nun <blockquote>, <dfn> oder <flubberdiwubber> heißt, interessiert CSS nicht die Bohne.
                    Letzteres Element macht, meines Wissens nach, ein HTML-Dokument aber invalid. ;-)

                    Wer sagt denn, daß CSS auf ein HTML-Dokument angewendet werden muß?

                    Zumindest war im Großteil des Threads davon die Rede.

                    Tschö, Auge

                    --
                    Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
                    (Victor Hugo)
                    Veranstaltungsdatenbank Vdb 0.1
  2. Moin!

    <h1 style="font-size:11px; padding:10px 0px 10px;
    background-image:url(balken.jpg)">bild<h1>

    wenn ich ein bild mit höhe 31px nehme wird es nochmal darunter angezeigt, d.h meine h1 box ist höher als 31px(leeraum oberhal/unterhalb der buchstaben?).

    wie kannich mir jetzt die benötigte höhe(der h1 box) fürs bild ausrechnen?

    Um die im Thread angesprochenen Dinge nochmal zusammenzufassen:

    Eine Zeile Schrift ist nicht nur so hoch, wie die font-size angibt, sondern wie die line-height angibt. Dementsprechend ist dein H1 nicht 11px (fint-size) + 2* 10px (padding) = 31px hoch, sondern höher.

    Die line-height in em oder % anzugeben ist grundsätzlich keine schlechte Idee, da man dadurch einen Faktor relativ zur font-size angibt, der auch bei Vergrößerungen konstant bleibt.

    Und drittens: Wenn dir mißfällt, dass sich ein Hintergrundbild sowohl in x- als auch in y-Richtung als Kachel wiederholt, gibt es background-repeat:repeat-x/repeat-y/no-repeat, um die Wiederholung nur in einer oder in gar keiner Richtung zu erlauben. Damit hättest du sehr effektiv die Dopplung der Grafik "unterhalb" unterbunden, und sie würde auch nicht neu auftauchen, wenn dein H1 durch irgendwelche Umstände doch irgendwie größer als 31px wird.

    Eine fixe Höhenangabe hielte ich jedenfalls nicht für schlau.

    - Sven Rautenberg

    --
    "Love your nation - respect the others."
    1. Hello out there!

      Eine Zeile Schrift ist nicht nur so hoch, wie die font-size angibt, sondern wie die line-height angibt.

      Bis hierhin ja.

      Dementsprechend ist dein H1 nicht 11px (fint-size) + 2* 10px (padding) = 31px hoch, sondern höher.

      Nein, die Schriftgröße beeinflusst nicht die Größe der h1-Box. Die Schrift ragt eventuell aus der Box heraus. Sagte ich doch schon.

      Und so sieht das aus.

      See ya up the road,
      Gunnar

      --
      “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
  3. Es könnte sein das z.B. der IE irgendeinen (default) Wert für die Höhe der H1 nimmt, da du keine line-height definiert hast. 'line-height:31px;' sollte das beheben. wenn nicht fällt mir auf anhieb auch nichts ein.