Separator (pionowa kreska rozdzielająca nazwy w menu)

[sylwekb]

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.

[BeamBear]

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...

[sylwekb]

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.

[BeamBear]

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.

[sylwekb]

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

[KowR]

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.

[sylwekb]

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