jak rozłożyć elementy menu w równych odstępach i pod całej szerokości

  • DevA90

    (@deva90)


    11 lat, 7 miesięcy temu

    Cześć,

    W tej chwili elementy menu (jest ich 6), zaczynają się od lewej strony i końca mniej więcej w 3/4 szerokości paska menu. Jaką komendą zmienić ich rozmieszczenie i sprawić aby były w rownych odstępach i zajmowały całą długość?

    http://www.routeofdreams.com

    Pozdrawiam.

Zobacz 6 odpowiedzi - od 1 do 6 (z 6 łącznie)
  • Moderator Paweł Knapek

    (@adpawl)

    11 lat, 7 miesięcy temu

    np.

    ul#menu-menu-1 { width:100%; }
ul#menu-menu-1 > li { width: 16.66%; }

    Twórca wątku DevA90

    (@deva90)

    11 lat, 7 miesięcy temu

    a nie można zrobić tak, żeby automatycznie dopasowywało? czy za każdym razem jak dodam element do menu muszę przestawiać szerokość?

    .sf-menu
    .sf-menu * { margin: 0; padding: 0; list-style: none; }
    .sf-menu ul { position: absolute; display: none; top: 100%; left: 0; z-index: 10001; }
    .sf-menu > li { float: left; }
    .sf-menu li:hover > ul,
    .sf-menu li.sfHover > ul { display: block }
    .sf-menu a { display: block; position: relative; }
    .sf-menu ul ul { top: 0; left: 100%; }
    .sf-menu { float: left }
    .sf-menu ul { min-width: 160px; *width: 160px; }
    .sf-menu a { zoom: 1 }
    .sf-menu li { position: relative; white-space: nowrap; *white-space: normal; -webkit-transition: background 0.2s; transition: background 0.2s; }
    .sf-menu li:hover,
    .sf-menu li.sfHover { -webkit-transition: none; transition: none; }
    .sf-menu .sf-mega { position: absolute; display: none; top: 100%; left: 0; z-index: 99; }
    .sf-menu li:hover > .sf-mega,
    .sf-menu li.sfHover > .sf-mega { display: block }

    Twórca wątku DevA90

    (@deva90)

    11 lat, 7 miesięcy temu

    @adpawl

    zmieniać trzeba w style? wyżej podałem wycinek dotyczący menu, gdzie wstawić ww. kody?

    Dzięki i pozdawiam.

    Twórca wątku DevA90

    (@deva90)

    11 lat, 6 miesięcy temu

    dyskretnie po cichu ponawiam pytanie:)

    ziemekpr0

    (@ziemekpr0)

    11 lat, 6 miesięcy temu

    może być na końcu style.css, albo pod resztą stylów menu.

    Twórca wątku DevA90

    (@deva90)

    11 lat, 6 miesięcy temu

    dorzucę inny wycinek ze style.css
    /*styling*/

    #site-navigation-wrap { background: #2c2c2c; margin: 0 0 30px; min-height: 45px; border-bottom: 5px solid #02aace; }
    #site-navigation .dropdown-menu li { display: block; float: left; height: 45px; line-height: 45px; }
    #site-navigation .dropdown-menu a { padding: 0 20px; color: #999; font-weight: 700; text-decoration: none; text-align: left; cursor: pointer; }
    #site-navigation .dropdown-menu > li > a:hover,
    #site-navigation .dropdown-menu > li.sfHover > a { color: #fff; }
    #site-navigation .dropdown-menu > .current-menu-item > a,
    #site-navigation .dropdown-menu > .current-menu-item > a:hover { background-color: #02aace; color: #fff; }
    /*drop-down styles*/

    #site-navigation .dropdown-menu ul { padding-top: 5px; }
    #site-navigation .dropdown-menu ul ul { padding-top: 0; }
    #site-navigation .dropdown-menu ul li { background: #2c2c2c; border-bottom: 1px solid rgba(255, 255, 255, 0.08); line-height: 1.4em; height: auto; float: none; display: block; }
    #site-navigation .dropdown-menu ul a { display: block; height: auto; line-height: 1.7em; padding: 10px 20px; margin: 0px; border: 0px; text-transform: none; font-size: 0.9em; font-weight: 700; }
    #site-navigation .dropdown-menu ul li > a:hover { color: #fff }
    #site-navigation .dropdown-menu ul li:last-child { border: none; }

    cały czas nie mogę dojść jak rozłożyć te elementy … proszę o pomoc ekspertów 🙂

Zobacz 6 odpowiedzi - od 1 do 6 (z 6 łącznie)

Temat ‘jak rozłożyć elementy menu w równych odstępach i pod całej szerokości’ jest zamknięty na nowe odpowiedzi.