tutorials.de Buch-Aktion 02/2012
ERLEDIGT
NEIN
ANTWORTEN
1
ZUGRIFFE
493
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 29.03.07 19:18 #1
    hansmaulwurf82 Tutorials.de Gastzugang
    Hi,
    ich habe folgendes Problem. Ich habe für eine Homepage ein vertikales Navigationsmenü.
    Per Mouseover wird unten drunter ein 2. vertikales Menü angezeigt. Funktioniert im firefox auch wunderbar, allerdings nicht im IE.

    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
129
130
131
132
133
134
135
136
137
138
139
140
141
142

    <html>
 
<head>
<title>Feuerwehr</title>
 
<meta http-equiv="Content-Language" content="de" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
    for (var i = 1; i<=10; i++) {
        if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
    }
if (d) {d.style.display='block';}
}
//-->
</script>
 
<link rel="stylesheet" type="text/css" href="sub.css"></link>
</head>
 
<body link="#000000" vlink="#000000" alink="#000000" bgcolor="#B90000" background="uebergang.jpg">
 
<div id="menu">
<br>
<br>
<br>
<br>
    <dl>
        <dt onmouseover="montre('smenu1');"><a href="#">Aktuelles</a></dt>
    </dl>
    
    <dl>            
        <dt onmouseover="montre('smenu2');"><a href="#">Feuerwehr</a></dt>
            <dd id="smenu2">
                <dl>
                    <dt><a target="haupt" href="fahrzeuge-geraete/fahrzeuge-geraete.htm">Fahrzeuge</a></dt>
                </dl>
                <dl>
                    <dt><a target="haupt" href="#">Geräte</a></dt>
                </dl>
                <dl>
                    <dt><a target="haupt" href="#">Feuerwehrhaus</a></dt>
                </dl>
                <dl>
                    <dt><a target="haupt" href="#">Termine</a></dt>
                </dl>
                <dl>
                    <dt><a target="haupt" href="#">Beitrittserklärung</a></dt>
                </dl>
            </dd>
    </dl>
    
    <dl>    
        <dt onmouseover="montre('smenu3');"><a href="#">Personal</a></dt>
            <dd id="smenu3">
                <dl>
                    <dt><a target="haupt" href="#">Jugendfeuerwehr</a></dt>
                </dl>
                <dl>
                    <dt><a target="haupt" href="#">Einsatzabteilung</a></dt>
                </dl>
                <dl>
                    <dt><a target="haupt" href="#">Führungsstruktur</a></dt>
                </dl>
                <dl>
                    <dt><a target="haupt" href="#">"Junge Alte"</a></dt>
                </dl>
                <dl>
                    <dt><a target="haupt" href="#">Musikkorps</a></dt>
                </dl>
            </dd>
    </dl>
    
    <dl>    
        <dt onmouseover="montre('smenu4');"><a href="#">Einsätze</a></dt>
            <dd id="smenu4">
                <dl>
                    <dt><a target="haupt" href="einsaetze/2007/2007.htm">2007</a></dt>
                </dl>
                <dl>
                    <dt><a target="haupt" href="einsaetze/2006/2006.htm">2006</a></dt>
                </dl>
                <dl>
                    <dt><a target="haupt" href="einsaetze/2005/2005.htm">2005</a></dt>
                </dl>
                <dl>
                    <dt><a target="haupt" href="startseite.htm">Archiv</a></dt>
                </dl>
                <dl>
                    <dt><a target="haupt" href="einsaetze/besondere einsaetze/besondere einsaetze.htm">Besondere Einsätze</a></dt>
                </dl>
            </dd>
    </dl>
    
    <dl>    
        <dt onmouseover="montre('smenu5');"><a href="#">Bilder</a></dt>
            <dd id="smenu5">
                <dl>
                    <dt><a target="haupt" href="bilder/2007/2007.htm">2007</a></dt>
                </dl>
                <dl>
                    <dt><a target="haupt" href="bilder/2006/2006.htm">2006</a></dt>
                </dl>
                <dl>
                    <dt><a target="haupt" href="bilder/2005/2005.htm">2005</a></dt>
                </dl>
                <dl>
                    <dt><a target="haupt" href="startseite.htm">Archiv</a></dt>
                </dl>
            </dd>
    </dl>
    
    <dl>    
        <dt onmouseover="montre('smenu6');"><a href="#">Allgemeines</a></dt>
            <dd id="smenu6">
                <dl>
                    <dt><a target="haupt" href="#">Gästebuch</a></dt>
                </dl>
                <dl>
                    <dt><a target="haupt" href="#">Links</a></dt>
                </dl>
                <dl>
                    <dt><a target="haupt" href="#">Heiliger Florian</a></dt>
                </dl>
                <dl>
                    <dt><a target="haupt" href="#">Impressum</a></dt>
                </dl>
                <dl>
                    <dt><a target="haupt" href="#">Bürgerinformationen</a></dt>
                </dl>
            </dd>
    </dl>
 
