Phänomen bei Zuweisung einer Klasse

[uwe gutwirth]

Hallo Experten, hatte schon einmal was gefragt und war begeistert von der schnellen Hilfe. Komme aus der BWL & Softwareentwicklung und lerne CSS wo ich folgendes Phänomen hab: Bei der ersten Datei http://193.170.245.149/biz/testindex1.html nimmt er die Klasse „current“ auf das LI, bei der 2.Datei http://193.170.245.149/biz/testindex2.html nicht. Der einzige Unterschied ist, dass ich im CSS vor das <li> den ID #page2 gesetzt hab. Das muss ich machen, da auf der Seite viele <li> sind, wo die CSS nicht wirken darf. Wahrscheinlich ein triviales Problem, aber ich versteh es nicht warum.

Noch eine zweite Frage: Wenn ich das Broserfenster verkleinere werden durch die % Angaben auch die Karteiblätter kleiner, aber die Schrift bleibt gleich. Wie kann ich erreichen, dass auch die Schrift proportional kleiner wird? Hab mit der Einheit „vw“ versucht, bin aber zu keiner brauchbaren Lösung gekommen.

Für einen Tipp wär ich sehr dankbar. Beste Grüße aus Salzburg Uwe Gutwirth

[Rolf B]

Hallo Uwe,

für dein erstes Problem möchtest Du Dich mit der Spezifität von CSS Selektoren beschäftigen. #page2 li ist spezifischer als .current, deshalb greift es nicht.

Proportional wachsende Schriften sind möglich. Nur: eine prozentuale Angabe als font-size hilft nicht, die bezieht sich nicht auf die Containergröße, sondern auf die Größe der Schrift im Elternelement.

Zum einen kannst Du mit Media-Queries ein sprungweises Wachsen der font-size erreichen, oder die Tab-Texte als SVG-Elemente mit Text darin darstellen und die SVG-Elemente prozentual zu den Tab-Größen skalieren.

Wie das mit SVG aussähe, zeige ich Dir hier: https://jsfiddle.net/nqcww4hu/. DON'T DO IT.

Ich würde das an Deiner Stelle aber keinesfalls tun, das kann sehr schnell zu klein oder zu riesig werden. Behalte eine klar lesbare Schrift, die von der Größe er zum Seitendesign passt, und sorge mit Media Queries dafür, dass dein Menü im Normalfall ein Dropdown-Menü ist und bei genügend breitem Bildschirm eine Folge von Tab-Reitern (mobile first Ansatz).

Rolf

[Gunnar Bittersmann]

@@Rolf B

Zum einen kannst Du mit Media-Queries ein sprungweises Wachsen der font-size erreichen

Es geht auch ohne Media-Queries quasi stufenlos.

LLAP 🖖

[Rolf B]

Hallo Gunnar,

auf die Idee, calc einzusetzen und sich mit vw, vh oder em auf Viewportsize oder parent font-size zu beziehen, muss man erstmal kommen :)

Rolf

[uwe gutwirth]

Herzlichen Dank für die schnelle Antwort. Bin echt begeistert. Ist für einen Autodidakten eine riesen Hilfe. Hab wieder was gelernt. Da ich "nav li" schon an anderer Stelle auf meiner Seite verwendet hab, probierte ich es mit "h5 li". Unkonventionell aber es funzt. Entschuldige wenn das HTML Fundamentalisten weh tun könnte…

Hinsichtlich der Schriftgrößen werde ich wohl mediaquery einsetzen. Daran dachte ich auch vorher, aber hoffte, dass es einfacher geht. Mit SVG schauts nicht so gut aus.

Aber danke nochmals für den schnellen Rat an alle.

Liebe Grüße aus Salzburg!

[Rolf B]

Hallo Uwe,

Ein h5 li ist schon SEHR merkwürdig - das würde ja bedeuten, dass deine Tabs in einer Überschrift der Stufe 5 eingebettet sind. Tu das nicht - jeder Hack ist einer zu viel und in 5 Monaten fragst Du Dich, was Du da eigentlich getrieben hast.

Also: Halt! Stop! Bitte eine Runde Planung einwerfen!

Die Frage, die Gunnar schon mal stellte, wird jetzt essenziell: Wird das eine Navigation? Wenn ja, sollte sie außerhalb des eigentlichen Seiten-DIV stehen, und das CSS für sie sollte auch nicht von den Styles abhängen, die für einzelne Seiten gelten. Für so etwas ist es sinnvoll, die semantischen HTML-Elemente <header>, <nav>, <main> und <footer> zu nutzen (einen netten Kopf bekommt deine Seite bestimmt noch, gelle? Wenn nicht, auch wurscht, header ist keine Pflicht).

Im <main> Bereich entsteht dein Content. Den solltest Du - wenn irgendwie möglich - so stylen, dass die diversen Seiten ein gemeinsames Layout haben. Natürlich kannst Du der "Gründung" Seite mit <main id="founding"> einrahmen und die Ablauf-Seite mit <main id="progress"> - oder so. Je mehr Regeln Du aber hast, deren Selektor mit #founding oder #progress beginnen, desto mehr musst Du Dich fragen, ob Du auf dem richtigen Weg bist. Natürlich wirst Du Stile haben, die nur für einzelne Seiten gelten. Aber das Grundgerüst sollte für alle Seiten identisch sein. Und die Navigation auf alle Fälle. Deshalb: kein #page2 li auf Seite 2 für die Menüs der Seite 2, sondern eine Hauptnavigation und mit nav li ansprechen.

Wenn Du mehrere nav-Bereiche hast, kannst Du denen auch IDs oder Klassen geben. Oder du kannst eine Navigation in den Header stecken und die andere ins main Element - dann sind die mit header nav li und main nav li ansprechbar. Und unter nav li fasst Du zusammen, was für die Navigationselemente aller Navigationen gemeinsam ist, bestimmt ist das einiges.

Rolf

[Matthias Apsel]

Hallo Rolf B,

Ein h5 li ist schon SEHR merkwürdig

und auch nicht valide.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@uwe gutwirth

die Klasse „current“

Anstelle einer solchen Klasse sollte das aktuelle Tab mit aria-selected="true" gekennzeichnet werden, dann haben alle Nutzer etwas davon. ☞ Inclusive Components/Tabbed Interfaces

Es sei denn, das sollen, keine Tabs sein, sondern ein Navigationsmenü. In dem Fall wäre aria-current="page" richtig. Dann sollten die Menüpunkte aber nicht wie Tabs gestylt werden!

Eine Klasse „current“ ist überflüssig; die ARIA-Attribute lassen sich auch in CSS verwenden.

LLAP 🖖

[JürgenB]

Hallo,

Noch eine zweite Frage: Wenn ich das Broserfenster verkleinere werden durch die % Angaben auch die Karteiblätter kleiner, aber die Schrift bleibt gleich. Wie kann ich erreichen, dass auch die Schrift proportional kleiner wird? Hab mit der Einheit „vw“ versucht, bin aber zu keiner brauchbaren Lösung gekommen.

auf dieser Seite wird die Größe der TDs und der Ziffern darin mit

width:9vmin;height:9vmin;font-size:5.2vmin;

an die Viewportgröße gekoppelt.

Gruß
Jürgen