Leaderboard
Popular Content
Showing content with the highest reputation on 04/10/2011 in Posts
-
Ничего устанавливать не надо. На том сайте по ссылке "@font-face Kit" есть генератор, создающий необходимые файлы и CSS для всех браузеров. А потом можно что-то типа такого (точно не подгонял, чисто показать принцип): <!DOCTYPE html> <title>Noah Lubin</title> <style> @font-face { font-family: 'TeXGyreAdventorRegular'; src: url('texgyreadventor-regular-webfont.eot'); src: url('texgyreadventor-regular-webfont.eot?#iefix') format('eot'), url('texgyreadventor-regular-webfont.woff') format('woff'), url('texgyreadventor-regular-webfont.ttf') format('truetype'), url('texgyreadventor-regular-webfont.svg#webfontVNQ4fiYu') format('svg'); font-weight: normal; font-style: normal; } html, body { margin: 0; padding: 0; } h1 { font: 60px/68px 'TeXGyreAdventorRegular', Arial, sans-serif; letter-spacing: 0; color: #888; width: 1000px; margin: 0 auto; } .header { min-width: 1000px; background: #888; padding: 2px 0; text-align: center; font: 14px/18px 'Times New Roman', serif; text-transform: uppercase; } .header ul, .header li { display: inline; list-style: none; } .header form { display: inline; } .header a { display: inline-block; color: #888; background: #fff; padding: 0 10px; text-decoration: none; margin: 0 5px; } .header a:hover { color: #fff; background: #ccc; } .header label { display: inline-block; color: #fff; background: #ccc; padding: 0 5px; } .header input { height: 14px; font: 12px/14px Arial, sans-serif; padding: 0; border: 0; vertical-align: 1px; margin: 0 0 0 5px; } </style> <h1>Noah Lubin</h1> <div class="header"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Gallry</a></li> <li><a href="#">About</a></li> <li><a href="#">My Videos</a></li> <li><a href="#">Contact</a></li> </ul> <form action="#"> <label>Search <input name="q"> </label> </form> </div>2 points
-
Буквально начав набирать ответ, понял, что не список по еще одной причине: элементы пути не однородны, отношения между ними — не просто последовательность, а именно иерархия, подчиненность последующего предыдущему. Если (по аналогии с грубым, но верным замечанием sorrow) страдать секцие- и аутлайнозадр... в общем, фанатизмом , "семантичнее" должна быть структура примерно такого плана (знаю, что это бред, но чисто в порядке мозгового штурма...): <figure role="breadcrumbs"> <!-- figure изолирует outline крошек от основного outline страницы, role="breadcrumbs" сейчас не существует и приведено просто для примера "было бы хорошо, если..." --> <figcaption>Вы здесь:</figcaption> <section> <h6><a href="/">Главная</a></h6> / <section> <h6><a href="/section/">Важный раздел</a></h6> / <section> <h6><a href="/section/subsection/">Интересный подраздел</a></h6> / <section> <h6>Какая-то страница</h6> </section> </section> </section> </section> </figure> Поскольку этой иерархичности в полной мере не раскрывают как список, так и обычная строка — имхо, вполне применим подход "если не видно <существенной> разницы, зачем платить писать больше". Плюс у обычной строки преимущество большей наглядности при отключенных/недоступных стилях (о чем я упоминал в исходной теме). Еще я подумал, что для иерархических отношений между ссылками просто обязано существовать специательное значение атрибута rel, но, похоже, с этим атрибутом вообще какая-то свистопляска (были какие-то предложения еще в HTML4, но от них, судя по всему, давно отказались, потом в HTML5 хотели сделать по-другому — и о5 не сделали). А жалко — по-моему, семантике отношений между ссылками в крошках в этом атрибуте как раз самое место... Имхо, вся прелесть обычных ссылок в строке — что ими и управлять практически не надо, они сразу ведут себя как нужно . К тому же ссылка — сама по себе контейнер, а концевой элемент можно обернуть чем-нибудь слабосемантично-выделяющим, типа b/i. Общий контейнер, конечно, будет — например, p, как предлагает Serlutin. И стиль этого контейнера будет определять вид разделителей. С Li-шками же эти разделители сразу становятся источниками проблем. Между Li-шками их не всунуть, вставлять внутрь — непонятно с какой стати, плюс разделители становятся ассиметричными, что сразу усложняет стилизацию, генерировать CSS-ом — все те же проблемы плюс костыли для браузеров... Причем ваще неупорядоченных. Они там точно того...2 points
-
Абсолютно пофиг. Если спискозадрот, делай списками. Иначе делай обычными ссылками2 points
-
В теории, да, как-то так. Но... смотрим окончание подписи нашей неподражаемой Светланы и пытаемся обрести просветление. Итак, типа IT-коан: молодой послушник из обычной индийской деревни, не обучавшийся в универститетах страшным наукам типа "семантика", зато с прекрасной бытовой логикой "здравого смысла", заходит на сайт некоего учителя, чтобы обрести знание об истинной сути вещей. А админ этого сайта накануне хорошо отметил CSS Naked Day (кстати, поздравляю всех с прошедшим!) и спьяну забыл включить стили обратно . И видит наш простой индийский паренек примерно следующее: Вот какие варианты тут с первого взгляда укажут ему истинное Дао (то бишь путь, по-нашему), а какие — скорее запутают?..1 point
-
И таки очень похоже, что да . В т.ч. с точки зрения "утиной типизации", имхо.1 point
-
Вот статья, куда я каждый раз сам подглядываю за этими примерами: http://cssing.org.ua/2007/12/06/expression-optimization/ Еще красивый (хоть и уже неактуальный) пример эмуляции :before/:after был здесь. Просто тут я рассуждал не как верстальщик, отдающий работу "в пространство", а как кодер, прикручивающий верстку к собственному движку. И тут мне проще добавить в админку поле "картинка для украшения главной страницы", а в код страницы — что-нибудь типа <?php $image = $page->decorativeImage; $size = getImageSize($image); if ($size) echo ' style="background-image:url(/images/'.$image.');padding-right:'.$size[0].'px"'; ?> а визивига секретарше вообще не давать . Но это уже глубоко уходящая в оффтоп философия...1 point
-
Тут ещё надо от конкретного примера исходить. Если вы напишете такую конструкцию span {color: red; display: block; width: 300px; height: 500px;} то ваш сайт станет практически не рабочем. Ведь практически все визуальные редакторы в качестве разметки используют span. Поэтому если кто-то в новость, статью или ещё куда-нибудь добавит этот элемент, то страница просто разлетится на кусочки. Логично будет определять span там, где он уже точно не появится. Например, в шапке сайта. Шанс того, что кто-то полезет в дизайн и вставит туда тег, очень небольшой (хотя всё зависит от адекватности сайтодержателя). Поэтому можно сделать что-то такое #header span {тут стили}1 point
-
единственным соображением за и против стиля записи, может быть только собственное удобство чтения и сопровождения. ну и если в команде работаешь, то есть общий стиль, которого надо придерживаться, общепринятый. фигурные скобки просто привычнее наверно большинству, т.к. во многих языках используются. я например по возможности, если в конструкции одна строка без них предпочитаю обходиться, если несколько - то фигурные. что-то типа foreach ($settingsArr as $preset) { $presetXml = $settingsXml->addChild('preset'); if($this->checkRights($params['side'], $params['module'], 'deletePreset')) $presetXml->addAttribute('deleteLink', $this->getLink(array($params['side'], $params['module'], 'deletePreset', $preset['id']))); if($this->checkRights($params['side'], $params['module'], 'editPreset')) $presetXml->addAttribute('editLink', $this->getLink(array($params['side'], $params['module'], 'editPreset', $preset['id']))); $presetProp = $presetXml->addChild('prop'); foreach ($preset as $name => $value) $presetProp->addAttribute($name, $value); } АП: второй стиль с endif, endforeach может быть удобнее в php-шаблонах где логика перемешана дизайном, хотя это плохо, во многих cms используется. си-подобный лучше подходит для чисто "программных" фалов.1 point
-
Это называется "конфликт бордеров" и разруливается он по следующим правилам: Здесь как раз работает последний пункт...1 point
-
Я тоже сталкивался. Но, во-первых, ссылка и форма — разные вещи, во-вторых, понятно, что это "рыба", в рабочем сайте так не останется. Хотя согласен, в HTML5 невалидно (но в XHTML1/HTML4, про которые речь — нормально). Про nav понятно, а про остальное — можно пояснить? Я приводил доводы против того, чтоб делать "хлебные крошки" списком. Если я в упор не вижу чего-то важного — прошу подсказки, чего именно. В случае обычной строки со ссылками оба требования выполняются автоматом . Но, если гнаться за абстрактным совершенством, :before/:after легко эмулируются экспрешнами. А что не так у них с масштабированием? Меня несколько сбило с толку следующее: Как рассуждаю я: если картинка не является частью содержания, чисто декоративная, то зачем тексту ее обтекать — пусть себе занимает место под отступом в качестве фона самого контейнера текста, и не надо вообще дополнительных блоков. Если же ее наличие/отсутствие как-то сказывается на тексте — волей-неволей приходится признать ее частью контента. И, поскольку отсутствовать картинка может по разным причинам (банально недогрузилась, выключены в браузере и т.п.), то самое простое средство обеспечить сжатие/растяжение текста в зависимости от этого — именно <img> с float и без указания размеров (с искусственной пустышкой возможна ситуация, когда картинки нет, а отступ есть — так за что боролись?). Кроме того, фоновые картинки не печатаются, а это как бы сплеш-страница, на которой графика — часть фирменного стиля. В общем, с моей точки зрения под каким углом не посмотреть, отдельная пустышка с картинкой оказывается ни к селу (правильному поведению контента в зависимости от нее), ни к городу (чистоте разметки)... хотя, возможно, это проблема моей точки зрения1 point
-
Макс, по п.6-7 — это я посоветовал в другой теме. Блок новостей на этой странице вообще второстепенная вещь, одной кастрюли для него, имхо, вполне достаточно. Для HTML5-парсера на секции, заносящиеся в outline, он делится как раз заголовками (именно за этим они там). А в рамках HTML4 (по ТЗ предполагалось ограничиться им) лично я не вижу, как оборачивание каждой новости в отдельный пакетик добавит ей какой-либо семантики (особенно в отсутствие заголовка), только увеличит кол-во п. 22 . Разве что для оформительских целей, но по макету я и в этом не видел необходимости (тут каюсь, моя невнимательность — недоучел нижнюю черту под последней новостью). Насчет обертки уже вижу, что я ошибался. Насчет прочего — буду благодарен за расширение кругозора и избавление от заблуждений. П. 10 — по-моему, вполне легитимный вариант для отправки формы "самой себе". Ясно, что в боевом проекте там будет конкретный адрес скрипта, на мой взгляд, для верстки это не недостаток. П. 13 — имхо, список к бредкрамбсам притянут за уши. Да, иерархия вроде как предлагает последовательность, но само название "строка навигации" говорит о его строковой природе. В HTML5, имхо, он вполне может быть <nav>-ом с обычной строкой ссылок внутри. Вообще, имхо, хороший тест на семантику разметки — обычное отключение стилей в браузере. Если юзер читает, к примеру, на маленьком мобильнике: имхо, вместо ожидаемой ясности первой реакцией будет растерянность "ну и где же именно я нахожусь среди этой кучи ссылок?". Тогда как с традиционной строкой, похожей на привычный файловый путь что со стилями, что без, своё местонахождение на конце цепочки будет очевидно в любом случае. А уж вносить разделитель в <li>... Если выпендриваться, для него в тему было бы припахать :before/:after. Но, опять же, не вижу необходимости. П. 20 — тоже прошу пояснить, чем пустой несемантичный спан засоряет структуру меньше, чем непустая слабосемантичная картинка?1 point
-
В том то и дело, что в жизни никто (почти никто) по назначению тег <cite> не использовал. Поэтому whatwg решили изменить его назначение, вместо ссылок на источники, сделать его названием книги, фильма ит. д. Довольно опрометчивый шаг, как мне кажется. Ведь это переосмысление тега. Да и получается что те 2 с половиной человека, которые использовали тег правильно, теперь противоречат стандартам. Дело ведь не только в домохозяйках. Если посмотреть на разные блоги, то можно увидеть, что правильно их оформляют только верстальщики. Почему? Да потому что им не трудно редактировать текст в режиме HTML. Все же остальные будут пользоваться обычным редактором. Но большинство редакторов просто урезанная копия Word'a, ведь им умеет пользоваться большинство. Другое зло — bb-коды, которые просто противоречат сути HTML. Шанс на то, что когда-нибудь появится семантичный визуальный редактор, который позволит названия книг заключать в <cite> очень маленький, поэтому, как мне кажется, этот тег не приживётся. Да, в html такую понятную структуру будет выстроить нелегко. Однако преимущество html над xml в том, что есть единообразие. Ведь один человек название заключит в <title>, другой в <header>, третий в <nazvanie>, а четвёртый в <qwerty>.1 point
-
да. Но в данном случае именно акцент на то, что элемент должен быть блочным.1 point
-
самый верный способ узнать, как лучше: попробовать все варианты и выбрать1 point
-
Напиши textarea { background: none; }1 point
-
Можно я отвечу? Очень мало людей способны к самоорганизации. Поэтому "последовательность формальных шагов для получения формального документа об образовании" связана с "получением необходимых для эффективной работы профессиональных знаний-умений-навыков" непосредственно, т.к. учеба в учебном заведении, ну или в принципе с преподавателем, задает необходимый вектор развития человеку. А самостоятельно он этот вектор может и не нашел бы никогда. Затраты времени на первое уменьшают затраты времени на второе. Повторюсь, что это все относится не к гипотетическому Ломоносову, а к среднестатистическому человеку.1 point
-
а это не смешно. Вот те самые люди, которые не понимают, зачем учиться, потом удивляются, что жить плохо, что денег нет, и учиться не на что.1 point
-
Цель не в доказывании чего-то кому-то.1 point
-
Использовать document.location.hash. Получать якорную часть, и показывать нужный блок.1 point
-
google.ru ?1 point
-
а логотип-картинку разместите в нужном месте css-позиционированием. @font-face на htmlbоok.ru position на htmlbоok.ru0 points
-
Для этого придумали микроформаты. Качество индексации поисковиками представленного контента вырастет в разы! Выиграют все. Но w3c играется в какой-то песочнице.0 points
-
<table cellpadding="16px" cellspacing="18px"> Здесь px не нужно указывать.-1 points
-
Добрый день всем! У меня имеется форум на ipb движке и установленный (скачанный) стиль. Я являюсь участником WM системы, указал в своём аттестате ссылку на форум. Но этого было недостаточно, чтобы ссылка была действительной, нужно влепить банер на главную страницу форума. Зашёл в АЦ, далее в настройки системы рекламы и в подвал вставил код банера. Этот самый банер смотрится не красиво, т.к. расположен внизу и мне хотелось бы создать новый блок справа, в котором будет расположен он. Знаю немного язык HTML, CSS не знаю вообще. Прошу помощи. Ссылку на форум не стал указывать, т.к. запрещено в правилах. Если дадите разрешение - укажу.-1 points
-
Расскажите пожалуйста как нарезать меню на отдельные пункты, а то темы не нашёл.-1 points
This leaderboard is set to Kiev/GMT+03:00
-
Upcoming Events
No upcoming events found -
Сообщения форума
-
Актуальные контакты: Telegram: @Nikker_web E-Mail: tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ -
Актуальные контакты: Telegram: @Nikker_web E-Mail: tarasevich.email@gmail.com Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ Портфолио https://www.behance.net/d4d4186e
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } } -
Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок. -
By Katerina23 · Posted
Да, подходит. Спасибо.
-