Forum PHP.pl > Wyśrodkowanie menu, margin 0 auto nie działa

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Wyśrodkowanie menu, margin 0 auto nie działa

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

ABDOO

30.11.2013, 18:38:57

Witam,
mam problem z wyśrodkowaniem menu na stronie: link do strony

Gdy ustawoę marginesy tak jak w kodzie poniżej 0 auto menu zaczyna sie na poczatku strony.
W chwili obecnej jest margines ustawiony na 0 15% ale rozwiazanie to pada gdy strone otwiera sie na mniejszej rozdizelczosci.
Czy ktoś może podpowiedzieć jak to naprawić?
Dodam, że strona stoi na wordpresie i jest wykonana na theme frontier, ale theme znaznie zmodyfikowane...

Kod

#menu-main {width:70%;
    position: absolute;
    top: 105px;
    margin:0 auto;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-color: #00407a;
    border-bottom: 1px solid #4b78a1;
    padding-left: 0px;
    z-index: 20;
}
#menu-main * {
    -moz-transition: all 0.1s ease-out;
    -webkit-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
}

.menu-main {border-top-left-radius: 5px;
    border-top-right-radius: 5px;

    border-left: 0px solid #023266;
    border-right: 0px solid #4878AC;
}
.menu-main li {float: left; position: relative;}

.menu-main > li, .menu-main > ul > .page_item {
    border-right: 0px solid #023266;
    border-left: 0px solid #4878AC;
}

.menu-main > li > a, .menu-main > ul > .page_item > a {border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background: linear-gradient(to bottom, transparent 70%, rgba(0, 0, 0, 0.15) 100%);
    min-width: 12%;
    text-align: center;
}

.menu-main li a {
    display: block;
    padding: 8px 14px;
    color: #FFF;
    font-family: Verdana, 'Roboto Condensed', Helvetica, Arial, Sans-serif;
    font-size: 16px;
    text-shadow: 0 0 2px #222;
}
#menu-main .menu-main li a:hover {
    background-color: #2489d1;
    color: #fff;
    text-shadow: none;
}

#menu-main .menu-main li .active {
    background-color: #2489d1;
    color: #fff;
    text-shadow: none;
}
#menu-main .menu-main > .parent-menu-item > a:after,
#menu-main .menu-main > ul  > .parent-menu-item > a:after {
    content: " \25BE";
}

MountainDew

1.12.2013, 00:44:07

Przy position absolute które stosujesz obecnie:

[CSS] pobierz, plaintext 
#menu-main {
    width: 70%;
    left: 50%;
    margin: 0 0 0 -35%;  /* czyli margin-left = połowa wartości width */
}
[CSS] pobierz, plaintext

Możesz również zrobić tak:

[CSS] pobierz, plaintext 
#menu-main {
    position: static;
    margin: -55px auto 20px auto; /* wartości tutaj dopasujesz sobie wedle uznania */
}
[CSS] pobierz, plaintext

Dodatkowo powinieneś dorzucić clearfix na <ul />

ABDOO

2.12.2013, 01:40:36

Niestety nie zadziałało.
Zamiast tego zmienilam wszystkie width na % i teraz jak zmiejsza się main div, zmniejsza sie też w tym samym stopniu menu.
Pojawił się jednak nowy problem. Rozmiar sidebar pomimo iż jest wyrażony w procentach nie zmienia się wraz ze zmniejszaniem strony i w wyniu tego po pewnym czsie "przeskakuje w dół". Ponownie zwracam się z prośbą o zerknięcie na kod

!*!

2.12.2013, 10:59:41

1. po co Ci position absolute?
2. w jakim celu chcesz mieć te marginesy i inne szerokości względem okna?
3. zainteresuj się RWD i @media w CSS jeśli zależy Ci na wyglądzie strony w innych rozdzielczościach.
4. dla artykułu i sidebara zastosuj display: table-cell

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.