Ви використовуєте застарілий браузер. Цей та інші сайти можуть відображатися в ньому некоректно. Необхідно оновити браузер або спробувати використовувати https://www.google.com/chrome/
Консультации и оценка качества html-вёрстки (бесплатно)
можно, но так не семантично.
как это птичька стал термином, а лейба - ее определением?
ради чего тогда городить огород, если семантика все равно порушена?
не говоря уже про CSS. такому чекбоксу все равно свои стили придется писать.
я тут для себя подумал каждое поле совать в собственный DL.
удобно, когда список полей динамично меняется, надо отображать/скрывать некоторые и не смертельно если между православными полями будут проскакивать DIVы и прочая "ересь".
я тут для себя подумал каждое поле совать в собственный DL.
удобно, когда список полей динамично меняется, надо отображать/скрывать некоторые и не смертельно если между православными полями будут проскакивать DIVы и прочая "ересь".
структура то готова, а вот оформление разное.
например, обычные поля могут располагаться под лейбами или справа от них на постоянной позиции по горизонтали, а вот одиночный чекбокс надо слитно в одну строку.
структура то готова, а вот оформление разное.
например, обычные поля могут располагаться под лейбами или справа от них на постоянной позиции по горизонтали, а вот одиночный чекбокс надо слитно в одну строку.
во! Спасибо большое Именно то, что надо ) Я-то на флеше закодить могу чё угодно. А в html как баран на новые ворота. Раньше, лет 6 назад без зданих мог с таблицами сделать. А сейчас вроде как div выгоднее )
Подскажите плиззз. Очень давно хочу войти, скажем так, в среду верстальшиков, знаю HTML, CSS не идеально конечно, но базовые знания есть. Пытался попасть в W3 Ukraine, у них там есть программа обучения, но никаких ответов от них не получил, причем даже они меня не тестировали. Может кто подскажет где есть такие программы. Потому что, если объективно, то работать в этой стези мне еще рановато, а вот обучиться в какой-нибудь компании, чтоб там остаться и дальше работать я с огромным удовольствием. Помогите кто чем может.
Мы планируем организовать онлайн-школу вёрстки, но попозже.
Пока можем попробовать тут сделать тестовое задание, что я раздавал 3 года назад, и разобрать его.
Тестовое задание.
Задача №1:
Сделать два резиновых столбца.
Первый — 20% по ширине, второй — 80%, между ними расстояние 20 пикселей, расстояния от краёв страницы слева и справа 10 пискелей.
Без использования таблиц и javascript.
Задача №2:
Прислать титульную страницу сайта licenseline.com со следующими изменениями:
1. Переименовать пункт Insurance License Online Lecture на Insurance License Online Lectures и убрать ссылку для этого пункта.
имеется в виду - вообще убрать тэг <a>
2. Добавить внутрь него выпадающее меню справа с такими ссылками:
Также можем разбирать уже готовую вёрстку: что хорошо, что плохо, как сделать лучше.
Если вам кто-то сверстал сайт - тоже можно смело спрашивать - "ну как?"
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 забыли.
Итого - норм. Клиенту отдавать можно.
Но есть к чему стремится.
верстаю почти как год. Спасибо Вам за советы.Постараюсь им следовать) у меня появилось несколько вопросов:
-Css3 пока что не всеми браузерами поддерживается, и если использовать новые свойства, то получается в более старых версиях они не будут работать, что тогда делать?не лучше ли для всех сразу сделать, например, закругление углов картинкой?
-я ставлю float:left в ненужных местах, т.к. например если в диве есть внутренние дивы с float:left, то внешних див их высоту игнорирует. на этот вопрос Вы, кажется, уже ответили: дли внешнего использовать position:absolute(?)
-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(?)
Доброго времени суток.
Проблема в IE8. В IE6 и IE7 - все нормально. (там есть и другие баги, но пока меня интересует только тот что описан ниже)
Страница:
Тільки зареєстровані користувачі бачать весь контент у цьому розділі
Проблема состоит в классе ".left-blue" - это синяя полоска с заворачивающимися краями. В одном диве он ведет себя нормально (в том что справа, в #content), а вот в том что слева, в #sideLeft, почему-то не хочет отображать второй background из трёх. Вроде и дивы одинаковые =), и классы одинаковые, что не так....
Это, конечно, удивительно видеть таких профессионалов как ТС... По-моему самая неблагодарная вещь это кроссбраузерная работа, то ли .js то ли .css то ли html. Реально работа состоит в подстраивании под пьяных программистов, которые пишут разные браузеры на своё усмотрение. За такую работу надо давать медаль...
Кстати, на счёт вашей формы внизу
Тільки зареєстровані користувачі бачать весь контент у цьому розділі
Лейблы у вас оформлены точно также как и обычный текст, поэтому пользователю абсолютно непонятно, что кликанье на название элемента формы бросит фокус на элемент. С другой стороны, даже если бы это было и понятно - кому может понадобиться кликать на лейбл для текстового инпута? Ладно ещё чекбоксы, радиабатоны..
Тільки зареєстровані користувачі бачать весь контент у цьому розділі
Проблема состоит в классе ".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 - находится поверх всего, как и должно быть, текста в нём не видно только потому что цвет шрифта - белый.
Должно ли так быть?
Мейер говорит нам:
CSS – каскадные таблицы стилей. Подробное руководство сказав(ла):
Теперь, однако, вас, наверное, интересует, что происходит с элементами, имеющими отрицательное значение z-index и являющимися частью контекста занесения в стек начального блока-контейнера. Например, спросите себя, что должно произойти в результате применения следующей разметки:
HTML:
<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, хотя может располагаться под его содержимым.
Тільки зареєстровані користувачі бачать весь контент у цьому розділі
:
9.9.1 Specifying the stack level: the 'z-index' property сказав(ла):
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).
CSS – каскадные таблицы стилей. Подробное руководство сказав(ла):
На момент написания данной книги Mozilla и родственные броузеры полностью скрывают абзац, даже если и для элемента body, и для элемента html задан прозрачный фон. Это ошибка. Другие агенты пользователя, такие как Internet Explorer, размещают абзац поверх фона body, даже если он у него есть. Согласно CSS2.1 это поведение правильное. Вывод таков, что отрицательные значения z-index могут привести к непредсказуемым результатам, поэтому задавать их надо осторожно.
Во всех мажорных браузерах +IE8/7 - не скрывается, как и должно быть. Но на твоей страничке если убрать pie, и просто задать для div.left-blue position: relative; z-index: -1; - он прячется под #sideLeft во всех браузерах.
Тільки зареєстровані користувачі бачать весь контент у цьому розділі
Лейблы у вас оформлены точно также как и обычный текст, поэтому пользователю абсолютно непонятно, что кликанье на название элемента формы бросит фокус на элемент. С другой стороны, даже если бы это было и понятно - кому может понадобиться кликать на лейбл для текстового инпута? Ладно ещё чекбоксы, радиабатоны..
Лэйблы и не обязаны отличатся от обычного текста... А связка лейблов и элементов форм - это хорошая практика, повышающая доступность страниц для людей с ограниченными возможностями и требование WAI: "
Тільки зареєстровані користувачі бачать весь контент у цьому розділі
".
Вот что мне подсказали:
Редакционная группа сообщества «Веб-стандарты» сказав(ла):
В спеку не смотрел, но на практике:
— Для BODY действует как написано: элементы с отрицательным z-index не проваливаются.
— Для остальных элементов: как только есть элемент без заданного z-index (с позиционированием или нет), то его дети с позиционированием и отрицательным z-index будут под него проваливаться.
— Как только у родителя будет позиционирование и какой-либо z-index, то дети перестанут проваливаться.
Пример:
Тільки зареєстровані користувачі бачать весь контент у цьому розділі
--
Роман Комаров
Тільки зареєстровані користувачі бачать весь контент у цьому розділі
Тільки зареєстровані користувачі бачать весь контент у цьому розділі
Как это согласуется со
Тільки зареєстровані користувачі бачать весь контент у цьому розділі
, пока не понятно:
9.9.1 Specifying the stack level: the 'z-index' property сказав(ла):
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.
На счёт людей с ограниченными возможностями - интересно, не знал.
А на счёт стиля лейбла, я и не говорю, что это обязательно. Вы можете и ссылки делать таким же стилем, как и текст, но тогда их пока не наведёшься - не обнаружишь. Тоже самое и для лейблов, элементы, выполняющие разные функции хорошо и выполнять по-разному. Обычному человеку абс не очевидно, что произойдёт если нажать на текст рядом с чекбоксом. Можно, например, подчеркивать лейблы пунктиром, чтобы отличать от сплошного подчёркивания ссылок, а также от обычного текста.
Всё это, конечно, никак не относится к вёрстке, а скорее к вопросам дизайна и юзабилити.
Здравствуйте еще раз
Попытался сверстать две резиновых колонки, как вы написали выше. Можете посмотреть? Ума не приложу как эти поля сделать, поэтому сделал как получилось.
Тільки зареєстровані користувачі бачать весь контент у цьому розділі
Попытался сверстать две резиновых колонки, как вы написали выше. Можете посмотреть? Ума не приложу как эти поля сделать, поэтому сделал как получилось.
Именно то, что надо ) Я-то на флеше закодить могу чё угодно. А в html как баран на новые ворота. Раньше, лет 6 назад без зданих мог с таблицами сделать. А сейчас вроде как div выгоднее )
