nicht angemeldet
Navigation Abstände Problem
marctrix
Gunnar Bittersmann
Matthias ApselHallo,
habe ein Problem: https://jsfiddle.net/bqdt6qfx/
meine erstellte Navigation hat nicht die gleiche Abständen wie gewünscht. Bereits vieles ausprobiert mit padding und und und... auch Lösungsvorschläge über Google haben mir nicht geholfen, ich möchte hier keine Plugins oder Bootstrap verwenden...
Findet jemand den Fehler in meinem html/css code oder muss noch etwas hinzufügt werden?
-
Hej kajo,
habe ein Problem:
und Lösungsvorschläge von Gunnar Bittersmann bekommen - alle schon ausprobiert?
Marc
-
@@marctrix
und Lösungsvorschläge von Gunnar Bittersmann bekommen
Huch wie hatte ich denn das geschafft?
Ich wollte im OP nur den Link korrigieren und dann drauf antworten. Beides auf einmal gemacht, hm.
Hab das OP jetzt wiederhergestellt und meine Antwort als solche dazugesetzt.
LLAP 🖖
--
“You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
Selfcode:sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
-
-
@@kajo
habe ein Problem: https://jsfiddle.net/bqdt6qfx/
Ein Problem hab ich schon mal behoben.
meine erstellte Navigation hat nicht die gleiche Abständen wie gewünscht.
Was ist denn gewünscht? Die
lisollen nicht dieselbe Breite haben, sondern zwischen den Linktexten soll derselbe Abstand sein?Dann gib eben keine Breite an, sondern
marginund/oderpadding. Stattfloatkannst du besser Flexbox oderdisplay: inline-blockverwenden.Der Selektor '
nav ul li' ist überspezifiziert; das sollte 'nav li' sein.
Dein Markup ist auch verbesserungswürdig:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">`{: .language-html}Nein. Verwende
<!DOCTYPE html><header id="page-header" role="banner"> <div id="container">Das
divist sicher überflüssig;headerist Container genug.role="banner"ist überflüssig und sollte weg; s.u.<div id ="logo" >`{: .language-html}Auch dieses
divdürfte überflüssig sein.Warum ist das Logo kein Link zur Startseite?
<main role="main"><footer role="contentinfo">Auch diese
role-Attribute sind nicht angebracht. Diese Elemente haben schon diese Rollen; dann sollten sie nicht noch mal angegeben werden.LLAP 🖖
--
“You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
Selfcode:sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|-
Hallo Gunnar Bittersmann,
Auch diese
role-Attribute sind nicht angebracht. Diese Elemente haben schon diese Rollen; dann sollten sie nicht noch mal angegeben werden.‚sollten nicht angegeben werden‘ vs. ‚nicht notwendig‘
Die Spec spricht lediglich von Zeitverschwendung (waste of time), der Wikiartikel formuliert „In folgender Tabelle finden Sie die WAI-ARIA-Rollen, die die Elemente sozusagen fest eingebaut bekommen haben, sodass es nicht notwendig ist, diese Rolle explizit zu vergeben.“
Würdest du die Formulierung ändern?
Bis demnächst
Matthias-
Hej Matthias,
Hallo Gunnar Bittersmann,
Auch diese
role-Attribute sind nicht angebracht. Diese Elemente haben schon diese Rollen; dann sollten sie nicht noch mal angegeben werden.‚sollten nicht angegeben werden‘ vs. ‚nicht notwendig‘
Die Spec spricht lediglich von Zeitverschwendung (waste of time) Würdest du die Formulierung ändern?
Normalerweise würde ich mich ja nicht einmischen, zumal @@Gunnar Bittersmann sich selber sehr gut wehren kann, aber nachdem ich ihn auch gerne kritisiere muss ich auch mal sagen, dass ich oft seiner Meinung bin. In diesem speziellen Fall: unnötige Angaben sind nicht nur Zeiverschwendung, sondern auch Bandbreitenverschwendung und sollten (nicht nur aus diesen) beiden Gründen unterlassen werden!
Marc
-
@@Matthias Apsel
‚sollten nicht angegeben werden‘ vs. ‚nicht notwendig‘
Die Spec spricht lediglich von Zeitverschwendung (waste of time), der Wikiartikel formuliert „In folgender Tabelle finden Sie die WAI-ARIA-Rollen, die die Elemente sozusagen fest eingebaut bekommen haben, sodass es nicht notwendig ist, diese Rolle explizit zu vergeben.“
Würdest du die Formulierung ändern?
In folgender Tabelle finden Sie die WAI-ARIA-Rollen, die die Elemente sozusagen fest eingebaut bekommen haben, sodass es nicht notwendig ist, diese Rollen nicht explizit zu vergeben werden sollten.
Mit der Zeitverschwendung beim Schreiben kommt eine Zeitverschwendung beim Übertragen. (Oh, das sagte Marc ja schon.) Die ist natürlich marcinal. ;-)
Wichtiger: Der Quellcode wird unübersichtlicher.
Und vor allem: Es können sich Fehler einschleichen:
<h1 role="heating">und schon ist die Überschrift keine mehr.LLAP 🖖
--
“You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
Selfcode:sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|-
Hallo Gunnar Bittersmann,
<h1 role="heating"> und schon ist die Überschrift keine mehr.
Bei Bild-Online & Co. vermutlich doch :-}
Grüße, Martl
-
Hej Gunnar,
Mit der Zeitverschwendung beim Schreiben kommt eine Zeitverschwendung beim Übertragen. (Oh, das sagte Marc ja schon.) Die ist natürlich marcinal. ;-)
Jein - wenn nur die Rollen unnötigerweise notiert werden, ist die Zeitverschwendung marginal. Ich kenne aber niemanden, der seinen Code zu kurz wie möglich hält, die Rollen aber ausschreibt. ;-)
Meint: entweder man achtet generell drauf, so sauber wie möglich zu arbeiten, oder schreibt ständig irgendwas in sein HTML, weil man es ja mal brauchen könnte, weil es vielleicht nötig sein könnte und einfach so "zur Sicherheit", weil man es nicht besser weiß.
Dann kommt in aller Regel viel überflüssiges Zeug zusammen.
Marc
-
Hallo Gunnar,
Wichtiger: Der Quellcode wird unübersichtlicher.
Und vor allem: Es können sich Fehler einschleichen:
<h1 role="heating">und schon ist die Überschrift keine mehr.Das halte ich beides für sehr starke Argumente. Viel besser als „a waste of time.“
LG,
CK
-
-
-
<header id="page-header" role="banner"> <div id="container">Das
divist sicher überflüssig;headerist Container genug.Wie sich dem CSS entnehmen lässt ist das div anscheinend nicht überflüssig. #page-header geht mit Hintergrundbild über die gesamte Breite während #page-header .container den zentrierten Inhalt umfasst.
<main role="main"><footer role="contentinfo">Auch diese
role-Attribute sind nicht angebracht.<main role="main"> ist meines Wissens hilfreich für diejenigen Browser die "main" noch nicht mit der ARIA-Rolle verknüpfen.
Simon2
-
@@Simon2
<main role="main"> ist meines Wissens hilfreich für diejenigen Browser die "main" noch nicht mit der ARIA-Rolle verknüpfen.
Solche gibt es nicht mehr.
Ich hab da mal nachgefragt und die Antwort von dem, der es wissen sollte, war eindeutig.
LLAP 🖖
--
“You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
Selfcode:sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
-
-