Webdesign, Tutorials und mehr - Webmasterpro.de

Anordnung von li elementen in Menü

potassium, am Montag den 08.02.2010 um 13:51:11

Ich hab ein Problem bei einem List-Menü. Ich möchte, dass der Abstand vom linkesten Menü-Item zum Linken Seitenrand gleich dem Abstand des rechtesten Menü-Items zum rechten Seitenrand ist. Also quasi, dass die List-Items zentriert auf der Seite erscheinen.

Hoffe das is halbwegs klar rübergekkommen.

CSS lautet

 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

    .menu {
       border:1px solid #000;
      width: 100%;
      margin: 1em 0;
      padding: 0px 0.5em;
      background: #fff none;
      list-style-type: none;
     margin-left:auto;
     margin-right:auto,
     text-align:center;
    }
    .menu ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }
     .menu li {
      margin: 0;
      padding: 0;
      float: left;
      text-align: center;
      background: #eee none;
      text-align: center;
    }
    
   .menu {
      padding: 0;
      background: #fff none;
    }
    .menu li {
      width: 12em;
      margin-right: 1em;
      background: #eee none;
      text-align: center;
    }
    .menu a {
    position: relative; 
    height:2.5em;
     display: block;
     width: 100%;
     text-decoration: none;
    }
    .menu a:hover {
      /*background: #ff9 none;*/
      background: #A81919 none;
     color:#FFF;
    }
    

Das entsprechende HTML lautet:

1
2
3
4
5
6
7
8

 <div ><ul class="menu "><li><a href="index.php?lid=1" >News</a></li>
<li><a href="index.php?action=1&amp;lid=2" >Aktion1</a></li>
<li><a href="index.php?action=2&amp;lid=3" ><span class="activemenu">Aktion1</span></a></li>
<li><a href="index.php?action=3&amp;lid=4" onclick="open_popup(this.href);return false;">Hilfe</a></li>
<li><a href="index.php?action=4&amp;lid=6" >Feedback</a></li>
<li><a href="login.php?action=5&amp;lid=5" >Abmelden</a></li>
<li><a href="statistics.php?lid=7" onclick="open_popup(this.href);return false;">Statistik</a></li>
</ul></div>

Habt ihr Ideen?

Kevin Purrmann, am Montag den 08.02.2010 um 15:15:42

Also sozusagen ne horizontale Menüleiste oder?

Da gibt es doch hier auf WMP den ein oder anderen Artikel. Als Denkanstoß würde ich dem ul irgendwie nen margin: auto 0 geben. Oder nen DIV drum wrappen und den zentrieren. Wichtig ist noch, dass der letzte Listenpunkt kein Margin oder Padding nach rechts haben darf. Das solte genügen.

potassium, am Montag den 08.02.2010 um 15:40:49

Das Prob ist eher, dass das das ul über die ganze Seitenbreite geht. Hab jetzt die ul-Breite auf die Breite der li angepasst. Und margin-left: auto sowie margin-right:auto; hinzugefügt.

Das ist zwar nur ein workaround aber funktioniert derweil. Vllt findet ja noch jemand eine hübschere Lösung.

Gameplorer, am Mittwoch den 10.02.2010 um 16:52:44

Wenn du dem ul eine width von 100% gibst, geht es immer über die gesamte Breite.

Probier es mal mit einer festen Größe, z.B. width:200px - dann wird es gehen.