✔ CSS bei Links und Ankerpunkten

N

Norman_79

Mitglied
Hallo liebe Gemeinde,

wie kann ich am besten die grafischen Optionen bei Links und Ankerpunkten trennen?

Ich habe die Links per CSS formatiert aber leider werden jetzt auch alle Ankerpunkte mit angesprochen.

Könnt Ihr mir sagen wie ich das verhindern kann?


Danke
Norman
 
Hi,

moderne Browser interpretieren den Attribut-Selektor:
HTML: 
<a name="Ankername">Anker</a>
CSS: 
a { /* Formatierung für Hyperlinks */ } 
a[name] { /* Formatierung für Anker */ }

Denkbar wäre zur Fallunterscheidung aber auch der Selektor für Nachfahren, wenn sich die Anker in einem bestimmten Elementtyp befinden:
HTML: 
<h2><a name="Ankername">Anker</a></h2>
CSS: 
a { /* Formatierung für Hyperlinks */ } 
h2 a { /* Formatierung für Anker */ }

Und zu guter letzt steht dir hier der gute alte Klassen-Selektor zur Verfügung:
HTML: 
<a name="Ankername" class="anchor">Anker</a>
CSS: 
a { /* Formatierung für Hyperlinks */ } 
a.anchor { /* Formatierung für Anker */ }

mfg Maik
 
Hallo,

du kannst dir die separate Formatierung der dokument-internen Ankerpunkte auch sparen, wenn du als Sprungziel ein Element auswählst, das im Dokument ohnehin existiert und das ein entsprechendes ID-Attribut besitzt. Bei mir funktioniert das auch im IE6.

Beispielsweise so:
HTML: 
<dl>
    <dt>Inhalt:</dt>
    <dd><a href="#anker1">inhalt1</a></dd>
    <dd><a href="#anker2">inhalt2</a></dd>
</dl>

<h2 id="anker1">Überschrift1</h2>
<p>text1</p>
<h2 id="anker2">Überschrift2</h2>
<p>text2</p>
 
hela hat gesagt.:
du kannst dir die separate Formatierung der dokument-internen Ankerpunkte auch sparen, wenn du als Sprungziel ein Element auswählst, das im Dokument ohnehin existiert und das ein entsprechendes ID-Attribut besitzt. Bei mir funktioniert das auch im IE6.
Zum Vergrößern anklicken....
Und wenn im Markup der Projektseiten die Ankerpunkte schon existieren? ;)

Bis auf den Attribut-Selektor funktionieren alle weiteren CSS-Selektoren im IE6 ebenfalls :)

mfg Maik
 
Hallo Maik und auch Hela,

vielen Dank für eure Lösungsvorschläge.

Ich kann es nur darüber lösen: a[Name] was auch funktioniert hat wenn man "Name" groß schreibt ;)



Vielen Dank.
 
Hallo Maik,

bei mir ging es nur mit der Großschreibung. Bei kleinem Buchstaben hat sich nichts getan?!

Muss ich im doctype was ändern oder fehlt was auf der Seite?


Mfg
 
Warum sollte es mit der regulären Kleinschreibung der Attributnamen nicht funktionieren?

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<meta name="date" content="2009-10-26">
<title>tutorials.de | demo_Norman_79</title>

<style type="text/css">
a { color:red; }
a[name] { color:green; }
</style>
<!-- Für IE6, der von Hause aus den Attribut-Selektor nicht unterstützt -->
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

</head>
<body>

<p><a name="anker">Anker</a></p>
<p><a href="#">Link</a></p>

</body>
</html>

Mit dem Doctype dürfte dies nichts zu tun haben. Und was da auf deiner Seite möglicherweise fehlt bzw. falsch läuft, kann ich dir im Blindflug nicht sagen.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück