Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Wyśrodkowanie menu
Forum PHP.pl > Forum > Przedszkole
Joshio
Mam problem z wyśrodkowaniem menu. Jak zrobić aby menu było na środku? - teraz zaczyna się od lewej strony:

  1. <nav id="mainmenu">
  2.  
  3. <ul>
  4. <li>Home</a></li>
  5. <li><a href="#">Wyposażenie</a></li>
  6. <li><a href="#">Pracownicy</a></li>
  7. <li><a href="#">Galeria</a></li>
  8. <li><a href="#">Kontact</a></li>
  9. </ul>
  10.  
  11. </nav><!--mainmenu-->


  1. #mainmenu{
  2. background-image: url(../images/menu.png);
  3. font-family: 'source_sans_proregular';
  4. text-transform: uppercase;
  5. height:71px;
  6. font-size:22px;
  7. color:#2f2f2f;
  8. }
  9.  
  10. #mainmenu ul{
  11. padding: 24px 0 0 20px;
  12. }
  13.  
  14. #mainmenu ul li{
  15. margin: 0 10px 0 10px;
  16. float: left;
  17. }


Wygląda to tak a chce aby było na środku
b4rt3kk
Dopisz w css:

  1. #mainmenu ul{
  2. padding: 24px 0 0 20px;
  3. margin: auto;
  4. }


Może nie działać pod IE, należy wtedy użyć dla elementu nadrzędnego text-align: center;
Joshio
Właśnie w ten sposób nie działa :/ już próbowałem wcześniej.
b4rt3kk
Cytat(Joshio @ 10.01.2013, 23:18:33 ) *
Właśnie w ten sposób nie działa :/ już próbowałem wcześniej.


Zapomniałem jeszcze o jednej istotnej kwestii:

  1. #mainmenu ul{
  2. padding: 24px 0 0 20px;
  3. margin: auto;
  4. display: inline;
  5. }
Joshio
Niestety ale ten sposób też nie działa :/ tworzenie dodatkowych div'ow też nic nie dało...

/Edit...

Znalazłem sposób choć nie jest on taki łatwy - wrzucam go tu może się komuś kiedyś przyda

HTML - Bez Zmian

  1. #mainmenu{
  2. background-image: url(../images/menu.png);
  3. font-family: 'source_sans_proregular';
  4. text-transform: uppercase;
  5. height:71px;
  6. font-size:22px;
  7. color:#2f2f2f;
  8. text-shadow:1px 1px #ccc;
  9. width: 100%;
  10. overflow: hidden;
  11. }
  12.  
  13. #mainmenu ul{
  14. padding: 24px 0 0 20px;
  15. list-style: none;
  16. position: relative;
  17. float: left;
  18. display: block;
  19. left: 50%;
  20. }
  21.  
  22.  
  23. #mainmenu ul li{
  24. margin: 0 10px 0 10px;
  25. float:left;
  26. position: relative;
  27. display: block;
  28. right: 50%;
  29. }


Teraz menu jest na środku i zmienia się dynamicznie wraz z dodaniem pozycji
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.