Wyśrodkowanie i ustylizowanie menu


(Konto Pomocnicze12) #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:



(Michalmatma32) #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.


(manieKMP) #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.


(Kamil Oracz98) #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ć.


(Konto Pomocnicze12) #5

Dziękuję wszystkim za pomoc.

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

Pozdrawiam.

 

PS. Proszę o zamknięcie tematu.


(Szymek) #6

Aby wysrodkowac dodaj atrybut align:center;