меню, слова притянуты к краям
 

Здравствуйте!



подскажите, пожалуйста, есть меню

<div>
ссылка 1 ссылка 2 ссылка 3
</div>

необходимо чтобы сслыка 1 была притянута к левом краю, сслка 2 к правому, а что заключено между ними, переменное число ссылок было равномерно по середине


спасибо

Алгоритм словами описан тут...
http://javascript.ru/forum/css-html/...-brauzera.html

И даже цена за такое указана... Да простит меня Ultimatum! :)

ksa подшутил ты здорово, Инштейн,

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

Ну если 5000р для тебя шутка... Тогда давай 10т.р... Я не против. :D

Где там таблицы... :blink:

Так вот по той ссылке
http://www.artlebedev.ru/
так всё и сделано. :D Ну + JS конечно...

ksa ну да, там js и таблицы, посмотрите таблицу с id=main_navigation


фокус, что надо дивом. без js,


денег не заплачу конечно же, но могу воодушевляющее веселящее поощрение в твою честь ksa начиркать :yes: Только скажи, мигом! еще в должниках окажешься))

Вот где тут таблицы? :D

<div class="teasers_holder" style="min-width:244px; padding-bottom:0.2em; ">
<div class="teasers" style="width: 200%;">
<div class="teaser" style="width: 7.143%; display: block;">
<div class="teaser" style="width: 7.143%; display: block;">
<div class="teaser" style="width: 7.143%; display: block;">
<div class="teaser" style="width: 7.143%; display: block;">
<div class="teaser" style="width: 7.143%; display: block;">
<div class="teaser" style="width: 7.143%; display: block;">
<div class="teaser" style="width: 7.143%; display: block;">
<div id="del" class="clear"></div>
<div class="teaser" style="width: 7.143%; display: block;">
<div class="teaser" style="width: 7.143%; display: block;">
<div class="teaser" style="width: 7.143%; display: block;">
<div class="teaser" style="width: 7.143%; display: block;">
<div class="teaser" style="width: 7.143%; display: block;">
<div class="teaser" style="width: 7.143%; display: block;">
<div class="teaser" style="width: 7.143%; display: block;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="teaser" style="width: 7.143%; display: none;">
<div class="clear"></div>
</div>
</div>

Такой фокус у тебя не получится...

Я испугался и убежал...

мы говорили про разные вещи, менюшка там на таблицах, контент на js



а у тебя получиться? если получиться - то скинь ссылку на пример, если есть, ведь ты же не предложишь за нее заплатить, а то такой коммерческий ты товаришь, что приходиться переспрашивать)

надеюсь строки, которые ты пишешь ничего не стоят :)

С JS - таки да... :yes:

Совершенно верно. :yes:
Потому как по твоим требованиям работают картинки в "центральной цасти" того сайта, а не меню того сайта.
И в теме, на которую я тебе дал ссылку, сразу про те картинки и спрашивали. ;)

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

Надейся... :D

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


ты мне ответь, однозначно, знаешь или не знаешь. Есть ли решение на css без таблиц и js? И прекратим демагогию насчет бабок

Для вот этого...
Точно нет.

Таки напиши. :D Если оно ничего не стоит...

лады

не это нужно

<div style="text-align:justify;">
    <a href=#>левая</a>
    <a href=#>ссылка</a>
    <a href=#>ссылка</a>
    <a href=#>ссылка</a>
    <a href=#>правая</a>
    <span style="display:inline-block;width:100%">&nbsp;</span>
</div>

Это не во всех версиях браузеров работает... :(
http://htmlbook.ru/css/display

Но + однозначно. :yes:

Спасибо, это как раз то,что нужно

не могли бы Вы растолковать, что здесь делает span

вот выдержка из мануала, непонятно

inline-block Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде тега <img>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный.

А ты убери его и увидишь... ;)

<div style="text-align:justify;">
    <a href=#>левая</a>
    <a href=#>ссылка</a>
    <a href=#>ссылка</a>
    <a href=#>ссылка</a>
    <a href=#>правая</a>
</div>

Теоретически может помочь

<div style="text-align:justify; text-align-last: justify;">
    <a href=#>левая</a>
    <a href=#>ссылка</a>
    <a href=#>ссылка</a>
    <a href=#>ссылка</a>
    <a href=#>правая</a>
