Separator (pionowa kreska rozdzielająca nazwy w menu)

Separator (pionowa kreska rozdzielająca nazwy w menu) - Wersja do druku

+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: Separator (pionowa kreska rozdzielająca nazwy w menu) (/thread-separator-pionowa-kreska-rozdzielajaca-nazwy-w-menu)

Separator (pionowa kreska rozdzielająca nazwy w menu) - sylwekb - 25-11-2009

Witam

Męczę się już z tym jakiś czas, jak zrobić w css-ie pionową kreskę, która rozdzielałaby poszczególne elementy menu poziomego Start, kreska pionowa, o firmie kreska pionowa itp. Nie mogę nigdzie znaleźć przykładu.

RE: Separator (pionowa kreska rozdzielająca nazwy w menu) - BeamBear - 25-11-2009

sposobów masz kilka, dwa najpopularniejsze, są takie:
1. Każdy element w poziomym menu zamykasz w jakimś pudełku, a potem temu pudełku nadajesz jednostronny border.
HTML

Kod:
<div id="menu">

<span id="menu1">menu1</span><span id="menu2">menu2</span><span id="menu3">menu3</span>

</div>

CSS

Kod:
#menu1

{

border: none;

}

#menu2, menu3

{

border-left: thin solid #000000;

border-left-width: 1px;

}

Druga metoda - robisz sobie obrazek wysoki na piksel (jeśli chcesz mieć linię oddzielającą jendolitą) lub na dwa (jeśli chcesz mieć kropkowaną) i szeroki na długość elementu menu. Zamalowujesz najbardziej skrajny piksel na kolor który chcesz, a potem - ustawiasz w css taki obrazek jako tło dla elementu menu, z powtarzaniem w osi Y.

Może mi się wydaje, ale ten temat chyba się już pojawił na tym forum...

RE: Separator (pionowa kreska rozdzielająca nazwy w menu) - sylwekb - 25-11-2009

Wielkie dzięki. sposób super działa. tylko chyba z tym borderem odpada bo chciałbym, żeby te separatory były tylko pomiędzy elementami menu,

Start separator O firmie

z border left lub right dodatkowo są na zewnątrz elementu menu

separator Start separator O firmie separator

Szukałem na różnych forach ale nie natrafiłem dlatego napisałem tego posta.

RE: Separator (pionowa kreska rozdzielająca nazwy w menu) - BeamBear - 25-11-2009

dlatego Ci napisałem, żebyś każdy z elementów menu wstawił w osobny pojemnik, np. <span>, nadał każdemu id i dał bordera tylko tym elementom, które są w środku. Więc jeśli masz coś takiego - Start | O firmie | Sklep | Kontakt | Pomoc, to każdy z nich zamykasz w <span> o innym id.

Kod:
<div id="menu">

<span id="menu1">Start</span><span id="menu2">O firmie</span><span id="menu3">Sklep</span><span id="menu4">Kontakt</span><span id="menu5">Pomoc</span>

</div>

Kod:
#menu, #menu1

{

border:none;

}

#menu2, #menu3, #menu4, #menu5

{

border-left: thin solid #000000,

border-left-width: 1px;

}

W ten sposób masz separatory tylko pomiędzy elementami menu, a nie również na jego końcach.

RE: Separator (pionowa kreska rozdzielająca nazwy w menu) - sylwekb - 25-11-2009

A jeśli poszczgólne elementy menu mam wyciągane z bazy, jak wtedy ustawić styl dla każdego z osobna?

RE: Separator (pionowa kreska rozdzielająca nazwy w menu) - KowR - 25-11-2009

pętla robisz zmienną $i która przed wykonaniem pętli jeszcze raz zostanie zwiększona o 1

$i ++;

I potem w CSSie -> menu1, menu2, menu3, menu4, menu5 itd.

RE: Separator (pionowa kreska rozdzielająca nazwy w menu) - sylwekb - 25-11-2009

Wielkie dzięki, już mam efekt, który chciałem. Big Grin