[css] centrowanie zawartosci <a> Opcje

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

[HTML] pobierz, plaintext 
<div id="droplinetabs1" class="droplinetabs">
<ul>
<li><a href="http://www.dynamicdrive.com/"><span>Start</span></a></li>
<li><a href="http://www.dynamicdrive.com/style/"><span>Oferta</span></a>
  <ul>
  <li><a href="#">Activities 1</a></li>
  <li><a href="#">Activities 2</a></li>
  <li><a href="#">Activities 3</a></li>
  <li><a href="#">Activities 4</a></li>
  </ul>
</li>
<li><a href="http://tools.dynamicdrive.com"><span>O nas</span></a></li>
<li><a href="http://www.javascriptkit.com/"><span>Nasi klienci</span></a>
  <ul>
  <li><a href="#">Traveling 1</a></li>
  <li><a href="#">Traveling 2</a></li>
  <li><a href="#">Traveling 3</a></li>
  <li><a href="#">Traveling 4</a></li>
  <li><a href="#">Traveling 5</a></li>
  </ul>
</li>
<li><a href="http://www.cssdrive.com"><span>Kontakt</span></a></li>
</ul>
</div>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
.droplinetabs{
overflow: hidden;
width: 100%;
height: 29px;
}
 
.droplinetabs ul{
font: bold 10px Arial, sans-serif;
margin: 0;
padding: 0;
width: 100%;
list-style: none;
}
 
.droplinetabs li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform: uppercase;
}
 
 
.droplinetabs a{
float: left;
color: white;
background: #981701 url(leftedge.gif) no-repeat left top; /*default background color of tabs, left corner image*/
margin: 0 7px 0 0;
padding: 0 0 6px 3px;
text-decoration: none;
letter-spacing: 1px;
}
 
.droplinetabs a:link, .droplinetabs a::visited, .droplinetabs a:active{
color: white;
}
 
.droplinetabs a span{
float: left;
display: block;
background: transparent url(rightedge.gif) no-repeat right top; /*right corner image*/
padding: 7px 9px 3px 6px;
cursor: pointer;
}
 
.droplinetabs a span{
float: none;
}
 
 
.droplinetabs a:hover{
background-color: #981701; /*background color of tabs onMouseover*/
color: white;
}
 
.droplinetabs a:hover span{
background-color: transparent;
}
 
/* Sub level menus*/
.droplinetabs ul li ul{
position: absolute;
z-index: 100;
left: 0;
top: 0;
background: #981701; /*sub menu background color */
visibility: hidden;
}
 
/* Sub level menu links style */
.droplinetabs ul li ul li a{
font: normal 10px Arial;
padding: 7px 7px 8px 7px;
padding-right: 8px;
margin: 0;
background: #981701; /*sub menu background color */
}
 
.droplinetabs ul li ul li a span{
background: #981701; /*sub menu background color */
}
 
.droplinetabs ul li ul li a:hover{ /*sub menu links' background color onMouseover. Add rounded edges in capable browsers */
background: #981701;
-webkit-border-radius: 5px; 
-moz-border-radius: 5px;
-khtml-border-radius: 5px; 
border-radius: 5px;
}
[HTML] pobierz, plaintext 

[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]

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

Ten post edytował krzysztof_kf 24.07.2009, 21:14:29