Учебная работа

seemax · April 4, 2012

Скажите плз что не так как принято.

Что можно сделать лучше, проще?

http://pomidor.com.ua/seemax/AirForceMain2.html

hypnocolor · April 4, 2012

Переверстывать надо практически всё.

На беглый первый взгляд могу отметить следующее.

Флаг справа сверху. Да и, собственно, фоновая картинка в подвале. Зачем их прицепили к селекторам html и body, внаглую указав ширину в 100%, я так и не понял. Попробуйте поизменять масштаб страницы, и посмотрите, как «красиво» эти картинки деформируются.

Я бы сделал два div'а — один с небом и привязкой к левой стороне окна, другой — с флагом и привязкой к правой стороне.

<!--[if IE 5]>

Тут я вообще теряюсь в догадках. Либо вы взяли готовый шаблон непонятно какого года выпуска, либо непонятно, какой смысл в 2012 году так делать.

У класса .dot вполне хватит 1 пикселя для ширины нижней границы.

В общем, давно я не делал никаких «учебных работ», но, думаю, для учебного примера, с учётом исправления того, о чём я писал, пойдёт

Edited April 4, 2012 by hypnocolor

seemax · April 4, 2012

Спасибо за внимание, хотелось бы выслушать мнение участника со статусом выше "новичок".

Вполне согласен, что использование шаблона DW может потянуть за собой неактуальную на сегодня информацию. Но ничего плохого из этого тоже не выходит. Почищу в общем.

Не вижу противопоказаний к фон картинкам в <html><body>, 100% растягивают фон на всю ширину, знач надо так.

Масштабирование, как и просмотр при разных разрешениях мониторов вполне адекватен. На это положено немало моих новичковских сил.

.dot смотрелся грубовато, уменьшено до 2px

Хотелось бы мнения экспертов, а также разобраться в заложенных проблемах кроссбраузерности, которые я практически не учитывал. Новичок всё таки.

wildhind · April 4, 2012

да вообще-то участник со статусом «новичок» сказал правильно.

И при чём тут статус…

Несколько вопросов:

Каково значение блока div.main?
Зачем всем спискам в этом блоке задана ширина 940px, а все элементы этих списков сделаны инлайновыми?
Почему основная навигация не имеет селектора, по которому её можно однозначно идентифицировать?
Почему основная навигация отцентрована, но одно слово падает на вторую строку, разрывая пункт меню на две противоположные части страницы?
Почему ссылка, логически относящаяся к списку новостей, вдруг попала в футер?
Зачем четырёхстрочный текст подчёркнут? Как его читать? Хотя это скорее к дизайнеру.
Почему в списке новостей картинка не является ссылкой? Почему ссылкой не является вся плашка новости?
Почему второстепенная, менее значимая, информация идёт в коде перед основной, более значимой?
Какие вам известны тэги кроме div,ul,li,a?

seemax · April 4, 2012

да вообще-то участник со статусом «новичок» сказал правильно.
И при чём тут статус…
Несколько вопросов:
Каково значение блока div.main?
Зачем всем спискам в этом блоке задана ширина 940px, а все элементы этих списков сделаны инлайновыми?
Почему основная навигация не имеет селектора, по которому её можно однозначно идентифицировать?
Почему основная навигация отцентрована, но одно слово падает на вторую строку, разрывая пункт меню на две противоположные части страницы?
Почему ссылка, логически относящаяся к списку новостей, вдруг попала в футер?
Зачем четырёхстрочный текст подчёркнут? Как его читать? Хотя это скорее к дизайнеру.
Почему в списке новостей картинка не является ссылкой? Почему ссылкой не является вся плашка новости?
Почему второстепенная, менее значимая, информация идёт в коде перед основной, более значимой?
Какие вам известны тэги кроме div,ul,li,a?

Отвечу по порядку. Хотелось бы узнать какие решения более правильные:

1) В рамках обёртки .container содержатся .header и .main, мне казалось что последний и логически, и структурно объединяет основное содержание, отделённое от Хеад. Вы считаете, что .container достаточно? Если да, вполне соглашусь.

2) Ширина 940 задана блочному элементу ul для центровки по горизонтали, все элементы li inline т как меню горизонтально.

Какое решение вы бы применили?

3) Осн нав не имеет однозначного идентификатора, т как я не знал о такой практике. Учту, спасибо.

4) Перепроверил этот пункт и масштабированием, и разным разрешением экрана. Не обнаружил такого явления. Может это быть кроссбраузерной фичей, которую я не учёл.

5,6) Это к дизайнеру.

7) Такая задача не стояла, если принято делать так, учту.

8) Если такой порядок не оказывает влияния, зачем тратить время на причёсывание? А если добавил или убрал свойство, опять причесал по значимости? Кроме этого учтите деятельность браузера, который дописывает некоторые свойства и вы их видите нажав F12, но не видите в CSS файле.

9) Если вы о возможности использовать вместо классов теги <footer><header>, прислушаюсь и буду делать так, хотя вы знаете, что IE поддерживает эти теги только в 9 версии. На какие ещё теги мне заменить некоторые из любимых всеми DIV?

wildhind · April 4, 2012

да вообще-то участник со статусом «новичок» сказал правильно.
И при чём тут статус…
Несколько вопросов:
Каково значение блока div.main?
Зачем всем спискам в этом блоке задана ширина 940px, а все элементы этих списков сделаны инлайновыми?
Почему основная навигация не имеет селектора, по которому её можно однозначно идентифицировать?
Почему основная навигация отцентрована, но одно слово падает на вторую строку, разрывая пункт меню на две противоположные части страницы?
Почему ссылка, логически относящаяся к списку новостей, вдруг попала в футер?
Зачем четырёхстрочный текст подчёркнут? Как его читать? Хотя это скорее к дизайнеру.
Почему в списке новостей картинка не является ссылкой? Почему ссылкой не является вся плашка новости?
Почему второстепенная, менее значимая, информация идёт в коде перед основной, более значимой?
Какие вам известны тэги кроме div,ul,li,a?
Отвечу по порядку. Хотелось бы узнать какие решения более правильные:
1) В рамках обёртки .container содержатся .header и .main, мне казалось что последний и логически, и структурно объединяет основное содержание, отделённое от Хеад. Вы считаете, что .container достаточно? Если да, вполне соглашусь.

Было б логично сделать три основных блока: хэдер, основно контент и футер.

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

2) Ширина 940 задана блочному элементу ul для центровки по горизонтали, все элементы li inline т как меню горизонтально.
Какое решение вы бы применили?

Ширина задана любому списку в контентной области.

Делая меню списком даже без класса, применяя специфичные стили для всех списков, вы тем самым лишаете себя возможности использовать списки в своём изначальном значении: как списки.

Я бы применила решение, рекомендованное спецификацией: тэг nav для навигации.

3) Осн нав не имеет однозначного идентификатора, т как я не знал о такой практике. Учту, спасибо.

Нужно использовать класс, по которому можно однозначно узнать главное меню. И стили нужно применять именно к элементу nav с этим классом, а не ко всем спискам на странице.

4) Перепроверил этот пункт и масштабированием, и разным разрешением экрана. Не обнаружил такого явления. Может это быть кроссбраузерной фичей, которую я не учёл.

5,6) Это к дизайнеру.

6 (подчёркнутый многострочный текст) — допустим, к дизайнеру. Хотя называть его дизайнером после такого вряд ли можно.

Но 5 — это грубая ошибка вёрстки. Представьте себе, что это не учебный пример, а реальная вёрстка, которую затем отдаёте программисту для интеграции с CMS. К слову, без этого в вёрстке нет ни малейшего смысла. Лента новостей в любой CMS является цельным функционалом, обеспечивается единым компонентом с собственным шаблоном. Что должно пойти в этот шаблон? Рваные конструкции? Открывающие тэги без закрывающих и закрывающие без открывающих? Что будет при отключении этого компонента или использовании его в другом месте?

7) Такая задача не стояла, если принято делать так, учту.

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

8) Если такой порядок не оказывает влияния, зачем тратить время на причёсывание? А если добавил или убрал свойство, опять причесал по значимости? Кроме этого учтите деятельность браузера, который дописывает некоторые свойства и вы их видите нажав F12, но не видите в CSS файле.

Нажав F12, я увеличиваю громкость. А порядок оказывает влияние. Существуют мнения о том, что поисковым роботам ближе то, что ближе к началу страницы, но этот вопрос я лучше оставлю специалистам по SEO, если таковые здесь имеются. Зато есть реальная вероятность, что на не самых лучших каналах (а известно ли вам о том, что доля мобильных браузеров с мобильной же связью весьма существенна уже, а качество этих каналов по прежнему оставляет желать лучшего?) отобразится ненужная информация, а нужной придётся долго ждать.

9) Если вы о возможности использовать вместо классов теги <footer><header>, прислушаюсь и буду делать так, хотя вы знаете, что IE поддерживает эти теги только в 9 версии. На какие ещё теги мне заменить некоторые из любимых всеми DIV?

Нет, не знаю. У меня и шестой IE поддерживает header, footer и всё остальное. Но не следует их использовать вместо классов. Те же header и footer вопреки распространённому среди начинающих мнению могут использоваться в любом месте страницы.

А вот вам и всё разнообразие тэгов с описанием их применения: http://htmlbook.ru/html

Vin · April 4, 2012

<!--[if IE 5]>
Тут я вообще теряюсь в догадках. Либо вы взяли готовый шаблон непонятно какого года выпуска, либо непонятно, какой смысл в 2012 году так делать.

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

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

SelenIT · April 4, 2012

А если добавил или убрал свойство, опять причесал по значимости? Кроме этого учтите деятельность браузера, который дописывает некоторые свойства и вы их видите нажав F12, но не видите в CSS файле.

Видимо, речь шла не о порядке CSS-свойств в правиле, а о порядке блоков в разметке . Правда, вопрос, нужно ли менять этот порядок по сравнению с видимым, не так уж однозначен — Роджер Йоханссон, например, доказывает, что не нужно, т.к. расхождение может нарушить правила доступности контента WCAG 2.0. Сугубо имхо, Роджер несколько "сгущает и приукрашивает", но совсем забывать о таких вещах тоже не стоит...

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

По-моему, скорость мобильных каналов сейчас как минимум сравнима с ADSL. Полагаю, что процент активных пользователей обычных сайтов через GPRS сравним с процентом пользователей с "принципиально" отключенным JS

ie5 и не поддерживает условные комментарии

IE5-то поддерживает, другой вопрос — кто сегодня поддерживает IE5?

wildhind · April 4, 2012

По-моему, скорость мобильных каналов сейчас как минимум сравнима с ADSL. Полагаю, что процент активных пользователей обычных сайтов через GPRS сравним с процентом пользователей с "принципиально" отключенным JS

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

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

SelenIT · April 4, 2012

У меня в дороге обычно всё быстро открывалось, даже ролики ютюбовские (на наибюджетнейшем андроидофоне из ранних), в городе среди плотной застройки и то чаще случались проблемы (причем сигнал шел как-то скачками — на пару десятков секунд пропадал вообще, а потом с приличной скоростью вываливал на экран всё сразу). Хотя, конечно, маршрут маршруту рознь. В целом, да, согласен, что чем раньше нужная информация, тем риск не дождаться ее меньше — но у меня случались и обрывы прямо посреди контента, "на самом интересном месте", так сказать, что едва ли лучше. Может, для таких аварийных случаев еще есть смысл держать отдельную чисто текстовую версию вообще "без добавок", а-ля ископаемые страницы для печати?

wildhind · April 4, 2012

Мобильные, текстовые версии и нестабильный коннект — это ещё одна большая тема.

Здесь её имеет смысл затронуть только в том ключе, что вопрос не стоит забывать, и если есть возможность сделать лучше для пользователей нестабильного коннекта без ущерба для остальных пользователей и без усложнения вёрстки, это стоит сделать. В данном случае ничего не стоило поставить колонки в другом порядке — сначала основную, а только после неё дополнительную. Стоило сделать именно так.

seemax · April 4, 2012

Я бы хотел поблагодарить всех откликнувшихся и особенно wildhind за потраченное вами время на новичка.

Кое что понятно сходу, кое что додумаю ещё.

Но вот переползание меню на вторую строку не вижу, даже после приведенного скриншота.

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

http://clip2net.com/s/1LYqU

http://clip2net.com/s/1LYsV

http://clip2net.com/s/1LYu4

