Ludwig Voltman
-
Posts
65 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by Ludwig Voltman
-
-
По-моему очень круто! А что за система организации стилей? По стилистике похожа на АНБ.
1) Контактный телефон вверху (We can help. Email or call +1-570-708-8788) я бы обернул в address
2) Внутри структурных тэгов (section, например) заголовки начинаются с h1. По крайней мере, так делают во всех примерах, которые я видел, хотя это создает дополнительные сложности со стилизацией заголовков
3) Зачем оборачивать текст div, если внутри текст? Может, лучше p?
4) По деградации: я посмотрел в IE7, все отображается хорошо.
5) В h1 я бы обернул логотип
- 1
-
Тут главное -- логическое деление. Оформление может быть очень разным.
-
Классы, как мне кажется, совсем не длинные и логика есть, я примерно также именую.
Смотрел верстку по первой ссылке. Многих вещей не понял.
1) почему баннер сделан бэкграундом? Здесь, в отличие от предыдущего макета есть и логотип, и название компании. При печати, опять же, логотип должен присутствовать. Я бы сделал через img. Аналогичная штука и с изображением поводка. Акции кончаются, и когда человек захочет поменять картинку на изображение другого товара -- придется копаться в css.
2) почему каждому блоку присвоен класс clearfix? Чтобы задать float:left? Тогда зачем задавать его каждому блоку? Чтобы прописать clear:both? А зачем он нужен тем блокам, над которыми нет плавающих блоков (например тому же header)? Зачем делать блоки inline-block?
3) зачем в футере у некоторых блоков задано относительное позиционирование? Что оно здесь выполняет?
4) почему у wrapper задана height: 100%? Что это меняет?
5) почему в тэг <form> вложен простой див без стилей?
6) зачем оборачивать блоки текста в div, если есть более подходящий тэг p?
7) нашел ошибку, похожую на ту, что была в предыдущей верстке: сайт не располагается по середине экрана, опять справа есть небольшой отступ.
-
Если верстать семантически, то это скорее small.
small семантически используется для юридических замечаний (тех, что мелким шрифтом в конце пишутся)
strong - это что-то нереально важное
если делать без семантики, то можно использовать <b> - это просто текст с отличающимся оформлением.
Мне кажется тут не все так просто :-)
strong может быть как и чем то нереально важным, так и не важным, смотря внутри чего он стоит.
Если в < html5 возможно и все более менее понятнее с семантикой, то в html5 мне кажется все куда запутаннее: смысл тега strong должен быть совершенно разным, когда он один на странице, без других тегов или когда он внутри, например article.)
Хотя это только догадки :-)
А "Мы гарантируем 100% конфедициальность..." - весьма важное предложение :-)
Без @SelenIT не разобраться :-)
Как я понял у <strong>'а может повышаться важность. Вот примерно такой (адский) пример был в спецификации:
<strong>something importand and <strong>something VERY important</strong></strong>
По поводу small и strong. Я думаю что они друг друга не исключают. small говорит что это что-то там юридическое, а strong говорит что это что-то важное. Можно, в принципе и так сделать:
<strong><small>text</small></strong>
Важный юридический текст.
-
Если верстать семантически, то это скорее small.
small семантически используется для юридических замечаний (тех, что мелким шрифтом в конце пишутся)
strong - это что-то нереально важное
если делать без семантики, то можно использовать <b> - это просто текст с отличающимся оформлением.
- 2
-
Осмысленные имена для стилей, как я понимаю, это такие имена, в которых схватывается сущность стилизуемого элемента. В БЭМ, например, сущность блока понимают так: "имя блока должно говорить о том, что делает этот блок", т.е. сущностью является функция того или иного блока/элемента.
Помимо сущности мы можем выделить явление. То есть конкретную реализацию сущности. Явлений много - сущность одна. В данном случае явлением является оформление. Оно динамично. Можно провести редизайн и внешне сайт с клоунами поменяется (т.е. изменится явление), но сущность его останется неизменной - он всё-равно останется сайтом о клоунах.
-
Div'ом делать не кошерно, не семантично. Используйте <strong>/<em>
- 1
-
А разрешение какое?
Поправил. Сейчас как?
1024х600. Вид не изменился. Попробуйте уменьшить окно браузера и картинка будет как у меня. Это из-за position: fixed, что-то не так.
-
Сижу с нетбука. У меня половина кнопки "отправить" ушла вниз, а полосы прокрутки нет.
-
Самый простой способ проверить надежность верстки -- уменьшить окно браузера. Верстка должна держаться, не разваливаться. Здесь -- разваливается. Я бы начал с min-width для body.
1) id с class вперемешку. Я бы даже сказал -- слишком много id. Я думаю, уместно будет задать id для основных блоков. Когда id задают картинкам и заголовкам, имхо, перебор.
2) background-color для wrap'a не распространяется на всю его длину. Это потому, что плавающие блоки в wrap'e вышли за его пределы. Блоку wrap нужно прописать overflow:hidden, чтобы он растянулся на всю длину включенных в него блоков.
3) процентные значения -- рискованная штука: нужно просчитать все возможные последствия. Например: я уменьшил окно и левая колонка в футере (которой записан адрес и которой задана ширина в 20%) вылезла за пределы футера, и появилась отвратительная белая полоса. Чтобы это убрать, нужно сделать то же самое, что и с врапом: прописать overflow:hidden для футера и заставить фоновую картинку повторяться не только по оси Х. А лучше отказаться от процентных значений, там где их можно избежать (это мое дилетантское мнение).
4) я бы избегал классов типа otstup, otstup-verh и т.п. Если дизайнер не накосячил с сеткой в макете, то все элементы блоков подчиняются определенной логике, а значит многие отступы можно задать через контекст (например, все p в блоке Х имеют такой-то отступ, или же, первый элемент в блоке Х имеет верхний отступ на 5 пикселей больше, чем остальные элементы в этом блоке и т.п.)
5) Не понял логику разметки в футере. Почему факс и и-мейл заключены в один тэг p, а телефону задан свой персональный тэг? Тут либо всё, и факс, и имейл и телефон заключить в тег p (а для переноса строки использовать <br> или фиксированную ширину блока), либо каждому контакту давать свой p.
-
Вчера день посвятил БЭМ. Все в принципе понятно, не так уж и сложно, правда код некрасивый получается. Сегодня что-нибудь заверстаю по новой методике и буду изучать MCSS
То есть идет отказ от главного плюса цсс, который стал самым большим минусом, да?Насколько я понял все методологии стремятся к минимизации каскада и специфичности. Просто уровень минимизации различный. Кто-то делит сайт на большие блоки и использует каскад в рамках этого блока, а кто-то параноидально рассматривает любой кусок текста как отдельный блог (БЭМ). Оптимально, как мне кажется, использовать каскад там, где вероятность изменения структуры минимальна. Но если хочется чтобы сайт "выдержал" самые извращенные изменения в структуре, то БЭМ -- как мне кажется -- лучший выбор.
По сути главный аргумент против БЭМ -- то, что такая гибкость не нужна на маленьких сайтах, где сверстал и забыл.
-
Я тоже месяц назад начал изучать веб-программирование.
Я для себя такой список книг составил:
Классический CSS:
1) Макфарланд "Большая книга CSS" (почти прочитал)
2) Майер CSS - каскадные таблицы стилей: подробное руководство (почти то же самое, что и 1, буду читать выборочно - что не понял у макфарланда и чего у него не было в книге)
3) SelenIT, Psywalker "Инлайновый контекст форматирования" - чтобы понять логику поведения инлайновых элементов
CSS3
Здесь я ещё не определился с вариантом:
1) CSS для вебдизайнеров -- очень кратко, только самые распространенные фишки CSS3. Можно за день прочитать.
2) Макфарланд CSS3: The missing manual. Эта на английском, книжка объемная, автор хороший. К новому году выйдет русский перевод. На озоне уже можно сделать заказ. Я думаю закажу -- как подарок на НГ
HTML5
До него я пока не добрался, но буду выбирать из этих вариантов:
5.1. html5 для веб-дизайнеров (как и предыдущая книга этой серии -- очень кратко, только самое основное)
5.2. учебник Сухова (отзывы неплохие, прочитал страниц 20 для интереса -- написано неплохо, много чего интересного рассматривается)
JQuery
По этой теме, как доложила разведка, самая лучшая книга -- вот эта: jQuery. Подробное руководство по продвинутому JavaScript (Бибо, Кац).
-
Скриншоты делал с нетбука. Но на обычном компьютере то же самое. Бэкграунд растягивается на ширину экрана. Если уменьшить окно, то бэкграунд стянется на ширину окна. А когда отводишь прокрутку влево -- появляется белая полоса.
-
Кстати, вспомнил, на psd2cms.ru тоже верстают по БЭМу, может быть, там все делают грамотно. Вроде бы даже и шаблон сверстанный ими -- solitude -- где-то в сети лежит.
Да, MCSS, я презентацию смотрел. Сначала интересно было, потом я потерял нить повествования. Не понимаю этот формат видеоконференций -- смотреть неудобно. Наверняка ведь у оратора есть письменный текст произнесенной речи. То, что можно вдумчиво прочитать за 10 минут приходится слушать 30 минут.
В комментариях на хабре один пользователь писал, что собирается провести сравнительный анализ методологий, возможно, скоро появится новая статья - будет интересно почитать.
-
Тема любопытная, сам сейчас присматриваюсь к различным методологиям. На хабре несколько новых статей на эту тему появилось, правда аргументы у сторон одни и те же (в одной из новых статей автор очень точно изобразил диалог бэмера и фаната самантики). Да и сайтов, сверстанных по бэму отцами методологии, я не находил. А то, что якобы по БЭМу (на хабре была статья, где автор сверстал шаблон corporate blue по БЭМу), на самом деле -- как говорят -- не совсем по БЭМу. В общем -- пытаешься найти ответы на вопросы, а получаешь новые вопросы. Думаю уделить несколько дней вдумчивому изучению методики, может, прояснится.
-
А почему бы просто не дописать им в css "display: block;" или вообще тогда не использовать html5 теги?
Можно и так сделать, но не будет работать в IE7 и 8.
http://htmlbook.ru/samlayout/verstka-na-html5/novye-tegi
А если без них обходиться то не модно, не прогрессивно, не семантично Я просто подумал, что м.б. что-то новое придумали с момента выпуска статьи, все-таки 2 года прошло.
-
что это значит?
Ну, например, вот так:
<header><div class="header"><h1>SITENAME</h1></div></header>
А не так:
<header><h1>SITENAME</h1></header>
-
1. Шрифт определяется через photoshop. Нужно кликнуть по кнопке "написание текста" (буква Т) и навести курсор на текст. В окошке появится использованный шрифт, размер, межстрочный, межбуквенный интервал и т.п.
2. Про градиент - действительно, для a:hover градиент прописан. а для панели навигации? Скину ссылку для сравнения: навигационная панель из макета и эта же панель на твоей верстке.
http://i.imgur.com/sm9Ig5e.jpg
ширина div'a на то и рассчитана - что бы тот текст как раз туда вмещался - понадобится расширим.С шириной все хорошо, дело в высоте. Вот как отображается макет, если добавить туда больше текста:
http://i.imgur.com/mg0m6Zy.jpg
то уже убралПроблема осталась. Всё-таки лучше делать через div.
-
Новые теги html5 (<header>, <section>, <footer>, <article> и др.) позволяют добавить семантичности верстке и разнообразить привычные div'ы. Однако не все браузеры корректно воспринимают эти теги. Вот что написано на сайте:
Internet Explorer до версии 8.0 включительно игнорирует тег <article>, но отображает его содержимое. Также в этом браузере любые стили не применяются к селектору article.
Firefox полностью поддерживает этот тег начиная с версии 4.0, но версии 3.0 и старше также корректно отображают содержимое тега.
Верстальщик на распутье. Что же делать?
1) Заставить IE (вплоть до 6 версии) воспринимать новые теги можно через небольшой JS (подробнее здесь). Сомнение: а что если у пользователя выключены JS?
2) Можно использовать новые теги, но не присваивать им стилей. По сути будет обычная divовая верстка с дополнительными семантическими тегами.
3) Можно просто не использовать новые теги, тогда и проблемы не возникнет
4) А ещё можно просто забить на старые браузеры и присваивать стили новым тегам.
Вопрос у меня такой:
Какой из четырех вариантов кажется Вам самым разумным? Может быть, есть какие-то другие варианты решение проблемы со старыми IE?
-
Тоже решил сверстать этот макет из любопытства. Обнаружил любопытное поведение background'a в firefox, если задать его расположение по центру при масштабировании (я пытался лого сделать бэкграундом - не получилось). Спрошу потом на форуме.
В новых тегах я плохо разбираюсь вот ещё порция критики по макету:
1) в оригинальном макете используются 3 разновидности нелегального шрифта myriadpro (regular, bold, semi-bold). Верхнее меню и a:hover в меню сделаны градиентом. Здесь этого нет.
2) слишком сложно сделана горизонтальная колонка под меню (там, где 3 картинки с текстом). Картинки я бы сделал через img, а не через background. Кроме того, при добавлении текста в эти колонки (туда, где написано "комплексная разработка", "строительные работы" и т.п.) текст перекрывает картинку, и залазит на колонку, которая идет ниже. Кроме того в макете ссылка "подробнее" (если не ошибаюсь) расположена справа, а не слева.
3) Три верхних колонки с картинками одинаковы. 3 отдельных класса не нужно, можно обойтись одним.
4) если мы добавим текст в div с классом content2, то этот текст полезет вниз и перекроет нижнюю навигационную панель и футер. Аналогичный баг происходит с div с классом text. Нужно убрать фиксированную высоту отовсюду, где это возможно
5) косяки с логотипом остались те же. Я ошибся с background'ом. В firefox он ведет себя непредсказуемо. Но вполне можно засунуть background в отдельный див (я сделал так)
6) ну и так, перфекционизм: мне кажется, что <br> в верстке лучше не использовать, т.к. он относится к дизайну, а не к информации, а значит ему не место в html. Перенос строки можно сделать путем комбинации блочного и строчного элементов, а также через фиксированную ширину.
-
Если добавить ещё немного текста в блок со статьями, то этот блок не растянется, а текст пройдет через него и спрячется за нижний блок.
Некоторые вещи не понял.
1) зачем давать такое именование div#wrapper когда можно просто #wrapper?
2) зачем создавать отдельный див со свойством clear:both, если можно присвоить это свойство другому блоку?
- 1
-
На большом экране смотрится нормально. На нетбуке (1200х600, вроде бы) нет. Если на большом экране окно уменьшить, то панель навигации и основной контент будут прижаты к левому краю, не будут по центру.
-
В новых тегах разбираюсь плохо. Просто про верстку напишу.
1) Первое, что бросается в глаза - горизонтальная прокрутка и большой отступ справа. Это из-за того, что логотип вложен в враппер, причем ширина логотипа больше ширины враппера.
2) Зачем врапперу задана статичная высота (height)? Это относится и к некоторым другим divам
3) Разметка шапки мне показалась очень сложной.
Я бы иначе нарезал макет. Левая и правая часть логотипа (а это один и тот же рисунок) может быть зациклена. Я бы вырезал эту часть и назначил её как body {background url(...) repeat-x; Среднюю часть логотипа (с домом и облаками я бы включил как отдельный блок в wrapper, а телефон спозиционировал относительно окна браузера.
В вашем варианте если экран монитора будет шире логотипа - изображение с домом будет дублироваться.
4) В оформлении классов лучше избегать сочетания строчных и прописных букв если нет специальной системы организации классов
-
Ludwig Voltman, спасибо вам за найденные ошибки и за то что помогаете исправлять...очень нужно для начала.Но вот беда,не понимаю, у меня тоже Firefox последний и хедер не пропадает(((что только не клацал,может вы как то по другому просматриваете?
Попробуйте уменьшить ширину окна браузера, прокрутите горизонтальный ползунок до конца и увидите, что оранжевая полоска в хедере не растягивается на всю ширину окна. Проблема эта решится, если вы зададите классу header-wrap свойство min-width: 650px (т.е. равное ширине основного блока с контентом). Если интересно, почему блок ведет себя так, вот тема, я недавно как раз это спрашивал.
Точка, точка, запятая - вышла версточка кривая
in Discussion of works
Posted · Edited by Ludwig Voltman
b- значит блок. Такой префикс используется в БЭМ и АНБ. В БЭМ очень полезен, когда большой сайт постепенно переводят на эту систему: видно, в каких частях кода новая методология используется, а в каких нет. Здесь в верстке он отличает блоки от, например, глобальных стилей (с префиксом g-)
http://vitaly.harisov.name/article/independent-blocks.html