Frage stellenHallo,
folgendes Problem:
Ich habe eine Subnavigation mit Ankern fix auf der Seite positioniert.
Jetzt möchte ich diese Links per CSS als aktiv markieren wenn zum gewünschten Punkt gesprungen wurde.
Hier das konkrete Beispiel, auf der rechten Seite befindet sich diese Unternavigation mit den Links
http://www.badestrand-kosmetik.de/2010_04_09_Umsetzung/produkte_gesicht.html
Grüße
netzhautbrand
Community rund um Cascading Style Sheets, Tutorials & KnowHow für Webmaster
Ankerlinks als aktiv hervorheben
6 Beiträge • Seite 1 von 1
Ankerlinks als aktiv hervorheben
von netzhautbrand » 10.04.2010, 10:19
- netzhautbrand
- neu hier
- Beiträge: 2
- Registriert: 10.04.2010, 10:14
Re: Ankerlinks als aktiv hervorheben
von Azra » 14.04.2010, 08:06
Die Seite ist nicht valide 
Du hast den Sublinks im <a href - nur "produkte.html" vergeben, die Seite gibt es nicht.
Ersetzte dein <!DOCTYPE - durch diese Zeile:
Man muss diverse "tags" nichtmehr schliessen, z.B. <img src="bla.jpg" /> gibt es nichtmehr.
Entferne also alle Schrägstriche am Ende der tags bei META, <br> oder <img ...
Du hast den Sublinks im <a href - nur "produkte.html" vergeben, die Seite gibt es nicht.
Ersetzte dein <!DOCTYPE - durch diese Zeile:
- Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Man muss diverse "tags" nichtmehr schliessen, z.B. <img src="bla.jpg" /> gibt es nichtmehr.
Entferne also alle Schrägstriche am Ende der tags bei META, <br> oder <img ...
“HTML is the language for describing the structure of Web pages.”
“CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts.”
Noch weitere Probleme? Kontakt über meine Webseite - simonduda.ch
“CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts.”
Noch weitere Probleme? Kontakt über meine Webseite - simonduda.ch
-
Azra - Stammuser
- Beiträge: 422
- Registriert: 04.02.2010, 08:36
- Wohnort: (Alten)bochum
Re: Ankerlinks als aktiv hervorheben
von mgutt » 14.04.2010, 11:42
Das kannst Du nur in Javascript realisieren. Ich würde es mit einem onclick-Event lösen, der die aufgerufene URL mit dem Anchor-Namen abgleicht.
- mgutt
- neu hier
- Beiträge: 4
- Registriert: 14.04.2010, 11:20
Re: Ankerlinks als aktiv hervorheben
von netzhautbrand » 17.04.2010, 17:48
Erst einmal vielen Dank für den Tipp,
Ich dachte mir fast schon, dass nur CSS nicht ausreichend sein wird.
Wie fange ich sowas am besten an? Ich habe leider keinerlei Javascript Erfahrung.
Ich habe schon danach gesucht, aber für mich nichts brauchbares gefunden, kennt jemand vielleicht ein Tutorial?
beste grüße
netzhautbrand
Ich dachte mir fast schon, dass nur CSS nicht ausreichend sein wird.
Wie fange ich sowas am besten an? Ich habe leider keinerlei Javascript Erfahrung.
Ich habe schon danach gesucht, aber für mich nichts brauchbares gefunden, kennt jemand vielleicht ein Tutorial?
beste grüße
netzhautbrand
- netzhautbrand
- neu hier
- Beiträge: 2
- Registriert: 10.04.2010, 10:14
Re: Ankerlinks als aktiv hervorheben
von djheke » 15.11.2010, 22:56
Hallöle alle miteinander,
ich bin neu hier und zufällig auf dieses Forum gestoßen.
Übrigens geht es Anker mit CSS zu markieren. Man braucht nur die richtige Idee und etwas Ausdauer.
mfg
djheke
ich bin neu hier und zufällig auf dieses Forum gestoßen.
Übrigens geht es Anker mit CSS zu markieren. Man braucht nur die richtige Idee und etwas Ausdauer.
mfg
djheke
-
djheke - ist häufig da
- Beiträge: 183
- Registriert: 15.11.2010, 22:45
Re: Ankerlinks als aktiv hervorheben
von djheke » 16.11.2010, 12:11
Ich bin es nochmal,
Hier mal den Stylesheet zum hervorheben von Ankern. Es gibt bestimmt noch bessere Lösungen, aber so auf die schnelle! Funktioniert aber. Wer will kann ja zum Testen Bilder einbinden.
Ich hoffe ich liege nicht ganz daneben.
mfg
djheke
Hier mal den Stylesheet zum hervorheben von Ankern. Es gibt bestimmt noch bessere Lösungen, aber so auf die schnelle! Funktioniert aber. Wer will kann ja zum Testen Bilder einbinden.
Ich hoffe ich liege nicht ganz daneben.
mfg
djheke
- Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="author" content="Autor Henry Fürstenau">
<title>Anker hervorheben</title>
<style type="text/css">
* {
border:none;
margin:0;
padding:0;
}
.container {
width:500px;
height:350px;
background-color:#0099dc;
text-align:left;
position:relative;
border:10px solid #ddd;
}
.anzeige {
position:relative;
top:0;
height:350px;
width:500px;
overflow:hidden;
}
.anzeige img , .auswahl a span img {
width:500px;
height:320px;
}
.auswahl {
position:absolute;
top:320px;
left:0px;
height:30px;
width:505px; /* spontane vergrösserung fur den IE6 */
}
.auswahl a {
position:relative;
margin: 0;
height:30px;
width:50px;
text-decoration:none;
text-align:center;
font-weight:bold;
line-height:30px;
color:#000;
float:left;
}
.auswahl a span {
display:none;
}
.auswahl a:hover span {
display:block;
}
.auswahl a span img {
position:absolute;
top:0px;
height:30px;
width:50px;
left:0;
}
.container #b11 span , #b12 span , #b13 span , #b14 span , #b15 span , #b16 span, #b17 span , #b18 span , #b19 span , #b20 span {
position:relative;
top:350px;
width:50px;
height:30px;
margin-top:-30px;
float:left;
background:#ffa;
}
.container p {
margin:0;
padding:0;
height:350px;
}
</style>
</head>
<body>
<div class="container">
<div class="anzeige">
<p id="b11"><span style="left:0px;"></span><img src="#" alt=""></p>
<p id="b12"><span style="left:50px"></span><img src="#" alt=""></p>
<p id="b13"><span style="left:100px"></span><img src="#" alt=""></p>
<p id="b14"><span style="left:150px"></span><img src="#" alt=""></p>
<p id="b15"><span style="left:200px"></span><img src="#" alt=""></p>
<p id="b16"><span style="left:250px"></span><img src="#" alt=""></p>
<p id="b17"><span style="left:300px"></span><img src="#" alt=""></p>
<p id="b18"><span style="left:350px"></span><img src="#" alt=""></p>
<p id="b19"><span style="left:400px"></span><img src="#" alt=""></p>
<p id="b20"><span style="left:450px"></span><img src="#" alt=""></p>
</div>
<div class="auswahl">
<a href="#b11">01<span><img src="#" alt=""></span></a>
<a href="#b12">02<span><img src="#" alt=""></span></a>
<a href="#b13">03<span><img src="#" alt=""></span></a>
<a href="#b14">04<span><img src="#" alt=""></span></a>
<a href="#b15">05<span><img src="#" alt=""></span></a>
<a href="#b16">06<span><img src="#" alt=""></span></a>
<a href="#b17">07<span><img src="#" alt=""></span></a>
<a href="#b18">08<span><img src="#" alt=""></span></a>
<a href="#b19">09<span><img src="#" alt=""></span></a>
<a href="#b20">10<span><img src="#" alt=""></span></a>
</div>
</div>
</body>
</html>
-
djheke - ist häufig da
- Beiträge: 183
- Registriert: 15.11.2010, 22:45
6 Beiträge • Seite 1 von 1
Moderatoren: Laus, Moderatoren
Ähnliche Beiträge zu "Ankerlinks als aktiv hervorheben"
- Feststehender Bereich unten deaktiviert Links
- CSS code für aktivierte Flash Menü
- a:active aktiviert lassen
Zurück zu: CSS für Fortgeschrittene
Wer ist online?
Mitglieder in diesem Forum: 0 Mitglieder und 3 Gäste