для чего здесь float:right? достаточно указать display: inline; и будет нормально отображаться

посмотрите здесь http://htmlbook.ru/ и многие вопросы отпадут сами собой

хтмлбук.ру мне уже по ночам снится...

float:right - мне нужен для выравнивая этой строки по правому краю.
(в других местах мне будет нужно float:left)

ради теста убрал сейчас float:right - порядок восстановился, но теперь нужно придумать костыль для «выровнять справа».

забыл написать: если нужно список выровнять по правой стороне, то его нужно выравнивать другим способом

каким ? :)

выравнивайте сам список - UL? а не его элементы LI

.main_menu ul { float:right; }
? не проканало

Это именно из-за float

не проканало. не ушло вправо

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

я так и делал :)
и все работало. и везде одинаково.

но на лоре мне сказали, что это не Ъ и так делает только быдло
вот хочу исправить :)

а оборачивать список в див... уж вариант с таблицей проще был

.main_menu {text-align: right;}

если не работает, то можно ссылку на страничку, так как там что-то мешает

//shrub

А что там не так, кроме того, что контакты сползли на вторую строку и иконки соцсетей спрятались под основным блоком?

.main_menu ul {} это неправильно, надо так .main_menu {}

Попробуйте засунуть <ul> в <div style='float:right;'>

.main_menu ul подразумевает что в теге с классом main_menu есть список ul, а в вашем случае это не так поэтому либо просто .main_menu либо ul.main_menu

>> .main_menu ul {} это неправильно, надо так .main_menu {}

спасибо :) прокатило

А что там не так, кроме того, что контакты сползли на вторую строку и иконки соцсетей спрятались под основным блоком?

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

Попробуйте засунуть <ul> в <div style='float:right;'>

да у меня и были подобные костыли :) хочу исправить

> но на лоре мне сказали, что это не Ъ и так делает только быдло

«Он не нюхает клей, Он не курит траву, Он уделает любого теоретика кунг-фу»

Зато оборачивание дивами более кроссбраузерно и дуракоустойчиво. И потом CSS'ом гибче подкручивается.

а список таблицей делать фу, не потому что «неправильно», а потому что заколебаешься его потом настраивать

а будет ли возможно делать вроде:
{ display: block; text-indent: 150px; text-align: left; }

?)
\ушел проверять

теперь обратите внимание на то, что у вас

#header_index_2 {
    padding: 0 0 0 30px;
    width: 610px;
}

Хмм... ну в ишаке, опере, фф, хроме - вроде одинаково рисуется.
и табличка на хтмлбук говорит что одинаково
вообще Конкретно тут - это костыль. и я ег сейчас буду убирать..

мееня больше это main_menu a { padding: 0 15px; } интересует

> в некоторых браузерах padding плюсуется к ширине, а в некоторых нет

тут полезно вспомнить Internet Explorer 8 и выше, который может работать в двух режимах сразу («обычный» и «режим совместимости со стандартами») =) Правда, его можно заставить работать в каком-то конкретном режиме с помощью установки специального HTTP-заголовка, уже не помню, какого.

>display: inline; float: right;

/0 Флоат он как бэ™ блок. А ответ уже сказали, как я понимаю.

Такая проблема была только в IE.

CSS3 box-sizing. В МС с 8ой, что ли версии, был -ms-box-sizing.

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

>текс-алигн работает для инлайн элементов а не для блочных

Вообще-то он работает на блочных, но применяется к содержимому.

еще вопрос:

тестовая страничка.
http://studio-artel.ru/_/

фотки (например 3 верхних) вложены в див шириной 610рх. (3 фото по 203рх шириной). бордер=0.

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

а сейчас это див и список в нем
и возникла проблема, даже при ширине в 610рх (+1 запасной от 203х3) в ряд фото не влазят.
и не влазят даже в 615. а только в 620 и 630. причем в последнем случе расстояние меж фото не зависит от того какая ширина дива.

код:
[code]
.main_menu2 { display: block; text-align:right; }
.main_menu2 li { display: inline; }

#header_index_1 { width: 620px; height: 197px; margin: 0 auto; }

      <div id=«header_index_1»>
         <ul class=«main_menu2»>
            <li><a href=«/service/wedding/» title=«»><img src=«images/menu_1.png» border=«0» alt=«» /></a></li>
            <li><a href=«/service/family/» title=«»><img src=«images/menu_2.png» border=«0» alt=«» /></a></li>
            <li><a href=«/service/photosession/» title=«»><img src=«images/menu_3.png» border=«0» alt=«» /></a></li>
         </ul>
      </div>
[/code]

что сказать то хотел:
как заставить в списке фото прижаться друг к другу без зазора?
мне это нужно чтоб иначе расположить эти фотки. типа с наложением друг на друга.

facepalm спископроблемы. ХЗ. запасся чипсами, жду продолжения )))

а по делу есть что сказать?)))

«Скрути» все li в одну строку друг за другом - получишь результат.

// mx64

Also, если не хочется так, то:

http://stackoverflow.com/questions/241512/best-way-to-manage-whitespace-betwe...

// mx64

хрень какаяо-то.. прописал их все в одной строке - и все ок.
как вообще такие костыли работают

В режиме отображение инлайн li будут обрабатываться как слова. В них пробелы схлопываются в один. Соответственно...

Вообще, конечно, маразм.

«Пробелы» в смысле не только сам символ пробела.

// mx64

пасиба за наводку. сейчас буду тестить.
костыль то хоть кроссбраузерный ?

Да хрен его знает, вероятно. По мне так проще в одну строку написать.

// mx64

В треде потерялся, но вот этого:

.main_menu { text-align: right; } .main_menu li { display: inline; }

достаточно.

это мы вчера выяснили :) теперь вопрос как между картинок не делать отступов)

http://www.linux.org.ru/jump-message.jsp?msgid=6123026&cid=6125857

маржыны в минус и ваш код засияет ещё лучше. Зачем таблицу убрал? Хочешь делать правильно - выучи это правильно

да пробовал их отрицательными. не прокатило

учи матчасть!

float автоматом делает display:block

как догадался картинки в список вогнать и разместить их в линию? Кто подсказал? Списки же не для этого предназначены. Как варианты: картинки в двух таблицах (для любителей старины), картинки со стилем взаимного наложения(маржын в минус) в блоке - они ж инлайн, картинки каждая в своем контейнере - для блоков - див, для инлайн - спан

вроде победилось вот так:
.main_menu2 { display: block; }
.main_menu2 li { display: inline; }

.main_menu2 li a, .main_menu2 a:link, .main_menu2 li a:visited
{
display: block;
padding: 0px 5px 0px 0px;
float: left;
margin: 0 -5px 0 0;
}


// mx64
пасиба за ссылку

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

А <div align=right><ul>...</ul></div>?

Два варианта: либо меняешь для li display на block и добавляешь float:right, либо оставляешь display:inline и убираешь _все_ пробелы между </li><li> (в том числе и переносы строк).

Камент касается кода из моего поста.

это идеологически неверно?

Нах?

<ul><li><a><img /></a></li>...</ul>

структуры достаточно. ;)

>align=right

Динозавр в треде!