Problem mit relativer Breitenangabe und Schriftgröße

[Joglmeier]

Tag zusammen! :-)

In einer validen XHTML 1.0 Strict-Datei habe ich Links mittels ausgelagerter CSS-Datei formatiert, damit die Links in Form eines Buttons angezeigt werden. Die Links haben dabei ein display:block bekommen und unter anderem ein width:10em sowie ein height:1em !

Zunächst sieht das genau so aus wie gewünscht. Nun ist mir allerdings die Schriftgröße zu groß. Ändere ich die allerdings und füge zu den anderen CSS-Anweisungen zB. noch ein font-size:0.6em dazu, dann wird zwar die Schrift kleiner, allerdings auch der gesamte Link-Button. :-(

Ich möchte unbedingt vermeiden, fixe Pixelangaben zu verwenden. Weiß wer Rat, wie ich die Schrift trotzdem kleiner bekomme, OHNE daß sie an Länge und Höhe des Link-Buttons etwas ändert?

Danke im Voraus!

Joglmeier

PS : Hier ein Auszug aus den entsprechenden CSS-Angaben :

html, body
{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:101%;
background:rgb(225,229,227);
color:rgb(080,080,080);
}

a:link
{
display:block;
width:10em;
height:1em;
background:rgb(204,255,153);
margin-top:0.5em;
font-weight:normal;
color:rgb(090,090,090);
text-decoration:none;
text-align:center;
font-size:0.9em;
border:1px solid rgb(150,150,150);
}

[ ... ]

[Gernot Back]

Hallo Joglmeier,

Ich möchte unbedingt vermeiden, fixe Pixelangaben zu verwenden. Weiß wer Rat, wie ich die Schrift trotzdem kleiner bekomme, OHNE daß sie an Länge und Höhe des Link-Buttons etwas ändert?

Ja, lass dein Link-Element floaten und verpass ihm passende relative Größenangaben in em bezüglich width, height, line-height und font-size!

Gruß Gernot

[Joglmeier]

Hallo Gernot!

Ja, lass dein Link-Element floaten und verpass ihm passende relative Größenangaben in em bezüglich width, height, line-height und font-size!

Sorry, aber ich versteh nicht ganz - was hat das mit einem Float zu tun?

Ich hab z.B. einen Link " HAUPTMENÜ ". Durch das CSS als Button dargestellt. Mache ich jetzt die Schrift kleiner, dann wird auch der gesamte Button kleiner. Wo ist da ein Zusammenhang mit Float???

LG

Joglmeier

[Gernot Back]

Hallo Joglmeier,

Sorry, aber ich versteh nicht ganz - was hat das mit einem Float zu tun?

tut mir Leid, ich hatte ganz übersehen, dass du ja sowieso schon eine absatzerzeugendes display:block möchtest. Das tut's natürlich auch. Ehrlich gesagt verstehe ich da nicht, wo dein bei der Formatierung des A-Elements Problem liegt. Wenn du ihm als line-height den Kehrwert der font-size in relativen Größen mitgibst, müsstest du doch den gewünschten Effekt erzielen.

Gruß Gernot

[Ingo Turski]

Hi,

Ändere ich die allerdings und füge zu den anderen CSS-Anweisungen zB. noch ein font-size:0.6em dazu, dann wird zwar die Schrift kleiner, allerdings auch der gesamte Link-Button. :-(

dann machst Du etwas falsch un änderst die Schriftgröße nicht für a sondern ein Elternelement.

und übrigens:

a:link

Wieso formatierst Du hier nur unbesuchte Links?

freundliche Grüße
Ingo

[Joglmeier]

Hallo Ingo!

dann machst Du etwas falsch un änderst die Schriftgröße nicht für a sondern ein Elternelement.

Du siehst ja in meiner Erst-Frage den entsprechenden CSS-Ausschnitt. Ich ändere ganz sicher die Schriftgröße für a und nicht für das Elternelement!!!

und übrigens:

a:link
Wieso formatierst Du hier nur unbesuchte Links?

Das tue ich natürlich NICHT. :-) Ich habe aber, um hier Speicherplatz zu sparen, die CSS-Angaben nur EIN mal hingeschrieben. ( Dafür sollte das [...] stehen. ) NATÜRLICH gibt es in der entsprechenden Datei auch ein a:visited, a:hover, etc.

LG

Joglmeier

[Ingo Turski]

Hi,

Du siehst ja in meiner Erst-Frage den entsprechenden CSS-Ausschnitt. Ich ändere ganz sicher die Schriftgröße für a und nicht für das Elternelement!!!

woher soll ich wissen, daß es um die hier angegebene Größe geht?
Und wie gesagt: die in em angegebene Elementgröße richtet sich nach der Schriftgröße des Elternelements.

a:link
Wieso formatierst Du hier nur unbesuchte Links?

Das tue ich natürlich NICHT. :-) Ich habe aber, um hier Speicherplatz zu sparen, die CSS-Angaben nur EIN mal hingeschrieben. ( Dafür sollte das [...] stehen. ) NATÜRLICH gibt es in der entsprechenden Datei auch ein a:visited, a:hover, etc.

