Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: menu na liscie poziomej - wyśrodkowanie
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
john_doe
Witajcie,
napisałem taki styl
  1. #menu {
  2. width: 990px;
  3. height: 46px;
  4. margin: 0 auto;
  5. background-color: #202020;
  6.  
  7. border: 0px solid red;
  8. }
  9.  
  10. #main-menu {
  11. list-style-type: none;
  12. margin: 0 auto;
  13. padding: 0;
  14. }
  15.  
  16. #main-menu li {
  17. float: right;
  18. padding: 0;
  19. }
  20.  
  21. #main-menu li a {
  22. float: left;
  23. height: 46px;
  24. position: relative;
  25. overflow: hidden;
  26. }
  27.  
  28. #main-menu li a:hover {
  29. border-width: 0;
  30. }
  31.  
  32. #main-menu li a:hover img {
  33. position: relative;
  34. top: -46px;
  35. }
  36.  


używam to w taki sposób np.
  1. <div id="menu">
  2.  
  3. <ul id="main-menu">
  4.  
  5.  
  6. <li>
  7. <a href="#" title="title">
  8. <img src="pics/contact.png" alt="title" border="0"/>
  9. </a>
  10. </li>
  11. <li>
  12. <a href="#" title="title">
  13. <img src="pics/video.png" alt="title" border="0"/>
  14. </a>
  15. </li>
  16. <li>
  17. <a href="#" title="title">
  18. <img src="pics/galerries.png" alt="title" border="0"/>
  19. </a>
  20. </li>
  21. <li>
  22. <a href="#" title="title">
  23. <img src="pics/news.png" alt="title" border="0"/>
  24. </a>
  25. </li>
  26. <li>
  27. <a href="#" title="title">
  28. <img src="pics/home.png" alt="title" border="0"/>
  29. </a>
  30. </li>
  31.  
  32. </ul>
  33.  
  34. </div>


mój div MENU ma długość 990px grafiki dochodzą do prawej strony tego diva a chciałbym na środeczku...

Czadus
Przede wszystkim musisz w nastepujacym stylu usunac #main-menu li a usunac float: left. Dalej, przy tak szerokim menu mogłoby okazać się, że kolejne li wędrują w poziomie obok siebie, chyba, że takie jest zamierzenie. Jeżeli nie, proponuję nadać definicji #main-menu li atrybut o szerokości menu. Jeżeli jednak chciałeś aby kolejne elementy wędrowały w poziomie obok siebie, to wówczas wyśrodkowałbym całość UL, ale nie nadawałbym już w kolejnych elementach flaot: left.

Mam nadzieję, że jasno to wszystko wyjaśniłem.
john_doe
nie rozumiem już 1szego zdania smile.gif zobacz co napisałeś.
seth-kk
jade z pamieci ale tak chyba jest najprosciej dopuki uzywasz <img />
1. style z #menu przesun do #main-menu i dodaj text-align: center
2. wszystko co jest w ul powinno posiadac display: inline;
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.