h1 image

[xia]

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

[Christoph Schnauß]

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.

[xia]

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

[Auge]

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

[xia]

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

[xia]

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

[Auge]

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

[xia]

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.
:)

[Auge]

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>

[xia]

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

[MudGuard]

Hi,

h1{
height:50 px;

Warum nimmst Du einen ungültigen Wert?

cu,
Andreas

[xia]

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.

[Auge]

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

[xia]

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

[Hopsel]

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

[xia]

Hi,

h1{
height:50 px;

Warum nimmst Du einen ungültigen Wert?

hab mich verlesen

h1{
 height:50 em;

[Auge]

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

[Detlef G.]

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

[Auge]

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

[Gunnar Bittersmann]

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

[Cheatah]

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

[xia]

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

[Auge]

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

[Cheatah]

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

[Auge]

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

[MudGuard]

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

[Auge]

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

[Sven Rautenberg]

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

[Gunnar Bittersmann]

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

[JXB]

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.