Blaue Markierung von Hyperlinks

Computer: Software & Programmierung HTML & CSS
#1

Hallo HTML-ExpertInnen,

in verschiedenen Browsern taucht bei der Unterstreichung von Textlinks bzw. als Umrandung von Bildlinks immer dieser hässliche Blauton auf. Immerhin weiss ich ja, wie ich die Farbe des Textes selber vom Hyperlinkblau zu einem mir beliebigen Farbton ändere. Wie aber kann ich mit der Unterstreichung (insbesondere im Firefox) und Bildumrandung (Internet Explorer und Firefox) fertig werden?
Da ich ein HTML-Stümper bin, müsstet Ihr mit Euren freundlichen und hilfreichen Tipps gaaaanz langsam sprechen:wink:

Vielen Dank,
Matti.

#2

Hallo Matti,

ob das Entfernen von Unterstreichungen bei Hyperlinks im Text so sinnvoll ist, weiß ich nicht. Denn die meisten Menschen klicken nur auf eine Art von Link, und der muss dann blau und unterstrichen sein. Sonst wissen einige Menschen, die nicht so fit im Internet sind, nicht, ob sie da klicken können oder nicht.

Aber nun zu deiner Frage:

Ich hoffe ja wohl, dass du mit HTML-Stümper nicht sagen willst, du definierst die Eigenschaft deiner Links mit HTML?! Dazu gibt es ja schließlich CSS.

CSS-Eigenschaft:
text-decoration

CSS-Attribute:
underline (unterstrichen)
overline (überstrichen)
line-through (durchgestrichen)
blink (nicht zu empfehlen)
none (keine Text-Dekoration)

In deinem Fall ist also folgendes zu verwenden:

a:link {
text-decoration: none;
}

Statt der Pseudo-Klasse :link kannst du natürlich auch noch :focus (fokussiert), :visited (besucht), :hover (wird gerade mit der Maus berührt) und :active (wird gerade geklickt) benutzen.

Du solltest folgendes auf keinen Fall machen. Damit wir der Quelltext unnötig aufgebläht.

LINK

Wenn du dich jetzt fragst, warum ich dir kein HTML-Attribut genannt habe:

HTML ist nicht zum formatieren und stylen deiner Site gedacht! Es hat weder was mit programmieren, noch mit Design oder Layout zu tun. HTML ist eine Auszeichnungssprache. Man zeichnet Elemente seines Dokumentes aus, um diese dann per CSS entsprechend formatieren zu können oder um deren Werte per PHP weiterzuverwenden.

Also wenn du bisher alle Eigenschaften deiner HTML-Tags mit veralteten Attributen und font-tags definiert hast, rate ich dir dringend davon ab, das auch nur noch eine weitere Codezeile zu machen.

Auf http://de.selfhtml.org/ gibt es genug Anleitungen um HTML und CSS SINNVOLL zu verwenden.

Ich hoffe, du kannst anhand meines Beispiels die richtige und falsche Verwendung von CSS erkennen. CSS wurde auch dazu entwickelt, eine CSS-Regel für mehrere Elemente und Dokumente zu erstellen.

MfG, Florian J.

#3

Du solltest folgendes auf keinen Fall machen. Damit wir der
Quelltext unnötig aufgebläht.

LINK

Das ist aber genau das, was sofort zum Ziel führt, allerdings eben nur für eben diesen Link.
Für eine generelle Definition kannst du CSS-Definitionen im Header einbinden:

<!–
a { text-decoration: none; }
…
–>

…

Mit Pseudoklassen lassen sich bestimmte Zustände des Links gesondert formatieren, beispielsweise:

a:hover { text-decoration: underline; }

Mit dieser Formatierung wird der Text unterstrichen, wenn du mit der Maus darüberfährst.

Grüße Marco

1 Like
#4

Moin,

Auf http://de.selfhtml.org/ gibt es genug Anleitungen um HTML
und CSS SINNVOLL zu verwenden.

