Найти решение

[zefo]

Господа, помогите пожалуйста найти оптимальное решение:

Есть меню, между линками разделительная полоса (правый бордер), не получается найти элегантное решение что бы после последнего линка разделительной полосы не было...

css:

.mattblacktabs ul{
margin: 0;
padding: 40px 0 0 450px;
font: bold 12px Verdana;
list-style-type: none;
}

.mattblacktabs li{
display: inline;
margin: 0;
}

.mattblacktabs li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px;
border-right: 1px solid white; /*разделитель*/
color: white;
}

.mattblacktabs li a:visited{
color: white;
}

.mattblacktabs li a:hover, .mattblacktabs li.selected a {
background: #003460;
}

html:
<div class="mattblacktabs">
	<ul>
		<li><a href="index.php" class="active">Home</a></li>
		<li><a href="index.php">News</a></li>
		<li><a href="index.php">Solutions</a></li>
		<li><a href="index.php">Download</a></li>
		<li><a href="index.php">Careers</a></li>
		<li><a href="index.php">Contact and register</a></li>
	</ul>
</div>

[Vlad]

1. Добавить класс к последнему пункту, для него указать border-right: none;

2. Если число пунктов фиксированно, то можно добавить в стиле a:nth-child(6) {} или a:nth-last-child(1) {}

3. Лучше a:last-child {}

[psywalker]

Такие вещи решаются по другому немножко. Всем ссылкам ты ставишь разделитель слева, а у первого с помощью :first-child; отменяешь. Это кросс правильное решение. ИЕ6 я в расчёт не беру.

[zefo]

Благодарю.

first-child выглядит предпочтительнее.

А если учитывать динозавров типа 6 IE ?

[psywalker]

А если учитывать динозавров типа 6 IE ?

Тогда экпрешан, либо класс, либо третий вариант, но тут надо уже видеть картину.

[sigma77]

А если учитывать динозавров типа 6 IE ?

Есть еще такой способ. Сдвинуть весь список 1px и обрезать родителем.

http://jsfiddle.net/YPaTK/1/

[zefo]

Спасибо. Варианты с first-child и -1px оба подходят

[psywalker]

А если учитывать динозавров типа 6 IE ?

Есть еще такой способ. Сдвинуть весь список 1px и обрезать родителем.

http://jsfiddle.net/YPaTK/1/

Вот это и был мой третий вариант

[zefo]

Что то у меня не получается first-child применить

http://jsfiddle.net/DqZT8/

То есть видно что определятся правильно, специально поменял шрифт, но border:none; отработать не хочет... А понять почему не могу...

http://jsfiddle.net/DqZT8/1/

[psywalker]

А если так? http://jsfiddle.net/DqZT8/1/

[zefo]

Эмм, вроде изменений то нет. Бордер на месте.

Там видимо update кликнуть надо было ?

Приятный кстати сервис

Edited June 24, 2011 by zefo

[psywalker]

Эмм, вроде изменений то нет. Бордер на месте.

Там видимо update кликнуть надо было ?

Приятный кстати сервис

http://jsfiddle.net/DqZT8/2/

Странно

[zefo]

Вооо спасибки. А то никак

[psywalker]

Вооо спасибки.

Не за чтосики