tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
5
ZUGRIFFE
1247
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 04.01.06 15:36 #1
    Avatar von StupidBoy
    StupidBoy StupidBoy ist offline Mitglied Gold
    Registriert seit
    Aug 2005
    Ort
    Bremen
    Beiträge
    197
    Hallo,
    ich habe eine Frage zu den Möglichkeiten die es mit CSS für Menüs gibt.
    Und zwar möchte ich gerne, das ein Submenü (ich bin mir noch nicht sicher ob Text oder Grafiken, es wird wohl aber auf Text hinauslaufen) auf meiner Seite angezeigt wird wenn der entsprechende Obermenüpunkt angeklickt wurde.
    Ich bin mir ziemlich sicher, dass es dafür eine recht simple Lösung gibt, bloß stecke ich gedanklich gerade in einer ziemlichen Sackgasse. Es ist sicherlich keine Frage, dass ich einfach die komplette Seite neu laden könnte, dann eben nur mit dem entsprechenden Menü, aber diese möglichkeit erscheint mir nicht nur äußerst unelegant sondern gradezu dilettantisch.

    Angehängt ist eine kleine Grafik die das ganze noch einmal verdeutlichen Soll, wenn nun z. Bsp. "News" angeklickt wird, möchte ich, dass dort, wo nun die Platzhalter sind, entsprechende Links, beispielsweise zu bestimmten News-Kategorien, angezeigt werden.
    Miniaturansicht angehängter Grafiken Miniaturansicht angehängter Grafiken Dynamisches Menü mit CSS-ansicht.jpg  
    Geändert von StupidBoy (04.01.06 um 15:44 Uhr)
     
  2. 04.01.06 15:58 #2
    Maik Tutorials.de Gastzugang
    Vielleicht hilft dir das Modell alsacreations.com: Menu horizontal déroulant sur une ligne en CSS weiter?
     
  3. 04.01.06 16:33 #3
    Avatar von StupidBoy
    StupidBoy StupidBoy ist offline Mitglied Gold
    Registriert seit
    Aug 2005
    Ort
    Bremen
    Beiträge
    197
    Das sieht gar nicht schlecht aus

    Jetzt muss ich mich nur noch den Code durchwurscteln und versuchen das alles zu verstehen.

    Dankeschön
     
  4. 05.01.06 18:03 #4
    Avatar von StupidBoy
    StupidBoy StupidBoy ist offline Mitglied Gold
    Registriert seit
    Aug 2005
    Ort
    Bremen
    Beiträge
    197
    So, ich bin nun so weit, dass ich das Menü eingebunden hab, das klappt auch schon ganz gut, außer im IE.
    Im IE ist unter dem Menü ein Abstand von 10px enstanden nachdem ich das Menü eingebaut hab.
    Außerdem hätte ich gerne, dass sich die Untermenüs am linken Rand des Bodys oder am linken Rand von div.parent ausrichten, derzeit richten sie sich immer an der entsprechenden Grafik des Hauptmenüs aus.
    Aber seht selbst: http://www.blogging-online.com/site/

    Abgesehen davon bekomme ich die Grafik die eigentlich den unteren Abschluss bilden sollte nicht nach unten gedrückt, stattdessen schließt sie immer die Grafik über ihr an.

    Und eine grundsätzliche Frage habe ich auch noch:
    Um die Seite abhängig vom Content zu verlängern, reicht es da zwischen div.subm und div.bottom ein div einzufügen das eine Höhe von 100% hat sowie einen entsprechenden Abstatt nach oben und Unten den ich per margin-top und margin-bottom herstellen wollte?

    Grüße SB


    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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Testseite</title>
        <meta http-equiv="Content-Script-Type" content="text/javascript">
            <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>
        <style type="text/css">
 
                    body
                        {
                          background-color: #3e3e3e;
                          text-align: left;
                          height: 100%
                          
                        }
            /*menue beginnt*/
                    dt, dl, dd, ul, li
                        {
                          list-style-type: none;
                          margin: 0;
                          padding: 0;
                          
                          
                        }
                    #menu
                        {
                          position : absolute;
                          left: 100px;
                          top: 175px;
                          float: left;
                        }
                    #menu dl
                        {
                          float: left;
                        }
                    #menu li
                        {
                          float: left;
                          
                        }
 
                    #menu a
                        {
                          text-decoration: none;
                          color: #000;
                        }
                    #smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6, #smenu7
                        {
                          position: absolute;
                          margin-left: 10px;
                          top: 60px;
                          font: 0.8em Arial, sans-serif;
                          font-weight: bold;
                          
                          width: 400px;
                          
                        }
            /*menue endet*/
                    div.parent
                        {
                          visibility: visible;
                          position: absolute;
                          left: 50%;
                          margin-left: -500px; /* negative Hälfte von width:1000px (breite des Layouts) */
                          width: 1000px;
                          height: 100%;
                          text-align: center;
                          background-image: url(main715.jpg);
                          background-repeat: repeat-y;
                        }
 
                    div.banner
                        {
                          text-align: center;
                          width: 1000px;
                          height: 209px;
                          background-image: url(main7_01.gif);
                          background-repeat: no-repeat;
                        }
                     div.fueller
                        {
                          background-image: url(711.gif);
                          background-repeat: no-repeat;
                          height: 9px;
                          width: 1000px;
                        }
                     div.subm
                        {
                          background-image: url(main713.jpg);
                          background-repeat: no-repeat;
                          height: 87px;
                          width: 1000px;
                        }
                     div.bottom
                        {
                          background-image: url(717.jpg);
                          background-position: bottom;
                          height: 90px;
                          width: 1000px;
                        }
 
        </style>
    </head>
 
        <body>
 
            <div class="parent">
            
                    
                <div class="banner">
                    <div id="menu">
                        <dl>
                            <dt onmouseover="montre('smenu1');"><img alt="" src="main703.jpg"><a href="http://www.google.de"></a></dt>
                                <dd id="smenu1">
                                    <ul>
                                        <li><a href="http://www.news.com">&raquo;News.com</a>&nbsp;</li>
                                        <li><a href="http://www.cnn.com">&raquo;Cnn.com</a>&nbsp;</li>
                                        <li><a href="http://www.tutorials.de">&raquo;tuturials.de</a></li>
                                    </ul>
 
                                </dd>
                        </dl>
                        
                        <dl>
                            <dt onmouseover="montre('smenu2');"><img alt="" src="main704.jpg"><a href="http://www.google.de"></a></dt>
                                <dd id="smenu2">
                                    <ul>
                                        <li><a href="http://www.google.de">&raquo;VWar A</a>&nbsp;</li>
                                        <li><a href="http://www.google.de">&raquo;Vwar B</a></li>
                                    </ul>
                                </dd>
                        </dl>
                        
                        <dl>
                            <dt onmouseover="montre('smenu3');"><img alt="" src="main705.jpg"><a href="http://www.google.de"></a></dt>
                                <dd id="smenu3">
                                    <ul>
                                        <li><a href="http://www.google.de">&raquo;Board A</a>&nbsp;</li>
                                        <li><a href="http://www.google.de">&raquo;Board B</a></li>
                                    </ul>
                                </dd>
                        </dl>
                        <dl>
                            <dt onmouseover="montre('smenu4');"><img alt="" src="main706.jpg"><a href="http://www.google.de"></a></dt>
                                <dd id="smenu4">
                                    <ul>
                                        <li><a href="http://www.google.de">&raquo;GB A</a>&nbsp;</li>
                                        <li><a href="http://www.google.de">&raquo;GB B</a></li>
                                    </ul>
                                </dd>
                        </dl>
                        <dl>
                            <dt onmouseover="montre('smenu5');"><img alt="" src="main707.jpg"><a href="http://www.google.de"></a></dt>
                                <dd id="smenu5">
                                    <ul>
                                        <li><a href="http://www.google.de">&raquo;Misc A</a>&nbsp;</li>
                                        <li><a href="http://www.google.de">&raquo;Misc B</a></li>
                                    </ul>
                                </dd>
                        </dl>
                        <dl>
                            <dt onmouseover="montre('smenu6');"><img alt="" src="main708.jpg"><a href="http://www.google.de"></a></dt>
                                <dd id="smenu6">
                                    <ul>
                                        <li><a href="http://www.google.de">&raquo;Server A</a>&nbsp;</li>
                                        <li><a href="http://www.google.de">&raquo;Server B</a></li>
                                    </ul>
                                </dd>
                        </dl>
                        <dl>
                            <dt onmouseover="montre('smenu7');"><img alt="" src="main709.jpg"><a href="http://www.google.de"></a></dt>
                                <dd id="smenu7">
                                    <ul>
                                        <li><a href="http://www.google.de">&raquo;Join A</a>&nbsp;</li>
                                        <li><a href="http://www.google.de">&raquo;Join B</a></li>
                                    </ul>
                                </dd>
                        </dl>
                    </div>
                 </div>
                    <div class="fueller">
                    </div>
                    <div class="subm">
                    </div>
                    <div class="bottom">
                    </div>
            </div>
 
        </body>
 
