Zoomfaktor vom Browser relevant?

[Christian Huml]

Guten Tag zusammen,

richtet Ihr eure Links, Boxen, Menüs etc. nach den Zoomfaktor des Browser aus? Von 30% - 300% oder ist dies gar nicht relevant? Da bei viel Text usw. wird ja beim Zoomfaktor automatisch umbrochen. Kann man den Zoomfaktor überhaupt mit einer Bildschirmgröße gleichstellen?

Mit freundlichen Grüßen

Christian

[Matthias Scharwies]

Servus!

Guten Tag zusammen,

richtet Ihr eure Links, Boxen, Menüs etc. nach den Zoomfaktor des Browser aus?

Woher weißt Du, welchen Zoomfaktor der Benutzer verwendet?

imho gar nicht. Deshalb solltest du alle horizontalen Abmessungen entweder gar nicht festlegen oder für media queries und Eigenschaften wie max-width Werte in der relativen Längeneinheit em verwenden.

• CSS/Wertetypen/Zahlen, Maße und Maßeinheiten/em

Herzliche Grüße

Matthias Scharwies

[Christian Huml]

Woher weißt Du, welchen Zoomfaktor der Benutzer verwendet?

imho gar nicht. Deshalb solltest du alle horizontalen Abmessungen entweder gar nicht festlegen oder für media queries und Eigenschaften wie max-width Werte in der relativen Längeneinheit em verwenden.

• CSS/Wertetypen/Zahlen, Maße und Maßeinheiten/em

Hallo @Matthias Scharwies,

welchen Zoomfaktor der Benutzer verwendet weiß ich nicht. Verwendest du eigentlich den Zoomfaktor auf Websites oder besser gesagt wer verwendet den eigentlich den Zoomfaktor? Wer nicht gut sieht?

Ist es also ganz normal dass die Website mit Zoomfaktor schlechter aussieht als 100%? Sprich bei 300% werden die Links nicht mehr bündig angezeigt, Text wird automatisch Umbrochen. Bei niedrigen Zoomfaktor sieht es gleich aus.

Sollte man sich also nicht mehr mit dem Zoomfaktor beschäftigen?

Mit freundlichen Grüßen

Christian

[Gunnar Bittersmann]

@@Christian Huml

wer verwendet den eigentlich den Zoomfaktor? Wer nicht gut sieht?

Die auch. Aber nicht nur:

• Wer vor einem großen Monitor sitzt, bei dem 1em bei 100% zu klein ist.
• Wer Webseiten besucht, deren Macher sich erdreistet haben, eine kleinere Schriftgröße als 1em anzugeben.

Ist es also ganz normal dass die Website mit Zoomfaktor schlechter aussieht als 100%?

Nein!

Dann sollte die Webseite so aussehen wie auf einem schmaleren Viewport (bspw. eines Tablets im Hochformat oder eines Smartphones im Querformat). Es wäre ganz normal, dass die Seite dann auch gut aussieht.

Sollte man sich also nicht mehr mit dem Zoomfaktor beschäftigen?

Man sollte sich mit responsive design beschäftigen, dann muss man sich um den Zoomfaktor keine Gedanken mehr machen.

LLAP 🖖

[Matthias Scharwies]

Servus!

wer verwendet den eigentlich den Zoomfaktor? Wer nicht gut sieht?

Die auch. Aber nicht nur:

• Wer vor einem großen Monitor sitzt, bei dem 1em bei 100% zu klein ist.
• Wer Webseiten besucht, deren Macher sich erdreistet haben, eine kleinere Schriftgröße als 1em anzugeben.

Das mit dem schlecht sehen betrifft ja nahezu jeden. Ich persönlich bin kurzsichtig, hatte also bisher keine Probleme mit kleiner Schrift auf Bildschirmen. Jetzt im fortgeschrittenen Alter setzt aber bei mir die Altersweitsichtigkeit ein, so dass ich Webseiten im Browser schon öfter größer zoome.

Wie Gunnar schon sagte, sollten die Webseiten dann nicht schlechter aussehen (pixelgenaues Layout zerbricht beim Zoomen), sondern so wie auf dem Tablet oder Smartphone. Soweit zoome ich gar nicht, deshalb sollte man hier evtl. schon den Verzicht auf Breakpoints ansprechen, die vermeintlich genau auf bestimmte Gerätegrößen abgestimmt sind. Deine Breakpoints sollten sich nach dem Inhalt ausrichten, und werden da gesetzt, wo der Inhalt (oder mehrere Elemente nebeneinander) nicht mehr genügend Platz haben.

Im Wiki:

• HTML/Tutorials/responsive Webdesign

• Vergessen Sie den Begriff Pixel!

• CSS/Tutorials/Tipps und Tricks für media queries

Herzliche Grüße

Matthias Scharwies

[Christian Huml]

Das mit dem schlecht sehen betrifft ja nahezu jeden. Ich persönlich bin kurzsichtig, hatte also bisher keine Probleme mit kleiner Schrift auf Bildschirmen. Jetzt im fortgeschrittenen Alter setzt aber bei mir die Altersweitsichtigkeit ein, so dass ich Webseiten im Browser schon öfter größer zoome.

Wie Gunnar schon sagte, sollten die Webseiten dann nicht schlechter aussehen (pixelgenaues Layout zerbricht beim Zoomen), sondern so wie auf dem Tablet oder Smartphone. Soweit zoome ich gar nicht, deshalb sollte man hier evtl. schon den Verzicht auf Breakpoints ansprechen, die vermeintlich genau auf bestimmte Gerätegrößen abgestimmt sind. Deine Breakpoints sollten sich nach dem Inhalt ausrichten, und werden da gesetzt, wo der Inhalt (oder mehrere Elemente nebeneinander) nicht mehr genügend Platz haben.

Im Wiki:

• HTML/Tutorials/responsive Webdesign

• Vergessen Sie den Begriff Pixel!

• CSS/Tutorials/Tipps und Tricks für media queries

Hallo @Matthias Scharwies,

vielen Dank für die Infos und Links. Hier mal die Testseite. Bei einem Zoom von 150% werden die Links nicht mehr bündig dargestellt. Was wäre hierzu der beste Lösungsvorschlag.

Verwendest du keine Webentwicklertools → Bildschirmgröße testen? Ist es den falsch wenn man dies unter verschiedenen Geräten ansieht?

Ansicht auf der neusten Firefox Version 57.0 (64Bit) Quantum.

PS: Bei einer Breite von 17em bricht dass Bild aus dem div, bin gerade am Fehlersuchen 😂

EDIT: Zeichenlänge bei den 3 Boxen unterschiedlich.

[Auge]

Hallo

vielen Dank für die Infos und Links. Hier mal die Testseite. Bei einem Zoom von 150% werden die Links nicht mehr bündig dargestellt. Was wäre hierzu der beste Lösungsvorschlag.

Nur, um die Fragestellung präziser zu erfassen: Geht es darum, dass die Links nicht auf der selben Grundlinie stehen, also einen unterschiedlichen Abstand zum unteren Rand der Box haben?

Verwendest du keine Webentwicklertools → Bildschirmgröße testen? Ist es den falsch wenn man dies unter verschiedenen Geräten ansieht?

Ist dies eine Nachfrage wegen der „Breakpoints […], die vermeintlich genau auf bestimmte Gerätegrößen abgestimmt sind“ oder worauf beziehst du dich?

EDIT: Zeichenlänge bei den 3 Boxen unterschiedlich.

Falls du dich auf die unterschiedliche Zeilenzahl der Texte in den Boxen beziehst, sei gesagt, dass du das nicht steuern kannst. Da wirken mehrere Ursachen zusammen. Erstens sind Texte an sich unterschiedlich lang, zweitens sind Worte unterschiedlich lang und unterschiedlich lange Worte stehen im Text an verschiedenen Positionen, was zu unterschiedlichem Umbruchverhalten führt, drittens ist die Laufweite von Schriftarten unterschiedlich, was zu verschieden breiter Darstellung eines und des selben Worts in verschiedenen Schriftarten und -größen führt und viertens spielt die Wahl der Textausrichtung auch noch eine Rolle.

Du hast die Länge und den Umbruch eines Textes auf einer Webseite also nicht gänzlich in der Hand. Du kannst mittels der Angabe von CSS-Eigenschaften Vorgaben machen, diese müssen aber nicht oder nicht vollständig befolgt werden. Das ist so und das ist auch gut so.

Tschö, Auge

[Christian Huml]

Nur, um die Fragestellung präziser zu erfassen: Geht es darum, dass die Links nicht auf der selben Grundlinie stehen, also einen unterschiedlichen Abstand zum unteren Rand der Box haben?

Verwendest du keine Webentwicklertools → Bildschirmgröße testen? Ist es den falsch wenn man dies unter verschiedenen Geräten ansieht?

Ist dies eine Nachfrage wegen der „Breakpoints […], die vermeintlich genau auf bestimmte Gerätegrößen abgestimmt sind“ oder worauf beziehst du dich? Falls du dich auf die unterschiedliche Zeilenzahl der Texte in den Boxen beziehst, sei gesagt, dass du das nicht steuern kannst. Da wirken mehrere Ursachen zusammen. Erstens sind Texte an sich unterschiedlich lang, zweitens sind Worte unterschiedlich lang und unterschiedlich lange Worte stehen im Text an verschiedenen Positionen, was zu unterschiedlichem Umbruchverhalten führt, drittens ist die Laufweite von Schriftarten unterschiedlich, was zu verschieden breiter Darstellung eines und des selben Worts in verschiedenen Schriftarten und -größen führt und viertens spielt die Wahl der Textausrichtung auch noch eine Rolle.

