tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
7
ZUGRIFFE
3114
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 19.05.06 22:56 #1
    Avatar von babone
    babone babone ist offline Mitglied Silber
    Registriert seit
    Feb 2003
    Beiträge
    87
    Hi,
    ich habe wieder mal ein Problem...denn ich wollte einen CSS-Mouseover-Menü mit Grafiken ohne javascript. Bin auch fündig geworden aber leider klappt es nur bei firefox. Bei IE funktioniert es auf den lokalen Rechner aber sobald ich es hochlade wird nichts mehr angzeigt. Und Opera streikt auch!
    Ich bin mir sicher das ich wieder mal ein Fehler gemacht habe.
    Ich hoffe das Ihr helfen könnt. Vielen Dank in Voraus

    In Aktion: http://stixsteps.de/index.html

    HTML-Code:
    <div id="page">
	  <div id="main_menü">
	  <div  id="menü_1">
	  	<ul class="menu_oben">
    <li><a href="#" id="home"></a></li>
    <li><a href="#" id="bio"></a></li>
    <li><a href="#" id="inter"></a></li>
</ul>
		</div>
	  <div id="menü_2">
	  <ul class="menu_oben">
    <li><a href="#" id="stix"></a></li>
    <li><a href="#" id="refer"></a></li>
    <li><a href="#" id="dates"></a></li>
</ul>

	</div>
	  <div id="menü_3">
	  <ul class="menu_oben">
    <li><a href="#" id="multi"></a></li>
    <li><a href="#" id="review"></a></li>
    <li><a href="#" id="cont"></a></li>

</ul>

	  </div>
	  </div>		
</div>
    Code css:
    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
129
130

    #main_menü {
    padding: 15px 0px 45px 30px;
}
 
#menü_1{
    border: 0px;
    clear:left;
}
#menü_2{
    border: 0px;
    clear:left;
}
#menü_3{
    border: 0px;
    clear:left;
}
.menu_oben {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
 
.menu_oben li {
    padding: 4px 6px 0px 0px;
    float: left;
    width: 169px;
    height: 33px;
}
.menu_oben li a{
    display:block;
}
#home {
    background-image: url(images/menü_roll_Form-19-Kopie-5.gif);
    width: 169px;
    height: 33px;
}
 
#home:hover, #home:active, #home:focus, #home_active {
    background-image: url(images/menü_act_Form-19-Kopie-5.gif);
    width: 169px;
    height: 33px;
}
#bio  {
    background-image: url(images/menü_roll_Form-19-Kopie-8.gif);
    width: 169px;
    height: 33px;
}
 
#bio:hover, #bio:active, #bio:focus, #bio_active {
    background-image: url(images/menü_act_Form-19-Kopie-8.gif);
    width: 169px;
    height: 33px;
}
#inter  {
    background-image: url(images/menü_roll_Form-19-Kopie-12.gif);
    width: 169px;
    height: 33px;
}
 
#inter:hover, #inter:active, #inter:focus, #inter_active {
    background-image: url(images/menü_act_Form-19-Kopie-12.gif);
    width: 169px;
    height: 33px;
}
#stix  {
    background-image: url(images/menü_roll_Form-19-Kopie-7.gif);
    width: 169px;
    height: 33px;
}
 
#stix:hover, #stix:active, #stix:focus, #stix_active {
    background-image: url(images/menü_act_Form-19-Kopie-7.gif);
    width: 169px;
    height: 33px;
}
#refer  {
    background-image: url(images/menü_roll_Form-19-Kopie-10.gif);
    width: 169px;
    height: 33px;
}
 
#refer:hover, #refer:active, #refer:focus, #refer_active {
    background-image: url(images/menü_act_Form-19-Kopie-10.gif);
    width: 169px;
    height: 33px;
}
#dates  {
    background-image: url(images/menü_roll_Form-19-Kopie-13.gif);
    width: 169px;
    height: 33px;
}
 
#dates:hover, #dates:active, #dates:focus, #dates_active {
    background-image: url(images/menü_act_Form-19-Kopie-13.gif);
    width: 169px;
    height: 33px;
}
#multi  {
    background-image: url(images/menü_roll_Form-19-Kopie-6.gif);
    width: 169px;
    height: 33px;
}
 
