Webmasterpro Forum - Anordnung von li elementen in Menü - Tutorials, Tipps und Tricks für Webmaster auf Webmasterpro.de

Jetzt Mitglied werden

Kostenlos registrieren und die vielen Vorteile der Webmasterpro-Mitgliedschaft nutzen.

Forum - Entwicklung

Info: Der Stern signalisiert, dass neue Beiträge vorhanden sind.

Millionen Professionelle Bilder, ab 0,14 €

Markup (HTML, XML, etc.) und CSS - Forum

Derzeit sind Sie als Gast in unserem Forum aktiv. Für das Schreiben registrieren Sie sich bitte. Unser Forum ist eine Austauschplattform für Webworker zum Kommunizieren, Helfen, Informieren und Hilfe finden. Auf der rechten Seiten finden Sie eine Forenübersicht über alle Bereiche des Webmaster-Forums. Unterhalb finden Sie alle aktuellen Themen.

In diesem Forum sollen begleitend zu unserem CSS Portal und HTML-Bereich konkrete Fragen zu HTML und CSS diskutiert werden. Bitte immer die Suchfunktion nutzen bevor du eine Frage stellst.

Antworten Neues Thema

potassium
Beiträge: 81

PN schreiben
Profil ansehen
User ist offline

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

css

    .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:

HTML

 <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?

Zitieren Melden!

Kevin Purrmann
Beiträge: 18

PN schreiben
Profil ansehen
User ist offline

Link zur Antwort auf "Anordnung von li elementen in Menü" von Kevin Purrmann

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.

Zitieren Melden!

potassium
Beiträge: 81

PN schreiben
Profil ansehen
User ist offline

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.

Zitieren Melden!