und auf http://fwpf-webdesign.de/einfuehrung wird das noch ein bisschen besser erklärt. Viele Webmaster haben HTML bis heute noch nicht verstanden, ist es doch nur dazu da, die logische Struktur zu definieren und es hat nichts mit dem Aussehen zu tun.

Liebe Grüße,
-Efchen

#5

Tach,

Du solltest folgendes auf keinen Fall machen. Damit wir der
Quelltext unnötig aufgebläht.

LINK

Das ist aber genau das, was sofort zum Ziel führt, allerdings
eben nur für eben diesen Link.

Das geht auch anders. Da man Inhalt und Layout immer strikt voneinander trennen soll (dan wir die Wartung der gesamten Site einfacher), sollte man auch auf Inline-Styles verzichten.
Will man nur einen einzigen Link formatieren, dann gibt man ihm eine dokumentenweit eindeutige ID. Will man nur manche Elemente, aber eben mehrere gemeinsam formatiern, gibt man ihnen eine Klasse.

Für eine generelle Definition kannst du CSS-Definitionen im
Header einbinden:

Auch das wäre nicht im Sinne der Trennung von Inhalt und Layout, dann gelten die Einstellungen nämlich nur für das aktuelle Dokument. Ein externes Stylesheet kann aber in allen Dateien eingebunden werden und somit die Layout- und Designinformationen für ALLE Seiten enthalten. Damit ist auch das komplette Layout sofort ausgetauscht, indem man nur das Sylesheet wechselt. Das ist ja die Stärke von CSS. Dann muss man aber auf Angaben im Header und in Inline-Styles verzichten.

Sehr schön kann man das anhand des http://www.csszengarden.com/ erkennen, wie einfach alles wird, wenn man Inhalt und Layout strikt voneinander trennt!

Liebe Grüße,
-Efchen

#6

Tach,
Sehr schön kann man das anhand des
http://www.csszengarden.com/ erkennen, wie einfach alles wird,
wenn man Inhalt und Layout strikt voneinander trennt!

Wie oft muss man Internetseiten gestalten, die in mehreren Layouts erscheinen müssen?
Im Sinne dieser Ideologie mag das „korrekter“ sein, viele Leute wollen aber einfach pragmatisch ans Ziel kommen.

Grüße Marco

#7

Wie oft muss man Internetseiten gestalten, die in mehreren
Layouts erscheinen müssen?
Im Sinne dieser Ideologie mag das „korrekter“ sein, viele
Leute wollen aber einfach pragmatisch ans Ziel kommen.

Vielleicht will man das Layout ja auch irgendwann mal ändern. Wenn Du nicht darauf hören willst, wie es teschnisch korrekt zu lösen ist, dann mach es selber!

#8

Moin,

Wie oft muss man Internetseiten gestalten, die in mehreren
Layouts erscheinen müssen?

Quasi immer. Denn jeder Kunde hat sich nach ein paar Jahren an seinem Design satt gesehen und möchte gernen ein Redesign.

Wenn der Webmaster ihm nun einen schweineteuren Redesign verkauft, weil er seinen Code nicht anständig geschrieben hat, und für einen Redesign tatsächlich mehr Aufwand abrechnet, als den Austausch des Stylesheets, dann ist das Leutverarscherei.

Im Sinne dieser Ideologie mag das „korrekter“ sein, viele
Leute wollen aber einfach pragmatisch ans Ziel kommen.

Die Kunden wollen aber vor allem nicht für Unfähigkeit der Webmaster zur Kasse gebeten werden.

Wenn man in der Werkstatt einen Kratzer im Lack ausbessern lassen will und man hört, dass das tausende Euro kostet, weil dieses, jenes, und auch noch die gesamte Parte ausgebaut und neu lackiert werden muss, dann fühlt man sichwohl auch jedes Mal veräppelt.

Das hat weniger mit Ideologie zu tun, als vielmehr mit sauberem und professionellem Arbeiten.

Liebe Grüße,
-Efchen

