tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
2
ZUGRIFFE
1962
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 02.10.07 14:46 #1
    vendy vendy ist offline Mitglied Bronze
    Registriert seit
    Apr 2004
    Beiträge
    28
    Hallo,

    ich nutze die JQuery Libary und ein Addon Superfish um folgendes Menu zu realisieren:
    Die Formatierung basiert ganz normal auf CSS.

    Dort habe ich nun 3 kleine Problemchen
    1. Im IE6 unter "Kontakt" funktioniert der HOVER für die Punkte darunter nicht.
    2. Im IE6 erscheit beim HOVER eine ganz wirr blinkende Sanduhr. Gibts eine möglichkeit die zu entfernen? cursor: pointer; klappte leider nicht.
    3. Im Safari ist unter "Hören" -> "Seminarangebote" 1px Abstand der dort nicht hin soll.
    4. In allen Browsern klappt die korrekte Darstellung der Klasse "current" nur unterer "Hören" -> "Seminarangebote". Klickt man einen anderen Menupunkt an, wird dieser nicht heller hervorgehoben.

    Würde mich freuen falls sich das jemand mal angucken kann.

    Hier der CSS Code:
    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128

    .nav, .nav * {
    margin:0;
    padding:0;
    font-size: 110%;
}
.nav {
    float: left;
    position:relative;
}
.nav ul {
    background:#3E3507; /*IE6 needs this*/
    float: left;
    position:relative;
    /* padding: 15px 5px; */
}
.nav li {
    background: url(menubreak.gif) right top repeat-y;
    /*border-right: 1px solid #e07402;*/
    float: left;
    list-style:none;
    z-index:999;
    margin-right: 10px;
}
.nav li.noborder {
    background: none;
    margin-right: 0;
}
.nav a {
    color: #e07402;
    display:block;
    float: left;
    padding: 0 10px 0 0;
    text-decoration:none;
}
.nav li ul {
    left:0;
    top:-999em;
    position:absolute;
    width: 465px;
}
.nav li ul li a {
    margin-left: 3px;
}
.nav li ul li {
    background: none;
}
.nav li:hover,
.nav li.sfHover,
.nav a:focus, .nav a:hover, .nav a:active {
    background: #fff;
    color: #3E3507;
    background: url(menubreak.gif) right top repeat-y;
}
.nav li.noborder:hover,
.nav li.noborder.sfHover,
.nav li.noborder a:focus, .nav li.noborder a:hover, .nav li.noborder a:active {
    background: none;
}
.nav li li:hover,
.nav li li.sfHover,
.nav li li a:focus, .nav li li a:hover, .nav li li a:active {
    background:#f08413;
    color: #fff;
}
.nav li li li:hover,
.nav li li li.sfHover,
.nav li li li a:focus, .nav li li li a:hover, .nav li li li a:active {
    background:#fa9933;
}
.nav li:hover ul, /* pure CSS hover is removed below */
ul.nav li.sfHover ul {
    top:20px;
}
 
.nav li:hover li ul,
.nav li.sfHover li ul {
    top:-999em;
}
.nav li li:hover ul, /* pure CSS hover is removed below */
ul.nav li li.sfHover ul {
    top:36px;
}
.nav li li:hover li ul,
.nav li li.sfHover li ul {
    top:-999em;
}
.nav li li li:hover ul, /* pure CSS hover is removed below */
ul.nav li li li.sfHover ul {
    top:20px;
}
/*following rule negates pure CSS hovers
so submenu remains hidden and JS controls
when and how it appears*/
.superfish li:hover ul,
.superfish li li:hover ul,
.superfish li li li:hover ul {
    top: -999em;
}
.nav li ul {
    background-color: #E27413;
    font-size: 80%;
    padding: 0;
}
.nav li ul li ul {
    background-color: #f08413;
    font-size: 80%;
    padding: 0;
}
.nav li ul li ul a {
    color: #fff;
}
 
.nav li ul li a {
    color: #fff;
    padding: 10px;
} 
.nav {
    padding-left: 10px;
}
.nav a.aktiv {
    color: #3E3507;
}
 
/* NEU NEU NEU */
.nav li li a:visited,
.nav li li li a:visited {
    color: #fff;
}

    Der HTML Code
    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

    <div id="mainnav">
<ul class="nav">
<li class="current"><a href="index.php?article_id=1"   class="aktiv" title="starten" >starten</a></li>
<li><a href="index.php?article_id=2"   title="erfahren" >erfahren
 
</a>
<ul  class="sub">
<li><a href="index.php?article_id=11" title="Wir und Ihr Nutzen">Wir und Ihr Nutzen</a></li>
<li><a href="index.php?article_id=12" title="Ihre Dozenten">Ihre Dozenten</a></li>
<li><a href="index.php?article_id=13" title="Das Drumherum">Das Drumherum</a></li>
</ul></li>
<li><a href="index.php?article_id=3"   title="profitieren" >profitieren
</a>
<ul  class="sub">
<li><a href="index.php?article_id=20" title="Sachseminare">Sachseminare</a></li>
<li><a href="index.php?article_id=21" title="Fachseminare">Fachseminare</a></li>
</ul></li>
 
<li><a href="index.php?article_id=4"   title="lesen" >lesen
</a>
<ul  class="sub">
<li><a href="index.php?article_id=22" title="Unser Blog">Unser Blog</a></li>
<li><a href="index.php?article_id=23" title="Links">Links</a></li>
</ul></li>
<li><a href="index.php?article_id=5"   title="hören" >hören
</a>
<ul  class="sub">
<li><a href="index.php?article_id=14" title="Audio CD">Audio CD</a></li>
<li><a href="index.php?article_id=15" title="Podcast">Podcast</a></li>
<li><a href="index.php?article_id=16" title="Seminarangebote">Seminarangebote
</a>
 
<ul>
<li><a href="index.php?article_id=17" title="Seminare">Seminare</a></li>
</ul></li>
</ul></li>
<li class="noborder" ><a href="index.php?article_id=6"   title="kontaktieren" >kontaktieren
</a>
<ul  class="sub">
<li><a href="index.php?article_id=24" title="Kontakt">Kontakt</a></li>
<li><a href="index.php?article_id=25" title="Anfahrtsplanung">Anfahrtsplanung</a></li>
</ul></li>
</ul>  
<div class="clear"></div></div>
 
</div>
    Geändert von vendy (08.10.07 um 09:17 Uhr)
     
  2. 08.10.07 20:40 #2
    wwwRAHTYde wwwRAHTYde ist offline Rookie
    Registriert seit
    Sep 2007
    Beiträge
    7
    zur 1. in IE 6 geht der Hover-Effekt nur auf denn a Tags sonst nicht aber ab denn IE 7 geht der Hover-Effekt auf alle Elemente.

    Zur 2, Ich habe es ausprobiere mir denn IE 6 bei mir kommt keine blinkende Sanduhr.

    Zur 3. Ich sehe kein 1px Abstand, mach mal ein Bildschirmphoto und markiere sie stelle.
     
  3. 08.10.07 22:15 #3
    Maik Tutorials.de Gastzugang
    Hi!
    Zitat Zitat von wwwRAHTYde Beitrag anzeigen
    zur 1. in IE 6 geht der Hover-Effekt nur auf denn a Tags sonst nicht aber ab denn IE 7 geht der Hover-Effekt auf alle Elemente.
    Hier kommt das Script http://users.tpg.com.au/j_birch/plugins/superfish/ zum Einsatz, mit dem der IE6 die Submenüs problemlos öffnet.

    Vielmehr geht es vendy um die "kontaktieren"-Sublinks "Kontakt" und "Anfahrtsplanung", bei denen der Hover-Effekt (Hintergrundfarbentausch) nicht funktioniert.

    Zitat Zitat von vendy Beitrag anzeigen
    1. Im IE6 unter "Kontakt" funktioniert der HOVER für die Punkte darunter nicht.
    Der Knackpunkt ist die von dir hinzugefügte Klasse .noborder für das li-Element:
    Code :
    1
2
3
4
5

    <li [b]class="noborder"[/b] ><a href="index.php?article_id=6"   title="kontaktieren" >kontaktieren</a>
<ul  class="sub">
<li><a href="index.php?article_id=24" title="Kontakt">Kontakt</a></li>
<li><a href="index.php?article_id=25" title="Anfahrtsplanung">Anfahrtsplanung</a></li>
</ul></li>
    Code :
    1
2
3
4
5
6
7
8
9
10

    .nav li.noborder {
        [b]background: none;[/b]
        margin-right: 0;
}
 
.nav li.noborder:hover,
.nav li.noborder.sfHover,
.nav li.noborder a:focus, .nav li.noborder a:hover, .nav li.noborder a:active {
        [b]background: none;[/b]
}
    Wenn ich die Klasse aus dem li-Element entferne, funktioniert der Hover-Effekt im IE6.

    Zitat Zitat von vendy Beitrag anzeigen
    2. Im IE6 erscheit beim HOVER eine ganz wirr blinkende Sanduhr. Gibts eine möglichkeit die zu entfernen? cursor: pointer; klappte leider nicht.
    In den Original-Beispielen, aber auch in deiner Seite taucht bei mir keine Sanduhr im IE6 auf.

    Zitat Zitat von vendy Beitrag anzeigen
    3. Im Safari ist unter "Hören" -> "Seminarangebote" 1px Abstand der dort nicht hin soll.
    Safari (für Windows) hab ich auf meinem System nicht installiert.

    Zitat Zitat von vendy Beitrag anzeigen
    4. In allen Browsern klappt die korrekte Darstellung der Klasse "current" nur unterer "Hören" -> "Seminarangebote". Klickt man einen anderen Menupunkt an, wird dieser nicht heller hervorgehoben.
    Kannst du mal einen Link zur Seite nennen, damit man dort einen Blick drauf werfen kann?
     
« Probleme bei div Menu im IE | Verlängern »

Ähnliche Themen

  1. Superfish Navigation / Subnavi bleibt aktiv
    Von pixelpur im Forum Javascript & Ajax
    Antworten: 3
    Letzter Beitrag: 01.11.10, 10:37
  2. DIV zentrieren? (Superfish)
    Von nordi im Forum CSS
    Antworten: 12
    Letzter Beitrag: 19.02.10, 13:10
  3. Safari 4 Frage bzw. Safari allgemein
    Von di_ettelo im Forum Mac OS
    Antworten: 6
    Letzter Beitrag: 07.01.10, 14:04
  4. Klick-Problem bei Superfish
    Von Alaniak im Forum Javascript & Ajax
    Antworten: 5
    Letzter Beitrag: 07.11.08, 09:24
  5. Safari und DW4?
    Von Frankausw im Forum HTML-Editoren
    Antworten: 4
    Letzter Beitrag: 26.02.04, 21:54