Как расширить тег на оставшуюся ширину

[borus]

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

На сайте пытаюсь расширить последний блок li в верхнем меню до конца строки меню. Как правильно это делать?

Я пробовал так

ul#css3menu2>li:last-child{
    width:auto;
    text-align:right;
}

И так:

ul#css3menu2>li:last-child{
    width:100%;
    text-align:right;
}

но последний вариант переносит последний пункт меню на новую строку.

Как правильно это сделать, чтобы слово 38 лет на рынке IT было на правом конце подложки меню?

Edited December 3, 2012 by borus

[Vadimka]

а как сейчас он у тебя, тебя не устраивает? вроде норм, или я не понял толком суть проблемы. как вариант - если пункты меню у тебя не изменятся, не удалятся и не добавятся, задай каждому свой класс или id и подели ширину блока меню на всех, по пиксельно, первый 120px, втолрой 240 и т.д (типа того) будет ровно на всех браузерах (если правильно отступы и рамки высчитаешь и поделишь)

[borus]

а как сейчас он у тебя, тебя не устраивает? вроде норм, или я не понял толком суть проблемы. как вариант - если пункты меню у тебя не изменятся, не удалятся и не добавятся, задай каждому свой класс или id и подели ширину блока меню на всех, по пиксельно, первый 120px, втолрой 240 и т.д (типа того) будет ровно на всех браузерах (если правильно отступы и рамки высчитаешь и поделишь)

в конечном варианте должно быть как на рисунке:

[Vadimka]

ага, увидел) вы вообще свои сайты во всех браузерах тестируете?? opera, chrome, firefox, safari,IE ?? в firefox открывали??)) у меня лично там открылось как вам надо, отсюда и не понял что надо.а вот в других косяки. а всё из за того что фоксе не подключился шрифт и отображается не тот что вы хотели, во первых, подправьте шрифты, сконвертируйте шрифт для всех браузеров, все нужные форматы подключите. а во вторых я сам сталкивался с такой проблемой, к сожаления решить её можно лишь задав каждому элементу списка свою ширину тем самым выровнив всё. это самый кросбраузерный вариант) без js, css3 с поддержкой IE

[borus]

ага, увидел) вы вообще свои сайты во всех браузерах тестируете?? opera, chrome, firefox, safari,IE ?? в firefox открывали??)) у меня лично там открылось как вам надо, отсюда и не понял что надо.а вот в других косяки. а всё из за того что фоксе не подключился шрифт и отображается не тот что вы хотели, во первых, подправьте шрифты, сконвертируйте шрифт для всех браузеров, все нужные форматы подключите. а во вторых я сам сталкивался с такой проблемой, к сожаления решить её можно лишь задав каждому элементу списка свою ширину тем самым выровнив всё. это самый кросбраузерный вариант) без js, css3 с поддержкой IE

на счет кросбраузерности - с этим у меня глухо. Вы кстати как это решаете - устанавливаете кучу браузеров Ie9,ie10,...? Или просто - самые последние?

[Vadimka]

установлены opera, firefox, chrome, safari, IE10 а для IE5-9 у меня IE TEster стоит, программа, там можно посмотреть от 5 до 9 как откроет браузер.а так вообще без всех браузеров тебе по любому не обойтись. на IE6 и ниже конечно можно забивать уже. а вот 7 пока рано.

[borus]

установлены opera, firefox, chrome, safari, IE10 а для IE5-9 у меня IE TEster стоит, программа, там можно посмотреть от 5 до 9 как откроет браузер.а так вообще без всех браузеров тебе по любому не обойтись. на IE6 и ниже конечно можно забивать уже. а вот 7 пока рано.

ясно. благодарю. Есть еще некая browserlab от adobe https://browserlab.adobe.com. удобная штука наверно

Edited December 3, 2012 by borus

[npofopr]

установлены opera, firefox, chrome, safari, IE10 а для IE5-9 у меня IE TEster стоит, программа, там можно посмотреть от 5 до 9 как откроет браузер.а так вообще без всех браузеров тебе по любому не обойтись. на IE6 и ниже конечно можно забивать уже. а вот 7 пока рано.

ясно. благодарю. Есть еще некая browserlab от adobe https://browserlab.adobe.com. удобная штука наверно

В IE можно через его инспектор кода, переключать версии. Так что достаточно обычно последнего, для бытовых задач.

По вашей проблеме, таблицей не хотите воспользоваться? Вместо ваших списков.

А вообще уже несколько таких сообщений было за последний месяц.

Решается это использованием display:table

Если я все правильно понимаю

[borus]

По вашей проблеме, таблицей не хотите воспользоваться? Вместо ваших списков.

когда я вновь начал заниматься сайтостроением, советовали вроде на блоках делать. но если тут правильнее делать на таблицах, то можно.

Joomla по умолчанию выкидывает в ul. Наверно это потребует коррекции php шаблона. Думаю останусь на блоках

Edited December 4, 2012 by borus

[Vadimka]

таблица имеется в виду display: table; у родителя и display: table-cell; у дочерних блоков. div, ul, li будут выстраиваться по типу таблиц, но такой способ не работает в IE ниже 8 версии, а эт не особо хорошо. задать каждому элементу меню свою ширину в сумме равную ширине блока не вариант??

[borus]

таблица имеется в виду display: table; у родителя и display: table-cell; у дочерних блоков. div, ul, li будут выстраиваться по типу таблиц, но такой способ не работает в IE ниже 8 версии, а эт не особо хорошо. задать каждому элементу меню свою ширину в сумме равную ширине блока не вариант??

вариант.

[pashkje]

как вариант :

ul#css3menu2 > li:last-child {

width: 325px;

letter-spacing: 7px; }

[Vadimka]

ul#css3menu2 > li:last-child не работает на IE ниже 8.

[npofopr]

Если у вас что то не работает, то это не значит, что нельзя заставить работать.

[Vadimka]

нахера скриптами страницы перегружать и прочей херью если можно посредством css html всё сделать. тут подрубили скрипт чтоб таблицы видел, тут чтобы псевдокласы, тут ещё что то и в итоге кто то зашёл на стареньком компе через ie на ваш сайт, охерел от тормозов и ушёл с него. надо делать максимально кросбраузерные сайты с минимальным количеством скриптов

[pashkje]

Ну дык, что мешает взять и прописать id этому li и присвоить значение letter-spacing?

Edited December 4, 2012 by pashkje

[Justnewone]

FF 17

[borus]

FF 17

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

Edited December 4, 2012 by borus

[Justnewone]

Вы примерно правильно все делаете, но релайтив и топ вверх вынудит написать еще и маргин-низ: -*. В общем, как-то нелепо, в целом. Поищите тут на форуме "футер внизу экрана". Классика она такая классика...