Консультации и оценка качества html-вёрстки (бесплатно)

[я захожу на херфак]

вот так можно:

<dt><input type="checkbox" name="check" id="check" value="1" /></dt>
  <dd><label for="check">Ставим птичьку</label></dd>

можно, но так не семантично.
как это птичька стал термином, а лейба - ее определением?
ради чего тогда городить огород, если семантика все равно порушена?
не говоря уже про CSS. такому чекбоксу все равно свои стили придется писать.

я тут для себя подумал каждое поле совать в собственный DL.
удобно, когда список полей динамично меняется, надо отображать/скрывать некоторые и не смертельно если между православными полями будут проскакивать DIVы и прочая "ересь".

 

[Del]

можно, но так не семантично.
как это птичька стал термином, а лейба - ее определением?

вы можете поменять их местами в html, а в css - поменять обратно.

такому чекбоксу все равно свои стили придется писать.

уточните плиз что вы имеете в виду. dt-dd как раз удобен тем что у нас есть готовая оборачивающая структура.

я тут для себя подумал каждое поле совать в собственный DL.
удобно, когда список полей динамично меняется, надо отображать/скрывать некоторые и не смертельно если между православными полями будут проскакивать DIVы и прочая "ересь".

можно и так, но для наборов полей всё же православно юзать fieldset'ы.

 

[я захожу на херфак]

спасибо, вобщем понятно, что этот вопрос еще не закрыт однозначно.

уточните плиз что вы имеете в виду. dt-dd как раз удобен тем что у нас есть готовая оборачивающая структура.

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

можно и так, но для наборов полей всё же православно юзать fieldset'ы.

та я так и делаю)))

 

[Del]

спасибо, вобщем понятно, что этот вопрос еще не закрыт однозначно.

да, это так.

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

это можно настроить:

1. по-старинке, задавая классы контейнерам для элементов форм
2. через соседние селекторы или css3-селекторы

 

[dirt-jumper]

Доброй ночи. Верстка только DIV

Помогите - зае..мучался... Решил сделать жене сайтик не сложный. Но уперся в трабл.

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

Когда текста больше, чем высота окна браузера - футер перекрывает контент сайта.

Как это вылечить? Обрыл весь инет - нихрена не нашел решения.

В 2х словах че надо.

div шапка
div контент
div футер

надо чтоб футер был всегда прижат к низу окна браузера. Но если контента больше, чем высота браузера - он должен идти сразу в за ним.

Сие надо для того, что у кого монитор не такой большой как у меня - не было наложения.

 

[Del]

Подвал сайта прижатый к низу:

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

 

[dirt-jumper]

во! Спасибо большое Именно то, что надо ) Я-то на флеше закодить могу чё угодно. А в html как баран на новые ворота. Раньше, лет 6 назад без зданих мог с таблицами сделать. А сейчас вроде как div выгоднее )

 

[Lipricon]

Подскажите плиззз. Очень давно хочу войти, скажем так, в среду верстальшиков, знаю HTML, CSS не идеально конечно, но базовые знания есть. Пытался попасть в W3 Ukraine, у них там есть программа обучения, но никаких ответов от них не получил, причем даже они меня не тестировали. Может кто подскажет где есть такие программы. Потому что, если объективно, то работать в этой стези мне еще рановато, а вот обучиться в какой-нибудь компании, чтоб там остаться и дальше работать я с огромным удовольствием. Помогите кто чем может.

 

[Del]

Мы планируем организовать онлайн-школу вёрстки, но попозже.

Пока можем попробовать тут сделать тестовое задание, что я раздавал 3 года назад, и разобрать его.

Тестовое задание.

Задача №1:
Сделать два резиновых столбца.
Первый — 20% по ширине, второй — 80%, между ними расстояние 20 пикселей, расстояния от краёв страницы слева и справа 10 пискелей.
Без использования таблиц и javascript.

Задача №2:
Прислать титульную страницу сайта licenseline.com со следующими изменениями:
1. Переименовать пункт Insurance License Online Lecture на Insurance License Online Lectures и убрать ссылку для этого пункта.
имеется в виду - вообще убрать тэг <a>
2. Добавить внутрь него выпадающее меню справа с такими ссылками:

<a href="https://www.testeachersonline.com/arizona-insurance-exam-training">AZ Insurance Licensing</a>
<a href="https://www.52hours.com/california-insurance-license-exam-training">CA Insurance Licensing</a>
<a href="https://www.testeachersonline.com/colorado-insurance-exam-training">CO Insurance Licensing</a>

3. В блоке Recent News поменять местами дату и текст новости.
сделать дату серого цвета и курсивом, а текст новости - жирным.

Если вы не смогли выполнить все пункты - присылайте что получилось.

Также можем разбирать уже готовую вёрстку: что хорошо, что плохо, как сделать лучше.
Если вам кто-то сверстал сайт - тоже можно смело спрашивать - "ну как?"

 

[ijik]

проверьте, пожалуйста, мою верстку

 

[Del]

ijik

XHTML 1.0 Strict - похвально! Но поддерживать валидность на продакшене будет тяжело (нельзя юзать <embed>, target у ссылок, js должен быть в CDATA и т.д.). Лучше идти в ногу со временем и юзать HTML5 doctype.

CSS валидный - круто, но ведь это сковывает вам руки! А как же CSS3-свойства, вендорные префиксы и т.д.? В моей практике ещё не было такого чтоб клиент говорил: "А чего это у меня на сайте CSS невалидный?" Подозреваю что они даже не знают что его можно валидировать. Вот за валидность HTML - знают, бывает говорят если где-то что-то поломалось, а CSS - достаточно не содержать синтаксических ошибок, не нужна ему полная валидность. Даже полностью валидный CSS3-файл по дефолту проверяется как CSS2.1, соответственно будет сообщение об ошибке. А CSS3 просится, хотя бы для border-radius у div.all_goods.

UTF-8, всё верно.

Микроформаты бы ещё добавить.

При 1024px - горизонтальный скрол, это плохо. Кстати слева и справа - должен быть серый фон? Белый смотрелся бы органичней.

Кроссбарузерность - ok. Юзерам IE6 надо выводить lightwindow что они используют устаревший браузер, а сайт в нём будет работать неккоректно. Пример:

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

Готовый модуль:

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

Почему не работают кнопки увеличения-уменьшения кол-ва товаров? Почему пункты Меню не реагируют на hover?

Очень много вложенных div, и всё ради визуального оформления. Нужно юзать стили для html и body, на них вешать картинки.

Почему картинки с однородными цветами и четки границами (типа лого) в jpg, а не png?

Зачем оборачивающий div для menu_top?

float: left, float: left, float: left... - много не к месту: флоатятся блоки, которые не обтекают друг друга и должны отображаться независимо друг от друга. Нужно юзать position: absolute.
Зачем float:left у main_part1? Зачем он у .text_main h1?

div.block1, div.block2 - нужно придумывать осмысленные названия, исходя из роли блоков.

div.чё-то-там {display: block} - он и так display: block, т.к. это div. И у него по дефолту margin: 0, padding: 0.

Почему таблица разбита на table и div? Надо tbody и tfoot.

<a>Оформить заказ</a> - уверены что не input[type="submit"]?

При вбивании новых позиций в заказ, вёрстка тянется, его гуд.

Картинки просят alt.

Document outline правильный, радует.

При выключенных картинках - всё плохо. Т.е. с мобильного инета пока сайт не загрузится до конца - будет не понятно о чём речь вообще.

Favicon забыли.


Итого - норм. Клиенту отдавать можно.
Но есть к чему стремится.

Сколько времени уже верстаете?

 

[ijik]

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

-я ставлю float:left в ненужных местах, т.к. например если в диве есть внутренние дивы с float:left, то внешних див их высоту игнорирует. на этот вопрос Вы, кажется, уже ответили: дли внешнего использовать position:absolute(?)

 

[Del]

верстаю почти как год. Спасибо Вам за советы.Постараюсь им следовать)

За год с нуля? Сама?
В любом случае - молодец.

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

Во первых старые версии браузеров - это только IE7 и IE8.
Firefox, Chrome, Safari, Opera - поддерживаем только самую последнюю версию. Там автообновление, так что почти у всех они сразу обновляются на актуальный релиз.
IE6 не поддерживаем даже за деньги.
Поэтому мы можем говорить только о IE7 и IE8. Весной 2012, устаревшей станет 9-ка, выйдет IE10.

Для старых IE есть чудный проект -

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

. Написанный талантливым человеком, всё через ламповый VML, и даже почти без багов на сложной раскладке.
Так вот PIE.htc реализует большинство общеупотребительных css3-красивостей. А что не получается - ну оставляем в упрощенном виде, ничего страшного, это graceful degradation, никто не умрёт от того что юзер увидит сайт без закруглённых углов и градиентиков.
Кстати IE7 это +20% к стоимости вёрстки.

Если свойство критично важно для раскладки-внешнего вида, то для устаревших браузеров прописываем альтернативный код. Например одноразовми экспрешенами для IE7-8 можно многое сделать.

не лучше ли для всех сразу сделать, например, закругление углов картинкой?

нет, это плохо: лишние файлы, лишний траффик, меньшая скорость рендеринга, тяжелей поддержка и правки.

-я ставлю float:left в ненужных местах, т.к. например если в диве есть внутренние дивы с float:left, то внешних див их высоту игнорирует. на этот вопрос Вы, кажется, уже ответили: дли внешнего использовать position:absolute(?)

Нет, вам нужно делать clearfix или создавать контекст форматирования родительского элемента.


Матчасть:

Float:

• ⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

Clearfix:

• ⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

Контекст форматирования:

• ⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.
• ⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.
  (комментарии читаем тут:
  ⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.
  )
• ⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.
  (комментарии читаем тут:
  ⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.
  )
• ⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

(ппц, на хабре перебанили всех кто писал статьи "битвы за поток", оригинальные посты заблокированы, полчаса по инету выискивал копии)



Ах, да, про position: absolute. Я имел в виду, что вот такие блоки:

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

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

 

[_KurT_]

Доброго времени суток.
Проблема в IE8. В IE6 и IE7 - все нормально. (там есть и другие баги, но пока меня интересует только тот что описан ниже)
Страница:

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

Проблема состоит в классе ".left-blue" - это синяя полоска с заворачивающимися краями. В одном диве он ведет себя нормально (в том что справа, в #content), а вот в том что слева, в #sideLeft, почему-то не хочет отображать второй background из трёх. Вроде и дивы одинаковые =), и классы одинаковые, что не так....

 

[Kakashkin]

Это, конечно, удивительно видеть таких профессионалов как ТС... По-моему самая неблагодарная вещь это кроссбраузерная работа, то ли .js то ли .css то ли html. Реально работа состоит в подстраивании под пьяных программистов, которые пишут разные браузеры на своё усмотрение. За такую работу надо давать медаль...

Кстати, на счёт вашей формы внизу

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

Лейблы у вас оформлены точно также как и обычный текст, поэтому пользователю абсолютно непонятно, что кликанье на название элемента формы бросит фокус на элемент. С другой стороны, даже если бы это было и понятно - кому может понадобиться кликать на лейбл для текстового инпута? Ладно ещё чекбоксы, радиабатоны..

 

[Del]

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

Проблема состоит в классе ".left-blue" - это синяя полоска с заворачивающимися краями. В одном диве он ведет себя нормально (в том что справа, в #content), а вот в том что слева, в #sideLeft, почему-то не хочет отображать второй background из трёх. Вроде и дивы одинаковые =), и классы одинаковые, что не так....

проблема - в z-index'ах.
#sideLeft - див, содержащий полоску, имеет position: relative, таким образом он занесён в стек (stacking), у него уже есть offset, пусть и нулевой (представь себе что у него записано z-index: 0). Он поднят выше других блоков, отрисовывается 6-тым выше обычных элементов, выше float-блоков (

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

)

Полоска ".left-blue" находится внутри этого блока. У неё нет position: relative.

Для отрисовки Multiple backgrounds у полоски и border-radius у #sideLeft вы используете pie.htc, он создаёт VML-блоки. Они позиционирются абсолютно, блок для отрисовки фона у получает z-index: -1, чтобы быть смещённым под div.left-blue, иначе он накроет его сверху, и перекроет текст "Категории портала".

Я обвёл жёлтой рамкой блоки, составляющие одну сущность. Получается что VML-блок с фоном спрятался под блоком-родителем #sideLeft. Это причина всего, ниже я напишу как его вытащить. При этом сам заголовок h4 - находится поверх всего, как и должно быть, текста в нём не видно только потому что цвет шрифта - белый.

Должно ли так быть?

Мейер говорит нам:

Теперь, однако, вас, наверное, интересует, что происходит с элементами, имеющими отрицательное значение z-index и являющимися частью контекста занесения в стек начального блока-контейнера. Например, спросите себя, что должно произойти в результате применения следующей разметки:

<body>
<p style="position: absolute; z-index: 1;">Where am I?</p>
</body>

Учитывая правила занесения в стек, элемент body должен находиться в том же контексте занесения в стек, что и блок его родителя, поэтому он принимается за 0. Он не образует новый контекст занесения в стек, поэтому абсолютно позиционированный элемент p размещается в том же контексте занесения в стек, что и элемент body (т. е. в начальном блоке-контейнере). Иначе говоря, абзац размещается позади элемента body. Если body имеет непрозрачный фон, абзац исчезнет.

Таким, во всяком случае, был возможный результат в CSS2. В CSS2.1 правила занесения в стек изменились, поэтому элемент не может оказаться под фоном его контекста занесения в стек. Другими словами, рассматривается случай, когда элемент body образует блок-контейнер для своих потомков (если бы он был относительно позиционированным, например). Абсолютно позиционированный элемент, происходящий от элемента body, не может быть помещен под фоном body, хотя может располагаться под его содержимым.

Судя по

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

:

Within each stacking context, the following layers are painted in back-to-front order:
1. the background and borders of the element forming the stacking context.
2. the child stacking contexts with negative stack levels (most negative first).
3. the in-flow, non-inline-level, non-positioned descendants.
4. the non-positioned floats.
5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
7. the child stacking contexts with positive stack levels (least positive first).

такое поведение - баг.

Мейер пишет:

На момент написания данной книги Mozilla и родственные броузеры полностью скрывают абзац, даже если и для элемента body, и для элемента html задан прозрачный фон. Это ошибка. Другие агенты пользователя, такие как Internet Explorer, размещают абзац поверх фона body, даже если он у него есть. Согласно CSS2.1 это поведение правильное. Вывод таков, что отрицательные значения z-index могут привести к непредсказуемым результатам, поэтому задавать их надо осторожно.

Книга писалась во времена выхода IE7. Я сделал тестовую страничку и проверил:

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body style="position: relative; background: #fff;">
  <p style="position: absolute; z-index: -1;">Where am I?</p>
</body>
</html>

Во всех мажорных браузерах +IE8/7 - не скрывается, как и должно быть. Но на твоей страничке если убрать pie, и просто задать для div.left-blue position: relative; z-index: -1; - он прячется под #sideLeft во всех браузерах.

Сделал такую тестовую страницу:

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <div style="position: relative; background: #0f0; width: 300px; height: 200px;">
    <p style="position: absolute; z-index: -1;">Where am I?</p>
  </div>
</body>
</html>

Результат - прячется во всех браузерах. Если я правильно понимаю спеку - не должен. Интересно! Спрошу у коллег из #wstrussia.

Так всё же, как исправить?
Нужно поднять vml-блок для div.left-blue.
Задаём:

#sideLeft {z-index: 1;}
.left-blue {position:relative; z-index:5;}

Результат:

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

Кстати, на счёт вашей формы внизу

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

Лейблы у вас оформлены точно также как и обычный текст, поэтому пользователю абсолютно непонятно, что кликанье на название элемента формы бросит фокус на элемент. С другой стороны, даже если бы это было и понятно - кому может понадобиться кликать на лейбл для текстового инпута? Ладно ещё чекбоксы, радиабатоны..

Лэйблы и не обязаны отличатся от обычного текста... А связка лейблов и элементов форм - это хорошая практика, повышающая доступность страниц для людей с ограниченными возможностями и требование WAI: "

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

".

Вот что мне подсказали:

В спеку не смотрел, но на практике:

— Для BODY действует как написано: элементы с отрицательным z-index не проваливаются.
— Для остальных элементов: как только есть элемент без заданного z-index (с позиционированием или нет), то его дети с позиционированием и отрицательным z-index будут под него проваливаться.
— Как только у родителя будет позиционирование и какой-либо z-index, то дети перестанут проваливаться.

Пример:

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

--
Роман Комаров

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

Что интересно - z-index: 0 тоже достаточно:

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

Как это согласуется со

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

, пока не понятно:

Within each stacking context, the following layers are painted in back-to-front order:
1. the background and borders of the element forming the stacking context.

Ведь элементом создающим stacking context ведь является любой блок с заданным position.



Btw: Мы открыли вакансию junior-верстальщика: https://www.kharkovforum.com/showthread.php?t=1830645

 

[Kakashkin]

На счёт людей с ограниченными возможностями - интересно, не знал.

А на счёт стиля лейбла, я и не говорю, что это обязательно. Вы можете и ссылки делать таким же стилем, как и текст, но тогда их пока не наведёшься - не обнаружишь. Тоже самое и для лейблов, элементы, выполняющие разные функции хорошо и выполнять по-разному. Обычному человеку абс не очевидно, что произойдёт если нажать на текст рядом с чекбоксом. Можно, например, подчеркивать лейблы пунктиром, чтобы отличать от сплошного подчёркивания ссылок, а также от обычного текста.

Всё это, конечно, никак не относится к вёрстке, а скорее к вопросам дизайна и юзабилити.

 

[_KurT_]

Здравствуйте еще раз
Попытался сверстать две резиновых колонки, как вы написали выше. Можете посмотреть? Ума не приложу как эти поля сделать, поэтому сделал как получилось.

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

 

[Del]

Попытался сверстать две резиновых колонки, как вы написали выше. Можете посмотреть? Ума не приложу как эти поля сделать, поэтому сделал как получилось.

вариант, но правильное решение гораздо короче.

 

[_KurT_]

вариант, но правильное решение гораздо короче.

А это случайно не ваше объявление висит на rabota.ua, там такое же тестовое задание, c колонками в 20 и 80% и с полями ?

И меня тоже интересует, откуда должны браться эти 40px ?