Меню 100%

[npofopr]

Помогите сделать вот такое меню


Суть такая, чтобы li автоматом подстраивались под ширину.
Сперва я подумал, что мне подойдет вот такое решение: xiper

Но загвоздка в том, что между li есть бордеры, а том варианте li не стоят в притык.
Вот тут я и остановился. Сделал пока что обычный float: left; width: N%;

Или тут только js? Подскажите js тогда

 

[BaNru]

Ну самое просто и не мучиться - полосочки сделать фоном ))))

 

[npofopr]

Ну ссылки то разных размеров. Фоном никак не угадаешь, куда поставить разделители

 

[BaNru]

Почему? Делаешь резиновое меню по ссылке выше, а потом фоном делаешь полосочки с выравниванием по краю.

 

[npofopr]

Почему? Делаешь резиновое меню по ссылке выше, а потом фоном делаешь полосочки с выравниванием по краю.

Как ты тут фоном положишь?
http://jsfiddle.net/npofopr/kp5vr/

 

[AngelGabriel]

полосочки простаковые по этому думаю пойдет border-left

 

[npofopr]

полосочки простаковые по этому думаю пойдет border-left

Причем тут полосочки?)) Вы посмотрите исходник на jsfiddle, там есть бордеры.
Но li находятся на расстоянии друг от друга, вопрос то в том как убрать эти расстояния между ними. Ну или как бордюры поставить между ними.
Сейчас бордеры стоят совсем не по середите между li

 

[tigra60]

Суть такая, чтобы li автоматом подстраивались под ширину.

А поконкретнее? Кто на ком стоял? Потрудитесь выражать свои мысли яснее!
Каждый пункт меню должен подстраиваться под ширину текста?
Или вся полоска меню должна быть на всю ширину экрана, причем пункты разной ширины, пропорционально размеру текста (типа как ряд таблицы)?

li не стоят в притык.
Вот тут я и остановился.

Зачем останавливаться? Достаточно немножко погуглить.
Промежутки между блоками inline-block браузер вставляет из-за того, что между закрывающим </li> и следующим открывающим <li> есть перенос строки. Вот этот текстовый узел в DOM и приводит к промежутку.
Способы устранения:
1. Если doctype HTML или HTML-4, то просто убираем закрывающие </li>, спецификация это позволяет:

<ul>
<li><a href="#">Пункт 1</a>
<li><a href="#">Пункт 2</a>
<li><a href="#">Пункт 3</a>
</ul>

2. Хитро переносим строчки:

<ul>
<li><a href="#">Пункт 1</a>
</li><li><a href="#">Пункт 2</a>
</li><li><a href="#">Пункт 3</a>
</li></ul>

3. Проктальный способ - используем отрицательные поля (margin)

Ну самое просто и не мучиться - полосочки сделать фоном ))))

Сразу виден подход художника! С точки зрения верстальщика, это полный бред!

 

[npofopr]

А поконкретнее? Кто на ком стоял? Потрудитесь выражать свои мысли яснее!
Каждый пункт меню должен подстраиваться под ширину текста?
Или вся полоска меню должна быть на всю ширину экрана, причем пункты разной ширины, пропорционально размеру текста (типа как ряд таблицы)?

Поясняю.
Нужно резиновое меню, с границами между <li>.
Резиновое как вы понимаете значит, что меню <ul> должен быть на 100% в длину.

Ну да. Получается, что как таблица. Опять же делать для li {table-cell} для IE7+ не пройдет.

С убиранием </li> и переносом у меня кстати не получилось. Вернее, отступов не стало) Но резиновым меню перестало быть.

 

[motek]

С убиранием </li> и переносом у меня кстати не получилось. Вернее, отступов не стало) Но резиновым меню перестало быть.

<ul><li><a href="#">Пункт 1</a></li><li><a href="#">Пункт 2</a></li><li><a href="#">Пункт 3</a></li></ul>

все в одну строчку - отступов не будет
вот Ваш пример в песочнице в одну строчку

Резиновое как вы понимаете значит, что меню <ul> должен быть на 100% в длину.

так он и так на 100% в длину, если не заявлено другое, а вот как пункты должны располагаться?, на картинке в примере меню не на 100%, а посередине...а в песочнице пункты слева, а справа пустое место

 

[Volter9]

Пуф... Вот решение:
Стили:

ul {
padding: 0px;
margin:0px;
font-size: 0;
}
ul > li {
margin: 0px;
padding: 10px;
border: 0;
background: #999;
display: inline-block;
list-style: none;
font-size: 14px;
color: #fff;
}
li.first {
border-radius: 10px 0px 0px 10px;
border-right: 1px solid #000;
}
li.inbetween {
border-right: 1px solid #000;
border-left: 1px solid #eee;
}
li.last {
border-radius: 0px 10px 10px 0px;
border-left: 1px solid #eee;
}

HTML:

<ul>
<li>#1</li>
<li>#2</li>
<li>#3</li>
<li>#4</li>
</ul>

JS:

<script>
var ul, li;
ul = document.getElementsByTagName('ul')[0];
li = ul.getElementsByTagName('li');
var text = document.getElementById('log');
for(var key in li) {
li[key].className = 'inbetween';
}
li[0].className = 'first';
li[li.length-1].className = 'last';
</script>

P.S.: Без JS методов пока не нашел.
Хотя есть идея использовать псевдо-селекторы :before/:after но не уверен в этом решении.

 

[AngelGabriel]

Что за панос

 

[Volter9]

Сразу виден подход художника! С точки зрения верстальщика, это полный бред!

ul {
font-size: 0;
}

li {
font-size: 14px; /* Default */
}

Хитро-жопый способ.

Что за панос

Что именно?

 

[tigra60]

И это решение?

Двойка!

Я все больше склоняюсь к тому, что в данном случае придется таки использовать display:table.
Ну, а для недобраузеров - http://tanalin.com/projects/display-table-htc/

 

[Volter9]

И это решение?

no wrap (body) надо!
http://jsfiddle.net/Tz4n3/

А что с решением вам не понравилось? Опять "CSS на первое место, делай сначала с CSS а если без него никуда то пользуйся JS!"?

 

[AngelGabriel]

Что именно?

Решение твое

А что с решением вам не понравилось? Опять "CSS на первое место, делай сначала с CSS а если без него никуда то пользуйся JS!"?

Перечитай задание.

 

[tigra60]

Нужно резиновое меню, с границами между <li>.
Резиновое как вы понимаете значит, что меню <ul> должен быть на 100% в длину.

Это условие выполнено?

P.S. "Ты, Зин, на грубость нарываешься..."
(В.С. Высоцкий - строка из песни "В цирке")

 

[Volter9]

Это условие выполнено?

Сам бы себе минус поставил. Я смотрел на картинку и сделал по ней. Простите ребята.

 

[AngelGabriel]

еще попытка

http://jsfiddle.net/ozzon91/JE9LZ/

 

[BaNru]

Вот давным давно делал. Не буду скрывать по примеру из xiper
_mirokon.org, _stmebel63.ru, _sigma-air.ru
Для недобраузера фикс, который не тянет, а просто выстраивает по левому краю. Им этого хватит.