Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css] centrowanie zawartosci <a>
Forum PHP.pl > Forum > Po stronie przeglądarki
dominiq
Witam!

Poniżej kod (zrodlo skryptu to: http://www.dynamicdrive.com/style/csslibra...drop_line_tabs/ ) i pytanie.

Czy jest możliwe wycentrowanie komorek "start", "oferta", etc oraz ponizszej zawartosci, ktora pojawia sie po najechaniu na odpowiedni klawisz?
Niestety, float umozliwia tylko wyrownanie do lewej badz prawej strony, a ja chcialbym, zeby bylo mozliwe wycentrowanie tego wszystkiego...

Bede wdzieczny za odpowiedzi i sugestie.


  1. <div id="droplinetabs1" class="droplinetabs">
  2. <ul>
  3. <li><a href="http://www.dynamicdrive.com/"><span>Start</span></a></li>
  4. <li><a href="http://www.dynamicdrive.com/style/"><span>Oferta</span></a>
  5. <ul>
  6. <li><a href="#">Activities 1</a></li>
  7. <li><a href="#">Activities 2</a></li>
  8. <li><a href="#">Activities 3</a></li>
  9. <li><a href="#">Activities 4</a></li>
  10. </ul>
  11. </li>
  12. <li><a href="http://tools.dynamicdrive.com"><span>O nas</span></a></li>
  13. <li><a href="http://www.javascriptkit.com/"><span>Nasi klienci</span></a>
  14. <ul>
  15. <li><a href="#">Traveling 1</a></li>
  16. <li><a href="#">Traveling 2</a></li>
  17. <li><a href="#">Traveling 3</a></li>
  18. <li><a href="#">Traveling 4</a></li>
  19. <li><a href="#">Traveling 5</a></li>
  20. </ul>
  21. </li>
  22. <li><a href="http://www.cssdrive.com"><span>Kontakt</span></a></li>
  23. </ul>
  24. </div>



  1. .droplinetabs{
  2. overflow: hidden;
  3. width: 100%;
  4. height: 29px;
  5. }
  6.  
  7. .droplinetabs ul{
  8. font: bold 10px Arial, sans-serif;
  9. margin: 0;
  10. padding: 0;
  11. width: 100%;
  12. list-style: none;
  13. }
  14.  
  15. .droplinetabs li{
  16. display: inline;
  17. margin: 0 2px 0 0;
  18. padding: 0;
  19. text-transform: uppercase;
  20. }
  21.  
  22.  
  23. .droplinetabs a{
  24. float: left;
  25. color: white;
  26. background: #981701 url(leftedge.gif) no-repeat left top; /*default background color of tabs, left corner image*/
  27. margin: 0 7px 0 0;
  28. padding: 0 0 6px 3px;
  29. text-decoration: none;
  30. letter-spacing: 1px;
  31. }
  32.  
  33. .droplinetabs a:link, .droplinetabs a::visited, .droplinetabs a:active{
  34. color: white;
  35. }
  36.  
  37. .droplinetabs a span{
  38. float: left;
  39. display: block;
  40. background: transparent url(rightedge.gif) no-repeat right top; /*right corner image*/
  41. padding: 7px 9px 3px 6px;
  42. cursor: pointer;
  43. }
  44.  
  45. .droplinetabs a span{
  46. float: none;
  47. }
  48.  
  49.  
  50. .droplinetabs a:hover{
  51. background-color: #981701; /*background color of tabs onMouseover*/
  52. color: white;
  53. }
  54.  
  55. .droplinetabs a:hover span{
  56. background-color: transparent;
  57. }
  58.  
  59. /* Sub level menus*/
  60. .droplinetabs ul li ul{
  61. position: absolute;
  62. z-index: 100;
  63. left: 0;
  64. top: 0;
  65. background: #981701; /*sub menu background color */
  66. visibility: hidden;
  67. }
  68.  
  69. /* Sub level menu links style */
  70. .droplinetabs ul li ul li a{
  71. font: normal 10px Arial;
  72. padding: 7px 7px 8px 7px;
  73. padding-right: 8px;
  74. margin: 0;
  75. background: #981701; /*sub menu background color */
  76. }
  77.  
  78. .droplinetabs ul li ul li a span{
  79. background: #981701; /*sub menu background color */
  80. }
  81.  
  82. .droplinetabs ul li ul li a:hover{ /*sub menu links' background color onMouseover. Add rounded edges in capable browsers */
  83. background: #981701;
  84. -webkit-border-radius: 5px;
  85. -moz-border-radius: 5px;
  86. -khtml-border-radius: 5px;
  87. border-radius: 5px;
  88. }
Weirdo
Oczywiście, że się da.
Jak? W Twojej sytuacji (kodu nie sprawdzałem, więc nie jest to na 100%) text-align powinien wystarczyć (pamiętaj by A był blokowym elementem), można też spany zrobić blokowe i dać marginesy poziome na auto.
Zwykłe techniki, zwykłe wymagania.
erix
Cytat
(kodu nie sprawdzałem, więc nie jest to na 100%)

Ma opływanie i brak ustawionej szerokości, więc to nie przejdzie.
Weirdo
@erix: wybacz, rzeczywiście nieco źle podszedłem do tematu...

@dominiq przeczytałem dokładniej teraz Twój post i właściwie nie wiem o co Ci chodzi.
Temat -> centrowanie zawartości <a>. Ok, jeśli chodzi o centrowanie zawartości znacznika <a> to byłoby tak jak napisałem...
Tylko, że... skoro nie podałeś kontenerowi zawierającemu to <a> (jego "rodzicowi") szerokości, to width = auto, rodzic jest tak szeroki jak jego dziecko + box model (padding, border, margin).
Zatem ustalenie tych parametrów równymi daje wycentrowanie. I tak jest.

Ale wydaje mi się patrząc dokładniej na kod, że miałeś na myśli wycentrowanie całości (całego menu, czyli całego głównego ul a w wypadku tego zapisu włącznie z div'em poprzedzającym). Nadaj temu div'owi szerokość, w jakiej musi się mieścić w Twoim layoucie i z głowy.

W innym przypadku proszę o dokładny opis o co Ci tak właściwie chodzi i linka do strony na serwerze. Abyśmy operowali na tym samym.

Ew. dostosuj sobie swój kod do tego: http://24ways.org/2005/centered-tabs-with-css
krzysztof_kf
jesli chcesz całą zawartość wycentrowac np. start , menu i pozostałość dopisz do styli podałem całą zawartość do styli ...

Kod
.droplinetabs{
  overflow: hidden;
  width: 100%;
  height: 29px;
  text-align: center;
  }


pozdrawiam ...
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.