#multi:hover, #multi:active, #multi:focus, #multi_active {
    background-image: url(images/menü_act_Form-19-Kopie-6.gif);
    width: 169px;
    height: 33px;
}
#review  {
    background-image: url(images/menü_roll_Form-19-Kopie-11.gif);
    width: 169px;
    height: 33px;
}
 
#review:hover, #review:active, #review:focus, #review_active {
    background-image: url(images/menü_act_Form-19-Kopie-11.gif);
    width: 169px;
    height: 33px;
}
#cont  {
    background-image: url(images/menü_roll_Form-19-Kopie-14.gif);
    width: 169px;
    height: 33px;
}
 
#cont:hover, #cont:active, #cont:focus, #cont_active {
    background-image: url(images/menü_act_Form-19-Kopie-14.gif);
    width: 169px;
    height: 33px;
}
     
  2. 20.05.06 09:34 #2
    Maik Tutorials.de Gastzugang
    1. Vielleicht liegt es am fehlenden a-Element in den jeweiligen ID-Selektoren:

      Code :
      1
2
3
4
5
6
7
8
9
10
11
12
13

      a#home {    
background-image: url(images/menü_roll_Form-19-Kopie-5.gif);    
width: 169px;    
height: 33px;
} 
 
a#home:hover, a#home:active, a#home:focus, a#home_active {    
background-image: url(images/menü_act_Form-19-Kopie-5.gif);    
width: 169px;    
height: 33px;
}
 
/* usw. */
    2. oder an den fehlenden Pseudoklassen :link und :visited:

      Code :
      1
2
3
4
5
6
7
8
9
10
11
12
13

      a#home:link, a#home:visited {    
background-image: url(images/menü_roll_Form-19-Kopie-5.gif);    
width: 169px;    
height: 33px;
} 
 
a#home:hover, a#home:active, a#home:focus, a#home_active {    
background-image: url(images/menü_act_Form-19-Kopie-5.gif);    
width: 169px;    
height: 33px;
}
 
/* usw. */
    3. oder am Datei-Namen der Grafiken, in dem das ü durch %FC ersetzt wurde:

      Code :
      1

      men%FC_roll_Form-19-Kopie-11.gif
     
  3. 20.05.06 12:25 #3
    Maik Tutorials.de Gastzugang
    Wie ich gerade sehe, funktioniert das CSS-Menü mittlerweile auch im IE und Opera
     
  4. 20.05.06 13:07 #4
    Avatar von babone
    babone babone ist offline Mitglied Silber
    Registriert seit
    Feb 2003
    Beiträge
    87
    Hallo,
    danke vielmals. Es war glaube ich die Dateinamen. Aber ich habe mit Opera immer noch ein Problem. Wenn ich die mouse über die Buttons führe kommt bei manchen das hintergrundbild nicht(z.B. home) und bei manchen schon. Hm...
    Das CSS habe ich wie folgt geändert.

    Grüsse

    Babone
    Code css:
    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
129
130
131
132

    #main_menü {
    padding: 15px 0px 45px 30px;
}
 
#menü_1{
    border: 0px;
    clear:left;
}
#menü_2{
    border: 0px;
    clear:left;
}
#menü_3{
    border: 0px;
    clear:left;
}
.menu_oben {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
 
.menu_oben li {
    padding: 4px 6px 0px 0px;
    float: left;
    width: 169px;
    height: 33px;
}
.menu_oben li a{
    display:block;
    width: 169px;
    height: 33px;
}
a#home:link, a#home:visited {
    background-image: url(images/menu_roll5.gif);
    width: 169px;
    height: 33px;
}
 
a#home:hover, a#home:active, a#home:focus, a#home_active {
    background-image: url(images/menu_act5.gif);
    width: 169px;
    height: 33px;
}
a#bio:link, a#bio:visited {
    background-image: url(images/menu_roll8.gif);
    width: 169px;
    height: 33px;
}
 
a#bio:hover, a#bio:active, a#bio:focus, a#bio_active {
    background-image: url(images/menu_act8.gif);
    width: 169px;
    height: 33px;
}
a#inter:link, a#inter:visited  {
    background-image: url(images/menu_roll12.gif);
    width: 169px;
    height: 33px;
}
 
a#inter:hover, a#inter:active, a#inter:focus, a#inter_active {
    background-image: url(images/menu_act12.gif);
    width: 169px;
    height: 33px;
}
a#stix:link, a#stix:visited {
    background-image: url(images/menu_roll7.gif);
    width: 169px;
    height: 33px;
}
 
a#stix:hover, a#stix:active, a#stix:focus, a#stix_active {
    background-image: url(images/menu_act7.gif);
    width: 169px;
    height: 33px;
}
a#refer:link, a#refer:visited {
    background-image: url(images/menu_roll10.gif);
    width: 169px;
    height: 33px;
}
 
a#refer:hover, a#refer:active, a#refer:focus, a#refer_active {
    background-image: url(images/menu_act10.gif);
    width: 169px;
    height: 33px;
}
a#dates:link, a#dates:visited {
    background-image: url(images/menu_roll13.gif);
    width: 169px;
    height: 33px;
}
 
a#dates:hover, a#dates:active, a#dates:focus, a#dates_active {
    background-image: url(images/menu_act13.gif);
    width: 169px;
    height: 33px;
}
a#multi:link, a#multi:visited {
    background-image: url(images/menu_roll6.gif);
    width: 169px;
    height: 33px;
}
 
a#multi:hover, a#multi:active, a#multi:focus, a#multi_active {
    background-image: url(images/menu_act6.gif);
    width: 169px;
    height: 33px;
}
a#review:link, a#review:visited {
    background-image: url(images/menu_roll11.gif);
    width: 169px;
    height: 33px;
}
 
a#review:hover, a#review:active, a#review:focus, a#review_active {
    background-image: url(images/menu_act11.gif);
    width: 169px;
    height: 33px;
}
a#cont:link, a#cont:visited {
    background-image: url(images/menu_roll14.gif);
    width: 169px;
    height: 33px;
}
 
a#cont:hover, a#cont:active, a#cont:focus, a#cont_active {
    background-image: url(images/menu_act14.gif);
    width: 169px;
    height: 33px;
}
     
  5. 20.05.06 14:42 #5
    Maik Tutorials.de Gastzugang
    Das liegt wohl daran, daß sich beim ersten Seitenbesuch die :hover-Grafiken noch nicht im Browsercache befinden.
     
  6. 20.05.06 15:12 #6
    Avatar von babone
    babone babone ist offline Mitglied Silber
    Registriert seit
    Feb 2003
    Beiträge
    87
    Ja aber es lag auch irgendwie daran das Opera auf mit manchen Dateinamen nicht umgehen konnte. Statt menu_act5 hat menuact5 gereicht keine Ahnung.
    Cool Danke Dir nochmals.

    PS : Muss ich eigentlich bei jedem einzelnen Link breite und höhe angeben.
    Reicht auch wenn ich den Li anspreche. Normalerweise wird es ja vererbt oder nicht?
    So zum Beispiel

    Code :
    1
2
3
4

    .menu_oben li a{
    display:block;
    width: 169px;
    height: 33px;

    Grüsse

    Babone
     
  7. 20.05.06 15:15 #7
    Maik Tutorials.de Gastzugang
    Das wollte ich auch vorschlagen, um den CSS-Code schlanker zu machen
     
  8. 20.05.06 15:23 #8
    Avatar von babone
    babone babone ist offline Mitglied Silber
    Registriert seit
    Feb 2003
    Beiträge
    87
    Cool Danke.

    Schönes Wochenende noch!
     
« Seite immer mit 100% Höhe | Fehlanzeige in Firefox »

Ähnliche Themen

  1. Mouseover-Bildwechsel: Darstellungsproblem mit Opera
    Von Parasite im Forum HTML & XHTML
    Antworten: 6
    Letzter Beitrag: 08.08.08, 17:21
  2. MouseOver - 2 Grafiken ändern
    Von Martin80 im Forum Javascript & Ajax
    Antworten: 1
    Letzter Beitrag: 14.12.06, 14:58
  3. Opera und Positionierung zusammengesetzter Grafiken
    Von trekmaster im Forum CSS
    Antworten: 0
    Letzter Beitrag: 27.08.04, 14:29
  4. seltsames Problem, mit Opera und Mozilla gehts, mit IE aber nicht
    Von Tob im Forum PHP
    Antworten: 2
    Letzter Beitrag: 21.08.03, 13:36
  5. HOver/MouseOver in mit Grafiken in HTML
    Von StifflersMom im Forum HTML & XHTML
    Antworten: 5
    Letzter Beitrag: 26.06.03, 15:51