Skocz do zawartości
  • Przeglądający   0 użytkowników

    Brak zarejestrowanych użytkowników, przeglądających tę stronę.

Devzan

Linki w blokowej liście ul li, jak należy ją rozpisać?

Promowane odpowiedzi

Devzan    27

Witam. Mam sobie nawigację zrobioną w ul i li: 

<div id="nav">
				<ul>
					<li><a href="#">Strona główna</a></li>
					<li><a href="#">Oferta</a></li>
					<li><a href="#">Cennik</a></li>
					<li><a href="#">Kontakt</a></li>
					<li><a href="#">Galeria</a></li>
				</ul>
</div>

Dla hoverów linków chcę dać kolor tła. Dlatego muszę ustawić paddingi (lub marginy? Tu też nie jestem pewny). I teraz zastanawiam się, jak najpoprawniej będzie w CSS to zrobić. Jakiś display block na pewno, paddingi i marginy - pytanie, które z nich, i gdzie? W ul? Ul > li? Czy ul > li > a? A może w każdym z tych? 

 

Jakby ktoś nie kumał o co mi chodzi, to screeny.

Normalny link:

jWest0S.png

Po najechaniu (hover):

oKaDCPe.png

 

Na ten moment zrobiłem to tak, na bank źle. 

#nav > ul {display:inline;list-style:none;}
#nav > ul > li {display:inline-block;padding:10px 10px;margin:0px 5px;}
#nav > ul > li > a {color:#402D1A;text-decoration:none;padding:10px 10px;}
#nav > ul > li > a:hover{color:#fff;text-decoration:none;background-color:#604428;border-radius:5px;}

 

Edytowane przez Devzan

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
Salva    3,293

Kolor tła zmieniasz za pomocą background-color albo samego background... Po co paddingi i/lub marginy, skoro masz menu w wersji "button"?

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
Michael    1,226
11 minut temu, Salvation napisał:

Kolor tła zmieniasz za pomocą background-color albo samego background... Po co paddingi i/lub marginy, skoro masz menu w wersji "button"?

Wydaje mi się, że chodzi o paddingi powiększające button, więc są potrzebne.

 

Z tego co widzę na oko po kodzie, powinno działać tak jak chcesz.

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
Salva    3,293

Przecież wielkość musi mieć od początku taką samą... Jak to powiększy na hoverze, to mu się to rozjedzie. W hover zmienia z tego co widzę background, color (i dodaje border-radius)

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
Michael    1,226
Przed chwilą, Salvation napisał:

Przecież wielkość musi mieć od początku taką samą... Jak to powiększy na hoverze, to mu się to rozjedzie. W hover zmienia z tego co widzę background, color (i dodaje border-radius)

No tak, dokładnie, czyli, jeżeli chce dodać padding to do 

#nav > ul > li > a
  • Lubię to! 1

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
Devzan    27

Przecież w hoverze nie dawałem paddingów/marginów, tylko właśnie w li i a, żeby się nie rozjeżdżało. To co podesłałem to działało, tylko nie byłem pewny, czy jest to poprawnie rozpisane :P 

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony.


×