Bild/Logo fixieren bei Browserfenster-Veränderung bearbeitet von Gunnar Bittersmann 26.06.2017 03:12 @@Phlix Ich hab dein Posting mal lesbar gemacht. Das nächste Mal bitte selbst [formatieren](https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Formatierung_der_Beitr%C3%A4ge). > die Homepage wäre [Meine Homepage](http://www.philipp-weichselbaum.at) Dazu ein paar Anmerkungen: > ~~~HTML, bad > <!DOCTYPE html> > <html> > ~~~ Hier fehlt die [Angabe der Sprache des Seiteninhalts](https://www.w3.org/International/questions/qa-html-language-declarations): `<html lang="de">`{: .language-html} > ~~~HTML, bad > <meta name="content-language" content="de" /> > ~~~ Diese Zeile ist sinnlos. > ~~~HTML > <meta http-equiv="content-type"content="text/html; charset=utf-8"> > ~~~ Das kannst du kürzer haben: `<meta charset="utf-8">`{: .language-html}. Und das sollte als allererstes im `head` stehen. > ~~~HTML, bad > <style type="text/css"></style> > > <script language="javascript" type="text/javascript"></script> > ~~~ Die Zeilen sind sinnfrei. BTW, `type="text/css"` ist in HTML5 ebenso unnötig wie `type="text/javascript"`. `language="javascript"`{: .bad} war schon immer Unsinn. > ~~~HTML > <body> > > <div class="container"> > <div class="jumbotron"> > ~~~ Diese Container-`div`s [brauchst du nicht](https://forum.selfhtml.org/cites/1122); mit `html` und `body` sind bereits zwei Container-Elemente vorhanden. > ~~~HTML, bad > <img id="mitte" src="Maurer_Maxl.png"> > ~~~ Hier fehlt der Alternativtext `alt` – für Nutzer, die keine Grafiken sehen können. Es sei denn, es handelt sich (wie hier) um eine Schmuckgrafik. Dann sollte das mit `role="none presentation"` gekennzeichnet werden und es muss trotzdem `alt=""` vorhanden sein (andernfalls würden Screenreader den Dateinamen vorlesen). Noch besser wäre, wenn eine Schmuckgrafik gar nicht im HTML auftaucht, sondern als Hintergrunsgrafik im CSS. > ~~~HTML, bad > <p><a class="btn btn-primary btn-lg" href="https://www.google.com" data-toggle="tooltip" data-placement="bottom" title="weiter zu www.google.com" role="button">Seite verlassen!</a></p> > ~~~ Ein Link ist ein Link ist ein Link – kein Button! Das Stylen eines Links als Button ist fragwürdig; `role="button"`{: .bad} ist an der Stelle völlig falsch. Links führen zu anderen Seiten; Buttons lösen Aktionen auf einer Seite aus. BTW, einen Link zu Google braucht niemand. Ein Sucheingabefeld ist im Browser bereits vorhanden. Und meins führt aus Gründen [nicht zu Google](https://forum.selfhtml.org/self/2016/apr/23/geodaten/1665844#m1665844). > ~~~HTML > <a href="https://www.checkdomain.de/unternehmen/garantie/ssl/popup/" onclick="window.open(this.href + '?host=' + window.location.host,'','height=600,width=560,scrollbars=yes'); return false;"><img id="logo" src="https://www.checkdomain.de/assets/bundles/web/backend/controller/ssl-certificate/img/ssl-150x150.png?20170622-152736" alt="SSL-Zertifikat" /></a> > ~~~ Das wäre wohl ein Button. Hier wäre `role="button"` angebracht (zumindest wenn JavaScript ausgeführt wird) – oder noch besser gleich das `button`-Element verwenden. > ~~~HTML > <div class="Copyright"> > <p><b>© PHW</b><p> > </div> > ~~~ Das wäre [besser ein `footer`](https://blog.selfhtml.org/2013/03/10/html5-serie-neue-elemente-fuer-die-seitenstruktur/), kein `div`. LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)
Bild/Logo fixieren bei Browserfenster-Veränderung bearbeitet von Gunnar Bittersmann 26.06.2017 03:20 @@Phlix Ich hab dein Posting mal lesbar gemacht. Das nächste Mal bitte selbst [formatieren](https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Formatierung_der_Beitr%C3%A4ge). > die Homepage wäre [Meine Homepage](http://www.philipp-weichselbaum.at) Dazu paar Anmerkungen: > ~~~HTML, bad > <!DOCTYPE html> > <html> > ~~~ Hier fehlt die [Angabe der Sprache des Seiteninhalts](https://www.w3.org/International/questions/qa-html-language-declarations): `<html lang="de">`{: .language-html} > ~~~HTML, bad > <meta name="content-language" content="de" /> > ~~~ Diese Zeile ist sinnlos. > ~~~HTML > <meta http-equiv="content-type"content="text/html; charset=utf-8"> > ~~~ Das kannst du kürzer haben: `<meta charset="utf-8">`{: .language-html}. Und das sollte als allererstes im `head` stehen. > ~~~HTML, bad > <style type="text/css"></style> > > <script language="javascript" type="text/javascript"></script> > ~~~ Die Zeilen sind sinnfrei. BTW, `type="text/css"` ist in HTML5 ebenso unnötig wie `type="text/javascript"`. `language="javascript"`{: .bad} war schon immer Unsinn. > ~~~HTML > <body> > > <div class="container"> > <div class="jumbotron"> > ~~~ Diese Container-`div`s [brauchst du nicht](https://forum.selfhtml.org/cites/1122); mit `html` und `body` sind bereits zwei Container-Elemente vorhanden. > ~~~HTML, bad > <img id="mitte" src="Maurer_Maxl.png"> > ~~~ Hier fehlt der Alternativtext `alt` – für Nutzer, die keine Grafiken sehen können. Es sei denn, es handelt sich (wie hier) um eine Schmuckgrafik. Dann sollte das mit `role="none presentation"` gekennzeichnet werden und es muss trotzdem `alt=""` vorhanden sein (andernfalls würden Screenreader den Dateinamen vorlesen). Noch besser wäre, wenn eine Schmuckgrafik gar nicht im HTML auftaucht, sondern als Hintergrunsgrafik im CSS. > ~~~HTML, bad > <p><a class="btn btn-primary btn-lg" href="https://www.google.com" data-toggle="tooltip" data-placement="bottom" title="weiter zu www.google.com" role="button">Seite verlassen!</a></p> > ~~~ Ein Link ist ein Link ist ein Link – kein Button! Das Stylen eines Links als Button ist fragwürdig; `role="button"`{: .bad} ist an der Stelle völlig falsch. Links führen zu anderen Seiten; Buttons lösen Aktionen auf einer Seite aus. > ~~~HTML > <a href="https://www.checkdomain.de/unternehmen/garantie/ssl/popup/" onclick="window.open(this.href + '?host=' + window.location.host,'','height=600,width=560,scrollbars=yes'); return false;"><img id="logo" src="https://www.checkdomain.de/assets/bundles/web/backend/controller/ssl-certificate/img/ssl-150x150.png?20170622-152736" alt="SSL-Zertifikat" /></a> > ~~~ Das wäre wohl ein Button. Hier wäre `role="button"` angebracht (zumindest wenn JavaScript ausgeführt wird) – oder noch besser gleich das `button`-Element verwenden. > ~~~HTML > <div class="Copyright"> > <p><b>© PHW</b><p> > </div> > ~~~ Das wäre [besser ein `footer`](https://blog.selfhtml.org/2013/03/10/html5-serie-neue-elemente-fuer-die-seitenstruktur/), kein `div`. LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)
nicht angemeldet
