Wyśrodkowanie i ustylizowanie menu

Dla specjalistów Webmastering
#1

Witam. Chciałbym wyśrodkować moje menu na stronie internetowej i ustawić je tak , że po wejściu na stronie (na różnych komputerach posiadających różną rozdzielczość i różne przeglądarki) wyglądało tak samo i w tym samym miejscu. Żeby stronka mi się tak wyświetlała zastosowałem tabelkę (starą metode pisania stron). Teraz chcę dopasować menu.

CSS :

ul {
position: absolute;
list-style-type: none;
list-style: none;
padding: 0;
margin: 0;
font-size: 18px;
width: 1333px;
height: 34px;
line-height: 28px;
text-align: center;
background-color: #000099;
font-weight: bold;
}

ul > li {
float: left;
background-color: #0099CC;
width: 130;
margin-left: 3px;
margin-top: 3px;
margin-bottom: 3px;
bottom: -200px;
box-shadow: inset 5px 5px 10px #000080;
text-align: center;
}

ul a {
display: block;
color: white;
text-decoration: none;
padding: 0 5px;
text-align: center;
}

ul > li > a:hover {
color: #0033FF;
}

ul > li:hover {
background-color:#EEE;
}

HTML:

<tr id="menu_tab"><td width="85%" align="middle"><ul>
       <li><a href="index.html">Strona główna</a></li>
       <li><a href="hist.html">Historia</a></li>
       <li><a href="bud.html">Budowa</a></li>
       <li><a href="lot.html">Lot</a></li>
       <li><a href="pod.html">Podróż</a></li>
       <li><a href="zad.html">Zadania</a></li>
       <li><a href="gal.html">Galeria</a></li>
       <li><a href="sond.html">Sondaż</a></li>
       <li><a href="gry.html">Sprawdź siebie</a></li>
       <li><a href="ciek.html">Ciekawostki</a></li>
#2

W CSSie w ul musisz zmienić position: absolute** ; na position: center;**.

P.S. Nie powinno się robić tak szerokich menu. Cała strona powinna mieć najlepiej 960px szerokości, żeby wszyscy widzieli ją w całości.

#3

Dla position nie istnieje taka wartość jak “center”, mogą być użyte jedynie: static (domyślne), relative, absolute, sticky (od Fx26 Safari 6.1 z prefiksem -webkit-) lub fixed… center można zastosować do tekstu (np. dla własności text-align).

Jeśli już środkować to menu, to najpierw należałoby jego szerokość zmniejszyć (dla aktualnego, z podanego kodu można dać 839-840px), następnie zmienić margines z margin: 0; na margin: 0 auto;, a na zakończenie usunąć te pozycjonowanie absolutne bo jest bezużyteczne.

#4

Istnieje wartość text-align: center; która wyśrodkowuje tekst w danej linji.

 

 

Polecam przejść na HTML5

 

Kod wyglądał by tak

<header class="navigation">
                <nav><ul>

                    <li><a href="#">Strona Główna</a></li>

                 </ul></nav>
</header>

lecz  

 

 

  width: 130;

 

daj na 

 

  width: 130px;

 

to

 

  display: block;

 

daj na

 

  display: inline-block;

(pozioma lista bloków)

 

polecam

 

też zrobić tak

 

  padding: 0 auto;

 

zostanie automatycznie dostosowane pod każdą rozdzielczością

jeżeli zawartość innych klas które są podpięte pod główną klasę nawigacji będzie taka sama to wszystko będzie się ładnie trzymać.

#5

Dziękuję wszystkim za pomoc.

 Jednak zrobiłem to po swojemu i menu ustawiłem w % .

Pozdrawiam.

 

PS. Proszę o zamknięcie tematu.

#6

Aby wysrodkowac dodaj atrybut align:center;