Du hast die Länge und den Umbruch eines Textes auf einer Webseite also nicht gänzlich in der Hand. Du kannst mittels der Angabe von CSS-Eigenschaften Vorgaben machen, diese müssen aber nicht oder nicht vollständig befolgt werden. Das ist so und das ist auch gut so.

Hallo @Auge,

genau dass die Links nicht auf der selben Grundlinie stehen. Bezüglich Breakpoints beziehe ich mich nicht darauf dass ich es auf ein Geräte ausrichte sondern sehe mir nur an wie es bei dem entsprechenden Gerät aussieht und wo noch Verbesserungsbedarf bestehen könnte…

Mit freundlichen Grüßen

Christian Huml

[Matthias Scharwies]

Servus!

vielen Dank für die Infos und Links. Hier mal die Testseite. Bei einem Zoom von 150% werden die Links nicht mehr bündig dargestellt. Was wäre hierzu der beste Lösungsvorschlag.

Nur, um die Fragestellung präziser zu erfassen: Geht es darum, dass die Links nicht auf der selben Grundlinie stehen, also einen unterschiedlichen Abstand zum unteren Rand der Box haben?

Ich glaube, das ist es, was Christian meint. Das könnte man mit CSS-Grid lösen (statt des footers würde man hier den Link fest am unteren Rand positionieren).

Verwendest du keine Webentwicklertools → Bildschirmgröße testen? Ist es den falsch wenn man dies unter verschiedenen Geräten ansieht?

Nein, genau richtig, so kann man testen, wie es denn dann aussieht.

BTW: Ich würde alles in der Box über die Klasse .box formatieren:

.box {
    background-color: white;
    width: auto;
    margin: 1em;
    text-align: center;
}

.box p {   /*anstelle von .box-text */
    font-size: 0.9em;
    padding: 0em 3em 0em 3em;
}

.box a {   /* anstelle von article a */
    line-height: 4em;
    color: #0099CC;
}

Vom HTML her würde ich die Überschriften h2 nehmen, weil du mehrere hast.

@Gunnar Bittersmann Wo, wenn überhaupt, würdest du eine h1 verwenden?

Anstelle des png-Bilds würde ich dein textlastiges Logo in svg erstellen, damit Suchmaschinen den Inhalt erfassen können.

PS: Bei einer Breite von 17em bricht dass Bild aus dem div, bin gerade am Fehlersuchen 😂

Du hast alles in em, im HTML gibt es aber noch feste Breiten- und Höhenangaben:

<img class="bilder" src="" title="" height="154" width="270">

Herzliche Grüße

Matthias Scharwies

[Auge]

Hallo

Es ist etwas ungünstig, dass du mir antwortest, aber vermutlich wird @Christian Huml deine Ausführungen dennoch finden. 😀

Geht es darum, dass die Links nicht auf der selben Grundlinie stehen, also einen unterschiedlichen Abstand zum unteren Rand der Box haben?

