tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
10
ZUGRIFFE
701
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 06.09.05 16:01 #1
    Avatar von Blackylein
    Blackylein Blackylein ist offline Mitglied Brokat
    Registriert seit
    Jan 2005
    Ort
    Österreich
    Beiträge
    375
    Hallo!

    Ich habe mir ein vertikales Menü gebaut und möchte das jetzt doch horizontal haben. Kann ich das ändern ohne ein neues Menü machen zu müssen?

    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

     body {
   background-color:   #506173;
   font-family:     Arial, sans-serif;
   font-size:         10pt;
   color:             #000000;
   text-align:       center;
   }
 
 ul {
    margin:          0;
    padding:            0;
    list-style:      none;
     width:           133px; /* Width of Menu Items */
    border-bottom:    0px;
   }
    
 ul li {
    position:          relative;
    }
    
 li ul {
    position:          absolute;
     left:             132px; /* Set 1px less than menu width */
    top:                0;
    display:            none;
    }
 
   /* Styles for Menu Items */
 ul li a {
    display:            block;
    text-decoration:    none;
    color:            #777;
    background:      #fff; /* IE6 Bug */
    padding:            0px;
    border:          0px;
    border-bottom:    0;
    }
    
 /* Holly Hack. IE Requirement \*/
 * html ul li { float: left; height: 1%; }
 * html ul li a { height: 1%; }
 /* End */
 
 li:hover ul, li.over ul { display: block; } /* The magic */

    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

     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 <html>
 <head>
 <title>Hier Titel eintragen</title>
 <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
 <link rel="stylesheet" type="text/css" href="css/navi.css">
 <script type="text/javascript" src="drop_down.js"></script>
 </head>
 <body>
 <div>
   <ul>
    <li><a href="#">Button1</a>
      <ul>
        <li><a href="#">Button1a</a></li>
        <li><a href="#">Button1b</a></li>
      </ul>
    </li>
    <li><a href="#">Button2</a>
      <ul>
        <li><a href="#">Button2a</a></li>
        <li><a href="#">Button2b</a></li>
      </ul>
    </li>
    <li><a href="#">Button3</a>
      <ul>
        <li><a href="#">Button3a</a></li>
        <li><a href="#">Button3b</a></li>
      </ul>
    </li>
    <li><a href="#">Button4</a>
      <ul>
        <li><a href="#">Button4a</a></li>
        <li><a href="#">Button4b</a></li>
      </ul>
    </li>
    <li><a href="#">Button5</a>
      <ul>
        <li><a href="#">Button5a</a></li>
        <li><a href="#">Button5b</a></li>
      </ul>
    </li>
    <li><a href="#">Button6</a>
      <ul>
        <li><a href="#">Button6a</a></li>
        <li><a href="#">Button6b</a></li>
      </ul>
    </li>
   </ul>
 </div>
 <?php
 
 ?>
 </body>
 </html>

    Ich hoffe ihr könnt mir ein bisschen helfen.
    Danke schon Mal!
     
    MfG
    Bl4cky
  2. 06.09.05 16:39 #2
    Maik Tutorials.de Gastzugang
    Mit der CSS-Eigenschaft display: inline lassen sich Listen- / Navigationspunkte horizontal ausrichten:
    Code :
    1

    li { display: inline; }
    Siehe auch Listamatic: Simple horizontal list

    Da du eine verschachtelte Liste verwendest, empfehle ich dir Listamatic2: nested list options mit weiteren Demos.
     
  3. 06.09.05 16:55 #3
    Avatar von Blackylein
    Blackylein Blackylein ist offline Mitglied Brokat
    Registriert seit
    Jan 2005
    Ort
    Österreich
    Beiträge
    375
    und wo genau müsste ich das in meiner CSS Datei ändern? bin momentan ein bisschen ratlos

    danke
     
    MfG
    Bl4cky
  4. 06.09.05 17:11 #4
    Maik Tutorials.de Gastzugang
    Code :
    1
2
3
4
5
6
7
8
9

    ul li a {
    display:            [b]inline[/b];
    text-decoration:    none;
    color:            #777;
    background:      #fff; /* IE6 Bug */
    padding:            0px;
    border:          0px;
    border-bottom:    0;
    }
     
  5. 06.09.05 17:51 #5
    Avatar von Blackylein
    Blackylein Blackylein ist offline Mitglied Brokat
    Registriert seit
    Jan 2005
    Ort
    Österreich
    Beiträge
    375
    das scheint nicht zu funktionieren

    das Bild zeigt vorher (links) - nachher (rechts)
    Miniaturansicht angehängter Grafiken Miniaturansicht angehängter Grafiken vertikales in horizontales Menü verwandeln-navi.jpg  
     
    MfG
    Bl4cky
  6. 06.09.05 18:09 #6
    Maik Tutorials.de Gastzugang
    Kann ja auch nicht:

    Code :
    1
2
3
4
5
6
7

    ul {
         margin:                         0;
         padding:                        0;
         list-style:                 none;
     width:                          [b][color=red]133px[/color][/b]; /* Width of Menu Items */
         border-bottom:          0px;
   }
     
  7. 06.09.05 18:18 #7
    Avatar von Blackylein
    Blackylein Blackylein ist offline Mitglied Brokat
    Registriert seit
    Jan 2005
    Ort
    Österreich
    Beiträge
    375
    glaub mir, ich stell mich nicht absichtlich so dumm, aber was genau muss ich daran ändern?
     
    MfG
    Bl4cky
  8. 06.09.05 18:22 #8
    Maik Tutorials.de Gastzugang
    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

    body {
   background-color:   #506173;
   font-family:                Arial, sans-serif;
   font-size:                  10pt;
   color:                          #000000;
   text-align:                 center;
   }
 
 ul {
         margin:                         0;
         padding:                        0;
         list-style:                 none;
     [b]width:                          100%[/b]; /* Width of Menu Items */
         border-bottom:          0px;
   }
 
 ul li {
         position:                   relative;
         [b]display: inline;[/b]
         }
 
 li ul {
         position:                   absolute;
     left:                           132px; /* Set 1px less than menu width */
         top:                                0;
         display:                        none;
         }
 
   /* Styles for Menu Items */
 ul li a {
         [b]display:                        inline;[/b]
         text-decoration:        none;
         color:                          #777;
         background:                 #fff; /* IE6 Bug */
         padding:                        0px;
         border:                         0px;
         border-bottom:          0;
         }
 
 /* Holly Hack. IE Requirement \*/
 * html ul li { float: left; height: 1%; }
 * html ul li a { height: 1%; }
 /* End */
 
 li:hover ul, li.over ul { display: block; } /* The magic */
     
  9. 06.09.05 18:26 #9
    Avatar von Blackylein
    Blackylein Blackylein ist offline Mitglied Brokat
    Registriert seit
    Jan 2005
    Ort
    Österreich
    Beiträge
    375
    super
    jetzt müsstest du es nur noch hinbekommen, dass die unterpunkte unter dem Menü erscheinen und nicht rechts davon
     
    MfG
    Bl4cky
  10. 06.09.05 19:15 #10
    Maik Tutorials.de Gastzugang
    Sollte so funktionieren:

    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

    body {
   background-color:   #506173;
   font-family:                Arial, sans-serif;
   font-size:                  10pt;
   color:                          #000000;
   text-align:                 left;
   }
 
 ul {
         margin:                         0;
         padding:                        0;
         list-style:                 none;
          border-bottom:          0px;
 
   }
 
 ul li {
         position:                   relative;
         display: inline;
         }
 
 li ul {
         position:                   absolute;
         left:                           0px; 
         top:                                20px;
         display:                        none;
         }
 
   /* Styles for Menu Items */
 ul li a {
         display:                        inline;
         text-decoration:        none;
         color:                          #777;
         background:                 #fff; /* IE6 Bug */
         padding:                        0px;
         border:                         0px;
         border-bottom:          0;
         }
 
 /* Holly Hack. IE Requirement \*/
 * html ul li { float: left; height: 1%; }
 * html ul li a { height: 1%; }
 /* End */
 
 li:hover ul, li.over ul { display: inline; } /* The magic */
    Anmerkung: für den IE-Browser ist Javascript erforderlich, um die Submenüs ein- und auszublenden.

    Sie hierzu auch die genannten Links in deinem Thema Dynamische Navigation.
     
  11. 06.09.05 19:25 #11
    Avatar von Blackylein
    Blackylein Blackylein ist offline Mitglied Brokat
    Registriert seit
    Jan 2005
    Ort
    Österreich
    Beiträge
    375
    he cool, danke
     
    MfG
    Bl4cky
« DIV Höhe wird durch gefloateten DIV beeinflusst? | Parent Div »

Ähnliche Themen

  1. Vertikales Menü mit Submenüs
    Von Denniz im Forum CSS
    Antworten: 4
    Letzter Beitrag: 08.06.09, 22:49
  2. Vertikales Submenü ändern in horizontales
    Von akdesign im Forum Javascript & Ajax
    Antworten: 1
    Letzter Beitrag: 05.06.09, 11:06
  3. Vertikales Pop-Up-Menü
    Von julchen im Forum CSS
    Antworten: 19
    Letzter Beitrag: 18.05.06, 01:42
  4. vertikales Yugop-Menü
    Von steve_hh im Forum Flash Plattform
    Antworten: 9
    Letzter Beitrag: 10.03.05, 17:50
  5. Vertikales Menü
    Von mcbass im Forum Swing, Java2D/3D, SWT, JFace
    Antworten: 1
    Letzter Beitrag: 20.12.04, 09:32