wildhind · April 4, 2012

Судя по кривоватым шрифтам у вас Windows? Если так, то вот и причина. Под виндами шрифты как правило уже, и этой проблемы не видно. достаточно ширину навигации убрать, и всё будет нормально.

seemax · April 4, 2012

Убрать ширину несложно, центровка теряется так.

Можно, правда, задать отступ слева в %. Чтоб при разных разрешениях визуально одинаково...

По шрифтам спросить хотел бы.

Макет даёт везде в дробных рт:

DW ругается, FireBug не отображает их F12.

Я задавал по макету, игнорируя обоих.

Как правильно?

wildhind · April 4, 2012

правильно перенастроить фотошоп на px

SelenIT · April 4, 2012

центровка теряется

Там же display:inline внутри, куда она потеряется? Убрать ширину да задать text-align: center — и вся недолга . Кстати, у меня в Win7 последнее слово тоже переносится(.

wildhind · April 4, 2012

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

А то мало ли среди посетителей сайта окажется 60% оригиналов на маках и вин7, где шрифты несколько шире, чем в винхр

SelenIT · April 4, 2012

Я раньше всегда еще придерживался правила, чтобы все надписи выдерживали два... ну хотя бы один шаг увеличения размера текста (text size в IE или zoom text only в FF), не вылезая за свои границы. Может, сейчас это уже и неактуально само по себе, но как страховка от таких вот непредвиденностей — имхо, всё равно полезная практика).

hypnocolor · April 4, 2012

Убрать ширину несложно, центровка теряется так.
Можно, правда, задать отступ слева в %. Чтоб при разных разрешениях визуально одинаково...

Ничего сложного. Присваиваете списку в стилях свойство text-align: center;, убираете фиксированную ширину, и меню у вас будет по центру. Кроме того, весь ваш код, отвечающий за позиционирование меню, можно значительно сократить:


.main ul{padding: 0px; margin: 0 auto; text-align: center;}

А статус «новичок» говорит лишь о том, что у меня ещё сообщений не так много, но это ничего не говорит о моих знаниях

hypnocolor · April 4, 2012

Хотя, всё же, на максимальном уменьшении масштаба страницы последний пункт меню всё-таки переехал вниз Ну, как небольшой костыль, можно уменьшить ширину отступов пунктов меню (padding-left и padding-right) с 15 до 14 точек, и убрать правый отступ у последнего пункта меню:

ul li:last-child {padding-right: 0px;}

После этого, вроде бы, проблема исчезает совсем

seemax · April 5, 2012

Большинство замечаний и советов учёл http://pomidor.com.ua/seemax/AirForceMain2_1.html

<footer><header> принял на вооружение, особенно понравился <nav>, избавил от лишних свойств.

nav {
	text-align: center;

Работает, но


nav {
	text-align: justify;

НЕ работает, посему остался с вопросом: "Как же растянуть навигацию согласно макету?"

Выкладываю и макет для большего удобства

NeoXidizer · April 5, 2012

НЕ работает, посему остался с вопросом: "Как же растянуть навигацию согласно макету?"

можно так:

HTML

<nav>
    <a href="CatMain.html" target="_blank">SEARCH AIRPLANES</a><span>|</span>
    <a href="#" target="_blank">RESTORATION</a><span>|</span>
    <a href="#" target="_blank">MAINTENANCE</a><span>|</span>
    <a href="#" target="_blank">EXHIBITIONS & AIRSHOW</a><span>|</span>
    <a href="#" target="_blank">CONTACTS AND FEEDBACK</a>
</nav>

CSS

nav {
    width: 1210px; /* чтобы элементы меню не переносились при ресайзе */
    margin-left: 25px;
}
nav a {
    text-decoration: none;
    font-family: "Times New Roman", Times, serif;
    color: #036;
}
nav span {
    margin: 0 50px;
}

Edited April 5, 2012 by NeoXidizer

seemax · April 5, 2012

Попробовал конечно, потом вспомнил что <span> строчный и свойства блочных ему присваивать нельзя.

NeoXidizer · April 5, 2012

зачем ему блочные свойства?

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

wildhind · April 5, 2012

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

А не то я опять своё решение на всеми любимом jquery предложу.

Sign In

Учебная работа

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information