| Autor |
Nachricht |
sir_scale_a_lot
Threadersteller
Dabei seit: 09.10.2010
Ort: Dropbox
Alter: 36
Geschlecht: 
|
Verfasst Fr 16.12.2011 17:50
Titel CSS aktive Navi funktioniert nur in Opera |
  |
|
Hallo,
ich wollte auf meiner Homepage den aktiven Link mit einem Unterstrich erkenntlich machen.
Habe im link eine class und id vergeben.
| Code: | | <a href="index.html" class="main" id="start_menu">Willkommen</a> |
Dazu habe ich in der CSS folgende Zeilen eingefügt:
| Code: | #start #start_menu {
border-bottom:2px dotted #999999;
} |
Wenn ich die Seite in Opera öffne, ist der aktive Link unterstrichen. So wie gewünscht. Öffne ich die Seite allerdings mit Chrome oder Firefox, sieht man nichts.
Gibt es für diese Browser evtl. einen extra Befehl (wie beim hr Tag)? Meine Google Recherche bringt mich irgendwie nicht weiter.
Danke schonmal für die Hilfe.
|
|
| |
  |
 |
top
Moderator
Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 52
Geschlecht:
|
Verfasst Fr 16.12.2011 18:09
Titel
|
|
|
Jede id darf auf einer Seite nur einmal verwendet werden!
Daher brauchst du nicht die übergeordnete id mit abfragen.
Einfach nur:
| Code: | #start_menu {
border-bottom: dotted 2px #999999;
} |
sollte reichen.
Edit: Blöde Rechtsschreibung...
Zuletzt bearbeitet von top am Fr 16.12.2011 18:10, insgesamt 2-mal bearbeitet
|
|
| |
|
|
|
Anzeige
|
|
|
sir_scale_a_lot
Threadersteller
Dabei seit: 09.10.2010
Ort: Dropbox
Alter: 36
Geschlecht:
|
Verfasst Fr 16.12.2011 18:20
Titel
|
|
|
Ich habe jetzt die id in den li Befehlt gepackt.
| Code: | <li><a href="../code/index.html">Index</a></li>
<li id="navi_2"><a href="../code/seite2.html">Seite 2</a><br></li> |
Die dazugehörige css
| Code: | #navi_1 {
border-bottom: dotted 2px #999999;
}
#navi_2 {
border-bottom: dotted 2px #999999;
} |
In dem oberen Navi Fall wird Seite 2 angezeigt und in Opera unterstrichen. Bei den anderen Browsern geschieht das allerdings nicht.
Es ist also nicht die beste Lösung. 
Zuletzt bearbeitet von sir_scale_a_lot am Fr 16.12.2011 18:22, insgesamt 2-mal bearbeitet
|
|
| |
|
|
Piki
Dabei seit: 30.01.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 16.12.2011 18:27
Titel
|
|
|
Warum soll der Hinweis auf die aktive Seite mit einem Link auf sich selbst versehen werden? (Ein Link, der auf sich selbst verweist, wird gemeinhin als „Deppenlink“ bezeichnet.)
Hast Du die Navi in einer Liste organisiert? Wenn ja, entferne im aktiven Link das Anchor-Element, so dass es kein Link mehr ist, und weise dem Listenpunkt eine Klasse zu (z.B. <li class="aktiv">). Für diese Klasse notierst Du in der CSS-Datei den entsprechenden Selektor (.aktiv) und definierst damit das Aussehen des Listenelements (.aktiv {border-bottom:2px dotted #999999; …}).
Edit hat gesehen, dass Du schneller warst als ich. Nimm also jetzt nur die a-Elemente aus Deinem Code raus, und Du hast zwei Fliegen mit einer Klappe geschlagen – der Hinweis auf die aktuelle Seite ist unterstrichen, und der sog. „Deppenlink“ ist weg.
Zuletzt bearbeitet von Piki am Fr 16.12.2011 18:40, insgesamt 1-mal bearbeitet
|
|
| |
|
|
DesignKater
Dabei seit: 26.06.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 16.12.2011 18:45
Titel
|
|
|
Obere Lösung setzt voraus, dass das Menü abgeändert in jeder Seite händisch eingebaut ist. Übergibst du das ganze Menü global als include oder Template wirst du nicht drum rum kommen die derzeit aktive URL abzufragen und anhand dieser dann dem aktuellen Menüpunkt den Status aktiv zu verpassen.
Edit: Ohne Prüfung auf die aktive URL kannst du das auch realisieren wenn du die Inhalte beim Klick nachlädst und einen Reload der Seite verhinderst.
Zuletzt bearbeitet von DesignKater am Fr 16.12.2011 18:47, insgesamt 1-mal bearbeitet
|
|
| |
|
|
sir_scale_a_lot
Threadersteller
Dabei seit: 09.10.2010
Ort: Dropbox
Alter: 36
Geschlecht:
|
Verfasst Fr 16.12.2011 18:53
Titel
|
|
|
Ich will lediglich, dass die Besucher sehen, auf welcher Seite sie sich befinden. Bei 5 Navigationspunkten soll halt der Punkt unterstrichen werden, der gerade aktiv ist. Zum Beispiel Kontakt, wenn man auf der Kontakt Seite ist. Das ist doch jetzt nicht unüblich?!
Meine Navi sieht wie folgt aus:
| Code: | <div id="mainnavi">
<ul>
<li><a href="1.html">Seite 1</a></li>
<li><a href="2.html">Seite 2</a></li>
<li><a href="3.html">Seite 3</a></li>
<li><a href="4.html">Seite 4</a></li>
<li><a href="5.html">Seite 5</a><br></li>
</ul>
</div> |
Laut deiner Aussage müsste ich es ja wie folgt machen:
| Code: | <div id="mainnavi">
<ul>
<li class="aktiv_1">Seite 1</li>
<li>Seite 2</li>
<li>Seite 3</li>
<li>Seite 4</li>
<li>Seite 5</li>
</ul>
</div> |
| Code: | #aktiv_1[href="http://www.xxxx.de/index.html"] {
border-bottom: dotted 2px #999999;
}
#aktiv_2[href="http://www.xxxx.de/seite2.html"] {
border-bottom: dotted 2px #999999;
}
|
ODer habe ich jetzt einen Denkfehler?
|
|
| |
|
|
fyll
Dabei seit: 20.09.2003
Ort: Augsburg
Alter: 39
Geschlecht:
|
Verfasst Fr 16.12.2011 19:31
Titel
|
|
|
Du machst einfach eine Klasse: | Code: | a.aktiv {
border-bottom: dotted 2px #999999;
} |
und sagst, dass wenn Seite 2 aufgerufen ist, Link 2 diese Klasse bekommen soll. Direkt im HTML oder über PHP oder wie auch immer.
Wenn du den Link innem li hast, schauts natürlich so aus: li.aktiv a
Den Deppenlink kannst von mir aus gern drin lassen - ich persönlich benutz ihn oft lieber, als die Seite zu aktualisieren; dem User ein Feature zu nehmen, der es evtl benutzen wöllte, ist Schwachsinn.
|
|
| |
|
|
sir_scale_a_lot
Threadersteller
Dabei seit: 09.10.2010
Ort: Dropbox
Alter: 36
Geschlecht:
|
Verfasst Fr 16.12.2011 19:56
Titel
|
|
|
Ich möchte gerne auf PHP verzichten und es mit HTML und CSS lösen. Ich meine, Opera erkennt es ja auch. Wieso die anderen *fluchwörter* Browser nur nich.
| fyll hat geschrieben: |
Wenn du den Link innem li hast, schauts natürlich so aus: li.aktiv a
|
Das verwirrt mich jetzt. Dann bin ich ja wieder bei der Verlinkung im ersten Posting von mir!
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
PHP Formmailer, funktioniert in Opera, nicht im IE
[php/js]im IE funktioniert Flash-Navi nicht richtig
navi - dropdown funktioniert nicht einwandfrei in IE 8 ?
Warum funktioniert mein Javascript nicht im Opera?
aktive buttons
CSS] das aktive Objekt und die Klassen
|
|
Willkommen auf dem Portal für Mediengestalter