#9

Wie oft muss man Internetseiten gestalten, die in mehreren
Layouts erscheinen müssen?

Quasi immer. Denn jeder Kunde hat sich nach ein paar Jahren an
seinem Design satt gesehen und möchte gernen ein Redesign.

Ich gehe nicht davon aus, dass ein professioneller Webdesigner in einem Forum fragt, wie man die blaue Markierung um Links entfernt.
Natürlich müssen professionelle Webdesigner nicht nur eine Seite erstellen, sondern möglichst noch W3C-konform arbeiten, sowohl bei HTML als auch bei CSS, und dabei auch noch auf die „Inhalt-von-Layout-trennen“-Ideologie achten.
Für private Zwecke ist es meiner Meinung nach wichtig, dass etwas funktioniert, egal wie. Vor allem, wenn man nicht irgendwann wirklich professionell werden will, sondern einfach eine Webpräsenz haben möchte. Und die CSS-Definitionen direkt in den Head-Tag zu schreiben ist immer noch sauberer, als einen WYSIWYG-Editor zu verwenden, denn die generieren meiner Erfahrung nach grausamen Code.

Grüße Marco

#10

Ich gehe nicht davon aus, dass ein professioneller Webdesigner
in einem Forum fragt, wie man die blaue Markierung um Links
entfernt.

Das ist für nunsere Diskussion dich irrelevant.

Natürlich müssen professionelle Webdesigner nicht nur eine
Seite erstellen, sondern möglichst noch W3C-konform arbeiten,
sowohl bei HTML als auch bei CSS, und dabei auch noch auf die
„Inhalt-von-Layout-trennen“-Ideologie achten.

Das selbe gilt für alle anderen Ersteller von Websites auch, denn alle verfolgen das selbe Ziel: Meine Website soll von möglichst vielen Menschen benutzt werden. Die Grundidee des WWW erlegt Dir noch etwas auf: Die Site muss von jedem Menschen gleich nutzbar sein, egal mit welcher Soft-, Hardware oder welchen Einstellungen oder Behinderungen.

Für private Zwecke ist es meiner Meinung nach wichtig, dass
etwas funktioniert, egal wie.

Wenn Du damit meinst, private Seiten, die nicht weltweit nutzbar sind, also mit einer Zugangsbeschränkung vershen, oder nur auf dem privaten PC laufend, dann hast Du recht.
Aber alles, was weltweit zugänglich ist, sollte auch uneingeschränkt nutzbar sein, sonst macht die Website ja gar keinen Sinn.

Außerdem musst Du beachten, wenn man HTML & CSS richtig anwendet, ist es viel einfacher, logischer und viel schneller erledigt, als wenn man mit alten Techniken aus den 1990er Jahren rum*bastelt*.

Vor allem, wenn man nicht
irgendwann wirklich professionell werden will, sondern einfach
eine Webpräsenz haben möchte.

Die Nutzer einer Website machen keinen Unterschied zwischen professionell oder nicht. Sie verlangen von ALLEN Websites, dass sie problemlos nutzbar sind.

Und die CSS-Definitionen direkt
in den Head-Tag zu schreiben ist immer noch sauberer, als
einen WYSIWYG-Editor zu verwenden, denn die generieren meiner
Erfahrung nach grausamen Code.

Das ist zwar richtig, hat aber eigentlich nichts miteinander zu tun.
Es ist auch für den Webmaster einfacher, ein externes Stylesheet zu verwenden. Sonst müsste er alle Layoutangaben für jede Seite immer wieder neu in den Header schreiben, anstatt nur einmal in ein Stylesheet.

Wenn man richtig arbeitet, wird es nur einfacher.

#11

Moin,

Die Nutzer einer Website machen keinen Unterschied zwischen
professionell oder nicht. Sie verlangen von ALLEN Websites,
dass sie problemlos nutzbar sind.

