Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 116
*{margin: 0; padding: 0}
ul{
width: 100%;
background: #eee;
text-align: center;
}
li{
list-style: none;
display: inline-block;
*display: inline;
width: 19%;
background: #ccc;
}
ul{
width: 100%;
background: #eee;
text-align: center;
}
li{
list-style: none;
display: inline-block;
*display: inline;
width: 19%;
background: #ccc;
}
У вас самая правая картинка не будет с самого правого края
Если не забывать про 2 фаерфокс, а пользователей сей версии лисы еще около 1%, то там конструкция будет серьезнее.
Хабра умеет читать мысли и предлагать те материалы которые нужны в данный момент ))) Вот только вчера столкнулся с этой проблемой… А тут сегодня встаю и статья… И что самое главное такое уже не первый раз )
выравненый -> выровненный
выравневанием -> выравниванием
выравневанием -> выравниванием
>> 3. полное отсутствие экспрешнов и javascript-кода
чего то я не понял — а в условных комментариях тогда что (if IE)?
чего то я не понял — а в условных комментариях тогда что (if IE)?
Это не относится к методу. Скорее к фиксу HTML5 в осликах.
Так экпрешнов не в осликах и не бывает, понятно, что это для IE only. Просто как то странно было прочитать про полное отсутствие JS после прочтения кода )
Если всё написать по канонам HTML/XHTML его и не будет. :)
Вы придираетесь :) Код в данном случае, это то что в body + стили. Нельзя же сказать например про сайт cssplay.co.uk, в котором есть много много надписей «css only» что они «врут», хотя у них на страницах куча скриптов, просто к делу это все не относится.
P.S. Не в качестве рекламы — сайт очень кстати полезный, хоть и давно не пользовался, но верстать начинал по его примерам, так что не гуру в верстке может быть полезен (раз уж топик про верстку).
P.S. Не в качестве рекламы — сайт очень кстати полезный, хоть и давно не пользовался, но верстать начинал по его примерам, так что не гуру в верстке может быть полезен (раз уж топик про верстку).
Да не придираюсь я :)
Выкиньте из примера JS и он перестанет работать в IE. Я же не возражаю, что пример интересный, но увы без скриптов он не работает кроссбраузерно.
P.S. Кстати есть и еще проблемка, при сжатии окошка картинки схлопываются, что не есть гуд, по моему (FF3.5):
Выкиньте из примера JS и он перестанет работать в IE. Я же не возражаю, что пример интересный, но увы без скриптов он не работает кроссбраузерно.
P.S. Кстати есть и еще проблемка, при сжатии окошка картинки схлопываются, что не есть гуд, по моему (FF3.5):
вы понимаете, что делает код js в данном примере? по-моему, нет.
Нужно использовать min-width для любого обрамляющего элемента.
Все сайты обычно имеют минимальную ширину.
Все сайты обычно имеют минимальную ширину.
Скрипты здесь только для того, чтобы заставить ИЕ6 отображать элементы, которые появились в HTML5. Если автор переверстает все на дивах, то пример будет полностью работать.
Если ещё углубиться в этот вопрос: Вы можете не пользоваться возможностями HTML5, вот я ему пока не очень доверяю и эти хаки для него мне не нравятся, поэтому когда мне потребуется я реализую этот пример с использованием списков в XHTML 1.0 Strict и там не будет никаких хаков и скриптов.
Суть метода совершенно не в выбранном инструменте, а в логике расположения блоков ;)
Суть метода совершенно не в выбранном инструменте, а в логике расположения блоков ;)
Таблицей это делать лучше, к сожалению:
семантичностью в описанном способе и не пахло,
в случае с таблицей никаких проблем с кроссбраузерностью по определению не возникнет.
Основная проблема: в производстве приходится встречаться со случаями, когда число элементов (картинок, ...) переменно. Это создаст дополнительные сложности при использовании вышеописанного метода.
семантичностью в описанном способе и не пахло,
в случае с таблицей никаких проблем с кроссбраузерностью по определению не возникнет.
Основная проблема: в производстве приходится встречаться со случаями, когда число элементов (картинок, ...) переменно. Это создаст дополнительные сложности при использовании вышеописанного метода.
Таблицей нельзя сделать выравнивание по обоим сторонам. к сожалению.
Извините, а чем вас не устраивает такой вариант?
И браузерам тоже нравится :)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
.table { margin: 0 auto; width: 90%; }
.img { display:block; margin: 0 auto; }
.td { width:20%; }
</style>
</head>
<body>
<table class="table">
<tr>
<td class="td"><img src="pic1.png" class="img" /></td>
<td class="td"><img src="pic2.png" class="img" /></td>
<td class="td"><img src="pic3.png" class="img" /></td>
<td class="td"><img src="pic4.png" class="img" /></td>
<td class="td"><img src="pic5.png" class="img" /></td>
</tr>
</table>
</body>
</html>
И браузерам тоже нравится :)
вы точно внимательно читали статью?
вообще-то Вы сделали искусственное подобие выравнивания. К сожалению это подгонка под наполнение, а не семантичная верстка… это видно из width: 90%; т.е. справа вы выравниваете не по контенту, а просто делаете отступ в 10%… а что Вы будете делать если контент над фотогалерей будет разной ширины на разных страницах и надо чтобы верстка фотогалереи сама подстраивалась под эту ширину? ;)
ещё эту задачу лучше не решать таблицей, потому что если вдруг фотки окажутся большого размера, то в Вашем случае они растянут таблицу а вместе с ней и весь сайт по ширине и его поведение предсказать очень не просто… а в статье при очень больших картинка съедет только сама фотогалерея не повредив контент вокруг.
ещё эту задачу лучше не решать таблицей, потому что если вдруг фотки окажутся большого размера, то в Вашем случае они растянут таблицу а вместе с ней и весь сайт по ширине и его поведение предсказать очень не просто… а в статье при очень больших картинка съедет только сама фотогалерея не повредив контент вокруг.
почему нельзя-то? всегда так выравнивал:
дёшево и сердито :)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<table width="100%">
<col width="64px">
<col>
<col width="64px">
<col>
<col width="64px">
<col>
<col width="64px">
<col>
<col width="64px">
<tr>
<td class="td"><img src="http://pic.ipicture.ru/uploads/090901/WxSSMWsGRx.png" width="64px" /></td>
<td></td>
<td class="td"><img src="http://pic.ipicture.ru/uploads/090901/WxSSMWsGRx.png" width="64px" /></td>
<td></td>
<td class="td"><img src="http://pic.ipicture.ru/uploads/090901/WxSSMWsGRx.png" width="64px" /></td>
<td></td>
<td class="td"><img src="http://pic.ipicture.ru/uploads/090901/WxSSMWsGRx.png" width="64px" /></td>
<td></td>
<td class="td"><img src="http://pic.ipicture.ru/uploads/090901/WxSSMWsGRx.png" width="64px" /></td>
</tr>
</table>
</body>
</html>
* This source code was highlighted with Source Code Highlighter.дёшево и сердито :)
Ммдааа…
а для нельзя было в CSS ширину задать, обязательно в каждый прописывать?
col {width:64px;}
и класс td для элемента td — шикарная находка…
col {width:64px;}
и класс td для элемента td — шикарная находка…
о! а ты правда поверил, что это я из своего рабочего проекта кусок кода скопировал? :)
для тех, кто в танке: я скопировал код из коммента выше и вставил недостающие столбцы и картинку, чтобы показать идею выравнивания по ширине таблицей
для тех, кто в танке: я скопировал код из коммента выше и вставил недостающие столбцы и картинку, чтобы показать идею выравнивания по ширине таблицей
предложенный тобой CSS сосёт, так как задавать фиксированную ширину нужно только у столбцов с картинками, а пустые столбцы должны равномерно растянуться на всю ширину таблицы
поэтому я и не использовал css, но недооценил толщину брони :)
поэтому я и не использовал css, но недооценил толщину брони :)
Играть с HTML 5 — это конечно полезно, но для коммерческих проектов создавать целую кучу элементов JS'ом, а без оного видеть взрыв — не самое хорошее дело.
Забыл добавить, речь только про IE.
Если верить лженауки «Теория вероятностей», то получается доля ie6+ie7+ie = 0,45 (По будням)
доля с проваленым js = 0,01
Итого доля со взыров = 0,45*0,01 = 0,0045, те с вероятностью сорок пять десятитысячных человек увидит полный взрыв.
Ну а стоит ли игра свеч с ХТМЛ5 или нет, с комерческой точки зрения, покажет нам время)
доля с проваленым js = 0,01
Итого доля со взыров = 0,45*0,01 = 0,0045, те с вероятностью сорок пять десятитысячных человек увидит полный взрыв.
Ну а стоит ли игра свеч с ХТМЛ5 или нет, с комерческой точки зрения, покажет нам время)
не сорок пять десятитысячных, у вас за еденицу взята вся масса пользователей. И не хочу огорчать ie6+ie7+ie != 0,45, а как минимум ~0.6. Что касается JS — ~2%, то есть 0.02 в долях, а не 0.01. И вы нагло положили на людей с мобильными устройствами, их доля растет и их браузеры, увы, кастрированные.
ну даже есть 0,6 помножить на 0,02 :)
С мобильными браузерами всё сложнее, конечно, но разве опера-мини не поддерживает html5? )
разве HTML5 не обратно совместим с HTML4?
К тому же некоторые сайты вообще в мобильной версии бессмысленны.
И вообще, всё зависит от проекта и от его целей, поэтому я и сказал, что только время расставит приоритеты.
С мобильными браузерами всё сложнее, конечно, но разве опера-мини не поддерживает html5? )
разве HTML5 не обратно совместим с HTML4?
К тому же некоторые сайты вообще в мобильной версии бессмысленны.
И вообще, всё зависит от проекта и от его целей, поэтому я и сказал, что только время расставит приоритеты.
+ добавьте случаи, когда произошли сбои в обработке js или недополучен файл с js.
вот с этим полностью согласен, только почему-то когда я говорил об этом налетала куча неочень адекватных людей, которые минусовали комменты, я даже стал разочаровываться в хабра-сообществе :)
Выебнуться с HTML 5 — это зачет.
Только вот вопрос.
Зачем выдумывать гору идиотизма вместо того чтобы использовать таблицу?
Или вы из адептов таблицофилии?
Встречал таких. Кроме того что «таблицы не круто» аргументов от них не слышал.
Поясните пожалуйста насколько сложнее станет код при использовании таблицы и отсутствии извращений
Только вот вопрос.
Зачем выдумывать гору идиотизма вместо того чтобы использовать таблицу?
Или вы из адептов таблицофилии?
Встречал таких. Кроме того что «таблицы не круто» аргументов от них не слышал.
Поясните пожалуйста насколько сложнее станет код при использовании таблицы и отсутствии извращений
уже сто тыщ раз обсуждалось.
сверстайте пример таблицей так, чтобы для кпк картинки выдавались одной вертикальной колонкой.
сверстайте пример с 10000 картинок так, чтобы они отображались во всех браузерах по мере загрузки.
сверстайте пример таблицей так, чтобы для кпк картинки выдавались одной вертикальной колонкой.
сверстайте пример с 10000 картинок так, чтобы они отображались во всех браузерах по мере загрузки.
первый пример не решается, второй пример: table-layout: fixed
черт с ним, со вторым примером
не понимаю сути проблемы сделать одну колонку в таблице.
на экранах — как в примере, для кпк — одной колонкой (завтра, кстати, придет заказчик и захочет двумя).
при этом, я надеюсь, Вы понимаете, что это один и тот же документ (один html код), просматриваемый с разных устройств.
при этом, я надеюсь, Вы понимаете, что это один и тот же документ (один html код), просматриваемый с разных устройств.
теперь понял, только вот я не вижу смысла делать такое извращение (для нормальных компьютеров и мобильных устройств одновременно), это мое личное мнение, я не считаю нужным делать для кпк. если уж сильно надо, то сделаю облегченный вариант для мобильных устройств (всех, начиная от мобил и заканчивая кпк)
а после, заходите к разработчикам:
— ребята, Вам нужно будет дописать выбор шаблона для представления, в зависимости от устройства, с которого запросили один и тот же документ, вот список устройств, вот файлы шаблонов. кроме того, учтите, если появятся новые устройства, я к вам еще загляну. уж извините, но я сильно люблю таблицы.
к заказчику:
— уважаемый, Вам придется умножить количество железа, которое Вы планировали закупить под кеширование на количество поддерживаемых нами устройств. кроме того, если появятся новые устройства, железо придется докупать, и обращаться к нам за доработками. уж извините, но я сильно люблю таблицы.
иронирую конечно, но думаю проблему этого подхода Вы уловили, ее первопричина — использование инструментов не по назначению — вместо того, чтобы закручивать шуруп отверткой, вы предлагаете кучу механизмов, вращающих разные предметы относительно шурупа.
а извращением я бы скорее назвал зависимость разметки (я напомню, что HTML — это язык разметки) от устройства, читающего документ. представьте газеты, в которых люди разного роста и цвета волос видят разный текст — это ничем не отличается от того, что Вы предлагаете.
— ребята, Вам нужно будет дописать выбор шаблона для представления, в зависимости от устройства, с которого запросили один и тот же документ, вот список устройств, вот файлы шаблонов. кроме того, учтите, если появятся новые устройства, я к вам еще загляну. уж извините, но я сильно люблю таблицы.
к заказчику:
— уважаемый, Вам придется умножить количество железа, которое Вы планировали закупить под кеширование на количество поддерживаемых нами устройств. кроме того, если появятся новые устройства, железо придется докупать, и обращаться к нам за доработками. уж извините, но я сильно люблю таблицы.
иронирую конечно, но думаю проблему этого подхода Вы уловили, ее первопричина — использование инструментов не по назначению — вместо того, чтобы закручивать шуруп отверткой, вы предлагаете кучу механизмов, вращающих разные предметы относительно шурупа.
а извращением я бы скорее назвал зависимость разметки (я напомню, что HTML — это язык разметки) от устройства, читающего документ. представьте газеты, в которых люди разного роста и цвета волос видят разный текст — это ничем не отличается от того, что Вы предлагаете.
в том то и дело что вы предлогаете делать разный текст для разных людей в одной и той же газете, и если использовать вашу метафору, то я предлогаю делать разные газеты для брюнетов и блондинов и для высоких и низких людей.
просто если там картинки «строкой» идут, то они строкой должны идти и в КПК тоже, а иначе — это получается другой дизайн, другая работа, ну в общем вы поняли…
просто если там картинки «строкой» идут, то они строкой должны идти и в КПК тоже, а иначе — это получается другой дизайн, другая работа, ну в общем вы поняли…
>в том то и дело что вы предлогаете делать разный текст для разных людей
нет, я предлагаю один и тот же текст, по-разному представленный (это большая разница).
>если там картинки «строкой» идут, то они строкой должны идти и в КПК тоже
вот загвоздка заключается в том, что html — язык смысловой разметки документа, а не визуального представления. что «должно идти строкой», а что нет — не входит с список задач, для решения которых он предназначен.
нет, я предлагаю один и тот же текст, по-разному представленный (это большая разница).
>если там картинки «строкой» идут, то они строкой должны идти и в КПК тоже
вот загвоздка заключается в том, что html — язык смысловой разметки документа, а не визуального представления. что «должно идти строкой», а что нет — не входит с список задач, для решения которых он предназначен.
вы вырвали два куска из контекста, а смысл был в полных фразах…
в общем, цели есть разные у всех, и для каждой из них может быть верно и ваше решение и то что предложил я, все зависит от ситуации…
и HTML — это язык гипертекстовой разметки, а языки разметки как раз и нужны для представления, для того что бы информация отображалась именно так как размечено.
в общем, цели есть разные у всех, и для каждой из них может быть верно и ваше решение и то что предложил я, все зависит от ситуации…
и HTML — это язык гипертекстовой разметки, а языки разметки как раз и нужны для представления, для того что бы информация отображалась именно так как размечено.
ой ну бросьте
en.wikipedia.org/wiki/HTML
MathML описывает формулу или ее изображение?
почему тег deprecated в языке, который предназначен «для того что бы информация отображалась именно так как размечено» ©?
en.wikipedia.org/wiki/HTML
MathML описывает формулу или ее изображение?
почему тег deprecated в языке, который предназначен «для того что бы информация отображалась именно так как размечено» ©?
скушалась ссылка:
www.w3.org/TR/REC-html40/intro/intro.html#h-2.4
прочитайте один этот пункт спецификации.
и скушался тег: «почему тег <font> deprecated…»
www.w3.org/TR/REC-html40/intro/intro.html#h-2.4
прочитайте один этот пункт спецификации.
и скушался тег: «почему тег <font> deprecated…»
как же достали чуваки которые со своими таблицами лезут в другой огород.
таблица в принципе не решает задачу (фиксированный отступ слева и справа + резина).
Если сделать td width: 25%, а в левой колонке сделать text-align: left, а у правой text-align: right, то расстояния между элементами не будут равны.
Если сделать td width: 25%, а в левой колонке сделать text-align: left, а у правой text-align: right, то расстояния между элементами не будут равны.
первой ячейке можно задать фиксированную ширину, остальным четырем ширину не задавать и сделать правый align.
ps: это я не к тому, что я бы так делал :)
ps: это я не к тому, что я бы так делал :)
абстрагируйся от картинок
представь, что картинки — это бордер, а пространство между ними — это как раз «картинки», которые нужно растянуть по экрану,
тогда задача решается гораздо проще, и всё выровнено по двум сторонам, и равномерно растянуто по экрану :)
habrahabr.ru/blogs/css/68424/#comment_1942315
think different :)
желающим предлагаю переделать мой пример без таблицы
представь, что картинки — это бордер, а пространство между ними — это как раз «картинки», которые нужно растянуть по экрану,
тогда задача решается гораздо проще, и всё выровнено по двум сторонам, и равномерно растянуто по экрану :)
habrahabr.ru/blogs/css/68424/#comment_1942315
think different :)
желающим предлагаю переделать мой пример без таблицы
Да, и таблицы сейчас — моветон)
Если картинки одинаковой и известной заранее ширины, то можно и проще сделать, не вынося один aritcle отдельно.
Если разной, то отступы между ними получатся разного размера и будет некрасиво.
Так что извините, не понял, что в этом способе хорошего и поставил минус.
Если разной, то отступы между ними получатся разного размера и будет некрасиво.
Так что извините, не понял, что в этом способе хорошего и поставил минус.
А почему нельзя поставить рядом 5 div (колонки) с ширирой в 20%??
Программист вас точно не взлюбит за такие конструкции в html, если делать то все одним списком. При фиксированной ширине все легко реализуется отрицательным маргином у контейнера, с резиной незнаю как поведет себя отрицательный маргин, на досуге попробую реализовать, но если все в 1 строчку то через first-child и небольшой экспрешен для ие 6 — 7 (никак не влияет на производительность, применяется 1 раз при загрузке и не тормозит) пользователей ие 6 — 7 с отключеным яваскриптом ничтожно мало
Хотелось бы добавить к первому, нерассмотренному в статье методу. По хорошему дизайнеру можно сказать что в интернете вообще не может быть картинок. Только текст. И только определенным шрифтом. Тогда проблем с версткой вообще не должно возникнуть.
>Поэтому сделаем это в HTML5, но на элементах section-article
вот блин, вообще я думал новые елементы HTML5 будут подталкивать к повышению семантики документов, а не к усугублению практики «тут можно использовать любые html теги» ©
вот блин, вообще я думал новые елементы HTML5 будут подталкивать к повышению семантики документов, а не к усугублению практики «тут можно использовать любые html теги» ©
элементы* :)
А какие попало html-теги использовать и нельзя. :)
К примеру body>article запрещён. :)
К примеру body>article запрещён. :)
Вы путаете семантику с валидность.
Вы не сможете ответить на вопросы:
1) О чем пять статей в вашем примере?
2) Что по смыслу объединяет эти пять статей?
3) Что по смыслу объединяет последние четыре статьи и отличает их от первой?
А раз не можете, значит код Ваш не семантичен. Впрочем, проблемы с семантикой у Вас заметны даже без анализа кода, раздел Вашей статьи «Любопытно» содержит _ненумерованный_ список из двух пунктов. Однако это по смыслу не список, тем более ненумерованный, а простой абзац. Чтобы в этом убедиться, поменяйте пункты местами — т.к. список ненумерованный смысл текста не должен измениться.
Вы не сможете ответить на вопросы:
1) О чем пять статей в вашем примере?
2) Что по смыслу объединяет эти пять статей?
3) Что по смыслу объединяет последние четыре статьи и отличает их от первой?
А раз не можете, значит код Ваш не семантичен. Впрочем, проблемы с семантикой у Вас заметны даже без анализа кода, раздел Вашей статьи «Любопытно» содержит _ненумерованный_ список из двух пунктов. Однако это по смыслу не список, тем более ненумерованный, а простой абзац. Чтобы в этом убедиться, поменяйте пункты местами — т.к. список ненумерованный смысл текста не должен измениться.
1) О красивых картинках
2) Это последние 5 опубликованных
3) На пда-версии выводится только одна.
Ну а список нумерованный. И это не один абзац, так как смысл у них разный. А нумерован он потому, что если поменять их местами смысл текста таки меняется. )
2) Это последние 5 опубликованных
3) На пда-версии выводится только одна.
Ну а список нумерованный. И это не один абзац, так как смысл у них разный. А нумерован он потому, что если поменять их местами смысл текста таки меняется. )
Что такое статья можно посмотреть в википедии.
Пока нет статей — говорить о 2) и 3) бессмысленно.
А список Вы сделали нумерованным только после моего комментария, с Вашей стороны, как минимум, не красиво отвечать мне на этот счет задним числом.
И тем не менее, в любом случае, это максимум два абзаца, а не два пункта нумерованного списка — в противном случае приведите мне смысловое описание этого списка (что в нем перечислено?) и признак сортировки.
Пока нет статей — говорить о 2) и 3) бессмысленно.
А список Вы сделали нумерованным только после моего комментария, с Вашей стороны, как минимум, не красиво отвечать мне на этот счет задним числом.
И тем не менее, в любом случае, это максимум два абзаца, а не два пункта нумерованного списка — в противном случае приведите мне смысловое описание этого списка (что в нем перечислено?) и признак сортировки.
Я сделал список нумерованным ещё вчера. Зачем мне что-то менять и говорить, что вы не правы?
Смысловое описание над ним в h4 написано. Отсортированно по времени нахождения таких вот любопытных моментов. И это не абзац. Потому что, я — Автор. :)
Смысловое описание над ним в h4 написано. Отсортированно по времени нахождения таких вот любопытных моментов. И это не абзац. Потому что, я — Автор. :)
> Я сделал список нумерованным ещё вчера.
Да, действительно мне ежедневно приходят письма от ТМ со списком всех правок всех статей, на случай если понадобится контр-аргумент в комментариях. Спасибо ребятам.
>Потому что, я — Автор. :)
то-то.
Да, действительно мне ежедневно приходят письма от ТМ со списком всех правок всех статей, на случай если понадобится контр-аргумент в комментариях. Спасибо ребятам.
>Потому что, я — Автор. :)
то-то.
Да, действительно я правил статью. UPD видите?
Если вам приходят такие замечательные письма, в них наверное есть и текст до изменения, раз вы так уверенно утверждаете, что я исправил этот ненумерованный блок на нумерованный.
Если вам приходят такие замечательные письма, в них наверное есть и текст до изменения, раз вы так уверенно утверждаете, что я исправил этот ненумерованный блок на нумерованный.
>раз вы так уверенно утверждаете, что я исправил этот ненумерованный блок на нумерованный.
>Я сделал список нумерованным ещё вчера.
>Я сделал список нумерованным ещё вчера.
И к чему это? :)
если длинно, то к тому, что
1) фраза «Я сделал список нумерованным ещё вчера» однозначно указывает на то, что до этого он был не нумерованным.
2) фраза «раз вы так уверенно утверждаете» подразумевает, что я лгу и список Вы не изменяли.
3) представить ситуацию, что я писал сегодня комментарий к Вашему вчерашнему тексту здоровым рассудком довольно сложно. тем более, что исходя из 1) это и не требуется — факт несмыслового использования списка (что, собственно, я и хотел подчеркнуть) на лицо и Вами подтвержден.
если коротко, то к тому, что Вы заврались.
1) фраза «Я сделал список нумерованным ещё вчера» однозначно указывает на то, что до этого он был не нумерованным.
2) фраза «раз вы так уверенно утверждаете» подразумевает, что я лгу и список Вы не изменяли.
3) представить ситуацию, что я писал сегодня комментарий к Вашему вчерашнему тексту здоровым рассудком довольно сложно. тем более, что исходя из 1) это и не требуется — факт несмыслового использования списка (что, собственно, я и хотел подчеркнуть) на лицо и Вами подтвержден.
если коротко, то к тому, что Вы заврались.
1. статья может быть просто картинкой, такое бывает даже в полиграфической (не путать с порнографической) продукции, причем я не только про playboy ;)
2. Это будет видно из контента, если они не объединенны, то их вапще незачем ставить рядом
3. Все 5 должны быть объединены по смыслу, но первая все же выделяется на фоне остальных просто потому что она первая, уж так у людей повелось: что первая — главная, более важная, самая актуальная, приоритетная и т.д.
А вообще семантика конечно страдает, я бы например использовал здесь маркированный список, причем это решило бы далеко не все проблемы с семантикой, но это лучше чем таблица… а почему читайте 3мя прокрутками вверх ;) В первую очередь потому что при неожиданном контенте таблицы ведут себя неадекватно, во-вторых потому мобильное отображение страдает…
2. Это будет видно из контента, если они не объединенны, то их вапще незачем ставить рядом
3. Все 5 должны быть объединены по смыслу, но первая все же выделяется на фоне остальных просто потому что она первая, уж так у людей повелось: что первая — главная, более важная, самая актуальная, приоритетная и т.д.
А вообще семантика конечно страдает, я бы например использовал здесь маркированный список, причем это решило бы далеко не все проблемы с семантикой, но это лучше чем таблица… а почему читайте 3мя прокрутками вверх ;) В первую очередь потому что при неожиданном контенте таблицы ведут себя неадекватно, во-вторых потому мобильное отображение страдает…
Если придется крутить картинки в цикле, то программист вас точно пошлет, а если это должно быть только в один ряд и картинки не должны меняться то неужели не легче каждой картинке установить позишн абсолют в процентах и не парится.
www.getincss.ru/2008/03/29/ravnoudalennye-elementy/ вот здесь 4 способа решить проблему. Совсем недавно тоже такая проблема встала, только вместо картинок ссылки :)
Доброе утро) Всех с праздником.
я бы при решении этой задачи поступил следующим образом: задал бы блокам, в которых лежат картинки ширину 20%, зафлоатил бы их, а потом выровнял бы каждую картинку по центру своего контейнера.
еще можно поиграться с display:inline-block для контейнеров)
я бы при решении этой задачи поступил следующим образом: задал бы блокам, в которых лежат картинки ширину 20%, зафлоатил бы их, а потом выровнял бы каждую картинку по центру своего контейнера.
еще можно поиграться с display:inline-block для контейнеров)
А если макет резиновый? А если еще нужно произвольной кол-во картинок так же застилизовать ( то есть чтобы они переносились в слудующую строку)?
У меня макет резиновый. Ну а с переносами действительно всё плохо.
Я думаю, что если задача стоит так: «сделать неизвестное количество блоков, до пяти в одной строке, выровненные по обоим краям блока», то сделать это можно только с помощью javascript.
( Хотя сейчас подумалось про inline и text-align: justify )
Я думаю, что если задача стоит так: «сделать неизвестное количество блоков, до пяти в одной строке, выровненные по обоим краям блока», то сделать это можно только с помощью javascript.
( Хотя сейчас подумалось про inline и text-align: justify )
display:inline-block для LI и не париться над такого рода задачей. На хабре куча примеров как это сделать кроссбраузерно. Тогда отпадают все проблемы указанного метода.
Если пишите хорошую статью так проверили бы хоть опечатки — «Инетрнет эксплореру»
Еще бы минимальную ширину контейнера задать.
я такое с отрицательными отступами делаю, нормальным списком.
article тут ни к месту же)
article тут ни к месту же)
вооооот +1
а то заладили: таблицы, семантика…
правда этот метод тоже не всегда подходит например если у нас господа заказчики (или дизайнер) обладают богатой фантазией и сайт пестрит разными цветами… тогда при условии что колонки рядом и блок фотогалереи имеют разные бэкграунды — нам прийдется попотеть с position: relative; и z-index чтобы все сошлось…
а то заладили: таблицы, семантика…
правда этот метод тоже не всегда подходит например если у нас господа заказчики (или дизайнер) обладают богатой фантазией и сайт пестрит разными цветами… тогда при условии что колонки рядом и блок фотогалереи имеют разные бэкграунды — нам прийдется попотеть с position: relative; и z-index чтобы все сошлось…
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Блок картинок выровненный по левой и правой стороне