Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] wycentorwanie menu w bloku
Forum PHP.pl > Forum > Przedszkole
Ulysess
witam mam główny blok który ma szerokość 687 px
problem w tym że próbuje zrobić w pozycji poziomej kilka przycisków w poziomie (kilka czyli różna ilość w zależności od zakładki)
chciałbym aby przyciski były odsunięte od siebie o kilka px a całość była wyśrodkowana (w pozycji poziomej oczywiście)
  1. div.menu_bookmark {
  2. -webkit-border-radius: 10px;
  3. -khtml-border-radius: 10px;
  4. -moz-border-radius: 10px;
  5. -border-radius: 10px;
  6. border-radius: 10px 10px 0px 0px;
  7. background-color: #ad7a4f;
  8. width: 110px;
  9. height: 20px;
  10. text-align: center;
  11. padding: 5px;
  12. margin-top: 20px;
  13. margin-bottom: 20px;
  14. margin-left: 5px;
  15. margin-right: 5px;
  16. float: left;
  17. display: block;
  18. }
  19.  
  20. div.means_menu {
  21. text-align: center;
  22. width: 100%;
  23. height: 50px;
  24. display: block;
  25. background-color: red;
  26. margin: 0px auto;
  27. }
  28.  
  29. <div class="means_menu">
  30. <div class="menu_bookmark"><a class="normal" href="a.html">a</a></div>
  31. <div class="menu_bookmark"><a class="normal" href="b.html">b</a></div>
  32. <div class="menu_bookmark"><a class="normal" href="c.html">c</a></div>
  33. <div class="menu_bookmark"><a class="normal" href="d.html">d</a></div>
  34. <div class="menu_bookmark"><a class="normal" href="e.html">e</a></div>
  35. </div>
  36. </div>
b4rt3kk
Opakuj całość w diva, daj mu odpowiednią szerokość i w css nadaj mu margin: auto.
Ulysess
:| a może Ja tak nie zrobiłem ?...
b4rt3kk
Niestety nie:

  1. div.means_menu {
  2. width: 100%;
  3. }


co oznacza, że jest takiej szerokości co element nadrzędny w którym go umieszczasz.
Ulysess
nie rozumiem...
mam blok A -> means_menu
do którego wstawiam kilka (zaleznie od podstrony) bloków B

chce aby bloki B w pozycji poziomej były wycentrowane poziomo względem strony...



w czerwonym DIV chce menu wycentrować ..
b4rt3kk
  1. <div class="means_menu">
  2. <div class="makeItCenter">
  3. <div class="menu_bookmark"><a class="normal" href="a.html">a</a></div>
  4. <div class="menu_bookmark"><a class="normal" href="b.html">b</a></div>
  5. <div class="menu_bookmark"><a class="normal" href="c.html">c</a></div>
  6. <div class="menu_bookmark"><a class="normal" href="d.html">d</a></div>
  7. <div class="menu_bookmark"><a class="normal" href="e.html">e</a></div>
  8. </div>
  9. </div>


css:

  1. .makeItCenter {
  2. margin: auto;
  3. width: 600px; /* koniecznie musisz wpisać szerokość */
  4. }


Ulysess
stosuje się do Twojej porady i dalej nie działa :|..
http://ev18.evuzo.pl/t2.html
lobopol
menu_bookmark wywal float i zmień display na inline-block
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.