Border-image, Border-height

0

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:

http://img716.imageshack.us/i/87991665.jpg/

0

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.

1 użytkowników online, w tym zalogowanych: 0, gości: 1