Ich glaube, das ist es, was Christian meint. Das könnte man mit CSS-Grid lösen (statt des footers würde man hier den Link fest am unteren Rand positionieren.

Wegen der Gleichartigkeit des Aufbaus in den Boxen könnte man auch argumentieren, dass dies der Fuß der Box ist und der Link daher in einen footer gehört. Ansonsten: ja, auch wenn ich an Flexbox statt Grid gedacht habe.

Vom HTML würde ich die Überschriften h2 nehmen, weil du mehrere hast.

Es handelt sich um mehrere gleicharitge Sektionen ^[1], also sind auch meiner Meinung nach h2 angebracht.

PS: Bei einer Breite von 17em bricht dass Bild aus dem div, …

Du hast alles in em, im HTML gibt es aber noch feste Breiten- und Höhenangaben:

<img class="bilder" src="" title="" height="154" width="270">

Als Ergänzung: Diese Größenangaben kannst du behalten und im CSS mit abweichenden Angaben überschreiben.

Wo wir gerade bei den Bildern sind. Unabhängig von der grunsdsätzlich vorgetragenen Kritik am Title-Attribut, frage ich mich, ob es sinnvoll ist, den Inhalt der auf das Bild folgenden Überschrift sinngemäß oder – an anderer Stelle – gar wörtlich zu wiederholen bzw. vorweg zu nehmen. Das Gleiche gilt für das Alt-Attribut. Einem Screenreader-Nutzer wird doch, wenn ich nicht irre, folgendes vorgelesen: „Planung und Abrechnung, Planung und Abrechnung, Heizkostenabrechnung“ (oder in der Box Stromabrechnung drei mal „Stromabrechnung“). Das ist doch nicht sinnvoll, oder?

<article class="box"> <img class="bilder" src="" alt="Planung und Abrechnung" title="Planung und Abrechnung"> <h1>Heizkostenabrechnung</h1> <p class="box-text">…</p> <a href="index.html">Weiterlesen</a> </article>

Tschö, Auge

---

1. Laut Quelltext wird article verwendet, ich weiß nicht, ob das angebracht ist. Ich würde zu section tendieren. ↩︎

[Christian Huml]

Es ist etwas ungünstig, dass du mir antwortest, aber vermutlich wird @Christian Huml deine Ausführungen dennoch finden. 😀

Bereits gefunden. 😀

Es handelt sich um mehrere gleicharitge Sektionen 1, also sind auch meiner Meinung nach h2 angebracht. Laut Quelltext wird article verwendet, ich weiß nicht, ob das angebracht ist. Ich würde zu section tendieren.

Daran habe ich auch schon gedacht. Aber pro Bereich kommt man dann wieder auf eine andere Seite wo alles genau erklärt wird.

Wo wir gerade bei den Bildern sind. Unabhängig von der grunsdsätzlich vorgetragenen Kritik am Title-Attribut, frage ich mich, ob es sinnvoll ist, den Inhalt der auf das Bild folgenden Überschrift sinngemäß oder – an anderer Stelle – gar wörtlich zu wiederholen bzw. vorweg zu nehmen. Das Gleiche gilt für das Alt-Attribut. Einem Screenreader-Nutzer wird doch, wenn ich nicht irre, folgendes vorgelesen: „Planung und Abrechnung, Planung und Abrechnung, Heizkostenabrechnung“ (oder in der Box Stromabrechnung drei mal „Stromabrechnung“). Das ist doch nicht sinnvoll, oder?

Sprich du meinst man sollte nur ein Attribut verwenden? Bezüglich Screenreader habe ich sowas noch nicht ausprobiert.

Mit freundlichen Grüßen

Christian Huml

[Auge]

Hallo

Es handelt sich um mehrere gleicharitge Sektionen …. Laut Quelltext wird article verwendet, ich weiß nicht, ob das angebracht ist. Ich würde zu section tendieren.

Daran habe ich auch schon gedacht. Aber pro Bereich kommt man dann wieder auf eine andere Seite wo alles genau erklärt wird.

Ja, deshalb halte ich die kurze Einführung mit Link zur Detailseite ja auch nicht für einen Artikel, der den Einsatz von article rechtfertigt. Achtung: Andere können anderer Meinung sein.

Wo wir gerade bei den Bildern sind. Unabhängig von der grunsdsätzlich vorgetragenen Kritik am Title-Attribut, frage ich mich, ob es sinnvoll ist, den Inhalt der auf das Bild folgenden Überschrift sinngemäß oder – an anderer Stelle – gar wörtlich zu wiederholen bzw. vorweg zu nehmen. Das Gleiche gilt für das Alt-Attribut. Einem Screenreader-Nutzer wird doch, wenn ich nicht irre, folgendes vorgelesen: „Planung und Abrechnung, Planung und Abrechnung, Heizkostenabrechnung“ (oder in der Box Stromabrechnung drei mal „Stromabrechnung“). Das ist doch nicht sinnvoll, oder?

Sprich du meinst man sollte nur ein Attribut verwenden?

Ich kann dir die Frage nicht endgültig beantworten. Das Title-Attribut solltest du aber weglassen. Es wiederholt nur den Inhalt des Alt-Attributs und wird von der (fast) identischen Überschrift gefolgt. Zur Frage, ob das Alt-Attribut hier leer notiert werden sollte (vorhanden sein muss es!), solltest du noch die Meinungen Anderer abwarten. Ich würde es mit der Begründung, dass der Inhalt (fast) der Gleiche ist, wie der der Überschrift, die dem Bild folgt, tun.

Bezüglich Screenreader habe ich sowas noch nicht ausprobiert.

Das haben wohl die Wenigsten. @marctrix ist hier im Forum einer der wenigen offensichtlich Erfahrenen. Eine erste, kurze Vorstellung vermittelt unser Wiki-Artikel Screenreader.

Tschö, Auge

[Christian Huml]

PS: Bei einer Breite von 17em bricht dass Bild aus dem div, bin gerade am Fehlersuchen 😂

Du hast alles in em, im HTML gibt es aber noch feste Breiten- und Höhenangaben:

<img class="bilder" src="" title="" height="154" width="270">

Hallo @Matthias Scharwies,

ja ich glaube dass ist es 😀 muss ich ausprobieren. Bezüglich deines Codes wäre dies wahrscheinlich sinnvoller 😀 Auf was beziehst du dass <h2> ? Ich hätte immer gemeint der Aufbau muss so sein: h1, h2, h3 usw. also man darf nicht erst mit h2 anfangen? Mit svg habe ich mich noch nicht so sehr auseinandergesetzt. Muss ich erst schauen ob dies bei Corel Draw X6 möglich ist. Darf man nach W3C die Höhen und Breiten eigentlich herausnehmen?

Mit freundlichen Grüßen

Christian Huml

[Auge]

Hallo

Du hast alles in em, im HTML gibt es aber noch feste Breiten- und Höhenangaben:

ja ich glaube dass ist es 😀 muss ich ausprobieren.

Wie im Nachbarposting geschrieben, kannst du die Größenangaben im CSS, auch mehrfach füe verschiedene Breakpoints, überschreiben.

Auf was beziehst du dass <h2> ? Ich hätte immer gemeint der Aufbau muss so sein: h1, h2, h3 usw. also man darf nicht erst mit h2 anfangen?

Da hast du recht, aber es soll pro HTML-Dokument/Seite auch nur eine h1 als Titel des Dokuments geben. Einzelne Abschnitte, wie sie deine Boxen darstellen, werden mit h2 oder Unterabschnitte mit h3, h4 bis h6 ausgezeichnet/überschrieben. Dir fehlt also eine Gesamtüberschrift für die Seite (h1), damit die einzelnen Boxen die ihnen gebührende h2 haben können.

Tschö, Auge

[Christian Huml]

Wie im Nachbarposting geschrieben, kannst du die Größenangaben im CSS, auch mehrfach füe verschiedene Breakpoints, überschreiben.

Da hast du recht, aber es soll pro HTML-Dokument/Seite auch nur eine h1 als Titel des Dokuments geben. Einzelne Abschnitte, wie sie deine Boxen darstellen, werden mit h2 oder Unterabschnitte mit h3, h4 bis h6 ausgezeichnet/überschrieben. Dir fehlt also eine Gesamtüberschrift für die Seite (h1), damit die einzelnen Boxen die ihnen gebührende h2 haben können.

Hallo @Auge,

ok habe ich verstanden 😀 Bin mir jetzt gar nicht mehr so sicher, also es darf <h1> nur einmal vorkommen, wie ist es aber mit h2,h3,h4,h5, h6 darf dies mehrmals vorkommen?

Mit freundlichen Grüßen

Christian Huml

[Auge]

Hallo

Bin mir jetzt gar nicht mehr so sicher, … wie ist es … mit h2,h3,h4,h5, h6 darf dies mehrmals vorkommen?

Ja, natürlich. Stell dir ein Inhaltsverzeichnis mit Kapiteln und Abschnitten in Kapiteln und Unterabschnitten in Abschnitten vor. Eine solche verschachtelte Struktur (z.B. einer Dokumentation) …

• Titel (h1)
  • Vorwort (h2)
  • Kapitel 1 (h2)
    • Einführung (h3)
    • Details (h3)
    • Zusammenfassung (h3)
  • Kapitel 2 (h2)
    • Einführung (h3)
    • Details (h3)
    • Noch mehr Details (h3)
    • Zusammenfassung (h3)
  • Nachwort (h2)
  • Index (h2)

… soll sich, wie in den geklammerten Angaben zu sehen, auch in der Überschriftenhierarchie wiederspiegeln. Die Kapitel gehören, je nach Art des Inhalts, in article oder section, die Abschnitte jeweils in section. Ich gehe hier davon aus, dass der Inhalt in einem Dokument ausgegeben wird. Wird z.B. jedes Kapitel in einem eigenen Dokument ausgegeben, ist es nach meinem Dafürhalten der direkte Inhalt von main, welches den Hauptinhalt eines Dokuments enthält. Die Abschnitte blieben dann in ihren sections. Sie werden ja nicht plötzlich ihrerseits zu Kapiteln.

Tschö, Auge

[marctrix]

Hej Auge,

Ich hätte immer gemeint der Aufbau muss so sein: h1, h2, h3 usw. also man darf nicht erst mit h2 anfangen?

Da hast du recht, aber es soll pro HTML-Dokument/Seite auch nur eine h1 als Titel des Dokuments geben.

Sagt @Gunnar Bittersmann und er kann das begründen.

Ich kann aber auch begründen, dass es mehrere h1 geben darf. Letztendlich maßgeblich ist die WCAG. Die ist da eindeutig zweideutig: beides geht.

Wichtig ist, die Überschriften-Struktur muss nachvollziehbar sein.

Das ist sie derzeit nicht. Die jetzige Überschriften-Struktur bedeutet, dass der zweite Artikel dem ersten untergeordnet ist, der dritte wiederum dem zweiten. Die sind jedoch gleichwertig und brauchen daher alle dieselbe Hierarchie-Ebene.

Wenn man die h1 für den Namen der Site verwendet, macht man an dieser Stelle mit h2 weiter. Wenn man die drei Artikel in ein main setzt, braucht das main eine Überschrift. Das sollte dann die h1sein. Etwas wie „unsere Leistungen“ bietet sich hier an. Wenn man die nicht im Browser ausgeben möchte, findet man in Heiden Pickerings inclusive design Patterns eine Methode zum Verbergen von Elementen vor Sehenden Besuchern.

An dieser Stelle wäre es aber auch legitim, allen drei Leistungen eine h1 zu geben, wenn der Site-Bezeichnet nicht schon eine h1 ist. Alle diese Strukturen sind nachvollziehbar.

Aus SEO-Sicht macht es keinen Sinn, die drei Leistungen alle so stark zu bewerten. Sie konkurrieren dann um die Gunst der Suchmaschine.

Höher gerankt werden eh die Seiten, die sich dann jeweils mit der entsprechenden Leistung beschäftigen.

Daher würde ich bei den verschiedenen aus Accessibility-Sicht zulässigen Varianten eine wählen, die aufgrund anderer wichtiger Aspekte (wie z.B. SEO) sinnvoll erscheint… 😉

Marc

[Auge]

Hallo

Ich hätte immer gemeint der Aufbau muss so sein: h1, h2, h3 usw. also man darf nicht erst mit h2 anfangen?

Da hast du recht, aber es soll pro HTML-Dokument/Seite auch nur eine h1 als Titel des Dokuments geben.

Ich kann […] auch begründen, dass es mehrere h1 geben darf. Letztendlich maßgeblich ist die WCAG. Die ist da eindeutig zweideutig: beides geht.

Mir ist klar, dass beides geht. Deshalb auch „soll“ statt „darf“. Allerdings habe ich quasi „logische Bauchschmerzen“ bei mehreren h1pro Dokument. Das fühlt sich für mich irgendwie falsch an, auch deshalb „soll“ statt „darf“. 😉

Sei's drum, nun sind beide Varianten beschrieben.

Wichtig ist, die Überschriften-Struktur muss nachvollziehbar sein.

Jep.

Tschö, Auge

[marctrix]

Hej Auge,

Letztendlich maßgeblich ist die WCAG. Die ist da eindeutig zweideutig: beides geht.

Mir ist klar, dass beides geht. Deshalb auch „soll“ statt „darf“. Allerdings habe ich quasi „logische Bauchschmerzen“ bei mehreren h1pro Dokument.

Geht mir ähnlich. Ich versuche nur persönliche Vorlieben bei so etwas außen vor zu lassen.

Persönlich mag ich eine Baumstruktur mit einer h1 als „Wurzel“.

Das fühlt sich für mich irgendwie falsch an, auch deshalb „soll“ statt „darf“. 😉

Da habe ich nicht gut genug gelesen! 😉

Ich hoffe, die Erläuterungen waren dennoch hilfreich für den einen oder anderen.

Marc

[Matthias Scharwies]

Servus!

Mit svg habe ich mich noch nicht so sehr auseinandergesetzt. Muss ich erst schauen ob dies bei Corel Draw X6 möglich ist.

SVG-Grafiken werden im Allgemeinen mit Adobe Ilustrator oder dem kostenlosen Inkscape erstellt. Du kannst das aber auch direkt im Code-Editor bearbeiten, da es ja ein XML-Dialekt ist.

Ich hier mal die bestehende Grafik quick & dirty realisiert:

<svg width="300" height="83" viewBox="0 0 300 83" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Plasa Logo</title>
  <style>
    text {
      font-size: 14px;
    }
  
    .name {
	    fill: #08aaf1;
	    font-size: 30px;
	  }
	
  	.rechtsform {
	    font-size: 20px;
	  }
  </style>
  <rect class="nur-zum-gucken-wie-groß-das-Bild-ist" x="1" y="1" width="298" height="78" fill="none" stroke="pink"/>
  
  <text class="name" x="3" y="30">PLASA</text>
  <text class="rechtsform" x="105" y="30" >GbR</text> 


  <text x="3" y="45" >
    <tspan >Gesellschaft für Planung und Abrechnung  </tspan>
    <tspan x="3" y="62">stromerzeugender Anlagen,</tspan>  
    <tspan x="3" y="78">Wärmemessdienst, Heizkostenabrechnung</tspan>
  </text>  
</svg>

Kopier das in deinen Editor, speicher es im svg.Format ab und öffne es im Browser. Du kannst alle Elemente mit CSS stylen. Besser wäre es aber, so etwas von einem Grafiker entwickeln zu lassen.

Herzliche Grüße

Matthias Scharwies

[Matthias Apsel]

Hallo Matthias Scharwies,

Besser wäre es aber, so etwas von einem Grafiker entwickeln zu lassen.

Vor allem, weil du auf diese Weise keine Gewalt über die verwendete Schriftart hast.

Bis demnächst
Matthias

[Matthias Scharwies]

Servus!

Besser wäre es aber, so etwas von einem Grafiker entwickeln zu lassen.

Vor allem, weil du auf diese Weise keine Gewalt über die verwendete Schriftart hast.

Das könnte man mit font-style, font-face und Webfonts erreichen. Wenn das Logo aber so textlastig ist, könnte man es eigentlich auch in HTML darstellen.

Herzliche Grüße

Matthias Scharwies

[Matthias Apsel]

Hallo Matthias Scharwies,

Vor allem, weil du auf diese Weise keine Gewalt über die verwendete Schriftart hast.

Das könnte man mit font-style, font-face und Webfonts erreichen.

Auch das reicht nicht, siehe unsere Diskussion über das offline-wiki-Logo.

Wenn das Logo aber so textlastig ist, könnte man es eigentlich auch in HTML darstellen.

Ja, zum Beispiel als h1 und Link auf die Hauptseite.

Bis demnächst
Matthias

[Christian Huml]

Mit svg habe ich mich noch nicht so sehr auseinandergesetzt. Muss ich erst schauen ob dies bei Corel Draw X6 möglich ist.

SVG-Grafiken werden im Allgemeinen mit Adobe Ilustrator oder dem kostenlosen Inkscape erstellt. Du kannst das aber auch direkt im Code-Editor bearbeiten, da es ja ein XML-Dialekt ist.

Ich hier mal die bestehende Grafik quick & dirty realisiert:

<svg width="300" height="83" viewBox="0 0 300 83" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Plasa Logo</title>
  <style>
    text {
      font-size: 14px;
    }
  
    .name {
	    fill: #08aaf1;
	    font-size: 30px;
	  }
	
  	.rechtsform {
	    font-size: 20px;
	  }
  </style>
  <rect class="nur-zum-gucken-wie-groß-das-Bild-ist" x="1" y="1" width="298" height="78" fill="none" stroke="pink"/>
  
  <text class="name" x="3" y="30">PLASA</text>
  <text class="rechtsform" x="105" y="30" >GbR</text> 


  <text x="3" y="45" >
    <tspan >Gesellschaft für Planung und Abrechnung  </tspan>
    <tspan x="3" y="62">stromerzeugender Anlagen,</tspan>  
    <tspan x="3" y="78">Wärmemessdienst, Heizkostenabrechnung</tspan>
  </text>  
</svg>

Kopier das in deinen Editor, speicher es im svg.Format ab und öffne es im Browser. Du kannst alle Elemente mit CSS stylen. Besser wäre es aber, so etwas von einem Grafiker entwickeln zu lassen.

Hallo @Matthias Scharwies,

habe nun mal geschaut und habe gesehen, dass es schon mit Corel Draw X6 möglich sein sollte Skalierbare Vektorgrafiken (SVG) werde dies mal testen 😉

Mit freundlichen Grüßen

Christian

[Christian Huml]

Hallo nochmals 😉 @Matthias Scharwies,

habe es nun ausprobiert. Wie solle es richtig erfolgen? Wird in einen weiteren Beitrag getrennt, da Zeichen zu lange 😉 Externes CSS?

<header>
<a href="index.html"> <img class="logo" src="plasa-gbr.svg" height="354" width="827" alt="Plasa GbR Gesellschaft für Planung und Abrechnung stromerzeugender Anlagen Wärmemessdienst, Heizkostenabrechnung" title="Plasa GbR Gesellschaft für Planung und Abrechnung stromerzeugender Anlagen Wärmemessdienst, Heizkostenabrechnung"> </a> 
</header>

[Christian Huml]

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW X6 -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="827px" height="354px" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
viewBox="0 0 827 354"
 xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <font id="FontID0" horiz-adv-x="739" font-variant="normal" fill-rule="nonzero" font-style="normal" font-weight="400">
	<font-face 
		font-family="Century Gothic">
	</font-face>
   <missing-glyph><path d="M0 0z"/></missing-glyph>
   <glyph unicode="f" horiz-adv-x="314"><path d="M295.983 735.32l0 -66.4939c-25.1478,10.8528 -46.813,16.1578 -64.8336,16.1578 -13.4851,0 -24.6619,-2.63222 -33.4899,-7.97765 -8.82806,-5.34543 -14.4974,-11.5008 -16.6437,-18.5065 -2.34875,-7.00575 -3.52312,-25.6743 -3.52312,-55.8435l0 -71.6368 111.525 0 0 -59.0022 -111.687 0 -0.323965 -472.017 -67.9922 0 0 472.017 -70.017 0 0 59.0022 70.017 0 0 82.6517c0,37.9849 3.48263,65.1575 10.4884,81.3153 7.00575,16.1983 18.9925,29.3594 35.8387,39.1998 16.6437,9.79995 36.9725,14.8214 60.8245,14.8214 22.1511,0 48.8378,-4.49502 79.817,-13.6875z"/></glyph>
   <glyph unicode="R" horiz-adv-x="606"><path d="M90.9921 718.016l143.339 0c79.8425,0 134.016,-3.33858 162.331,-9.85827 42.8346,-9.66929 77.5118,-30.4882 104.157,-62.6457 26.8346,-32 40.189,-71.4961 40.189,-118.331 0,-39.0236 -9.16535,-73.3543 -27.685,-102.835 -18.3307,-29.6693 -44.6614,-52 -78.9921,-67.1811 -34.1732,-15.1496 -81.5118,-22.8346 -141.827,-23.1496l258.488 -334.016 -88.1575 0 -258.488 334.016 -41.3543 0 0 -334.016 -72 0 0 718.016zm72 -70.0157l0 -244 124 -1.00787c48.189,0 83.685,4.50394 106.677,13.6693 22.9921,9.16535 41.0079,23.685 53.9843,43.685 12.8504,20 19.3386,42.3307 19.3386,67.1496 0,24 -6.48819,46.0157 -19.6535,65.6693 -13.0079,19.6535 -30.1732,33.6693 -51.4961,42.1732 -21.1654,8.50394 -56.5039,12.6614 -105.827,12.6614l-127.024 0z"/></glyph>
   <glyph unicode="A" horiz-adv-x="739"><path d="M380.983 717.988l335.021 -717.988 -77.1847 0 -112.133 236.009 -311.169 0 -111.525 -236.009 -79.9789 0 338.989 717.988 17.9801 0zm-8.99004 -150.644l-123.512 -261.359 246.538 0 -123.026 261.359z"/></glyph>
   <glyph unicode="ü" horiz-adv-x="607"><path d="M66.9798 531.02l68.0327 0 0 -247.833c0,-60.5005 3.32064,-102.009 9.84045,-124.848 9.63797,-32.518 28.4685,-58.1518 55.965,-77.0228 27.4966,-18.8305 60.5005,-28.3065 98.6879,-28.3065 38.1469,0 70.503,9.15202 97.1491,27.4966 26.5247,18.5065 45.0312,42.48 54.9931,72.4872 6.84377,20.4908 10.3669,63.8212 10.3669,130.194l0 247.833 69.9765 0 0 -260.347c0,-73.1757 -8.50409,-128.169 -25.6743,-165.182 -16.9677,-37.175 -42.8039,-66.1699 -77.1442,-86.9847 -34.3403,-21.0173 -77.3467,-31.5056 -129.181,-31.5056 -51.8345,0 -95.0028,10.4884 -129.667,31.5056 -34.6643,20.8148 -60.6625,50.1741 -77.6707,87.6731 -17.1702,37.499 -25.6743,93.9904 -25.6743,169.312l0 255.528zm134.527 209.97c15.6718,0 28.8329,-5.50741 40.0097,-16.4817 10.9743,-11.1768 16.4817,-24.3379 16.4817,-40.0097 0,-15.5098 -5.50741,-28.8329 -16.4817,-40.0097 -11.1768,-10.9743 -24.3379,-16.4817 -40.0097,-16.4817 -15.5098,0 -28.8329,5.50741 -40.0097,16.4817 -11.0148,11.1768 -16.4817,24.4999 -16.4817,40.0097 0,15.6718 5.46692,28.8329 16.4817,40.0097 11.1768,10.9743 24.4999,16.4817 40.0097,16.4817zm198.996 0c15.6718,0 28.8329,-5.50741 40.0097,-16.4817 10.9743,-11.1768 16.4817,-24.3379 16.4817,-40.0097 0,-15.5098 -5.50741,-28.8329 -16.4817,-40.0097 -11.1768,-10.9743 -24.3379,-16.4817 -40.0097,-16.4817 -15.5098,0 -28.8329,5.50741 -40.0097,16.4817 -10.9743,11.1768 -16.4817,24.4999 -16.4817,40.0097 0,15.6718 5.50741,28.8329 16.4817,40.0097 11.1768,10.9743 24.4999,16.4817 40.0097,16.4817z"/></glyph>
   <glyph unicode="t" horiz-adv-x="338"><path d="M135.013 729.003l67.9922 0 0 -197.983 108.002 0 0 -59.0022 -108.002 0 0 -472.017 -67.9922 0 0 472.017 -93.0185 0 0 59.0022 93.0185 0 0 197.983z"/></glyph>
   <glyph unicode="c" horiz-adv-x="646"><path d="M592.006 420.669l-54.1832 -33.6519c-46.975,61.9989 -111.161,92.9781 -192.476,92.9781 -64.9955,0 -119.017,-20.8148 -162.023,-62.3228 -42.8039,-41.5081 -64.3071,-91.8442 -64.3071,-151.17 0,-38.6734 9.79995,-74.998 29.6428,-109.014 19.6809,-33.9759 46.8535,-60.5005 81.3558,-79.331 34.2998,-18.8305 72.9732,-28.1445 115.818,-28.1445 78.3186,0 142.342,30.9792 191.99,92.9781l54.1832 -35.6767c-25.5123,-38.1469 -59.6906,-67.6278 -102.495,-88.807 -43.0064,-21.0173 -91.8442,-31.5056 -146.675,-31.5056 -84.3525,0 -154.167,26.6461 -209.687,79.817 -55.4791,53.3328 -83.1376,118.004 -83.1376,194.339 0,51.1865 12.9991,98.8499 38.9973,142.828 25.8362,44.0188 61.4724,78.3591 106.828,103.021 45.4766,24.6619 96.1772,37.013 152.345,37.013 35.3122,0 69.3286,-5.34543 102.171,-16.0363 32.6395,-10.6504 60.5005,-24.6619 83.2996,-41.832 23.0015,-17.1702 42.3585,-38.9973 58.3543,-65.4815z"/></glyph>
   <glyph unicode="n" horiz-adv-x="609"><path d="M76.0104 531.02l67.9922 0 0 -95.2053c27.4966,36.3651 57.8278,63.5377 90.9938,81.3558 33.3279,17.8181 69.4906,26.8486 108.69,26.8486 39.8072,0 75.16,-10.0024 105.977,-30.1693 30.8172,-20.1668 53.6568,-47.3394 68.3162,-81.5178 14.6999,-34.0164 22.0296,-87.1467 22.0296,-159.35l0 -272.981 -67.9922 0 0 253.017c0,60.9865 -2.67271,101.806 -7.85616,122.297 -8.34211,35.0288 -23.6495,61.3509 -46.1651,79.169 -22.5156,17.6966 -51.8345,26.5247 -87.9971,26.5247 -41.5081,0 -78.6831,-13.6875 -111.323,-41.0221 -32.842,-27.1321 -54.5072,-60.9865 -64.8336,-101.32 -6.5198,-26.3222 -9.84045,-74.35 -9.84045,-144.165l0 -194.501 -67.9922 0 0 531.02z"/></glyph>
   <glyph unicode="k" horiz-adv-x="501"><path d="M76.0104 736.009l67.9922 0 0 -419.657 247.995 214.668 99.0119 0 -292.338 -253.017 309.346 -278.003 -96.8656 0 -267.15 240.18 0 -240.18 -67.9922 0 0 736.009z"/></glyph>
   <glyph unicode="W" horiz-adv-x="959"><path d="M47.0155 717.988l72.6492 0 147.85 -517.008 208.31 517.008 12.5132 0 203.167 -517.008 148.66 517.008 72.8517 0 -206.528 -717.988 -11.6628 0 -213.331 543.006 -218.839 -543.006 -10.3264 0 -205.313 717.988z"/></glyph>
   <glyph unicode="h" horiz-adv-x="609"><path d="M76.0104 736.009l67.9922 0 0 -300.842c27.6585,36.3246 58.3138,63.6592 91.4797,81.6798 33.3684,18.1421 69.3691,27.1726 108.204,27.1726 39.8072,0 75.16,-10.0024 105.977,-30.1693 30.8172,-20.1668 53.6568,-47.3394 68.3162,-81.1938 14.6999,-33.9759 22.0296,-87.1467 22.0296,-159.674l0 -272.981 -67.9922 0 0 253.017c0,60.9865 -2.51073,101.806 -7.37021,122.297 -8.46359,35.0288 -23.9734,61.3509 -46.327,79.169 -22.3131,17.6966 -51.6725,26.5247 -87.9971,26.5247 -41.5081,0 -78.6426,-13.6875 -111.485,-41.0221 -32.842,-27.1321 -54.5072,-60.9865 -64.9955,-101.32 -6.5198,-25.9982 -9.84045,-73.9856 -9.84045,-144.165l0 -194.501 -67.9922 0 0 736.009z"/></glyph>
   <glyph unicode="e" horiz-adv-x="649"><path d="M524.338 175.994l57.6658 -30.3313c-18.9925,-36.8106 -40.8196,-66.6559 -65.684,-89.3334 -24.8238,-22.5156 -52.6444,-39.8477 -83.664,-51.6725 -31.1412,-11.8247 -66.1699,-17.6561 -105.329,-17.6561 -86.9847,0 -154.815,28.347 -203.815,85.0004 -48.9998,56.6534 -73.4996,120.677 -73.4996,191.99 0,67.1823 20.8148,127.156 62.3228,179.679 52.4824,66.8179 122.985,100.348 211.185,100.348 90.8318,0 163.481,-34.3403 217.664,-102.859 38.4709,-48.3113 58.1518,-108.65 58.7997,-181.178l-479.995 0c1.33636,-61.4724 21.1792,-111.809 59.3262,-150.968 38.3494,-39.3618 85.6888,-59.0022 141.856,-59.0022 27.1726,0 53.6568,4.657 79.331,13.971 25.6743,9.3545 47.5014,21.6652 65.4815,37.175 18.0206,15.5098 37.499,40.3337 58.3543,74.836zm0.647931 142.99c-9.15202,36.5271 -22.4751,65.522 -39.9692,87.3492 -17.6966,21.8272 -40.8601,39.3213 -69.693,52.6849 -28.8329,13.3231 -59.1642,19.9644 -90.8318,19.9644 -52.4824,0 -97.4731,-16.6437 -135.175,-50.1336 -27.6585,-24.4999 -48.3113,-61.027 -62.4848,-109.865l398.153 0z"/></glyph>
   <glyph unicode="b" horiz-adv-x="682"><path d="M80.9913 0l0 736.009 67.9922 0 0 -296.995c28.6709,35.1502 60.703,61.4724 96.1772,78.8046 35.5147,17.5346 74.35,26.2007 116.506,26.2007 75.16,0 139.346,-27.1726 192.516,-81.5178 53.1303,-54.5072 79.817,-120.353 79.817,-197.983 0,-76.5368 -26.8486,-142.018 -80.5054,-196.202 -53.6568,-54.1427 -118.166,-81.3153 -193.65,-81.3153 -43.3304,0 -82.5302,9.15202 -117.68,27.4966 -35.1502,18.3445 -66.1699,46.0031 -93.1805,83.1781l0 -97.6755 -67.9922 0zm273.832 53.0088c37.8634,0 73.0137,9.314 105.005,27.8205 32.1536,18.6685 57.6658,44.8287 76.6583,78.5211 19.033,33.4899 28.5089,69.1666 28.5089,106.666 0,37.499 -9.47599,73.2972 -28.6709,107.314 -19.1545,33.8544 -44.8287,60.3385 -77.1442,79.331 -32.356,18.8305 -66.8583,28.347 -103.507,28.347 -37.175,0 -72.6897,-9.51648 -106.342,-28.347 -33.4899,-18.9925 -59.3262,-44.5047 -77.3467,-76.4963 -17.9801,-31.9916 -26.9701,-67.9922 -26.9701,-108.164 0,-61.1485 20.1668,-112.335 60.6625,-153.317 40.3337,-41.1841 89.9814,-61.6749 149.146,-61.6749z"/></glyph>
   <glyph unicode="s" horiz-adv-x="388"><path d="M344.011 473.313l-44.0188 -45.3147c-36.4866,35.3527 -72.3253,53.0088 -107.152,53.0088 -22.1916,0 -41.1841,-7.32972 -57.0179,-21.9891 -15.8338,-14.5379 -23.8115,-31.6676 -23.8115,-51.1865 0,-17.1702 6.47931,-33.6519 19.4784,-49.1617 12.9991,-15.9958 40.4957,-34.6643 82.1657,-56.1675 50.6601,-26.1602 85.1624,-51.6725 103.507,-76.0104 17.8181,-24.6619 26.8486,-52.4824 26.8486,-83.3401 0,-43.6543 -15.3479,-80.5054 -46.0031,-110.837 -30.6552,-30.1288 -69.0046,-45.3147 -115.008,-45.3147 -30.6552,0 -59.8526,6.68179 -87.8351,20.0049 -27.8205,13.3231 -50.8221,31.6676 -69.1666,55.1551l43.0064 48.8378c34.8263,-39.3213 72.0013,-59.0022 111.161,-59.0022 27.3346,0 50.6601,8.82806 70.017,26.3222 19.1545,17.5346 28.8329,38.1874 28.8329,61.8369 0,19.5189 -6.35782,36.8511 -19.033,52.1584 -12.7966,15.0239 -41.4676,33.8544 -86.1343,56.532 -48.0279,24.6619 -80.6674,48.9998 -97.8375,72.9732 -17.3321,24.0139 -25.9982,51.3485 -25.9982,82.1657 0,40.1717 13.809,73.4996 41.3056,100.186 27.699,26.4842 62.5253,39.8477 104.681,39.8477 48.9998,0 98.3235,-23.528 148.012,-70.7054z"/></glyph>
   <glyph unicode="," horiz-adv-x="276"><path d="M144.327 132.016l65.684 -31.3436 -98.8499 -184.66 -48.1493 20.4908 81.3153 195.513z"/></glyph>
   <glyph unicode="ä" horiz-adv-x="683"><path d="M605.005 531.02l0 -531.02 -67.9922 0 0 91.3177c-28.6709,-34.8263 -60.6625,-60.9865 -96.3392,-78.3186 -35.5147,-17.3321 -74.512,-25.9982 -116.668,-25.9982 -74.998,0 -139.184,27.1726 -192.354,81.5178 -53.1708,54.4667 -79.655,120.475 -79.655,198.469 0,76.1723 26.8486,141.492 80.5054,195.675 53.4948,54.1832 118.004,81.3558 193.488,81.3558 43.4923,0 82.8541,-9.19252 118.166,-27.5371 35.1907,-18.304 66.1699,-45.9626 92.8566,-83.1376l0 97.6755 67.9922 0zm-273.67 -53.0088c-37.9849,0 -73.1757,-9.3545 -105.167,-28.023 -32.1536,-18.5065 -57.6658,-44.6667 -76.6583,-78.3186 -18.9925,-33.6519 -28.5089,-69.3286 -28.5089,-106.99 0,-37.175 9.51648,-72.8517 28.6709,-106.828 19.1545,-34.0164 44.8287,-60.5005 77.1442,-79.3715 32.356,-18.9925 67.0203,-28.4685 104.033,-28.4685 37.1345,0 72.6492,9.314 105.977,28.1445 33.4899,18.8305 59.1642,44.1808 77.1847,76.3343 17.9801,31.9916 26.9701,68.1947 26.9701,108.326 0,61.189 -20.1668,112.335 -60.6625,153.519 -40.3337,41.1841 -89.9814,61.6749 -148.984,61.6749zm-91.8442 262.979c15.6718,0 28.8329,-5.50741 40.0097,-16.4817 11.0148,-11.1768 16.4817,-24.3379 16.4817,-40.0097 0,-15.5098 -5.46692,-28.8329 -16.4817,-40.0097 -11.1768,-10.9743 -24.3379,-16.4817 -40.0097,-16.4817 -15.5098,0 -28.8329,5.50741 -40.0097,16.4817 -10.9743,11.1768 -16.4817,24.4999 -16.4817,40.0097 0,15.6718 5.50741,28.8329 16.4817,40.0097 11.1768,10.9743 24.4999,16.4817 40.0097,16.4817zm198.996 0c15.6718,0 28.8329,-5.50741 40.0097,-16.4817 11.0148,-11.1768 16.5222,-24.3379 16.5222,-40.0097 0,-15.5098 -5.50741,-28.8329 -16.5222,-40.0097 -11.1768,-10.9743 -24.3379,-16.4817 -40.0097,-16.4817 -15.4693,0 -28.8329,5.50741 -39.9692,16.4817 -11.0148,11.1768 -16.5222,24.4999 -16.5222,40.0097 0,15.6718 5.50741,28.8329 16.5222,40.0097 11.1363,10.9743 24.4999,16.4817 39.9692,16.4817z"/></glyph>
   <glyph unicode="m" horiz-adv-x="938"><path d="M76.0104 531.02l67.9922 0 0 -91.8442c23.8115,33.8139 48.1493,58.6377 73.3377,74.3095 34.5023,20.3288 70

[Christian Huml]

Müsste folgende Zeile nicht DE heißen?

?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW X6 -->

Wenn externe CSS dann nach W3C nicht valide

@charset "UTF-8";
@font-face { font-family:"Century Gothic";src:url("#FontID0") format(svg)}
.fil2 {fill:#2B2A29}
.fil1 {fill:#08AAF1}
.fil0 {fill:#181B1C}
.fnt0 {font-weight:normal;font-size:29.1742px;font-family:'Century Gothic'}
.fnt3 {font-weight:normal;font-size:37.5104px;font-family:'Century Gothic'}
.fnt2 {font-weight:normal;font-size:50.0134px;font-family:'Century Gothic'}
.fnt1 {font-weight:normal;font-size:75.0207px;font-family:'Century Gothic'}

[Gunnar Bittersmann]

@@Christian Huml

Müsste folgende Zeile nicht DE heißen?

Welche denn genau?

?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

Du meinst, ob in der DOCTYPE-Deklararion DE statt EN stehen müsste? Nein, diese Angabe bezieht sich auf die Sprache, von der die Elementbezeichner abgeleitet sind. Hieße es bspw. Kreis, dann ja. Das Element heißt aber circle – englisch.

Wenn du die Sprache von enthaltenen Texten angeben willst, dann mit dem xml:lang-Attribut. An Ort und Stelle oder fürs ganze Dokument im svg-Wurzelelement: <svg xml:lang="de" …>

---

Wenn externe CSS dann nach W3C nicht valide

@charset "UTF-8";
@font-face { font-family:"Century Gothic";src:url("#FontID0") format(svg)}

Formale Syntax: format(<string>#)

Strings: “surrounded by either double (") or single (') quotes.”

.fil2 {fill:#2B2A29}
.fil1 {fill:#08AAF1}
.fil0 {fill:#181B1C}

Selbstverständlich ist das valide. Das sagt dir auch der Validator, wenn du unter „Weitere Optionen“ ein entsprechendes Profil angibst.

LLAP 🖖

[Christian Huml]

Müsste folgende Zeile nicht DE heißen?

Welche denn genau?

?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

Du meinst, ob in der DOCTYPE-Deklararion DE statt EN stehen müsste? Nein, diese Angabe bezieht sich auf die Sprache, von der die Elementbezeichner abgeleitet sind. Hieße es bspw. Kreis, dann ja. Das Element heißt aber circle – englisch.

Wenn du die Sprache von enthaltenen Texten angeben willst, dann mit dem xml:lang-Attribut. An Ort und Stelle oder fürs ganze Dokument im svg-Wurzelelement: <svg xml:lang="de" …>

---

Wenn externe CSS dann nach W3C nicht valide

@charset "UTF-8";
@font-face { font-family:"Century Gothic";src:url("#FontID0") format(svg)}

Formale Syntax: format(<string>#)

Strings: “surrounded by either double (") or single (') quotes.”

.fil2 {fill:#2B2A29}
.fil1 {fill:#08AAF1}
.fil0 {fill:#181B1C}

Selbstverständlich ist das valide. Das sagt dir auch der Validator, wenn du unter „Weitere Optionen“ ein entsprechendes Profil angibst.

@Gunnar Bittersmann,

ok, dass mit dem Kreis verstehe ich aber nicht. Kannst du mir dies vielleicht genauer erklären oder hast du hierzu einen Link? Ich hätte immer gemeint W3C erkennt dies automatisch. Zumindest erkennt er meine CSS als CSS3 ohne Vorgaben. Sollte dies in eine externe CSS? Wenn ja, sollte dies in eine eigene CSS oder in die Haupt-CSS? Wenn Nein, ist die Frage gegenstandslos.

Mit freundlichen Grüßen

Christian

[Matthias Apsel]

Hallo Christian Huml,

ok, dass mit dem Kreis verstehe ich aber nicht.

Die Dokumenttypdeklaration ist in englisch verfasst. Deshalb dort EN.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Christian Huml

ok, dass mit dem Kreis verstehe ich aber nicht. Kannst du mir dies vielleicht genauer erklären oder hast du hierzu einen Link? Ich hätte immer gemeint W3C erkennt dies automatisch.

Hä? Das W3C? Du meinst den CSS-Validator?

Und was hat der mit dem Kreis zu tun? (Und dabei hatte ich extra eine Trennlinie in mein Posting gesetzt.)

Zumindest erkennt er meine CSS als CSS3 ohne Vorgaben.

Als für HTML gedachtes CSS.

Sollte dies in eine externe CSS? Wenn ja, sollte dies in eine eigene CSS oder in die Haupt-CSS? Wenn Nein, ist die Frage gegenstandslos.

Ob gegenstandslos, ist gegenstandslos. Zunächst einmal ist deine Frage ziemlich unverständlich.

LLAP 🖖

[Christian Huml]

@Gunnar Bittersmann,

dass mit dem Kreis habe ich falsch verstanden. Bezüglich W3C meinte ich folgendes dies in eine eigene CSS oder in die bestehende einbinden:

@charset "UTF-8";
@font-face { font-family:"Century Gothic";src:url("#FontID0") format(svg)}
.fil2 {fill:#2B2A29}
.fil1 {fill:#08AAF1}
.fil0 {fill:#181B1C}
.fnt0 {font-weight:normal;font-size:29.1742px;font-family:'Century Gothic'}
.fnt3 {font-weight:normal;font-size:37.5104px;font-family:'Century Gothic'}
.fnt2 {font-weight:normal;font-size:50.0134px;font-family:'Century Gothic'}
.fnt1 {font-weight:normal;font-size:75.0207px;font-family:'Century Gothic'}

Wenn ich meine CSS hochlade hätte ich gemeint er wählt automatisch (Profile, Medium, Typ, etc.)

Mein Corel Draw gibt mir folgende Optionen:

Formoptionen: Darstellungsattribute, Internes Stylesheet, externes CSS.

PS: Damit meinte ich nicht valide.

[Gunnar Bittersmann]

@@Christian Huml

Bezüglich W3C meinte ich folgendes dies in eine eigene CSS oder in die bestehende einbinden:

Ich wüsste nicht, was das W3C mit dieser Frage zu tun hätte. Aber die Antwort ist: Kommt drauf an.

Wenn ich meine CSS hochlade hätte ich gemeint er wählt automatisch (Profile, Medium, Typ, etc.)

Woher soll er (der Validator) denn wissen, nach welchen Regeln du prüfen lassen willst?

LLAP 🖖

[Christian Huml]

@Gunnar Bittersmann

Ich wüsste nicht, was das W3C mit dieser Frage zu tun hätte. Aber die Antwort ist: Kommt drauf an.

Zumindest ist es bei HTML so dass Design in CSS kommt und nicht mehr in die HTML Datei. Wie sich dies bei XML oder SVG darstellt weiß ich nicht, deshalb die Frage.

Woher soll er (der Validator) denn wissen, nach welchen Regeln du prüfen lassen willst?

Wie meinst du Regeln? Wenn HTML5 <!DOCTYPE html> muss er normal dass Dokument als HTML5 erkennen. Der Validator erkennt ja auch wenn du nicht erlaubte HTML-Befehle verwenden würdest Beispiel:

<h1>FALSCH<h1>
<h1>RICHTIG</h1>

Habe nun mit Corel Draw abgeschlossen… die Version ist einfach zu alt. Bin den Vorschlag von @Matthias Scharwies bezüglich Inkscape gefolgt.

Sollte bei SVG keine Höhe und Breite mehr erfolgen? SVG/Einbindung

<img alt="self-Logo" src="Self-Logo.svg">

Wäre dieses Beispiel richtig?

<header>
<a href="index.html"> <img class="logo" src="img/plasa-gbr.svg" alt="Plasa GbR Gesellschaft für Planung und Abrechnung stromerzeugender Anlagen Wärmemessdienst, Heizkostenabrechnung" title="Plasa GbR Gesellschaft für Planung und Abrechnung stromerzeugender Anlagen Wärmemessdienst, Heizkostenabrechnung"> </a> 
</header>

Alt und Title lasse ich jetzt mal außen vor. Würde dies in der HTML Datei ausreichen?

Mit freundlichen Grüßen

Christian

[Matthias Apsel]

Hallo Christian Huml,

Der Validator erkennt ja auch wenn du nicht erlaubte HTML-Befehle verwenden würdest

Es gibt keine HTML-Befehle.

Sollte bei SVG keine Höhe und Breite mehr erfolgen?

Die Angabe von width- und height-Attributen im HTML ist keine schlechte Idee.

<header>
<a href="index.html"> <img class="logo" src="img/plasa-gbr.svg" alt="Plasa GbR Gesellschaft für Planung und Abrechnung stromerzeugender Anlagen Wärmemessdienst, Heizkostenabrechnung" title="Plasa GbR Gesellschaft für Planung und Abrechnung stromerzeugender Anlagen Wärmemessdienst, Heizkostenabrechnung"> </a> 
</header>

Alt und Title lasse ich jetzt mal außen vor.

Ich würde kein title verwenden, diese Info steckt ja im Logo bzw. imn alt-Attribut.

Würde dies in der HTML Datei ausreichen?

Ja.

Bis demnächst
Matthias

[Christian Huml]

@Matthias Apsel

Es gibt keine HTML-Befehle.

Warum ist dann immer die Rede von HTML Befehle? uni-trier

Mit freundlichen Grüßen

Christian

[Matthias Apsel]

Hallo Christian Huml,

Warum ist dann immer die Rede von HTML Befehle?

weil es Leute mit und ohne genaue Kenntnis der Fachlichkeit gibt. Das konkrete hier verlinkte Material ist extrem veraltet.

Bis demnächst
Matthias

[Christian Huml]

@Matthias Apsel

War nur ein Beispiel.

Mit freundlichen Grüßen

Christian

[marctrix]

Hej Christian,

War nur ein Beispiel.

Such lieber nach guten Beispielen. 😉

Wenn du in einer Doku etwas über HTML-Befehle liest, mach die gleich wieder zu.

Oder wenn jemand die Begriffe HTML-Tag und HTML-Element synonym verwendet.

Das sind die Beispiele, an denen man auch als Laie am ehesten erkennt, ob jemand ein kleines bisschen Ahnung hat.

Marc

[Gunnar Bittersmann]

@@marctrix

Wenn du in einer Doku etwas über HTML-Befehle liest, mach die gleich wieder zu.

Oder wenn jemand die Begriffe HTML-Tag und HTML-Element synonym verwendet.

Das sind die Beispiele, an denen man auch als Laie am ehesten erkennt, ob jemand ein kleines bisschen Ahnung hat.

Hm, es ist richtig, dass hinter der falschen Verwendung von Begriffen oft ein mangelndes Grundverständnis der Materie steckt. Was mich auch zu meinem Kurzvortrag „Sachen gibt’s, die gibt’s gar nicht“ angeregt hat.^[1]

Mit der o.g. Aussage muss man aber doch etwas vorsichtig sein. Besonders in englischen Quellen ist desöfteren von „HTML tags“ zu hören, wenn HTML elements gemeint sind – auch von Leuten, die durchaus Ahnung haben.

LLAP 🖖

---

1. Und jetzt muss ich mir die Impress.js-Präsentation nochmal vornehmen, weil Firefox seit Quantum keine Bruchrechnung mehr beherrscht‽ ↩︎

[marctrix]

Hej Gunnar,

[HTML hat keine Befehle und Tags sind keine Elemente]

Besonders in englischen Quellen ist desöfteren von „HTML tags“ zu hören, wenn HTML elements gemeint sind – auch von Leuten, die durchaus Ahnung haben.

Gibt es auch im Deutschen. Nicht immer geht fachliche Kompetenz Hand in Hand mit sprachlicher Sorgfalt. Das kann man als Lernender aber kaum erkennen.

Mir ging es darum Lernenden zu sagen, bei welchen Autoren Vorsicht geboten ist. Man könnte weitere Indizien hinzufügen und dann ein Scoring einfügen so ähnlich wie für die Erkennung von Spam. Ich wollte es dann aber doch etwas einfacher halten. 😉

Marc

[Gunnar Bittersmann]

@@Matthias Apsel

Das konkrete hier verlinkte Material ist extrem veraltet.

Ungefähr so alt wie Trier selbst.

Was im Übrigen nicht heißen soll, dass es früher HTML-„Befehle“ gegeben hätte. Soweit ging Cäsars Macht nun auch wieder nicht.

LLAP 🖖

[Tabellenkalk]

Hallo,

[uni-trier]

sicher, dass das Dokument von der Uni stammt?

HTML Standart Bezeichnung
Tastatur Eingabe
Grosse
SweetSexy18
Ziel Definieren

…

mir graut!

Gruß
Kalk

[Christian Huml]

sicher, dass das Dokument von der Uni stammt?
HTML Standart Bezeichnung
Tastatur Eingabe
Grosse
SweetSexy18
Ziel Definieren
…

@Tabellenkalk

Sicher 😂 Hier die Url: https://www.uni-trier.de/fileadmin/fb4/prof/SOZ/MES/Forschung/Wichtige_HTML-Befehle.pdf = https://www.uni-trier.de/

Mit freundlichen Grüßen

Christian

[Robert B.]

Hallo @Christian Huml,

ich bin mir da nicht so sicher. Schau doch mal, was auf jeder Seite oben rechts steht: http://www.webmasternetz.de/grundlagen/html_befehle.htm. Das ist eine „als PDF gedruckte“ fremde Webseite.

Viele Grüße
Robert

[Christian Huml]

@Robert B.

ja die PDF zeigt auf http://www.webmasternetz.de/grundlagen/html_befehle.htm

der Verweis geht aber auf

wahrscheinlich noch Archiv 😂

Mit freundlichen Grüßen

Christian

[marctrix]

Hej Christian,

Es gibt keine HTML-Befehle.

Warum ist dann immer die Rede von HTML Befehle? uni-trier

Trotzdem ist es falsch. Wie so vieles in dem Dokument. Gleich der Beginn ist Nonsens, aber so was von:

Dokument Typ: <HTML></HTML>

Egal wie alt das Dokument ist. Die Behauptung, dass der Dokumenttyp mit den öffnenden und schließenden Tags des HTML-Elementes angegeben werden kann, ist noch nie richtig gewesen.

Der Dokument-Typ wurde schon immer so angegeben:

<!doctype html>

Wobei in älteren HTML- und XHTML-Versionen da statt „html“ etwas anderes stand.

Dann steht da noch neben den Tags für das html-Element: „Anfang und Ende der Datei“.

Auch das ist falsch, denn die Datei beginnt früher, wenigstens die oben genannte Dokumenten-Typ-Angabe kommt vorher, manchmal wurde auch ein XML-konformer Beginn für XHTML-Dokumente verwendet.

<?xml version="1.0" ?>

Das schickte den IE allerdings in den Quirks-Modus. Ach ja, war schon eine beschissene Zeit damals. 😉

So geht es dann mit haufenweise falschem Zeug weiter. Nicht lesen! — Das Ding sollte so schnell wie möglich vom Netz!

Marc

[Gunnar Bittersmann]

@@Christian Huml

Zumindest ist es bei HTML so dass Design in CSS kommt und nicht mehr in die HTML Datei. Wie sich dies bei XML oder SVG darstellt weiß ich nicht, deshalb die Frage.

Ich würde sagen: Wenn es zur Grafik (zur Geometrie, zum corporate design) gehört, ins SVG. Wenn es zur Präsentation gehört, ins Stylesheet.

Bsp.:

• ein Gut-gemacht-Icon, grün. Das Grün ist wohl Sache der Darstellung; es könnte im anderen Umfeld auch blau sein. Ins CSS damit.

• das Sparkassen-Logo, rot. Das Rot gehört dazu; das Logo ist auch in anderem Umfeld rot (außer auf rotem Hintergrund). Farbangabe im SVG.

Woher soll er (der Validator) denn wissen, nach welchen Regeln du prüfen lassen willst? Wie meinst du Regeln? Wenn HTML5 <!DOCTYPE html> muss er normal dass Dokument als HTML5 erkennen.

Bei HTML ist es klar, davon gibt es nur eins. (Wer jetzt widersprechen will: vergesst HTML < 5 und XHTML 1.)

Bei CSS kann der Validator nicht wissen, ob es CSS für HTML oder CSS für SVG oder CSS für beides oder CSS für was ganz anderes sein soll.

LLAP 🖖

[Gunnar Bittersmann]

@@Christian Huml

HTML-Befehle

HTML ist keine imperative (Programmier-)Sprache, sondern eine deklarative (Auszeichnungs-)Sprache. Da gibt’s keine Befehle.

LLAP 🖖

[marctrix]

Hej Matthias,

Vom HTML her würde ich die Überschriften h2 nehmen, weil du mehrere hast.

@Gunnar Bittersmann Wo, wenn überhaupt, würdest du eine h1 verwenden?

Die Frage "wenn überhaupt" stellt sich nicht. Man beginnt immer mit der h1. Es gibt Screenreader-Nutzer, darunter die in Fachkreisen berühmte Leonie Watson, die sich darüber freut, wenn die h1 den Haupttext überschreibt, weil sie dann durch Druck auf die Taste 1 in ihrem Lieblingsscreenreader dann sofort zum Hauptinhalt kommt.

Ich habe hier schon mal ausgeführt, dass ich das selber nicht so gut finde.

Die Gründe dafür:

1.) Ist es unnötig. Es gibt bereits zwei Wege direkt zum Hauptinhalt zu kommen. Einerseits durch die Skiplinks, die an den Anfang der Seite gehören und zweitens durch Anspringen der Landmark „Hauptinhalt“ 2.) würde es mich verwirren. Ich hangen mich gerne an einer Struktur entlang, die einer Wurzel entspringt. Insofern mag ich es persönlich, wenn die h1 am Seitenanfang steht. Da befindet sich der Name der Site. Es ist für mich auch angenehm zuerst zu erfahren, dass ich noch bei der Firma xyz bin und nicht auf einer externen Seite gelandet bin Durch springen von h2 zu h2 würde ich gerne die Seitenstruktur erforschen können: Hauptnavi, Hauptartikel (den habe ich vielleicht schon gelesen und will gerne einen der Links in den), Weiterführende Informationen, Footer 3.) ginge es mir auf die Nerven. Wenn ich auf die Seite komme, liest mir der Screenreader zunächst den Titel des Dokumentes vor. Der dürfte in den meisten Fällen identisch mit dem Titel des Hauptinhaltes sein. Zweimal direkt hintereinander dasselbe zu hören, fände ich pfui.

Ich sage und begründe das so ausführlich, weil ich sonst gegen so eine Prominente Befürworterin der h1 für den Haupttext kein Gehör finden würde — zum ich schon weiß, dass @Gunnar Bittersmann gleich wieder das Leonie Watson-Zitat bringen wird 😉.

Ich mache das (Barrierefreiheit) aber nun seit 2001, also seit 17 Jahren und kann euch sagen: so viele unterschiedliche Surf-Typen es bei den Sehenden gibt, so viele gibt es auch bei denen, die blind sind (zum Beispiel diejenigen, die mit irrsinniger Vergrößerung sogar noch Umrisse erkennen können und diejenigen, die tatsächlich überhaupt nichts sehen, Power-User und normale User usw)

Anstelle des png-Bilds würde ich dein textlastiges Logo in svg erstellen, damit Suchmaschinen den Inhalt erfassen können.

Der Text gehört nicht ins Bild. Das Logo sollte dennoch ein SVG sein.

Marc

[marctrix]

Hej Christian,

weil hier Zugänglichkeit ein Thema geworden ist:

Links müssen eindeutige Titel haben. Bei Dir bekommt man, wenn man die Links Deiner Seite ausgeben oder vorlesen lässt, so was geboten: weiterlesen, weiterlesen, weiterlesen — nicht so cool, oder 😉

Kontraste kannst du beispielsweise mit dem kostenlosen Colour Kontrast Analyser der Paciello Group testen (gibt es für Win und Mac).

Man kann auf zwei Arten Zoomen: Nur Text oder gesamte Seite. Bei der WCAG heißt das G142: Using a technology that has commonly-available user agents that support zoom

Die Bilder gehören doch zu den Artikeln? Wenn die inhaltlich relevant sind, sollten die dann auch nach den Überschriften stehen, zu denen sie gehören. Sonst ist man ja schon dran vorbei, wenn man von Überschrift zu Überschrift springt. Allerdings scheint es mir eher so zu sein, dass die reiner Schmuck sind? - Dann gehören sie gar nicht ins HTML, sondern ins CSS.

Jede Seite bedeutet zwingend einen eindeutigen Titel, also einen, der nicht ein zweites Mal vorkommt (gilt auch für die Titel von Links, also auch die in der Navigation!)

Ein halbes Megabyte sind für den unscharfen bunten Fleck im Hintergrund zu viel…

Das fällt mir jetzt erst mal auf, ohne genauer getestet oder Code gelesen zu haben.

Jetzt habe ich noch mal einen kurzen Blick reingeworfen: kürzlich realisierte Projekte gehören nur viel gutem Willen in die Fußzeile. Hier soll was über die Seite und deren Betreiber stehen. Mit viel gutem Willen bedeutet: man kann die Info über die vom Betreiber zuletzt umgesetzten Projekte ja auch als eine Info über den Betreiber verstehen. Wäre mir aber etwas weit hergeholt. Und es gibt ja keine Not, diese Infos in den Fuß zu packen. Also rauf damit in den Inhaltsbereich. Ist dann ein vierter Artikel 😉

Da die Seite ja noch in der Mache ist und mit dem Edge 16, den Microsoft derzeit gerade am ausrollen am tun ist, alle relevanten Browser CSS-Grid verstehen, könntest du vermutlich schon CSS-Grid für das Layout der Seite verwenden. Du solltest versuchen auf Deinen Auftraggeber dahingehend freundlich beratend einzuwirken…

Marc

[Christian Huml]

Hej Christian,

weil hier Zugänglichkeit ein Thema geworden ist:

Links müssen eindeutige Titel haben. Bei Dir bekommt man, wenn man die Links Deiner Seite ausgeben oder vorlesen lässt, so was geboten: weiterlesen, weiterlesen, weiterlesen — nicht so cool, oder 😉

Kontraste kannst du beispielsweise mit dem kostenlosen Colour Kontrast Analyser der Paciello Group testen (gibt es für Win und Mac).

Man kann auf zwei Arten Zoomen: Nur Text oder gesamte Seite. Bei der WCAG heißt das G142: Using a technology that has commonly-available user agents that support zoom

Die Bilder gehören doch zu den Artikeln? Wenn die inhaltlich relevant sind, sollten die dann auch nach den Überschriften stehen, zu denen sie gehören. Sonst ist man ja schon dran vorbei, wenn man von Überschrift zu Überschrift springt. Allerdings scheint es mir eher so zu sein, dass die reiner Schmuck sind? - Dann gehören sie gar nicht ins HTML, sondern ins CSS.

Jede Seite bedeutet zwingend einen eindeutigen Titel, also einen, der nicht ein zweites Mal vorkommt (gilt auch für die Titel von Links, also auch die in der Navigation!)

Ein halbes Megabyte sind für den unscharfen bunten Fleck im Hintergrund zu viel…

Das fällt mir jetzt erst mal auf, ohne genauer getestet oder Code gelesen zu haben.

Jetzt habe ich noch mal einen kurzen Blick reingeworfen: kürzlich realisierte Projekte gehören nur viel gutem Willen in die Fußzeile. Hier soll was über die Seite und deren Betreiber stehen. Mit viel gutem Willen bedeutet: man kann die Info über die vom Betreiber zuletzt umgesetzten Projekte ja auch als eine Info über den Betreiber verstehen. Wäre mir aber etwas weit hergeholt. Und es gibt ja keine Not, diese Infos in den Fuß zu packen. Also rauf damit in den Inhaltsbereich. Ist dann ein vierter Artikel 😉

Da die Seite ja noch in der Mache ist und mit dem Edge 16, den Microsoft derzeit gerade am ausrollen am tun ist, alle relevanten Browser CSS-Grid verstehen, könntest du vermutlich schon CSS-Grid für das Layout der Seite verwenden. Du solltest versuchen auf Deinen Auftraggeber dahingehend freundlich beratend einzuwirken…

Hallo @marctrix,

hast du einen Screenreader benutzt? Wenn ja, muss ich es selber auch mal testen. Was sollte man deiner Meinung verwenden nur alt="" oder auch title="" oder beides. Ist alles ja noch in Bearbeitung 😉 Jedoch ist es schön, wenn du mich darauf hingewiesen hast, so kann ich es besser nachvollziehen und ändern 😀

Habe früher immer Little RGB verwendet funktioniert aber leider nicht mehr auf Win 10. Gut dass es hierbei eine Alternative gibt.

Bezüglich Bild solle es auch dass Thema ansprechen, ist dies dann auch Schmuck?

Der bunte Fleck sind Zähler 😉 bin in die volle Breite gegangen für größere Bildschirme. Nur einen normalen Hingerund finde ich persönlich ein wenig langweilig. Auf der normalen Seite www.plasa-gbr.de befindet sich ein Slider meiner Meinung nicht mehr zeitgerecht und ladeintensiv (nicht direkt auf der Hauptseite) deshalb ein Bild. Die komplette Seite wird dann durch die neue ersetzt.

Bezüglich kürzlich realisierte Projekte muss ich dies noch mit dem anderen Gesellschafter (Senior) abklären, dieser wollte dies so.

Mit Grid bin ich ein wenig skeptisch https://www.caniuse.com/#search=grid habe mir mal die Browserstatistiken angesehen und viele nutzen aber noch alte Browserversionen 😀 wäre dies evtl. nicht auch mit calc zu lösen?

PS: Bin selbst der Inhaber der Firma.

Mit freundlichen Grüßen

Christian Huml

[Matthias Scharwies]

Servus!

Jetzt habe ich noch mal einen kurzen Blick reingeworfen: kürzlich realisierte Projekte gehören nur viel gutem Willen in die Fußzeile. Hier soll was über die Seite und deren Betreiber stehen. Mit viel gutem Willen bedeutet: man kann die Info über die vom Betreiber zuletzt umgesetzten Projekte ja auch als eine Info über den Betreiber verstehen. Wäre mir aber etwas weit hergeholt. Und es gibt ja keine Not, diese Infos in den Fuß zu packen. Also rauf damit in den Inhaltsbereich. Ist dann ein vierter Artikel 😉

Bezüglich kürzlich realisierte Projekte muss ich dies noch mit dem anderen Gesellschafter (Senior) abklären, dieser wollte dies so.

Dass es auf der Seite vorhanden ist, ist ja gar kein Problem.

Es sollte nur im Inhaltsbereich und nicht im footer stehen:

<main>
  <h1>Unsere Leistungen</h1>
  <section class="box">
    <h2>Heizkostenabrechnung</h2>
    …
  </section>
  <section class="box">
    <h2>Stromabrechnung</h2>
    …
  </section>
  <section class="box">
    <h2>Konzepte für Stromerzeugung</h2>
    …
  </section>
  <section class="referenzen">
    <h2>Kürzlich Realisierte Projekte</h2>
    …
  </section>
</main>
<footer>
  ...
</footer>

Herzliche Grüße

Matthias Scharwies