</div>
 
</body>
 
</html>
    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

    body {
    margin: 10px;
    padding: 0;
    font: 16px Verdana, Arial, Helvetica, sans-serif;
}
 
a {
    text-decoration: none;
}
 
dt, dl, dd, ul, li {
    list-style-type: none;
    margin: 0 10px 0 0;
    padding: 0;
}
 
dd {
    margin-top: 4px;
}
 
#menu {
    position: absolute;
    left: 50px;
    top: 20px;
    height: 40px;
    width: 100%;
}
 
#menu a {
    color: #000;
    text-decoration: none;
}
 
#menu a:hover {
    text-decoration: none;
}
 
#menu dl {
    float: left;
    width: 15%;
}
 
#menu dt {
    width: 90%;
    background: #f00;
    text-align: center;
    padding: 2px;
}
 
#menu dd {
    text-align: center;
    width: 100%;
}
 
#menu li {
    display: inline;
}
 
#menu ul {
    display: inline;
}
 
#menu li a {
    color: #ff0000;
}
 
#menu li a:hover {
    text-decoration: none;
}   
 
#smenu1 dt, #smenu2 dt, #smenu3 dt, #smenu4 dt, #smenu5 dt, #smenu6 dt{
    background: #f0f;
}
    
#smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6 {
    position: absolute;
    left: 0;
 
}
     
  2. 29.03.07 19:46 #2
    Maik Tutorials.de Gastzugang
    Hi,

    orientiere dich mal an den Original-Beispielen von Raphaël Goetter und setze die Submenüs in das Listenelement ul mit den Listenpunkten li ein - also:

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

    <dl>
   <dt onmouseover="montre('smenu2');"><a href="#">Feuerwehr</a></dt>
        <dd id="smenu2">
             [b]<ul>
                   <li><a target="haupt" href="fahrzeuge-geraete/fahrzeuge-geraete.htm">Fahrzeuge</a></li>
                   <li><a target="haupt" href="#">Geräte</a></li>
                   <li><a target="haupt" href="#">Feuerwehrhaus</a></li>
                   <li><a target="haupt" href="#">Termine</a></li>
                   <li><a target="haupt" href="#">Beitrittserklärung</a></li>
             </ul>[/b]
     </dd>
</dl>

    Oder wofür wird ansonsten diese Regel im Stylesheet benötigt?

    Code :
    1
2
3

    #menu li {
        display: inline; /* Listenpunkte horizontal ausrichten */
}
    Zudem fehlt dem Dokument eine Doctype-Deklaration, weshalb der IE in den Quirksmode gesetzt wird und er das Boxmodell falsch interpretiert bzw. nicht unterstützt.

    Achja, die Ausrichtung "deines" Menüs ist horizontal, und nicht vertikal.
     
« CSS Formatierungsproblem mit Texteinzug und Blocksatz | Bild-Navigation mit CSS »

Ähnliche Themen

  1. Fehlerhafte Darstellung im IE 5.5 und 6.0
    Von Kaeschdin im Forum CSS
    Antworten: 11
    Letzter Beitrag: 29.07.08, 19:25
  2. Wiedermal Fehlerhafte Darstellung im FF
    Von UnoDosTres im Forum CSS
    Antworten: 5
    Letzter Beitrag: 29.04.07, 23:20
  3. Fehlerhafte DIV darstellung im IE
    Von bandsite im Forum CSS
    Antworten: 13
    Letzter Beitrag: 08.12.05, 13:35
  4. Fehlerhafte Darstellung
    Von andyK im Forum HTML & XHTML
    Antworten: 2
    Letzter Beitrag: 22.06.04, 13:40
  5. JPEG-Bilder - Fehlerhafte Darstellung in IE 6
    Von soundchecker im Forum Internet, DSL & Flatrate
    Antworten: 2
    Letzter Beitrag: 07.09.03, 17:27