Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]wyśrodkowanie menu
Forum PHP.pl > Forum > Przedszkole
Michał90
Witam,
Jak wyśrodkować menu, żeby było na środku?

  1. ul#topnav {
  2. margin: 0;
  3. padding: 0;
  4. list-style: none;
  5.  
  6. font-size: 1.1em;
  7. }
  8. ul#topnav li{
  9. margin: 0;
  10. padding: 0;
  11. overflow: hidden; /*--Important - Masking out the hover state by default--*/
  12. float: left;
  13. height:40px;
  14. }
  15. ul#topnav a, ul#topnav span { /*--The <a> and <span> share the same properties since the <span> will be a duplicate of the <a> tag--*/
  16. padding: 10px 20px;
  17. float: left;
  18. text-decoration: none;
  19. color: #fff;
  20. background: url(a_bg.gif) repeat-x;
  21. text-transform: uppercase;
  22. clear: both;
  23. width: 100%;
  24. height: 20px;
  25. line-height: 20px; /*--Vertical alignment of text--*/
  26. }
  27. ul#topnav a{ /*--This is basically the hover state of navigation--*/
  28. color: #555;
  29. background-position: center bottom;
  30. }
  31. ul#topnav span{ /*--Default state of navigation--*/
  32. background-position: center top;
  33. }
  34. #men {
  35.  
  36. width: 100%;
  37. height: 40px;
  38. background: url(a_bg.gif) repeat-x;
  39. }


  1. <div id="men">
  2. <ul id="topnav">
  3. <li><a href="#">Home</a></li>
  4. <li><a href="#">Services</a></li>
  5. <li><a href="#">Portfolio</a></li>
  6. <li><a href="#">Blog</a></li>
  7. <li><a href="#">About</a></li>
  8. <li><a href="#">Contact</a></li>
  9. </ul>
  10. </div>


Tak to wygląda:
askone
  1. #topnav { margin: 0, auto;}


Powinno pomóc smile.gif
Michał90
niestety nie pomogło sad.gif
askone
A więc:
  • Masz gdzieś to wystawione?
  • Jeśli nie to jak wrócę do domu a nikt w międzyczasie Ci nie pomoże, wrzucę kod do pliku i sprawdzę dokładniej...


Chociaż wolałbym pierwsze smile.gif
Michał90
No to proszę smile.gif
menu
askone
  1. ul#topnav {
  2. margin: 0 auto;
  3. padding: 0;
  4. list-style: none;
  5. font-size: 1.1em;
  6. width: 650px;
  7. height: 40px;
  8. }


Przepisywałem z Firebuga, mam nadzieję że niczego nie pominąłem smile.gif
sunpietro
a porównaj sobie z tym artykułem: wyśrodkowanie menu
t4keda
Temat już był
Temat: %5BCSS%5D wysrodkowanie listy
krzysztof_kf
dodaj dla głównego selektora szerokość całego menu plus dodaj wtedy .

  1. margin: 0 auto;
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.