Link formatieren

[AirMax]

Liebe Self-HTMLer,

ich sitze schon 3 Stunden an demselben Problem & weiss nicht, wo ich den Fehler mache. Hier mal der Code:

  
<address class="light">Vorname Name<br />Berufsbezeichnung<br />Mailadresse  
  <h4 class="coloured">Land 1</h4>  
  Strasse Hausnummer<br />PLZ Ort<br />Telefonnummer  
  <h4 class="coloured">Land 2</h4>  
  Strasse Hausnummer<br />PLZ Ort<br />Telefonnummer  
  <a href="http://www.foo.bar" class="download">digitale Visitenkarte</a>  
</address>  

Dass CSS sieht so aus:

  
/* Klassen*/  
.light {  
	font-size: 0.75em;  
	line-height: 1.5em;  
	color: #b1b1b1;  
}  
  
.coloured {  
	font-size: 0.75em;  
	line-height: 1.5em;  
	color: #96c6e1;  
}  
  
.download {  
	font-size: 0.75em;  
	line-height: 1.5em;  
	color: #666666;  
	display: block;  
}  
  
/* ................... */  
  
address > h4.coloured {  
	font-size: 1em;  
}  
address > a.download {  
	font-size: 1em;  
	margin: 1.5em 0 0;  
}  
address > a.download:before {  
	content: url(foo.gif)" ";  
}  

Mein Problem besteht in der Vererbung der Eigenschaften aus der Klasse "light" auf die Klassen "coloured" und "download". Die Schriftgrösse habe ich korrigieren können. Komischerweise verrerbt sich die hellgraue Textfarbe aus der Klasse "light" von <address> auf das <a>, obwohl <a> die Klasse "download" zugewiesen bekommen hat. Alle Parameter aus der Klasse "download" werden korrekt auf <a> angewendet - nur die Textfarbe nicht.

Kann mir jemand von Euch auf die sprünge helfen?

Danke im Voraus
AirMax

[Gunnar Bittersmann]

@@AirMax:

nuqneH

ich sitze schon 3 Stunden an demselben Problem & weiss nicht, wo ich den Fehler mache.

Der Validator sagt’s dir.

Komischerweise verrerbt sich die hellgraue Textfarbe aus der Klasse "light" von <address> auf das <a>, obwohl <a> die Klasse "download" zugewiesen bekommen hat.

In welchem Browser sollte das der Fall sein? Online-Beispiel, bitte.

Wozu aber sollen die ganzen Klassen gut sein? Die Selektoren für Nachfahren bzw. Kinder kennst du? [CSS2 §5]

Und dass darstellungsbezogene Klassennamen (wie "light" und "coloured") unsinnig sind, sollte sich auch schon herumgesprochen haben.

Qapla'

[AirMax]

Hallo Gunnar

Der Validator sagt’s dir.

Das ist natürlich eine gute Idee. Habe auch gleich getestet und musste zu meiner Überraschung feststellen, dass <http://de.selfhtml.org/html/text/zitate_adressen.htm#adressen@title=Blockelemente in <address> nicht erlaubt sind>. Habe den Quelltext so angepasst:

  
<address class="light">Vorname Name<br />Berufsbezeichnung<br />Mailadresse</address>  
<h4 class="coloured">Land 1</h4>  
<address class="light">Strasse Hausnummer<br />PLZ Ort<br />Telefonnummer</address>  
<h4 class="coloured">Land 2</h4>  
<address class="light">Strasse Hausnummer<br />PLZ Ort<br />Telefonnummer</address>  
<a href="http://www.foo.bar" class="download">digitale Visitenkarte</a>  

Wozu aber sollen die ganzen Klassen gut sein? Die Selektoren für Nachfahren bzw. Kinder kennst du? [CSS2 §5]

Ja, kenne ich. Ich befürchte allerdings, dass der Aufwand unterm strich der gleiche ist: Ob ich im CSS EINE Klasse definiere und diese dann im HTML mehmals zuweise oder ob ich im HTML keine IDs / Klassen vergebe und mich dafür im CSS bei Nachfahren- / Kindselektoren verliere.

Und dass darstellungsbezogene Klassennamen (wie "light" und "coloured") unsinnig sind, sollte sich auch schon herumgesprochen haben.

Bin kein Spezi und habe diesbezüglich nichts mitbekommen. Kannst Du mir das erklären? Wie sehen denn dann die Alternativen aus?

Dank & Gruß
AirMax

[Der Martin]

Moin,

Und dass darstellungsbezogene Klassennamen (wie "light" und "coloured") unsinnig sind, sollte sich auch schon herumgesprochen haben.
Bin kein Spezi und habe diesbezüglich nichts mitbekommen. Kannst Du mir das erklären? Wie sehen denn dann die Alternativen aus?

Bezeichner sollten nicht danach gewählt werden, wie bestimmte Elemente *aussehen* sollen, sondern welche *Aussage* ihre Auszeichnung vermitteln soll. Denn Designvorgaben ändern sich von Zeit zu Zeit, und es irritiert später, wenn das Element mit der ID "topright-icon" plötzlich in der Fußzeile untergebracht werden soll.

Ebenso wäre der Bezeichner "rot-fett" für eine auffällig gestaltete Fehlermeldung ungünstig; besser wäre "fataler-fehler". Denn die Bedeutung eines Elements ändert sich im Gegensatz zu seinem Design meist nicht mehr.

Ciao,
 Martin

[AirMax]

Hallo Martin