Das ist alleinig ausschlaggebend. Und eine Website muss nicht problematisch sein, nur weil sie nicht basierend auf der strikten „Inhalt-von-Layout-trennen“-Ideologie erstellt wurde.
Den normalen Nutzer interessieren weder Webideologien noch W3C-Standards. Funktionieren muss es.

Grüße Marco

#12

Moin,

Die Nutzer einer Website machen keinen Unterschied zwischen
professionell oder nicht. Sie verlangen von ALLEN Websites,
dass sie problemlos nutzbar sind.

Das ist alleinig ausschlaggebend.

Klar, es dreht sich alles um die Nutzer. Und daraus resultieren dann automatisch 100%ige Nutzbarkeit und Barrierefreiheit, was aus der richtigen Anwendung von HTML & CSS hervorgeht und nur daher.

Und eine Website muss nicht
problematisch sein, nur weil sie nicht basierend auf der
strikten „Inhalt-von-Layout-trennen“-Ideologie erstellt wurde.

Nein, das nicht, aber der Entwicklungs- und Wartungsaufwand einer nicht getrennten Site ist für den Entwickler schon so unglaublich hoch, dass es gar keinen Sinn macht, das nicht zu trennen.

Den normalen Nutzer interessieren weder Webideologien noch
W3C-Standards. Funktionieren muss es.

Das tut es aber eben nur, wenn man sich als Webmaster an die Ideologien und W3C-Standards hält.

#13

Nein, das nicht, aber der Entwicklungs- und Wartungsaufwand
einer nicht getrennten Site ist für den Entwickler schon so
unglaublich hoch, dass es gar keinen Sinn macht, das nicht zu
trennen.

Das kommt darauf an, wie komplex die Seite ist.

Den normalen Nutzer interessieren weder Webideologien noch
W3C-Standards. Funktionieren muss es.

Das tut es aber eben nur, wenn man sich als Webmaster an die
Ideologien und W3C-Standards hält.

Jedenfalls im groben. Nur, weil eine Seite nicht W3C-HTML valide ist, heißt das nicht, dass sie nicht funktioniert oder nur eingeschränkt nutzbar ist.

Grüße Marco

#14

Kleines Beispiel:
http://wer-weiss-was.de
http://validator.w3.org/check?uri=http%3A%2F%2Fwer-w…

#15

naja, ich hatte ja am Anfang zugegeben, ein HTML-Stümper zu sein, der nur die kleine Homepage seiner Ehefrau bastelt. Und von daher nehme ich gerne die Möglichkeit, die Dekoration auszuschalten.
By the way: wie krige ich das gleiche Resultat für Bilder hin (auf „text.Decoration none“ reagiert das Bildli nicht:wink:

Vielen Dank auf jeden Fall,
Matti.

#16

Nein, das nicht, aber der Entwicklungs- und Wartungsaufwand
einer nicht getrennten Site ist für den Entwickler schon so
unglaublich hoch, dass es gar keinen Sinn macht, das nicht zu
trennen.

Das kommt darauf an, wie komplex die Seite ist.

Wenn man von durchschnittlichen Websites ausgeht, die auf allen Seiten das gleiche Layout/Design verwenden und mehr als 10 Seiten haben, dann lohnt sich die Trennung schon.

Den normalen Nutzer interessieren weder Webideologien noch
W3C-Standards. Funktionieren muss es.

Das tut es aber eben nur, wenn man sich als Webmaster an die
Ideologien und W3C-Standards hält.

Jedenfalls im groben.

Aber wer will denn grob zu seinen Besuchern sein?

Nur, weil eine Seite nicht W3C-HTML
valide ist, heißt das nicht, dass sie nicht funktioniert oder
nur eingeschränkt nutzbar ist.

Aber davon muss man ausgehen. Denn wenn Fehler im Code sind, woher sollen die Clients dann wissen, wie sie mit den Fehlern umgehen sollen?

Und „Bei mir gehts, bei meinen Freunden auch, also gehts auch bei allen anderen. Wenn nicht, haben die Pech gehabt“ ist keine Einstellung fürs WWW.

Aber weil Du Validität sagst, ich rede auch von sinnvoller Semantik. Die wird nämlich gerne vergessen. Auch die sorgt dafür, ob eine Site funktioniert oder nicht. Es ist nämlich nicht alles visuell im WWW…

#17

Und?

Nur, weil es bei Dir trotzdem funktioniert, kannst Du damit nicht beweisen, dass es IMMER funktioniert. Aber das sollte bei einer Website so sein. Und das geht nur bei fehlerfreien Seiten (+ Semantik).

Ist das auch so ne Geiz-ist-Geil-Mentalität? Schlechtes Arbeiten ist geil? Weniger ist mehr? Bisschen basteln, wenns bei mir funktioniert, gehts bei allen?

Das lernt man schon in der Grundschule, dass sauberes Arbeiten die Basis für alles ist.

#18

Du meinst, Du willst den blauen Rahmen um Bilder abschalten, die als Link ausgezeichnet sind?

Mit der CSS-Eigenschaft „border“.

#19

Moin,

Ist das auch so ne Geiz-ist-Geil-Mentalität? Schlechtes
Arbeiten ist geil? Weniger ist mehr? Bisschen basteln, wenns
bei mir funktioniert, gehts bei allen?

Weniger ist mehr. Je nachdem wie wichtig mir ein Webauftritt ist, werde ich arbeit hinein investieren. Das ist nun einmal so, wir leben in einem Kapitalismus. Kein User sieht sich einen Quelltext an. Ob sinnvolle Semantik oder nicht, was man sieht ist alles was zählt. Professionell ist das nicht, aber zielorientiert.

Keinen Mensch interessiert, ob eine Seite HTMl valide ist. wer-weiss-was ist es nicht, und trotzdem funktioniert es. Ich denke eine Seite wird auch niemals perfekt sein, es gibt immer „bessere“ Lösungen. Aber der Nutzen muss dem Aufwand entsprechen.

#20

Weniger ist mehr. Je nachdem wie wichtig mir ein Webauftritt
ist, werde ich arbeit hinein investieren.

Ja, deswegen käme ich auch nie auf die Idee, Seiten für einen bestimmten Browser zu optimieren oder absichtlich Tabellenlayouts einzubauen, die mir und anderen das Leben schwer machen oder so schlechten Code zu schreiben, dass ich dadurch Mehrarbeit habe.

Kein User sieht sich
einen Quelltext an.

Nein, aber das Programm, das sie nutzen, der Browser.

Ob sinnvolle Semantik oder nicht, was man
sieht ist alles was zählt.

Das erzählst Du mal einem Blinden oder einer Suchmaschine.

Professionell ist das nicht, aber
zielorientiert.

Nein. Auch nicht. Eher diskriminierend und rücksichtslos. Oder zumindest egoistisch.

Keinen Mensch interessiert, ob eine Seite HTMl valide ist.

Doch. Sie drücken es nur anders aus. Sie wollen optimale Nutzbarkeit. Die gibts aber nur garantiert bei (u.a.) Validität.

wer-weiss-was ist es nicht, und trotzdem funktioniert es.

Bei Dir. Aber sicher nicht bei allen. Zum Beispiel nicht in Browsern, die keine Frames können, Mosaic z.B.
Auch in meinem Netbook „funktioniert“ es nicht anständig, weil die Frames so viel Platz wegnehmen, dass ich kaum Platz für den eigentlichen Text habe, weil der Bildschirm nunmal nur 600px hoch ist.

Ich
denke eine Seite wird auch niemals perfekt sein, es gibt immer
„bessere“ Lösungen. Aber der Nutzen muss dem Aufwand
entsprechen.

Eben. Deswegen macht man ja auch keine Tabellenlayouts oder andere „Optimierungen“. Man schreibt einfach validen und semantisch sinnvollen Code und trennt Inhalt von Layout. Das ist der geringste Arbeitsaufwand mit dem höchsten Nutzen.