Grafik als Verweis

[Ich]

Hallo,

ich bin jetzt dabei wieder eine Seite zu schreiben.

Ich habe eine Grafik als Verweis eingebunden, die den Zweck hat als Logo wieder auf die Startseite zu verweisen.

Mein "Problem" ist, dass diese Grafik, wenn ich mit der Maus darüber fahre einen schwarzen Balken am unteren Rand der Grafik hat, den ich nicht weg bekomme.

Der Code sieht so aus:
<div id="logo"><a href="/"><img src="logo.png" width="73" height="62" alt="Logo"></a></div>

Das CSS dazu enthält bisher nichts von Bedeutung dazu, ausser dass ich bei img{border:none} geschrieben habe.

Der Verweis ist dann auch per CSS deklariert per Pseudoklasse für das ganze Dokument, bei active und link mit text-decoration:underline, abweichend davon wollte ich schreiben, dass es bei diesem besonderen Link nicht so sein soll, aber auch das klappt nicht, wenn ich zentral im HTML mit style text-decoration:none zuweise.

Ich weiß zudem nicht, ob man die Pseudoklassen für a auch einfach mit den anderen Selektoren verbinden kann? Also gibt es die Möglichkeit der Angabe:
div#Logo a:link{text-decoration:none}? Das habe ich jedoch auch bereits versucht und trotzdem zeigt der Mauszeiger beim über die Grafik fahren diesen Balken an.

Ist das nicht zu unterdrücken? Ich denke eigentlich, dass ich das bestimmt schon mal ohne gesehen habe.

Gruß, Ich

[Ich]

Jetzt muss ich nochmal dazu sagen, dass ich mich hier verschrieben habe, das div ist mit #logo (mit kleinem "l") als Selektor in der CSS-Datei drin, nicht wie in meinem Posting mit "L".

[stewe]

Mein "Problem" ist, dass diese Grafik, wenn ich mit der Maus darüber fahre einen schwarzen Balken am unteren Rand der Grafik hat, den ich nicht weg bekomme.

Kann man dies irgendwo sehn?

Ich weiß zudem nicht, ob man die Pseudoklassen für a auch einfach mit den anderen Selektoren verbinden kann? Also gibt es die Möglichkeit der Angabe:
div#Logo a:link{text-decoration:none}?

ja die gibt es. was ich jetzt nicht weis ist, ob dein css so valide ist. Eigentlich schreibt man dies als
#Logo a:link{text-decoration:none;}
das "div" wird nicht benötigt

Ist das nicht zu unterdrücken? Ich denke eigentlich, dass ich das bestimmt schon mal ohne gesehen habe.

klar, das geht!

Hast du ein Plugin wie zB Firebug für Firefox, mit dem du dir im Browser alle Eigenschaften etc anzeigen lassen kannst, die für ein Element gelten - und auch was allenfalls von Angaben in anderen Bereichen überschrieben wird? Damit wirst du den Hacken wohl schnell finden.

gruss

[stewe]

»»Hacken

*urk* und *vor meinem Deutschlehrer versteck*

[Ich]