Du hast meinen Einwand noch nicht verstanden. Gerade um CSS einzusparen solltest Du die allgemeinen Angaben für a definieren und für bestimmte Pseudoklassen überschreiben bzw. ergänzen.

freundliche Grüße
Ingo

[Cyx23]

Hallo,

Danke im Voraus!

Joglmeier

PS : Hier ein Auszug aus den entsprechenden CSS-Angaben :

es wäre sinnvoll einen möglichst reduzierten aber funktionsfähigen
Code zu posten um die Sache konkret nachvollziehen zu können, oder
einen Link auf deine betr. Testseite.

Grüsse

Cyx23

[Ashura]

Hallo Cyx23.

PS : Hier ein Auszug aus den entsprechenden CSS-Angaben :

es wäre sinnvoll einen möglichst reduzierten aber funktionsfähigen
Code zu posten um die Sache konkret nachvollziehen zu können, oder
einen Link auf deine betr. Testseite.

ROFL, Exact copy:

„Es wäre sinnvoll einen möglichst reduzierten aber funktionsfähigen
Code zu posten um die Sache konkret nachvollziehen zu können, oder
einen Link auf deine betr. Testseite.“

https://forum.selfhtml.org/?t=110100&m=689571

*scnr* ;-)

Gruß, Ashura

[Cyx23]

Hallo Ashura,

ROFL, Exact copy:

bei passender Gelegenheit werde ichs wieder posten.
Ob ich das als Textbaustein gleich in die Benutzereinstellungen
nehmen sollte?

Aber ernsthaft, auch ohne den Forumswart geben zu wollen scheinen mir
solche Hinweise viel zu selten zu kommen, oder gibts hier etwa eine
bezahlte Hotline?

Auch tolle Antworten wie "hab jetzt ne andere lösung selber gefunden"
ohne weitere Angaben oder fehlendes Feedback düften die
wünschenswerten Synergien in diesem Forum wenig fördern.

Grüsse

Cyx23

[Ashura]

Hallo Cyx23.

bei passender Gelegenheit werde ichs wieder posten.
Ob ich das als Textbaustein gleich in die Benutzereinstellungen
nehmen sollte?

Mein Tipp: Schreibe dir ein User-JS, was auf den Inhalt der Textarea zugreifen kann und füge den Textblock bei Bedarf fix ein. ;-)

Aber ernsthaft, auch ohne den Forumswart geben zu wollen scheinen mir
solche Hinweise viel zu selten zu kommen, oder gibts hier etwa eine
bezahlte Hotline?

Das kann ich eigentlich nicht sagen, denn das (zugegeben zermürbende) Nachfragen nach relevantem Code oder einer Beispielseite erfolgt eigentlich in jedem zweiten oder dritten Thread. Schade, dass es überhaupt erforderlich ist.

Ich plädiere dafür, den Hinweis oben im Forum mit Schrifgröße 5em zu formatieren und ein text-decoration:blink; hinzuzufügen! ;-)

Auch tolle Antworten wie "hab jetzt ne andere lösung selber gefunden"
ohne weitere Angaben oder fehlendes Feedback düften die
wünschenswerten Synergien in diesem Forum wenig fördern.

Das ist richtig. Das ist aber noch wenigstens ein Fall, in dem überhaupt noch eine Antwort erfolgt. Meist kommt nach einem hilfreichen Tipp gar nichts mehr und so übernehme ich hin und wieder die Aufgabe, den Tipp wenigstens als „hilfreich“ zu werten. Aber mehr als eine Stimme habe ich nicht, obwohl manche Antworten mehr wert wären.

Gruß, Ashura

[wahsaga]

hi,

Die Links haben dabei ein display:block bekommen und unter anderem ein width:10em sowie ein height:1em !

Zunächst sieht das genau so aus wie gewünscht. Nun ist mir allerdings die Schriftgröße zu groß. Ändere ich die allerdings und füge zu den anderen CSS-Anweisungen zB. noch ein font-size:0.6em dazu, dann wird zwar die Schrift kleiner, allerdings auch der gesamte Link-Button. :-(

ja natürlich, was hast du denn erwartet?
höhen-/breitenangaben in em beziehen sich schließlich auf die schriftgröße des elementes - works as designed.

aber warum passt du denn dann die em-angabe nicht einfach an?

wenn du die höhe mit 1em bei schriftgröße 0.9em bei font-size 0.6em entsprechend beibehalten willst - dann setze sie doch einfach auf 1.5em ...!

(das ist übrigens ein ganz simpler dreisatz, wo liegt denn da bitte das problem?)

gruß,
wahsaga

[Joglmeier]

Hallo wahsaga!

Vielleicht hab ich mein Problem nicht gut erklärt.

ja natürlich, was hast du denn erwartet?
höhen-/breitenangaben in em beziehen sich schließlich auf die schriftgröße des elementes - works as designed.

Das ist mir natürlich klar. Die em-Angaben von Breite und Höhe, die ich dem Link zuweise, damit er als Button erscheint, beziehen sich auf die angegebene Schriftgröße des Elternelements - was in meinem Fall jetzt einfach der body der Seite ist.

Wenn ich aber die width- und height-Angabe NICHT ändere, bei den CSS-Anweisungen jetzt aber mittels font-size einfach die Schriftgröße kleiner mache, dann ist zwar die Schrift kleiner, aber auch der gesamte Button, obwohl ich WEDER die Button-Größe, NOCH die Größenangaben des Elternelements verändert habe.

Besser verständlich jetzt, was ich meine?

(das ist übrigens ein ganz simpler dreisatz, wo liegt denn da bitte das problem?)

Ich hoff, ich nerve nicht! :-)

LG

Joglmeier

[wahsaga]

hi,

Das ist mir natürlich klar. Die em-Angaben von Breite und Höhe, die ich dem Link zuweise, damit er als Button erscheint, beziehen sich auf die angegebene Schriftgröße des Elternelements - was in meinem Fall jetzt einfach der body der Seite ist.

nein, eben nicht.
sie beziehen sich auf die schriftgröße des elementes selber.
diese _kann_ vom elternelement "geerbt" sein - oder eben, wie in deinem beispiel, für das element selber explizit definiert sein.

Wenn ich aber die width- und height-Angabe NICHT ändere, bei den CSS-Anweisungen jetzt aber mittels font-size einfach die Schriftgröße kleiner mache, dann ist zwar die Schrift kleiner, aber auch der gesamte Button, obwohl ich WEDER die Button-Größe, NOCH die Größenangaben des Elternelements verändert habe.

wie schon gesagt - works as designed.
du hast die maße des elementes in em angegeben, wodurch sie sich auf die schriftgröße des elementes beziehen. wenn du die schriftgröße des elementes jetzt änderst, hat das natürlich auswirkungen auf die danach berechneten maße ...

Besser verständlich jetzt, was ich meine?

besser verständlich jetzt, worauf sich breiten-/höhenangaben in em beziehen? ;-)

gruß,
wahsaga

[Joglmeier]

Hallo wahsaga!

besser verständlich jetzt, worauf sich breiten-/höhenangaben in em beziehen? ;-)

Ja, danke. Das wußte ich nicht. Ich dachte fälschlicherweise, in dem Beispiel bezieht sich die font-size auf die Größe der Schrift, in der der Link steht und die em-Angaben mit width und height auf das Elternelement body. Danke, daß Du mir das richtige Gegenteil erklärt hast!

Ich hab mal ein Beispiel hochgeladen :

Seite 1 ==> http://joglmeier.milten.lima-city.de/testseite.html

Seite 2 ==> http://joglmeier.milten.lima-city.de/testseite2.html

Auf der 2. Testseite ist die Schrift kleiner - aber auch der Button. Ich weiß jetzt auf Grund Deiner Erklärung, WARUM das so ist. Kannst Du mir vielleicht erklären, wie ich den vorhandenen Code ändern soll, damit die Buttons auf Seite 2 so groß sind wie auf Seite 1, die Schrift aber kleiner ist?

Danke im Voraus!

LG

Joglmeier

[Gernot Back]

Hallo Joglmeier,

Seite 1 ==> http://joglmeier.milten.lima-city.de/testseite.html

Seite 2 ==> http://joglmeier.milten.lima-city.de/testseite2.html

Auf der 2. Testseite ist die Schrift kleiner - aber auch der Button. Ich weiß jetzt auf Grund Deiner Erklärung, WARUM das so ist. Kannst Du mir vielleicht erklären, wie ich den vorhandenen Code ändern soll, damit die Buttons auf Seite 2 so groß sind wie auf Seite 1, die Schrift aber kleiner ist?

Dann gib, um die relativen Größen zu kompensieren, der Height und/oder, wenn du es vertikal zentriert haben möchtest, der Line-Height den reziproken Wert der Font-Size!

vgl.:https://forum.selfhtml.org/?t=110099&m=689587

Zur Nachhilfe: Der Kehrwert von font-size:.9em ist line-height:1.11em

Und beherzige auch Ingos Hinweis:

a {
  deine Linkformatierungen
}

reicht vollkommen!

Gruß Gernot