zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden horizontales Bildernavi mit hover, active usw.

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.01.2010, 20:03
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.03.2009
Beiträge: 35
ronjambo befindet sich auf einem aufstrebenden Ast
Standard horizontales Bildernavi mit hover, active usw.

Hi,

irgendwie stelle ich mich zu blöd an und finde auch nichts im Netz. Ich benötige ein Bildernavi, das bei hover und active(?) das Bild verändert. Bisher schaffe ich nur hover und dämliche Nebeneffekte. "hover_und_AUSGEWÄHLT.gif" bekomme ich nicht hin. Außerdem fehlt in meiner Version noch die Textalternative. Mit dem CSS-FAQ (Nr.15) konnte ich nichts anfangen.

CSS:
PHP-Code:
.left{float:left;}

a.link1:linka.link1:visited {width:82px;height:50px;display:block;background-image:url(normal.gif);}
a.link1:hovera.link1:active  {background-image:url(hover_und_ausgewählt.gif);}

a.link2:linka.link2:visited {width:76px;height:50px;display:block;background-image:url(normal.gif);}
a.link2:hovera.link2:active {background-image:url(hover_und_ausgewählt.gif);} 
HTML:
PHP-Code:
<a href="link1.html" class="link1 left"></a>
<
a href="link2.html" class="link2 left"></a
Gruß
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 01.02.2010, 12:37
Benutzerbild von Hasso
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.05.2006
Beiträge: 139
Hasso befindet sich auf einem aufstrebenden Ast
Standard

Du weißt aber, dass a:active nur gilt, solange die Maustaste gedrückt wird? Wenn du sie loslässt, greift in der Regel a:visited.
__________________
Hasso
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.02.2010, 17:37
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.03.2009
Beiträge: 35
ronjambo befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Hasso Beitrag anzeigen
Du weißt aber, dass a:active nur gilt, solange die Maustaste gedrückt wird? Wenn du sie loslässt, greift in der Regel a:visited.
Ja, aber ich finde echt keine Lösung. Gibts nicht irgendwo eine Anleitung? Ich mach das auch mit JS, wenns sein muss, aber ich brauche endlich irgendeinen Weg.
Mit Zitat antworten
  #4 (permalink)  
Alt 04.02.2010, 17:53
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von ronjambo Beitrag anzeigen
Mit dem CSS-FAQ (Nr.15) konnte ich nichts anfangen.
Inwiefern? Das ist genau das, was Du brauchst.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #5 (permalink)  
Alt 24.07.2010, 01:14
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.03.2009
Beiträge: 35
ronjambo befindet sich auf einem aufstrebenden Ast
Standard

Nach langer Zeit habe ich mich mal wieder mit dem Thema beschäftigt und eine Lösung gefunden. Es ist wirklich schwierig, etwas im Netz darüber zu finden. Im Prinzip ist es sehr simpel:
Damit der Link nicht "flackert" fügt man beide Bilder eines Links zu einem zusammen, im folgenden Beispiel horizontal [normal_link1.jpg|hover_link1.jpg] = normal_hover_link1.jpg usw.

Das CSS sieht dann wie folgt aus:
PHP-Code:
a.seite1{display:block;width:50px;height:50px;background:transparent url(normal_hover_link1.jpgno-repeat;}
a.seite1:hover{background-position:-50px 0;}
a.seite1_visited{display:block;width:50px;height:50px;background:transparent url(normal_hover_link1.jpg) -50px 0 no-repeat;}

a.seite2{display:block;width:50px;height:50px;background:transparent url(normal_hover_link2.jpgno-repeat;}
a.seite2:hover{background-position:-50px 0;}
a.seite2_visited{display:block;width:50px;height:50px;background:transparent url(normal_hover_link2.jpg) -50px 0 no-repeat;} 
und der restliche Code:

Seite 1:
PHP-Code:
<a href="seite1.html" class="seite1_visited"></a>
<
a href="seite2.html" class="seite2"></a
Seite 2:
PHP-Code:
<a href="seite1.html" class="seite1"></a>
<
a href="seite2.html" class="seite2_visited"></a
Wenn es noch eleganter, schöner, kürzer usw. geht, bin ich offen für alles...

Greetz
Mit Zitat antworten
  #6 (permalink)  
Alt 24.07.2010, 02:50
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von ronjambo Beitrag anzeigen
Damit der Link nicht "flackert" fügt man beide Bilder eines Links zu einem zusammen
Genau das ist in FAQ 15 erklärt, inkl. der Verschiebung per bg-pos. etc.

Zitat:
Zitat von ronjambo Beitrag anzeigen
Code:
<a href="seite1.html" class="seite1_visited"></a>
<a href="seite2.html" class="seite2"></a>
Du hast hoffentlich nicht vor, Links ohne Text zu verwenden? Wie man diesen unsichtbar macht und bei deakt. Grafiken doch wieder sichtbar, ist ebenfalls in FAQ 15 erklärt.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #7 (permalink)  
Alt 24.07.2010, 14:30
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.03.2009
Beiträge: 35
ronjambo befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von heiko_rs Beitrag anzeigen
Du hast hoffentlich nicht vor, Links ohne Text zu verwenden? Wie man diesen unsichtbar macht und bei deakt. Grafiken doch wieder sichtbar, ist ebenfalls in FAQ 15 erklärt.
Ich hatte mir FAQ 15 nicht nochmal angeschaut, aber Du hast recht. Eine Grafik ist noch effektiver und Text bei deaktivierten Grafiken macht auch Sinn. Ich werde das dann mal anpassen...
Mit Zitat antworten
  #8 (permalink)  
Alt 29.07.2010, 02:01
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.03.2009
Beiträge: 35
ronjambo befindet sich auf einem aufstrebenden Ast
Standard

Hat dann soweit alles nach FAQ 15 super geklappt, aber ich musste noch
PHP-Code:
ul{list-style-type:none;} 
für das erste Element einsetzen, da ich ansonsten einen Listenpunkt hatte und
PHP-Code:
{text-decoration:none;} 
ergänzen, um keine "-" zwischen den Bildern zu haben.
Hab ich das was falsch gemacht?
PHP-Code:
#navi{margin:0 auto;}
#navi li{float:left;}
#navi #link1{width:82px;}
#navi #link2{width:77px;}
#navi #link3{width:108px;}
#navi a,#navi strong{display:block;height:50px;width:100%;position:relative;overflow:hidden;}    
#navi span{position:absolute;width:100%;height:50px;top:0;left:0;background:url(navi.gif);}
#navi #link1 a span{background-position:0 0;}
#navi #link2 a span{background-position:-82px 0;}
#navi #link3 a span{background-position:-159px 0;}
#navi #link1 a:hover span,#navi #link1 strong span{background-position:0 -50px;}
#navi #link2 a:hover span,#navi #link2 strong span{background-position:-82px -50px;}
#navi #link3 a:hover span,#navi #link3 strong span{background-position:-159px -50px;} 
Und noch etwas: Folgender Code
PHP-Code:
#logo{width:155px;float:left;}
#logo a, #logo strong{display:block;height:168px;width:100%;position:relative;overflow:hidden;}
#logo span{position:absolute;width:100%;height:168px;top:0;left:0;background:url(logo.gif);} 
führt im Browser Chrome dazu, dass das Logo repeated wird und alle BG's rechts daneben überdeckt, wenn auf der index-Seite <strong> anstatt <a href> für das Logo verwendet wird.
PHP-Code:
<div id="logo"><strong>Logo<span>&nbsp;</span></strong></div
P.S. Wenn man zwischen den <span/> noch ein non-breaking space (&nbsp; ) einbaut, ist es sogar nach Tidy und W3C valide.

Greetz

Geändert von ronjambo (29.07.2010 um 02:15 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 03.08.2010, 00:21
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.03.2009
Beiträge: 35
ronjambo befindet sich auf einem aufstrebenden Ast
Standard

Was müsste am Code verändert werden, damit man das Menü vertikal nutzen kann? Ich habs wie folgt umgesetzt, finde es aber verwirrender, da es laut FAQ 15 heisst:
Zitat:
Diese stellt das Menü in horizontaler Form dar (da diese Variante aufwendiger ist, so dass sie für die vertikale Darstellung nur noch vereinfacht werden muss).
Das navi-Bild besteht aus den Menüpunkten vertikal angeordnet, da die Höhe jedes Menüpunktes unterschiedlich ist. Rechts daneben ist das jeweilige hover-Bild. Und das CSS sieht folgendermassen aus:
PHP-Code:
#navi #link1{height:33px;}
#navi #link2{height:25px;}
#navi #link3{height:30px;}

#navi a,#navi strong{display:block;height:100%;position:relative;overflow:hidden;}    
#navi span{position:absolute;width:100%;height:100%;top:0;left:0;background:url(navi.gif);}
#navi #link1 a span{background-position:0 0;}
#navi #link2 a span{background-position:0 -33px;}
#navi #link3 a span{background-position:0 -58px;}
#navi #link1 a:hover span,#navi #link1 strong span{background-position:-166px 0;}
#navi #link2 a:hover span,#navi #link2 strong span{background-position:-166px -33px;}
#navi #link3 a:hover span,#navi #link3 strong span{background-position:-166px -58px;} 
Greetz
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 03.08.2010, 00:25
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Vertikal ist einfacher, da float & clear entfällt, denn die li dürfen untereinander stehen. Aber lade Deine Variante mal hoch und poste den Link.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Hilfe css Menu center xXcyberXx CSS 5 28.11.2010 20:51
Problem mit CSS Menü SMundt CSS 9 07.01.2009 20:12
CSS Navigation - Problem mit IE6 pcklinik CSS 4 18.09.2007 13:04
Darstellungsproblem CSS Navigation im IE7 pcklinik CSS 7 09.09.2007 18:25
CSS Einsteiger bittet um Hilfe pcklinik CSS 0 06.09.2007 15:40


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:55 Uhr.