[xHTMl/CSS] Poziome menu - wycentrowanie

[Gość]

Jestem w trakcie przebudowy strony, zmieniam m.in. menu z pionowego na poziome, niestety nie wychodzi mi usytuowanie menu po środku diva. Oto jak wygląda kod css dotyczący diva "menu" oraz jego zawartości (bloków):

#menu {

    width: 770px;

    padding: 5px;

    margin: auto;

    overflow: hidden;

    background-color: #181C1F;

}



#menu ul {

    list-style-type:none;

    margin:0 auto;

    }    

    

#menu ul li {

    float:left;

    text-align:center;

    margin:0 1px 0 1px;

    }        

    

#menu ul li a {

    background:url(img/menu.png) no-repeat;

  background-position: 0 0;

    font:12px Tahoma, Arial, Helvetica, sans-serif;

    color:#fff;

    font-weight:bold;

    text-decoration:none;

    width:110px;

    height:24px;

    display:block;

    padding:5px 0 0 0;

    }    

    

#menu ul li a:hover {

    background:url(img/menu.png) no-repeat;

    background-position: 0 -29px;

    color:#fff;

    }

I jeszcze screen jak to wygląda (powinno być po środku):

[Shaker]

Do diva ,,menu" dodaj jeszcze pod diva. Dlaczego się zapytasz, ano dlatego, że samo ,,menu" jest określeniem przestrzeni w której będzie np. ,,menu_inner" zawierające te elementy i do niego zastosuj centrowanie. W moim przypadku zadziałało, ale spróbuj sam to zobaczysz.

[Gość]

Nie za bardzo wiem, o co ci chodzi - najlepiej, jakbyś podał przykład. Zastosowałem centrowanie w kilka różnych sposobów (zauważ, że korzystam z tzw. include w php; poza tym nie wiem, czy w ogóle dobrze to robię, bo niestety jest bez zmian) np.

    <div id="menu">


    <div align="center">

        <?php

            include('div/menu.azz');

        ?>

    </div>


    </div>     <!-- koniec menu -->

Zastanawiam się, czy nie można po prostu wrzucić linijki centrującej (odp. kodu) do tego (pytanie tylko co i czy tak można w ogóle?):

#menu {

    width: 770px;

    padding: 5px;

    margin: auto;

    overflow: hidden;

    background-color: #181C1F;

}

[TatankaYatanka]

Spróbuj zrobić to na odwrót (na mojej stronie działa, co prawda akurat nie odnosiłem tego do menu, ale może i tu się sprawdzi), tj:

<div align="center">

                  <div id="menu">

                                      <!--to co ma być w środku-->

                  </div>

</div>

[Gość]

Niestety i to nic nie zmieniło.

[Zap]

Przede wszystkim nie używaj czegoś takiego jak <div align="center"> - po to masz css, żeby takich kwiatków do kodu nie pakować.

Druga rzecz (mam wrażenie, że juz to tutaj kiedyś pisałem, chyba nawet tobie =] ) - żeby wyśrodkować jeden element w drugim, child, cyzli ten element podrzędny musi mieć określoną szerokość.

zakładając taki markup:

<div id="wrapper">

    <ul id="menu">

        <li><a href="#">menupos1</a></li>    

        <li><a href="#">menupos2</a></li>    

        <li><a href="#">menupos3</a></li>    

        <li><a href="#">menupos4</a></li>    

        <li><a href="#">menupos5</a></li>    

    </ul>

</div>

styl będzie wyglądał mniej więcej tak:

#wrapper{

    width:             960px;

    background-color:     #CCC;    

    overflow:            hidden;

}


ul#menu{

    list-style:            none;

    margin:            0 auto;

    width:            XXXpx << o tym mówię, tutaj wpisujesz szerokość swojego menu - i nie ma innej opcji jak to po prostu policzyć (szerokość każdej pozycji menu + paddingi + marginy)

    background-color:    #993;

    overflow:            hidden;

}


ul#menu li{

    float:             left;

    padding:             0px 10px;

}

[Gość]

No dobra, szerokość wpisałem, resztę uzupełniłem/pozmieniałem, nieco się zmieniło (jest teraz idealnie po lewej stronie, wcześniej był taki odstęp do lewej) ale po środku wciąż nie jest. Nie bardzo wiem co w tym kodzie powoduje, że powinno być po środku (bo domyślnie jest przecież po lewej.. albo ja źle rozumuję) - twierdzisz, że wpisanie odp. szerokości menu.. kombinowałem na różne sposoby i nie wiem czemu, ale kompletnie nic się nie zmieniało. Chodzi o sumę każdej pozycji menu (w sumie są tam na razie 4 takowe) + paddingi i marginesy? Dodałem, wpisałem.. bez zmian.

[Zap]

Masz tą stronkę w takiej wersji na jakimś serwerze, ewentualnie możesz gdzieś wrzucić css + html?

A wyśrodkowanie powoduje, a przynajmniej powinno to:

margin: 0 auto;

Czyli margines 0 w dla dołu i góry, oraz marginesy automatyczne dla strony lewej i prawej, względem brzegów elementu nadrzędnego.

[Gość]

Pomogło tak jak mi przysłałeś odpowiedź na PW text-align: center; w #menu ul. Dzięki za pomoc! Temat do zamknięcia.