Меню.. въпрос.

[dorga]

Здравейте!
Менюто ми е хоризонтално. И между всяко бутонче от него има по чертичка ( border ).
Изглежда така:
| Начало | Начало | Начало | Начало | Контакти

Искам след "Koнтакти" да има чертичка. ( | )

Кодовете в css-a за менюто са ми:
.NavigationLinks li { display:block; float:left; list-style-type:none; }
.NavigationLinks li a { float:left; width:120px; height:46px; text-decoration:none; text-transform:capitalize; color:#fff; font-size:12px; text-align:center; border-left-width:1px; border-left-style:solid; border-left-color:#873D00; }

Какво трябва да се направи, за да излезе чертичка след КОНТАКТИ? Благодаря предварително!

 

[shterev]

.NavigationLinks li a { float:left; width:120px; height:46px; text-decoration:none; text-transform:capitalize; color:#fff; font-size:12px; text-align:center; border-right-width:1px; border-left-style:solid; border-left-color:#873D00; }

Така върши ли ти работа?

 

[bytheway]

Сложи един клас на Контакти и му задай да има чертичка

.contacts-chertichka {
border-right: 1px solid #873D00;
}

Съвет: Също така ще е много добре, ако се научиш да комбинираш стойностите в една декларация.
Например сега както имаш

border-left-width:1px; border-left-style:solid; border-left-color:#873D00;

всичко това може да се напише с няколко символа (както съм направил по-горе)

border-left: 1px solid #873D00;

 

[dorga]

Благодаря ти bytheway. Получи се!
Само, че имам още един въпрос. Искам бутоните и четичките да се центрират в бокса който са. Ето и линк: http://naydenowwdesign.eu/gamemotive
Пробвах с margin: 0px auto; с <div align="center"></div> но не става. Някакви идеи?

 

[shterev]

.NavigationLinks {
padding-left: 40px;
}

Промени стойността за да наместиш менюто

 

[bytheway]

Деликатна работа

За да стане трябва ul елемента да е между div с определена ширина.
Защото в момента и да сложиш div той заема 100% от ширината и няма как да центрираш 100%

Вариант е примерно да сложиш на .NavigationLinks падинг от ляво и дясно, но ти трябва да го изчислиш сам (аз го направих вече де).
Просто добави

.NavigationLinks {
// друг код
padding: 0px 66px;
}

Това ще ти свърши работа (за сега). Странно защо винаги имаш един padding-left:40px на .NavigationLinks.
Горния код ще го презапише на 66px. Общо взето не може да се опише на кратко (пък и може да прави бъг в някой браузър, трябва да тестваш).
Ако прави бъг смени padding на margin, а на padding дай 0px

 

[dorga]

Благодаря ти, bytheway!