</html>
     
  5. 05.01.06 18:52 #5
    Maik Tutorials.de Gastzugang
    1. Lösung für den 10px-Abstand unterhalb des Menüs:
      Code :
      1
2
3
4
5
6
7
8

      div.fueller
{
background-image: url(711.gif);
background-repeat: no-repeat;
height: 9px;
width: 1000px;
[b]font-size: 0;[/b]
}
    2. Lösung für linksbündige Ausrichtung der Submenüs:
      Code :
      1
2
3
4
5
6
7
8
9
10

      #smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6, #smenu7
{
position: absolute;
[b]left: 0;[/b] /* wie im Original-Demo! */
top: 60px;
margin-left: 10px;
font: 0.8em Arial, sans-serif;
font-weight: bold;
width: 400px;
}
    3. Für den Footer habe ich (noch) keine Lösung parat, da sich seine Position ja normalerweise aus dem Seiteninhalt ergibt.
     
  6. 05.01.06 19:04 #6
    Avatar von StupidBoy
    StupidBoy StupidBoy ist offline Mitglied Gold
    Registriert seit
    Aug 2005
    Ort
    Bremen
    Beiträge
    197
    Du bist mein Gott

    Hast recht, wegen dem Footer, da hab ich quer gedacht, wie so oft.
    Hat sich also auch erledigt.

    Danke für die schnelle Hilfe.
     
« Div zu hoch, über 100% | Scrollbarproblem nur im Firefox »

Ähnliche Themen

  1. <DIV> an dynamisches Menü anpassen
    Von Arndtinho im Forum CSS
    Antworten: 10
    Letzter Beitrag: 06.03.10, 12:05
  2. dynamisches Menü
    Von reuabreliz im Forum Javascript & Ajax
    Antworten: 0
    Letzter Beitrag: 08.04.08, 18:21
  3. Dynamisches Menü
    Von melstyle im Forum Flash Plattform
    Antworten: 9
    Letzter Beitrag: 13.04.05, 11:46
  4. dynamisches Menü
    Von elgo im Forum PHP
    Antworten: 8
    Letzter Beitrag: 16.10.03, 19:38
  5. Dynamisches Menü (MX)
    Von Matthias Kannengiesser im Forum Flash Plattform
    Antworten: 16
    Letzter Beitrag: 19.11.02, 08:40