Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Poziome menu
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
pripriv
Witam!
Na dzień dobry mam mały problem i brak pomysłu jak to rozwiązać.
Na dzien dzisiejszy moje poziome menu wygląda tak:



a chciałbym żeby to wyglądało tak:



  1. <div id="menu_">
  2. <ul>
  3. <li><a href="">Aktualności</a></li>
  4. <li><a href="">Oferta</a></li>
  5. <li><a href="">Cennik</a></li>
  6. <li><a href="">Galeria</a></li>
  7. <li><a href="">Dojazd</a></li>
  8. <li><a href="">Okolica</a></li>
  9. <li><a href="">Kontakt</a></li>
  10. </ul>
  11. </div>


css:
  1. #menu_ {
  2. background: #000000 url(img/menu.jpg);
  3. position:absolute;
  4. left:118px;
  5. top:208px;
  6. width:739px;
  7. height:36px;
  8. padding: 0 0 0 5px;
  9. font-family: arial;
  10. font-size: 13px;
  11. }
  12.  
  13. #menu_ ul {
  14. list-style-type: none;
  15. padding: 0;
  16. margin-top: 0;
  17. margin-bottom: 0;
  18. width: 100%;
  19. white-space: nowrap;
  20. }
  21.  
  22. #menu_ li {
  23. display: inline;
  24. margin: 0;
  25. padding: 2px 2px 7px 2px;
  26. margin-left: 20px;
  27. width: 10px;
  28.  
  29. }


Czy da się coś z tym zrobić, bo to tak wyglądało? Bo ja nie mam już pomysłu.

Z góry dziękuje za pomoc. Pozdrawiam!
!*!
http://jsfiddle.net/zGe45/ ewentualnie dla li ustawiasz stałą wysokość i dajesz ją też dla a jako line-height.
pripriv
Prawie dobrze, tylko teraz nie wiem jak całe menu przesunąć w lewą stronę by je wyśrodkować w tej elipsie.


  1. <div id="menu_">
  2. <ul>
  3. <li><a href="">Aktualności</a></li>
  4. <li><a href="">Oferta</a></li>
  5. <li><a href="">Cennik</a></li>
  6. <li><a href="">Galeria</a></li>
  7. <li><a href="">Dojazd</a></li>
  8. <li><a href="">Okolica</a></li>
  9. <li><a href="">Kontakt</a></li>
  10. </ul>
  11. </div>

  1. #menu_ {
  2. background: #000000 url(img/menu.jpg);
  3. position:absolute;
  4. left:118px;
  5. top:208px;
  6. width:739px;
  7. height:36px;
  8. padding: 0 0 0 5px;
  9. font-family: arial;
  10. font-size: 13px;
  11. }
  12.  
  13. #menu_ ul {
  14. list-style-type: none;
  15. margin:0;
  16. padding:0;
  17. }
  18.  
  19. #menu_ li {
  20. float:left;
  21.  
  22. padding:2px;
  23. padding-left:5px;
  24. padding-right:5px;
  25. border-right:1px solid red
  26.  
  27. }
  28.  
  29.  
  30. #menu_ ul li a{
  31. color:#000;
  32. font-weight:bold
  33. }
!*!
jak strona ma stałą szerokość, to przez margin, albo zamień float, na display:linline dla li, a #menu_ daj z text-align:center, lub dla ul, margin:0 auto.
http://jsfiddle.net/zGe45/2/
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.