Ankündigung

Einklappen
Keine Ankündigung bisher.

Horizontales Menü - Unterpunkte zentrieren

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Horizontales Menü - Unterpunkte zentrieren

    Hallo,

    und zwar geht es um Folgendes:

    Ich habe ein horizontales Menü, welches zentriert angezeigt wird.
    Nur leider werden die Unterpunkt nicht zentriert.

    Ich habe schon alles Möglicher versucht das hinzukriegen und schon mehrfach
    alles zerschossen. Darum seit ihr meine letzte Hoffnung

    Hier der Aufbau des Menüs:

    Code:
    <div id="top_navi">
          
    <ul id="_topmenu" class="menu">
        <li class="item-101">
            <a href="/heine/">Blog</a>
        </li>
        <li class="item-102 current active deeper parent">
            <a title="architektur" href="/heine/index.php/architektur">Architektur</a>
            <ul>
                <li class="item-105">
                    <a href="/heine/index.php/architektur/bauen-fuer-kinder">Bauen für Kinder</a>
                </li>
                <li class="item-106">
                    <a href="/heine/index.php/architektur/gesellschaftsbau">Gesellschaftsbau</a>
                </li>
                <li class="item-107">
                    <a href="/heine/index.php/architektur/gesundheitsbau">Gesundheitsbau</a>
                </li>
                <li class="item-108">
                    <a href="/heine/index.php/architektur/industrie-verwaltung">Industrie &amp; Verwaltung</a>
                </li>
            </ul>
        </li>
        <li class="item-103 parent">
            <a href="/heine/index.php/ingenieurbau">Ingenieurbau</a>
        </li>
        <li class="item-104">
            <a href="/heine/index.php/buero">Büro</a>
        </li>
    </ul>
    
    </div>
    und hier das css:

    Code:
    div#top_navi{
            position:absolute;
            top:0;
            height:80px;
            background-image:url('../images/logo.png'), url('../images/transparent.png');
            background-repeat: no-repeat, repeat-x;
            background-position: right top, left top;
            background-color: transparent;
            text-align:center;
            /*background:url("../images/logo.png") no-repeat top right, url("../images/transparent.png") repeat scroll 0 0 rgba(0, 0, 0, 0) */
            width:100%;
            z-index:4444;
            clear:both;
    }
    
    ul#_topmenu{
        list-style-type:none;
        margin-top:20px;
    }
    
    ul#_topmenu li ul{
        position:absolute;
        margin:0 auto;
        list-style-type:none;
    }
    
    ul#_topmenu > li{
        display:inline;
        line-height:30px;
        margin-left:25px;
    }
    
    ul#_topmenu > li:after{
        content:"•";
        color:#909090;
        margin-left:25px;
    }
    
    ul#_topmenu > li:last-child:after{
        content:"" !important;
    }
    
    ul#_topmenu > li > ul > li > a{
        font-size:90%;
    }
    
    ul#_topmenu > li > ul li{
        display:inline;
        white-space:nowrap;
        line-height:20px;
        margin-left:15px;
    }
    ul#_topmenu > li > ul > li:after{
        content:"•";
        color:#909090;
        margin-left:15px;
        font-size:80%;
    }
    
    ul#_topmenu > li > ul > li:first-child{
        margin-left:0 !important;
    }
    
    ul#_topmenu > li > ul > li:last-child:after{
        content:"" !important;
    }    
    
    ul#_topmenu li a{
        line-height:25px;
        color:#909090;
    }
    
    ul#_topmenu li.active > a{
        color:red;
    }
    
    ul#_topmenu li a:hover{
        color:red;
    }
    Wie bekomme ich die Unterpunkte ebenfalls zentriert?
    Anzusehen ist das Ganze hier


  • #2
    Moin,

    also bei mir sind die wie die Hauptmenüpunkt zentriert. Chrome.
    "Mein Name ist Lohse, ich kaufe hier ein."

    Kommentar


    • #3
      Mmh...ist ja komisch.

      Habe das Problem aber jetzt lösen können. So sieht das css jetzt aus:

      Code:
      div#top_navi{
              position:relative;
              padding-bottom:5px;
              padding-top:20px;
              min-height:80px;
              background-image:url('../images/logo.png'), url('../images/transparent.png');
              background-repeat: no-repeat, repeat-x;
              background-position: right top, left top;
              background-color: transparent;
              text-align: center;
              width:100%;
              z-index:4444;
              clear:both;
      }
      
      ul#_topmenu{
          list-style-type:none;
      }
      
      ul#_topmenu li ul{
          position:absolute;
          margin:0 auto;
          list-style-type:none;
      
      }
      
      ul#_topmenu li ul{
          left: 50%;
          margin-left: -630px;
          max-width: 1260px; //der ie macht das natürlich wiedermal nicht-kann man aber auch weglassen
      }
      
      ul#_topmenu > li{
          display:inline;
          line-height:30px;
          margin-left:25px;
      }
      
      ul#_topmenu > li > ul li{
          display:inline;
          line-height:20px;
          margin-left:15px;
      }
      Scheint zu klappen

      Kommentar


      • #4
        Hallöchen,

        da klappt gar nix. Wenn ich mir das mit jsFiddle ansehe, ragen die Unterpunkte links aus dem Viewport heraus.

        Edit: Hier mal ein vernünftiger Ansatz ohne sich mit CSS das Bein auszureißen: Unterpunkte zentrieren.

        Viele Grüße,
        lotti

        Kommentar

        Lädt...
        X