Lach, nein, Firebug habe ich noch nicht, wird aber installiert, also die verschiedenen Möglichkeiten kenne ich mittlerweile auch ganz gut, aber wenn man das so schreiben "darf", müsste es ja schon gehen (auch mit dem div davor oder gibt es da eine Regelung, die mir entgangen ist? Oder ist es deswegen Pseudo<b>klasse</b>, so dass man es daher nicht mit Element davor schreibt. Online kann man das ganze noch nicht sehen :(.

[stewe]

was mir jetzt gerade aufgefallen ist: warum "a:link"? lass das :link weg, denn so greift die definition natürlich nicht für hover/active/visited...

[Felix Riesterer]

Lieber stewe,

div#Logo a:link{text-decoration:none}?
ja die gibt es. was ich jetzt nicht weis ist, ob dein css so valide ist.

das CSS ist so durchaus valide. Ob es sinnvoll oder unnötig komplex ist, steht auf einem anderen Blatt.

Eigentlich schreibt man dies als
#Logo a:link{text-decoration:none;}
das "div" wird nicht benötigt

Das ist dann richtig, wenn es in anderen Seiten kein anderes Element mit dieser ID gibt, bei denen eine andere Darstellung gewünscht wird.

Der Selektor div#Logo hat eine höhere Spezifität, die unter Umständen Deine CSS-Regel, welche lediglich #Logo nennt, überschreiben könnte. Damit hat das also weniger mit Validität, als vielmehr mit Spezifität zu tun. Ob diese hier allerdings benötigt wird, bezweifelst Du zu Recht.

Liebe Grüße,

Felix Riesterer.

[stewe]

Salut Felix!

das CSS ist so durchaus valide. Ob es sinnvoll oder unnötig komplex ist, steht auf einem anderen Blatt.

Gut zu wissen!

Das ist dann richtig, wenn es in anderen Seiten kein anderes Element mit dieser ID gibt, bei denen eine andere Darstellung gewünscht wird.

oha! Verstehe ich dies richtig, dass ich - wenn ich die gleiche Id auf verschiedenen Seiten für andere Elemente verwende - diese dann separat ansprechen kann auf diese Weise?
Wie sieht es aus innerhalb der gleichen Seite, wenn ich jetzt auf die seltsame Idee käme, die gleiche Id für verschiedene Elemente zu verwenden und diese dann so ansprechen möchte? Ist das Verwenden mehrerer gleicher Id's in einer Seite überhaupt valide? http://de.selfhtml.org/html/attribute/allgemeine.htm@title=Hier spricht man nur von "sollte".

Der Selektor div#Logo hat eine höhere Spezifität, die unter Umständen Deine CSS-Regel, welche lediglich #Logo nennt, überschreiben könnte.

Interessant!

Vielen Dank für Infos!

Gruss

stewe

[ChrisB]

Hi,

Wie sieht es aus innerhalb der gleichen Seite, wenn ich jetzt auf die seltsame Idee käme, die gleiche Id für verschiedene Elemente zu verwenden und diese dann so ansprechen möchte?

Irrelevant, weil -

Ist das Verwenden mehrerer gleicher Id's in einer Seite überhaupt valide?

Nein.

http://de.selfhtml.org/html/attribute/allgemeine.htm@title=Hier spricht man nur von "sollte".

Hier (HTML 4.01, 7.5.2 Element identifiers: the id and class attributes) *) spricht man „must be unique in a document“.

MfG ChrisB

[stewe]

Hier (HTML 4.01, 7.5.2 Element identifiers: the id and class attributes) *) spricht man „must be unique in a document“.

Wunderbar, dankeschön, dann ist dies jetzt eindeutig geklärt für mich :)

Btw. Darf man mal fragen, wie gross deine Linksammlung ist? Was du da immer und überall innert Kürze aus den Taschen zauberst... Beindruckend und sehr hilfreich!

gruss

stewe

[Felix Riesterer]

Lieber stewe,

Verstehe ich dies richtig, dass ich - wenn ich die gleiche Id auf verschiedenen Seiten für andere Elemente verwende - diese dann separat ansprechen kann auf diese Weise?

absolut richtig.

Wie sieht es aus innerhalb der gleichen Seite

Absolut falsch.

Liebe Grüße,

Felix Riesterer.

[Felix Riesterer]

Liebe(r) Ich,

<div id="logo"><a href="/"><img src="logo.png" width="73" height="62" alt="Logo"></a></div>

ich hoffe mal, dass Dein Code eine starke Verkürzung sein soll, denn warum Du hier ein <div> benutzt, anstatt einen anständigen Textabsatz, will sich mit nicht erschließen. Was spricht eigentlich gegen folgenden Code?

<p id="logo"><a href="/"><img src="logo.png" alt="Logo" /></a></p>

So, nun zu Deinem Darstellungsproblem. Dein Bild wird "unterstrichen", wenn man es hovert. Das ist eine Eigenschaft, die mit Links zu tun hat. In Deinem momentanen Fall gilt wohl das hier:

a:hover { text-decoration: underline; }

Da Du dieses bei Deinem Logo-Link nicht haben willst, brauchst Du dieses:

#logo a:link { text-decoration: none; }

Das funzt für Deinen Code (wenn Du ein ehrliches <p> anstatt eines verlogenen <div> benutzt), da grundsätzlich die Unterstreichung in Links innerhalb des #logo-Elements deaktiviert wurde.

Sollte ich mich irren und die Ursache eben keine Unterstreichung, sondern ein Rahmen (unten) sein, dann musst Du die CSS-Regel entsprechend anpassen und das text-decoration durch eine border-Regel ersetzen.

Für zukünftige Anfragen hier empfehle ich Dir mehr Sorgfalt bei der Wahl Deines Themas (und des Themenbereichs). Ich habe beides für Dich in meiner Antwort angepasst.

Liebe Grüße,

Felix Riesterer.

[ChrisB]

Hi,

<div id="logo"><a href="/"><img src="logo.png" width="73" height="62" alt="Logo"></a></div>

ich hoffe mal, dass Dein Code eine starke Verkürzung sein soll, denn warum Du hier ein <div> benutzt, anstatt einen anständigen Textabsatz, will sich mit nicht erschließen. Was spricht eigentlich gegen folgenden Code?

<p id="logo"><a href="/"><img src="logo.png" alt="Logo" /></a></p>

Was spricht denn dafür? Seid wann ist ein grafisches Logo Fliesstext?

MfG ChrisB