Witam
Robie menu, w którym jest np 10 guzików. Są jakby sklejone ze soba i tworza taki jeden niebieski pasek i co kilka cm jest wyraz. Chciałbym zeby każdy guzik był oddzielony taką linią |. Więc zrobiłem: border-left:none, border-top:none, border-bottom:none. I teraz taka linia oddziela mi guziki. Ale jak zmniejszyć tą linię by ta linia była krótsza, nie od góry do dołu tylko taka dwa razy krótsza? coś w tym stylu:
Usuń ten border
. Zamiast tego, przygotuj obrazek z tą kreską. Niech to będzie plik PNG o szerokości jednego piksela i wysokości takiej, jaką ma mieć kreska. Niech po prostu przedstawia ten separator ;).
Następnie, ustaw go jako tło dla każdego elementu łącza (lub elementu listy, bo takie menu powinieneś mieć w liście ul
z elementami li
, a dopiero w każdym li
powinieneś mieć a
). Zakładając, że obrazek jest w pliku nav-separator.png
, możesz go ustawić po lewej stronie każdego elementu:
#nav li {
background: url(nav-separator.png) no-repeat left center;
padding: 0 20px; /* przykładowa wartość: 20 pikseli dla poziomego odstępu */
}
Pierwszemu elementowi nadaj klasę first
(jeśli całość ma działać w starszych IE) i usuń mu tło -- w końcu chcemy mieć separator pomiędzy elementami, więc po lewej stronie pierwszego nie powinno być separatora:
#nav li.first {
background: none;
}
Jeśli nie przejmujesz się starym IE, to możesz użyć pseudoklasy :first-child
zamiast klasy .first
.
Oczywiście, selektory w powyższych listingach (np. #nav li
) są przykładowe. Dostosuj je do swojego kodu HTML.