HTML, списки, onClick
аа..
на иконке не получится.
разве что самому иконку пририсовывать
на иконке не получится.
разве что самому иконку пририсовывать
Хреново...
Чёрт, столько времени набивал, кучу примеров привёл, и случайно нажал escape...
Как можно получить из
что-то выглядящее, как элемент списка, т.е.:
, НЕ
и НЕ
?
Игрался со стилями, слоями, display:inline и display:block - ничего не выходит...
Как можно получить из
<p>1</p><p>2</p>
что-то выглядящее, как элемент списка, т.е.:
* 1
2
, НЕ
*
1
2
и НЕ
* 1
2
?
Игрался со стилями, слоями, display:inline и display:block - ничего не выходит...
табличка из 2-х колонок как вариант..
Табличка - это изврат.
Неужели никак по-нормальному нельзя сымитировать список?
Неужели никак по-нормальному нельзя сымитировать список?
чем табличка не устраивает?..
Тем, что CSS как раз должен избавить всех от необходимости использовать табицы для дизайна (и оставить таблицы только когда они действительно нужны, для представления табличной информации)
Делать буллет фоном.
Задавать паддинг.
По клику проверять координаты.
Задавать паддинг.
По клику проверять координаты.
CSS как раз должен избавить всех от необходимости использовать табицы для дизайна (и оставить таблицы только когда они действительно нужны, для представления табличнойну раз ты такой правильный, то юзай списки.
А теперь попробуй прочитать тред с начала.
Чёрт, столько времени набивал, кучу примеров привёл, и случайно нажал escape...Ну если сходу, то к примеру вот так можно:
Как можно получить из
<html>
<head>
<style>
p { margin-left: 20px }
</style>
</head>
<body>
fsdfsdfsfdsdfsfdsfsfdsfdsdfsdf
<p><img src="" width="20" height="20" style="margin-left:-20px">wqeqweqwe</p>
<p>wqeqweqwe</p>
<p>wqeqweqwe</p>
<p>wqeqweqwe</p>
<p>wqeqweqwe</p>
fsdfsdfsfdsdfsfdsfsfdsfdsdfsdf
</body>
</html>
Изврат, правда...
Если тошнит от отрицательных марджинов (как меня, к примеру) - пихай в <p> картинки внутрь: в выбранный пункт - с изображением, в остальные - прозрачный гиф 1x1, дальше скрипт...
Это не решение - в том "большом тексте" может лежать всё что угодно, решение должно быть в форме "помещаем тот большой текст в какой-то контейнер/блок, ставим блоку такие-то атрибуты, общему блоку, содержащему * и блок с большим текстом - такие-то".
Типа <div style="чего-то">*<div style="чего-то2">большое содержимое</div></div> - это и будет нормальной реализацией обычного ul.
ul ведь не обращает внимания на то, что у тебя находится в конкретном li, он сдвигает всё сразу.
ЗЫ: Хотя, сейчас подумал, можно попробовать внутренний div сделать display:block и сделать ему margin-left шириной с звёздочку, и margin-top - отрицательный, высотой со звёздочку.
Типа <div style="чего-то">*<div style="чего-то2">большое содержимое</div></div> - это и будет нормальной реализацией обычного ul.
ul ведь не обращает внимания на то, что у тебя находится в конкретном li, он сдвигает всё сразу.
ЗЫ: Хотя, сейчас подумал, можно попробовать внутренний div сделать display:block и сделать ему margin-left шириной с звёздочку, и margin-top - отрицательный, высотой со звёздочку.
АЕ,
действительно так и работает!
ЗЫ: margin:0px для p - просто для удобства, на самом деле можно обойтись и без этого, а во второй div напихать вообще всё, что угодно.
ЗЗЫ: Плохо получается, что приходится рассчитывать на конкретные размеры звёздочки и на то, что текст во втором div-е начинается с margin-top:0px
<style>
p { margin:0px }
div.item1 { display:inline;font-size:16px }
div.item2 { display:block;margin-left:15px;margin-top:-22px; }
</style>
<div class=item1>* <div class=item2><p>123</p><p>456</p></div></div>
действительно так и работает!
ЗЫ: margin:0px для p - просто для удобства, на самом деле можно обойтись и без этого, а во второй div напихать вообще всё, что угодно.
ЗЗЫ: Плохо получается, что приходится рассчитывать на конкретные размеры звёздочки и на то, что текст во втором div-е начинается с margin-top:0px
<div class=item1>* <div class=item2><p>123</p><p>456</p></div></div>
<tr><td>*</td><td>fsdfsdf</td></tr>
Зачем делать стоко мозгоебства, если можно все сделать с помощью таблиц. Один хер div'ов столько же скока и ячеек )
Обьясни.
<tr><td>*</td><td>fsdfsdf</td></tr>
Зачем делать стоко мозгоебства, если можно все сделать с помощью таблиц. Один хер div'ов столько же скока и ячеек )
Обьясни.
Таблицы очень не рекомендуются для вёрстки, сейчас таблицы стоит использовать только для вывода табличных данных (простая таблица - много строк, несколько столбцов, в каждой ячейке - только текст).
А сможешь объяснить, почему?
Потому что CSS ввели, в частности, как раз для того, чтобы не использовать так таблицы.
А можно узнть кто очень не рекомендует?
И если можно пример красивой, грамотной верстки без таблиц.
И если можно пример красивой, грамотной верстки без таблиц.
MSDN?
Хороший пример грамотного использования обеих технологий.
О, отличный пример - дизайн меняется полностью всего лишь заменой css-файла.
Таблицами такого, конечно, не достичь.
Таблицами такого, конечно, не достичь.
ОК, автор конкретного дизайна облажался, и что? Попробуй другой.
Во-первых, это дефолтная страница.
Во-вторых, он не то чтобы облажался. Он плохо обработал нестандартные входы на страницу. Вернее даже данная технология не смогла с ними справиться.
И это при том, что данный сайт, в плане верстки, сложным не является.
Во-вторых, он не то чтобы облажался. Он плохо обработал нестандартные входы на страницу. Вернее даже данная технология не смогла с ними справиться.
И это при том, что данный сайт, в плане верстки, сложным не является.
Что за браузер? И как ты добился такого результата?
ИЕ, нажал кнопочку бэк
У меня не воспроизвелось.
У меня на домашнем тоже 
А на работе спокойно несколько раз подряд сделал.
А на работе спокойно несколько раз подряд сделал.
Кстати
Попробуй выделить какой-нибудь текст на странице.
У меня при этом упорно выделяется менюха с дизайнами.
Попробуй выделить какой-нибудь текст на странице.
У меня при этом упорно выделяется менюха с дизайнами.
В-третьих, суть не в конкретном стиле, а в том, что с помощью стилей реализован полосью весь дизайн страницы, вплоть до положения элементов, в html-е находится только текст, никакой вёрстки.
Таблицами ты ничего подобного не сделаешь.
Таблицами ты ничего подобного не сделаешь.
О этом преимуществе верстки стилями я в курсе.
Не понимаю. А смысл-то в чем? Существуют проекты, требующие возможность менять дизайн каждый день? И что мешает держать весь дизайн в одном файле, в который на сервере делаются необходимые вставки? А без таблиц сколько-нибудь сложный дизайн сделать не удастся в принципе.
А смысл-то в чем?В правильном стиле.
Существуют проекты, требующие возможность менять дизайн каждый день?У меня - нет. Но это не повод писать в кривом стиле, появившемся в те времена, когда ещё не было нормальных возможностей позиционирования, и когда единственным способом позиционирования были таблицы (совершенно для этого не предназначенные).
А без таблиц сколько-нибудь сложный дизайн сделать не удастся в принципе.Наглая ложь.
Кстатида, тоже хотел об этом написать.
Попробуй выделить какой-нибудь текст на странице.
У меня при этом упорно выделяется менюха с дизайнами.
кстати, не первый раз такую "фичу" встречаю.
Существуют классы проектов, в которых это будет полезно. Например сложные веб-проекты уровня документооборота, в которых всяких страниц-шаблонов дофигища.
Сайтостроению это нафиг не нужно.
Сложный дизайн в таких системах не нужен.
Сайтостроению это нафиг не нужно.
Сложный дизайн в таких системах не нужен.
В правильном стиле.
Это не аргумент.
Т.н. "правильный стиль" это твоя точка зрения на вещи. Абсолютом она не является, грамотной аргументации её правильности ты не озвучивал.
Аргумент - что таблицы никогда не предназначались для вёрстки, они предназначались лишь для представления табличных данных.
И то, что их использовали и для вёрстки - лишь следствие того, что нормальных инструментов, предназначенных для вёрстки - не было.
И то, что их использовали и для вёрстки - лишь следствие того, что нормальных инструментов, предназначенных для вёрстки - не было.
Аргумент из разряда - когда бог создавал мир он сказал, что субота создана для отдыха, поэтому в суботу работать нельзя.
Ты более прагматичные аргументы привести можешь?
Ты более прагматичные аргументы привести можешь?
Аргумент из разряда - когда бог создавал мир он сказал, что субота создана для отдыха, поэтому в суботу работать нельзя.А теперь ответь, почему такое заключение неверно.
Увидишь, что неверно оно по причинам, отличающим наши аргументы.
У меня в FF не выделяется. 
Зато у тебя в FF картинка в правом нижнем углу не показывается
Оно не верно, потому что богу паралельно до того, работаем мы в суботу или нет. А подобное утверждение делают догматики, которые слепо верят не в бога, а в свои домыслы.
Блять, но если суббота реально предназначена для отдыха?
Ещё есть вариант - вообще всё сделать одной картинкой с картой, и промасштабировать её до ширины окна - чемэто тебе не дизайн?
Ещё есть вариант - вообще всё сделать одной картинкой с картой, и промасштабировать её до ширины окна - чемэто тебе не дизайн?
1. Много весит
2. Тяжело для обновления
3. Отсутствует интерактивность
4. Нет возможности сделать копи-паст интересующей информации
5. Очень дорогой способ разработки многостраничных сайтов/систем
6. Невозможность сделать тянущийся дизайн из-за резкой потери качества у текстовой информации.
Будем дальше стебаться или ты все же нормальные аргументы приводить начнешь?
2. Тяжело для обновления
3. Отсутствует интерактивность
4. Нет возможности сделать копи-паст интересующей информации
5. Очень дорогой способ разработки многостраничных сайтов/систем
6. Невозможность сделать тянущийся дизайн из-за резкой потери качества у текстовой информации.
Будем дальше стебаться или ты все же нормальные аргументы приводить начнешь?
1. Много веситНе проблема.
2. Тяжело для обновленияphp_gd решит все твои проблемы.
3. Отсутствует интерактивность
А позиционировать так - гораздо легче.
4. Нет возможности сделать копи-паст интересующей информацииЭто не всегда плохо.
5. Очень дорогой способ разработки многостраничных сайтов/системНе дороже, чем традиционным способомю
6. Невозможность сделать тянущийся дизайн из-за резкой потери качества у текстовой информации.Какой-какой дизайн?
1. Большой вес это недостаток.
2,3. Ну-ка, ну-ка. Расскажи мне как php_gd сделает кнопку нажимаемой, текстовые поля в которые можно вводить текст, чекбоксы всяки, выпадающие списки и всякие перетаскиваемые хрени
4. Это, как правило, плохо и, очень редко, хорошо
5. Гораздо дороже. Серверную логику все равно писать придется, а верстка усложнится в разы.
6. Учи матчасть.
2,3. Ну-ка, ну-ка. Расскажи мне как php_gd сделает кнопку нажимаемой, текстовые поля в которые можно вводить текст, чекбоксы всяки, выпадающие списки и всякие перетаскиваемые хрени
4. Это, как правило, плохо и, очень редко, хорошо
5. Гораздо дороже. Серверную логику все равно писать придется, а верстка усложнится в разы.
6. Учи матчасть.
1. Большой вес это недостаток.Для узкого канала и/или платного трафика.
2,3. Ну-ка, ну-ка. Расскажи мне как php_gd сделает кнопку нажимаемой, текстовые поля в которые можно вводить текст, чекбоксы всяки, выпадающие списки и всякие перетаскиваемые хрениКартой.
Если чекбоксов и полей нету.
4. Это, как правило, плохо и, очень редко, хорошоНет.
5. Гораздо дороже. Серверную логику все равно писать придется, а верстка усложнится в разы.Не усложнится.
6. Учи матчасть.То есть, ты и сам не понимаешь свой вопрос.
Для узкого канала и/или платного трафика.
У всех систем общающихся с внешним миром платный трафик. Да и прорисовка картинки браузером занимает время.
Картой.
Если чекбоксов и полей нету.
Покажи пример нажимаемой кнопки, сделаной картой.
Больше контраргументов не увидел.
Тут контраргументы должен приводить ты - я говорю, что картинки - отличный способ вёрстки. Ты же пока не привёл ни одного внятного аргумента, почему картинки сильно хуже тех же таблиц.
Не смешите мои подковы. Делать сайт из одной картинки, в которую пихать все на свете - это дико криво. Причины - очевидны. И описаны выше к тому же.
То, что таблицы стилей крайне полезны, я не спорю. Но лично я не умею создавать сложный и грамотный (в том смысле, что не плывет в разных браузерах и ОС) дизайн ТОЛЬКО с их помощью. И никогда не встречал подобного в интернете. Поэтому даже если предположить, что css были созданы чтоб убрать таблицы из дизайна, то я не считаю, что они с этой задачей справились. Пример - это вопрос, поднятый в начале данного обсуждения. Очевидно, что решение с таблицами проще и безглючнее.
То, что таблицы стилей крайне полезны, я не спорю. Но лично я не умею создавать сложный и грамотный (в том смысле, что не плывет в разных браузерах и ОС) дизайн ТОЛЬКО с их помощью. И никогда не встречал подобного в интернете. Поэтому даже если предположить, что css были созданы чтоб убрать таблицы из дизайна, то я не считаю, что они с этой задачей справились. Пример - это вопрос, поднятый в начале данного обсуждения. Очевидно, что решение с таблицами проще и безглючнее.
Как мы тут уже увидели, проще и безглючнее моё решение.
На твое первое утверждение я контраргументы привел.
Нормальный спор подразумевает, что на каждый мой аргумент ты выдаешь свой обоснованый комментарий. Если ты считаешь мой тезис слабо обоснованым - попроси его обосновать лучше.
Ты же, в данном случае, просто говоришь "фигня все не так, а наоборот". Такой ответ ты можешь дать на любой мой аргумент и тезис, независимо от их истиности и обоснованости.
Нормальный спор подразумевает, что на каждый мой аргумент ты выдаешь свой обоснованый комментарий. Если ты считаешь мой тезис слабо обоснованым - попроси его обосновать лучше.
Ты же, в данном случае, просто говоришь "фигня все не так, а наоборот". Такой ответ ты можешь дать на любой мой аргумент и тезис, независимо от их истиности и обоснованости.
на каждый мой аргумент ты выдаешь свой обоснованый комментарийВроде бы, достаточно большому количеству пользователей форума именно это во мне и не нравится.
В данном случае я обоснованных комментариев не наблюдаю
В данном случае я обоснованных комментариев не наблюдаю
Если ты о решении задачи, которую задал изначально, то я лично не увидел, чем оно проще и почему безглючней того же самого, сделанного таблицей
Подумай.
Я, конечно, понимаю, что в первый раз это немного сложно, но всё-таки попробуй.
Я, конечно, понимаю, что в первый раз это немного сложно, но всё-таки попробуй.
В наших лесах на такое отвечают просто
Сам дурак.
Сам дурак.
Да, это, конечно, очень конструктивный аргумент.
Никогда не думал, что тебе место - в тех самых лесах, а не в разделе Programming?
Никогда не думал, что тебе место - в тех самых лесах, а не в разделе Programming?
Не надо друг друга оскорблять. Если человек считает, что круто делать сайт на картинках и не хочет прислушиваться к мнению других, то пусть делает. Совет, который он спрашивал, ему был дан. А как и что уж он хочет делать - это его дело.
ты персонажей не путаешь, случаем? 
Решил попробывать и переделал весь дизайн одного сайта на стилях. Какие трудности я встретил:
Очень не удобно когда работаешь с динамической информацией. Часто натыкался на то что с одним контентом все нормально, а с, например на 5-6 строк больше, все плыло куда-то (. Как-то не логически работает float. Проблемы с width, в купе с margin. Если сделать в слое с width:600px; слой с width:100%;margin-left:40 px; то длина второго слоя равна не 600px; а 640; При этом у меня весь контент уплывал куда-то вниз, где впринципе быть не может. Можно все решать с помощью жеского задания длины и высоты, но это не удобно с динамической информацией.
Все браузеры отображают по поразному. Пока найдешь тот стиль который зотябы в IE,FF,Opere норм показывается, все локти перекусаешь.
По количеству тэгов и неразберихи, которая наводится всем множеством div'ов и span'ов идет в сравнение с таблицами. Тока вот таблицы в редакторах отображаются нормально, а дивы нет.
А так мне даже понравилось, но от таблиц отказываться не собираюсь, уж больно они удобны, во многих случаях.
Очень не удобно когда работаешь с динамической информацией. Часто натыкался на то что с одним контентом все нормально, а с, например на 5-6 строк больше, все плыло куда-то (. Как-то не логически работает float. Проблемы с width, в купе с margin. Если сделать в слое с width:600px; слой с width:100%;margin-left:40 px; то длина второго слоя равна не 600px; а 640; При этом у меня весь контент уплывал куда-то вниз, где впринципе быть не может. Можно все решать с помощью жеского задания длины и высоты, но это не удобно с динамической информацией.
Все браузеры отображают по поразному. Пока найдешь тот стиль который зотябы в IE,FF,Opere норм показывается, все локти перекусаешь.
По количеству тэгов и неразберихи, которая наводится всем множеством div'ов и span'ов идет в сравнение с таблицами. Тока вот таблицы в редакторах отображаются нормально, а дивы нет.
А так мне даже понравилось, но от таблиц отказываться не собираюсь, уж больно они удобны, во многих случаях.
Если сделать в слое с width:600px; слой с width:100%;margin-left:40 px; то длина второго слоя равна не 600px; а 640;А ты чего хотел?
100% - это ширина(/высота) того блока, где мы сейчас находимся - то есть, для этого второго слоя это было равносильно width:600px;margin-left:40px.
Если уж у тебя для внешнего слоя ихзвестна ширина - ну и написал бы width:560px; margin-left:40px.
Вроде бы, еть ещё способ задания width и height так, чтобы они просто брали всё свободное место, точно не помню.
Так сайты на картинках обычно таблицами и делают 
И уж тут флэш даст 100 очков вперед картинкам
И уж тут флэш даст 100 очков вперед картинкам
С другой стороны, если задать margin-right: 40px; то длина становится на 40 меньше. Просто мне кажется что тут еще наддо работать и работать разрабам всех браузеров.
А ты чего хотел?
(Кстати этот косяк не во всех браузерах).
Просто не логично с одной стороны уменьшать размер, а с другой просто перемещать весь блок( начинает выезжать за приделы страницы )
Сначала изучи стандарт CSS, и особенно раздел про блочную модель, а потом суди, что есть косяк, а что — нет.
З.Ы. Я не утверждаю, что этот стандарт идеален, но не люблю людей рассуждающих в стиле „Пастернака я не читал…“
З.Ы. Я не утверждаю, что этот стандарт идеален, но не люблю людей рассуждающих в стиле „Пастернака я не читал…“
Чет я не понял в чем ты меня обвиняешь!
Вот код:
<div name="vneshnii" style="background-color:red;width:100px;height:100px;"><div name="vnutrennii" style="background-color:green; width:100%; margin-left:10px;">test1</div></div>
<div style="background-color:red;width:100px;height:100px;"><div style="background-color:green; width:100%; margin-right:10px;">test2</div></div>
<div style="background-color:red;width:100px;height:100px;"><div style="background-color:green; width:100%; margin-bottom:120px;">test3</div></div>
<div style="background-color:red;width:100px;height:100px;"><div style="background-color:green; width:100%; margin-top:120px;">test4</div></div>
Вот результат его работы:
[b][/b]
1. На test1 понятно. Все правильно, по спецификации. Т.е. Длина внутреннего блока = 100(100%)+margin=110px;
2. На test2 длина моего блока не равна 110 как написано в спецификации!
3. На следующих тестах внутреннии блоки ведут себя не так как на первом тесте. Т.е. сместо того чтобы бы видеть зеленый блок в красном, мы видим что красный блок в ширину больше стал, а зеленый как был так и остался.
Забыл написать что это для Opery и FF. Для ИЕ, тесты работают правильно, но тож не совсем.
Вот код:
<div name="vneshnii" style="background-color:red;width:100px;height:100px;"><div name="vnutrennii" style="background-color:green; width:100%; margin-left:10px;">test1</div></div>
<div style="background-color:red;width:100px;height:100px;"><div style="background-color:green; width:100%; margin-right:10px;">test2</div></div>
<div style="background-color:red;width:100px;height:100px;"><div style="background-color:green; width:100%; margin-bottom:120px;">test3</div></div>
<div style="background-color:red;width:100px;height:100px;"><div style="background-color:green; width:100%; margin-top:120px;">test4</div></div>
Вот результат его работы:
[b][/b]
1. На test1 понятно. Все правильно, по спецификации. Т.е. Длина внутреннего блока = 100(100%)+margin=110px;
2. На test2 длина моего блока не равна 110 как написано в спецификации!
3. На следующих тестах внутреннии блоки ведут себя не так как на первом тесте. Т.е. сместо того чтобы бы видеть зеленый блок в красном, мы видим что красный блок в ширину больше стал, а зеленый как был так и остался.
Забыл написать что это для Opery и FF. Для ИЕ, тесты работают правильно, но тож не совсем.
Ботай спецификацию дальше.
1. ОК.
2. Тоже ОК, т.к. margin справа есть, но поскольку он не заливается цветом фона, ты его просто не видишь.
3. Ничего не понял. Судя по картинке вроде правильно всё.
И ещё, почитай про DOCTYPE и про Quirks Mode
1. ОК.
2. Тоже ОК, т.к. margin справа есть, но поскольку он не заливается цветом фона, ты его просто не видишь.
3. Ничего не понял. Судя по картинке вроде правильно всё.
И ещё, почитай про DOCTYPE и про Quirks Mode
Ну а почему в первом случае margin идет от внешнего блока а во втором случае от... даж не знаю от чего.
1. ОК.
2. Тоже ОК, т.к. margin справа есть, но поскольку он не заливается цветом фона, ты его просто не видишь.
А в третьем случае ваще бардак.
Вот тот же код в ИЕ:
[b][/b]
Вот тут видно что все тесты имеют ту ширину, которая должна быть согласно спецификациям!.
[b][/b]
Еще пара интересностей. Если тоставить тест3 между тестом 1 и тестом 2 то мы не увидим ни какого зазора, а это говорит о том что ширина этого блока не >100px; хотя по спецификации она должна быть 120px+ ширина самого блока!
[b][/b]
Ты сам бы попробывал поэксперементировать, а потом говорил бы. А то сразу за Постернака...
[b][/b]
А вот как раз IE и не прав. Ты написал, что размер красных блоков должен быть 100*100, а он их растягивает. Где логика?
По стандарту, если у блока заданы размеры, то он должен быть именно такого размера. Если какие-то внутрение элементы хотят вылежни за эти размеры, то это их трудности и что делать с торчащими кусками, определяется правилом overflow.
ЗЫ. IE самы глючный из всех браузеров в плане поддержки CSS, так что если что-то работает в IE, это вовсе не значит, что оно так должно быть.
По стандарту, если у блока заданы размеры, то он должен быть именно такого размера. Если какие-то внутрение элементы хотят вылежни за эти размеры, то это их трудности и что делать с торчащими кусками, определяется правилом overflow.
ЗЫ. IE самы глючный из всех браузеров в плане поддержки CSS, так что если что-то работает в IE, это вовсе не значит, что оно так должно быть.
Это ты к чему?
Правило overflow указывает показывать ли внутренние элементы, которые вышли за пределы бокса, но никак не влияет на размеры самого бокса. Если я ниаписал width: 100px значит должно быть 100px и никаких гвоздей.
Правило overflow указывает показывать ли внутренние элементы, которые вышли за пределы бокса, но никак не влияет на размеры самого бокса. Если я ниаписал width: 100px значит должно быть 100px и никаких гвоздей.
Ну тогда получается, что во всех случаях кроме 1го неправильно работает margin
Кстати, если ты в 4м случае задашь у внешнего дива бордер, то он конкретно этот случай в лисе начнет обрабатывать правильно.
Кстати, если ты в 4м случае задашь у внешнего дива бордер, то он конкретно этот случай в лисе начнет обрабатывать правильно.
Я и не говорил что он прав, но с моей точки зрения он работает с маргином коректнее.
А вот как раз IE и не прав.
Там хоть видно что для второго теста, маргин-правый есть, он отсчитывается он правой стенки контейнера, а для оперы правильно работает только маргин-лефт.
Точно. Интересно... Вот я и говорю что разрабам надо еще поработать над правильной работай со стилями.
Кстати, если ты в 4м случае задашь у внешнего дива бордер, то он конкретно этот случай в лисе начнет обрабатывать правильно.
На которой картинке?
Ботать margin collapsing всё там же, в стандарте.
Ботать margin collapsing всё там же, в стандарте.
А кто сказал, что правых margin должен отсчитываться от правого края родителя? Ещё раз внимательно читай стандарт. http://w3.org/TR/CSS21/visudet.html#Computing_widths_and_mar...
In CSS 2.1, horizontal margins never collapse.
Не понял как из него можно вычленить хоть что-то про margin-right
Похоже моих познаний в английском недостаточно.
Похоже моих познаний в английском недостаточно.
Я имел в виду вертикальные „дыры“ в первом скриншоте.
Смотрим на код:
Читаем раздел 10.3.3. Block-level, non-replaced elements in normal flow
Поскольку паддингов и границ у нас нет должно выполнятся равенство:
margin-left + width + margin-right = width-of-containing-block,
где
margin-left = auto
width = 100% (от ширины родителя) = 100px
margin-right = 10px
width-of-containing-block = 100px
следующий абзац:
Имеем
0 + 100px + 10px != 100px. подстава, однако.
Читаем дальше:
0 + 100px + auto = 100px.
Значит margin-rght = 0.
Вуаля:
0 + 100px + 0 = 100px. Вот оно, счастье.
Итого, то что мы видим на первом скриншоте (FF, Opera) — правильно, а IE опять страдает фигнёй.
<div style="background-color:red;width:100px;height:100px;">
<div style="background-color:green; width:100%; margin-right:10px;">test2</div>
</div>
Читаем раздел 10.3.3. Block-level, non-replaced elements in normal flow
Поскольку паддингов и границ у нас нет должно выполнятся равенство:
margin-left + width + margin-right = width-of-containing-block,
где
margin-left = auto
width = 100% (от ширины родителя) = 100px
margin-right = 10px
width-of-containing-block = 100px
следующий абзац:
If 'width' is not 'auto' and 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' (plus any of 'margin-left' or 'margin-right' that are not 'auto') is larger than the width of the containing block, then any 'auto' values for 'margin-left' or 'margin-right' are, for the following rules, treated as zero.Значит margin-left = 0
Имеем
0 + 100px + 10px != 100px. подстава, однако.
Читаем дальше:
If all of the above have a computed value other than 'auto', the values are said to be "over-constrained" and one of the used values will have to be different from its computed value. If the 'direction' property of the containing block has the value 'ltr', the specified value of 'margin-right' is ignored and the value is calculated so as to make the equality true. If the value of 'direction' is 'rtl', this happens to 'margin-left' instead.Значит теперь margin-rght = auto.
0 + 100px + auto = 100px.
Значит margin-rght = 0.
Вуаля:
0 + 100px + 0 = 100px. Вот оно, счастье.
Итого, то что мы видим на первом скриншоте (FF, Opera) — правильно, а IE опять страдает фигнёй.
Мда -)
Теперь осталось только понять, из какой логики эти стандарты следуют -
Теперь осталось только понять, из какой логики эти стандарты следуют -
Оставить комментарий
kruzer25
Как отловить нажатие по иконке элемента списка (не по его содержимому)? Обычный список, типа <ul><li>item1</li><li>item2</li></ul>