</div>

http://htmlbook.ru/css/text-align-last

Но браузеры такого пока не понимают... :(

Для это псевдо элементы есть, а для отстойных браузеров в условных комментариях спан засунуть.

Таки покажи свой вариант... С "псевдо элементами". Кстати что это такое? :)

Ну ты лишний спан добавляешь по тому что text-align:justify; чтоб нормлаьно работал, последний элемент должен переноситься на другую строку поэтому ты и ставишь <span style="display:inline-block;width:100%">&nbsp;</span>

в css 3, как ты уже говорил, для этого ввели специальное свойство text-align-last: justify;"

но поддержка пока плачевна для ie 8 например...

Вместо этого спана можно сделать так например...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>1</title>
<style type="text/css">
.div{
text-align:justify;
font-size:0; 
}
.div>*{
font-size:12px; 
}
.div:after{
content:"";
display:inline-block;
width:100%;
}
</style>
</head>
<body>

<div class="div">
    <a href=#>левая</a>
    <a href=#>ссылка</a>
    <a href=#>ссылка</a>
    <a href=#>ссылка</a>
    <a href=#>правая</a>
</div>





</body> 
</html>

ну псевдо элемент это элемент созданый сss его нет в исходном html. http://specs.operafan.net/css2.1RU/CSS21/generate.html

ksa,


а зачем это делаеться так, через justify , какая задача?

что это за перевод или мануал такой? скаких пор инлайн блоки, картинки в часности, стали флоатами, с каких пор их другие эелменты обтекают?

Не я... :)

Так ты тему-то прочти с самого начала... Там вроде всё понятно написано.

Seva1986, так что такое "псевдо элементы"?

А в каком браузере это нужно смотреть? У меня в ИЕ8 и Опере полная ерунда...

ksa,

пофиксил, а вообще советую нормальными браузерами пользоваться лисой или хромом...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>1</title>
<style type="text/css">
.div{
text-align:justify;
}
.div:after{
content:"";
display:inline-block;
width:100%;
}
</style>
</head>
<body>

<div class="div">
    <a href="#">левая</a>
    <a href="#">ссылка</a>
    <a href="#">ссылка</a>
    <a href="#">ссылка</a>
    <a href="#">правая</a>
</div>

</body> 
</html>

тему я прочитал, но у вас две страници споров идёт, вот я и спросил у тебя, к какой задаче в конце пришли....

если я правильно понял задача сделать ссылки по ширине чтоб были одна спарава другая слева остальные по центру, я такие вещи через display:table, table-cell делаю, так как с justify есть куча недостатков и проблем когда нужно их красивао оформить и тд., но если задача простая просто ссылки распихать, то да justify подойдёт...

Да вообще лучше всё свести к какому-то одному! :lol: Чего действительно разбазариваться...

Х/з как автор... А мне понравился вариант от Pavel M....

Глянул в тех же ИЕ8 и Опере - ничего не поменялось с прошлого раза... :(

Отправил их разработчикам гневное письмо и твоё пожелание
:lol:

как это? я в них проверял... вот этод код, вот так отображаеться... http://clip2net.com/s/1l2ze

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>1</title>
<style type="text/css">
.div{
text-align:justify;
}
.div:after{
content:"";
display:inline-block;
width:100%;
}
</style>
</head>
<body>

<div class="div">
    <a href="#">левая</a>
    <a href="#">ссылка</a>
    <a href="#">ссылка</a>
    <a href="#">ссылка</a>
    <a href="#">правая</a>
</div>

</body> 
</html>

Seva1986, я просто копирую с форума пример, вставляю его в файл и запускаю...

Только что скопировал, проверил, рабоатет, в ie 8-9 опере, лисе, хроме, сафари.

а где автор темы ему блин это не интересно проверить...

Ото и добре... :yes:

так работет у тебя или нет?

Не пробовал... :no:

ksa,


а к чему ты пишешь тогда это всё?

Ты и это хочешь обсудить? :blink:

У тебя в карме правильные слова написаны -

Ну вот видишь как оно... Хоть где-то "правильно написано". :haha: