Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] wyśrodkowanie listy
Forum PHP.pl > Forum > Przedszkole
egger
Witam. Chcę, aby lista gornemenu była wyśrodkowana i wyświetlana w pozycji poziomej.

index:
  1. <div id="gornemenu">
  2. <ul class="gornemenu_lista">
  3. <li><a href="?">GŁÓWNA</a></li>
  4. <li>|</li><li><a href="?strona=opinie">OPINIE KLIENTÓW</a></li>
  5. <li>|</li><li><a href="?strona=ofirmie">O FIRMIE</a></li>
  6. <li>|</li><li><a class="active" href="?strona=dojazd">DOJAZD</a></li></ul>
  7. </div><!-- koniec gornemenu -->

style:
  1. ul.gornemenu_lista li {
  2. font-family: book antiqua, sans serif, times new roman;
  3. font-size: 8pt;
  4. letter-spacing: 1pt;
  5. list-style: none none inside;
  6. margin : 0px 5px;
  7. padding: 0px;
  8. float: left;
  9. border: 1px solid white;
  10. text-align: center;
  11. }


Tak to się wyświetla (specjalnie dodałem marginesy):

Widać, że jest przesunięta w lewo.
Próbowałem już chyba wszystkiego, nie daję rady ;(
krzysztof_kf
Kod
ul {
        margin: 0 0 0 50px;
        }
        

li {
    font-family: book antiqua, sans serif, times new roman;
    font-size: 8pt;
    letter-spacing: 1pt;
    list-style: none none inside;
    margin : 0 5px;
    padding: 0px;
    float: left;
    border: 1px solid black;
    text-align: center;
}



</style>
<div id="gornemenu">
<ul>
<li><a href="?">GŁÓWNA</a></li>
<li>|</li><li><a href="?strona=opinie">OPINIE KLIENTÓW</a></li>
<li>|</li><li><a href="?strona=ofirmie">O FIRMIE</a></li>
<li>|</li><li><a class="active" href="?strona=dojazd">DOJAZD</a></li></ul>
</div><!-- koniec gornemenu -->
egger
Cytat(krzysztof_kf @ 25.02.2010, 01:38:19 ) *
Kod
ul {
        margin: 0 0 0 50px;
        }

Tylko właśnie nie chodzi o to, aby ta lista była przytwierdzona ma stałe na lewego boku, ale żeby była wyśrodkowana w divie w którym się znajduje, żebym miał np. możliwość dodawania elementów menu bez ingerencji w css...

Sztuczki w stylu:
  1. margin: 0 auto;
  2. text-align: center;

Nie chcą działać w tym przypadku...
mortus
Może spróbuj
Kod
#gornemenu {
     text-align: center;
}

EDIT:
Widzę, że już próbowałeś... hmm...
thek
Bo centrowanie marginem można robić jedynie dla elementów blokowych. Dlatego margin: 0 auto musisz zrobić dla gornemenu_lista, a nie dla poszczególnych li czy całego gornemenu, które to zawiera dopiero ową listę. No i najważniejsze... By można było tak zrobić, div o id górnemenu MUSI mieć określoną szerokość, bo inaczej przeglądarka nie potrafi w locie obliczyć marginesu po obu stronach dla UL (a może to właśnie UL miało mieć określona szerokość? Pamięć ludzka jest ułomna winksmiley.jpg Ale masz co sprawdzić dzięki temu sam... ), a wtedy margin: 0 auto nie zadziała niestety. Przetestuj to sobie raz nadając temu div szerokość, a raz ja usuwając winksmiley.jpg
egger
Zrobiłem tak jak napisałeś, bez skutku...
Wygląda to tak jakby całe UL miało jakiś ukryty margin left...

  1. #gornemenu {
  2. width: 694px;
  3. margin: 0 0;
  4. padding: 0 0;
  5. ul {
  6. margin: 0 auto;
  7. }
  8. li {
  9. font-family: 'book antiqua', 'sans serif', 'times new roman';
  10. font-size: 19px;
  11. letter-spacing: 1pt;
  12. list-style: none none inside;
  13. margin : 0 5px;
  14. padding: 0px;
  15. float: left;
  16. border: 1px solid white;
  17. text-align: center;
  18. text-transform: uppercase;
  19.  
  20. }
mortus
Musi być albo:
Kod
#gornemenu {
    width: 694px;
    margin: 0 auto;
}
albo
Kod
ul {
     width: 694px;
     margin: 0 auto;
}

Przy czym wyśrodkowany zostanie cały blok menu (ul), natomiast pozycje (li) nadal będą przesunięte do lewej strony tego bloku!
egger
czyli nie da się zrobić tak, żeby ul nie miał ustalonej szerokości?
mortus
Nie da, już od paru lat próbuję i nie wychodzi. Ale jak znajdę sposób, to na pewno dam znać.
egger
Ok, dzięki.

Wyśrodkowanie UL dołączam do listy rzeczy, które powinny być dostępne w CSS (m. in. zmienne).
Jak widać w CSS nie da się zrobić wszystkiego.

Temat można zamknąć.
t4keda
Mam nadzieję, że wybaczycie mi wskrzeszenie tematu po prawie 5 miesiącach, ale ja z rozwiązaniem przychodzę winksmiley.jpg Nie wiem czy problem został już rozwiązany czy też nie (w tym temacie jeszcze nie), ale jako że przesiedziałem nad tym trochę czasu, a mi się udało to się podzielę odkryciem:

  1. <ul id="paging">
  2. <li><a href="p1">1</a></li>
  3. <li><a href="p2">2</a></li>
  4. <li><a href="p3">3</a></li>
  5. <li><a href="p4">4</a></li>
  6. </ul>


  1. #paging{
  2. display: block;
  3. clear: both;
  4. width: 950px;
  5. text-align: center;
  6. }
  7.  
  8. #paging li{
  9. display: inline-block;
  10. }
  11.  
  12. #paging li a{
  13. display: block;
  14. margin-right: 2px;
  15. padding: 0px 5px 3px 5px;
  16. border: #888888 1px solid;
  17. }


Efekt możecie zobaczyć tu: http://www.t4keda.pl (na dole strony)
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.