Bezeichner sollten nicht danach gewählt werden, wie bestimmte Elemente *aussehen* sollen, sondern welche *Aussage* ihre Auszeichnung vermitteln soll. Denn Designvorgaben ändern sich von Zeit zu Zeit, und es irritiert später, wenn das Element mit der ID "topright-icon" plötzlich in der Fußzeile untergebracht werden soll.

Das leuchtet ein. Werde ich anpassen!

Danke & Gruß
AirMax

[Gunnar Bittersmann]

@@AirMax:

nuqneH

musste zu meiner Überraschung feststellen, dass <http://de.selfhtml.org/html/text/zitate_adressen.htm#adressen@title=Blockelemente in <address> nicht erlaubt sind>.

Noch mehr überraschen wird dich die Feststellung, dass das 'address'-Element vermutlich falsch ist. [HTML401 §7.5.6, HTML5 §4.4.10]

Eine sinnvolle Auszeichnung mit Mikroformat (hCard) könnte so aussehen:

<div class="vcard">  
  <span class="fn">Vorname Name</span>  
  <span class="role">Berufsbezeichnung</span>  
  <a class="email" href="mailto:[e-mail]">[e-mail]</a>  
  <div class="adr">  
    <h4 class="country-name">Land 1</h4>  
    <span class="street-address">Straße Hausnummer</span>  
    <span class="postal-code">PLZ</span> <span class="locality">Ort</span>  
    <span class="tel"><span class="type">work</span> Telefonnummer</span>  
  </div>  
  <div class="adr">  
    <h4 class="country-name">Land 2</h4>  
    <span class="street-address">Straße Hausnummer</span>  
    <span class="postal-code">PLZ</span> <span class="locality">Ort</span>  
    <span class="tel"><span class="type">work</span> Telefonnummer</span>  
  </div>  
  <a href="http://example.net/vcard.vcf" class="download">digitale Visitenkarte</a>  
</div>

(wenn den 'h4' sinnvoll ist). Die Elemente kann man per Attributselektor stylen; geeignetes 'display: block' erspart 'br'-Elemente.

Qapla'

[AirMax]

Hallo Gunnar,

danke für Deinen Beispielcode. Ich habe mich mal ein bißchen in die hCard-Materie eingelesen. Ich weiß jetzt zwar, wie sich hCard am vCard-Standard orientiert, aber ich habe noch nicht ganz den Sinn von hCards verstanden. Geht es nur um eine standardisierte Implementierung von Kontaktdaten in HTML oder steckt da noch mehr dahinter. Gibt es ein Beispiel aus der Praxis, wo sowas von Bedeutung wird?

Gruß
AirMax

[Gunnar Bittersmann]

@@AirMax:

nuqneH

Ich habe mich mal ein bißchen in die hCard-Materie eingelesen. Ich weiß jetzt zwar, wie sich hCard am vCard-Standard orientiert, aber ich habe noch nicht ganz den Sinn von hCards verstanden.

http://forum.de.selfhtml.org/archiv/2010/1/t194561/#m1301622 ff.

Und nun kannst du dich auch in RDFa einlesen.

Qapla'

[AirMax]

Hallo Gunnar,

ich muss sagen, dass Semantik / Barrierefreiheit im Internet ein wichtiges Thema für mich ist und deshalb mit Interesse Deinen link verfolgt habe. So wie es scheint, ist dieses Thema sehr heterogen: Dublin Core-Metatags, link-Elemente, ... Ich habe deswegen ein paar Fragen:

• Hast du damit Erfahrungen? Wenn ja, wie sind diese?
• Welche "Standards" sind am gebräuchlichsten?
• Kannst du plung-ins / Software empfehlen, die logische Zusammenhänge auf einer Internetseite visualisieren kann (in Form von Grafiken und nicht nur in Form von optionalen Menüleisten)
• Wie sieht das Thema in Bezug auf (X)HTML5 aus?

Gruss
AirMax

[Gunnar Bittersmann]

@@AirMax:

nuqneH

• Hast du damit Erfahrungen? Wenn ja, wie sind diese?

Ja. Was geanu willst du wissen?

• Welche "Standards" sind am gebräuchlichsten?

Meinst du sowas wie RDFa und microformats oder sowas wie Dublin Core und vCard? Was geanu willst du wissen?

• Kannst du plung-ins / Software empfehlen, die logische Zusammenhänge auf einer Internetseite visualisieren kann (in Form von Grafiken und nicht nur in Form von optionalen Menüleisten)

Nö.

• Wie sieht das Thema in Bezug auf (X)HTML5 aus?

Hixie versucht wieder einmal, ein eigenes Süppchen zu kochen. Künftige UAs (Plugins) werden RDFa, microformats und das HTML5-Zeugs verstehen müssen.

Qapla'

[AirMax]

Hallo Gunnar,

ich bin's nochmal. Ich habe mich heute intensiv mit den Microformaten beschäftigt. Ich habe auch mal bei RDFa geschaut und zwischen den beiden Varianten abgewogen. Ich habe mich für die Microformate entschieden, weil sie sowohl für HTML als auch für XHTML geeignet sind. RDFa-Flavours sind ja nur für XHTML 1.1 (was ich nicht benutze!). Und in Anbetracht der Einstellung der Weiterentwicklung XHTML und dem Fokus auf den neuen HTML5-Standard sind Microformate in meinen Augen die langerfristig besseren Alternativen.

Ich bin gerade dabei eine hCard zu erstellen. Hättest Du mal bock Dir die Sache anzuschauen? Wenn ja, würde ich mich wieder bei Dir melden, wenn ich soweit bin.

Gruß in die Heimat
AirMax