Вёрстка Spitfire

[iamevgeny]

Привет! Спасибо за макет, скачал и сверстал.

Комментарии к работе:

- Структура фиксированные, полагаю, что так лучше, хотя и в резину переделать не сложно. (ширина по макету)

- В некоторых местах, например, подчеркивание ссылки "Full information", позволил себе вольности, думаю, это не критично.

- В сайдбаре центрирование текста корявое, я не до конца разобрался с текстом, поправлю позже.

Буду рад любым комментариям. Спасибо!

Edited June 27, 2011 by iamevgeny

[sigma77]

iamevgeny,

Первое, что сразу бросилось в глаза - горизонтальный скрол, и это при 1280, что уж говорить о 1025

Дальше пока не смотрела.

[mishka]

Да ну так нельзя!

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

[iamevgeny]

sigma77

Такой шаблон. Поправить, думаю, несложно.

mishka

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

[Softlink]

наш большой холивар товарищ решил совсем интересно. Он просто всю картинку затолкал в БГ, вместе с тенями. А мы два дня бились над тем, как его лучше сверстать.

[psywalker]

наш большой холивар товарищ решил совсем интересно. Он просто всю картинку затолкал в БГ, вместе с тенями. А мы два дня бились над тем, как его лучше сверстать.

Мда...вёрстка конечно ужасна.

[iamevgeny]

наш большой холивар товарищ решил совсем интересно. Он просто всю картинку затолкал в БГ, вместе с тенями. А мы два дня бились над тем, как его лучше сверстать.

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

Мда...вёрстка конечно ужасна.

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

Edited June 27, 2011 by iamevgeny

[sigma77]

sigma77

Такой шаблон. Поправить, думаю, несложно.

Это не шаблон такой, это верстка такая.

А править кому предлагаете? Посетителям сайта?

Еще зачем-то практически всем внутренним элементам задана зачем-то ширина там, где она не нужна совсем. Абсолюты, лишние или неверно используемые элементы.

[Softlink]

наш большой холивар товарищ решил совсем интересно. Он просто всю картинку затолкал в БГ, вместе с тенями. А мы два дня бились над тем, как его лучше сверстать.

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

Мда...вёрстка конечно ужасна.

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

Товарищ - это вы. Холивар - это холивар.

почитайте вот эту тему

не, ну зато оперативно все сделали

[iamevgeny]

наш большой холивар товарищ решил совсем интересно. Он просто всю картинку затолкал в БГ, вместе с тенями. А мы два дня бились над тем, как его лучше сверстать.

Хыхы, да тот диалог не читал, любопытно.

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

[Softlink]

стандартное разрешение ноутбука по ширине (1366)

справа непонятный отступ:

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

[iamevgeny]

... справа непонятный отступ:...

... не стоит изголяться и верстать ему отдельные тени, но зачем ссылку в картинку затолкали? ...

Хуже когда разрешение выше. Но что делать с таким элементом? Прижимать его к правому верхнему углу? В этом случае пользователи с 1980 и пр. увидят сайт еще хуже.

Это я конечно, упростил с "photos and videos". Усложню, улучшу.

Это не шаблон такой, это верстка такая.

А править кому предлагаете? Посетителям сайта?

Еще зачем-то практически всем внутренним элементам задана зачем-то ширина там, где она не нужна совсем. Абсолюты, лишние или неверно используемые элементы.

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

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

Edited June 27, 2011 by iamevgeny

[sigma77]

Насчет ширины хотел бы услышать подробнее, если можно кусок стиля.

Тут можно хоть прям с самого начала начинать

html {
    height: 100%; /* зачем? не вижу, футер вроде не прижат.. */
}

body {
    height: 100%; /* аналогично, зачем? */
    width: 100%; /* боди и так займет всю доступную ширину, попробуйте задать ему паддинг или марджин */
}

#wrapper {
    width: 100%; /* не нужно */
}

#header {
    width: 1230px; /* и тут */
}

[psywalker]

Мда...вёрстка конечно ужасна.

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

Да что ж тут подробничать-то? Ужасная вёрстка, от начала и до конца.

Код грязный, теги разбросаны вообще непонятно как и где.

Вот это вот что например такое? Логотип? А где класс и как ты вообще к нему обращаешься?

a href="#"><img src="images/logo.png" width="560" height="120" alt="logo" /></a>

Зачем в ссылках большие буквы текстом? <a href="#">SEARCH AIRPLANES</a> Почему бы не использовать CSS для этого?

Зачем вот эта обёртка? <div id="nav">

Сами блоки с тенями сделаны просто ужасно, какой ещё параграф? Почему картинки на абсолютах? И почему тени фиксированного размера прилеплены?

Да и блоки тоже надо было делать резиновыми. А футер прижатым.

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

Насчет ширины хотел бы услышать подробнее, если можно кусок стиля.

Тут можно хоть прям с самого начала начинать

html {
    height: 100%; /* зачем? не вижу, футер вроде не прижат.. */
}

body {
    height: 100%; /* аналогично, зачем? */
    width: 100%; /* боди и так займет всю доступную ширину, попробуйте задать ему паддинг или марджин */
}

#wrapper {
    width: 100%; /* не нужно */
}

#header {
    width: 1230px; /* и тут */
}

Первые три селектора от неопытности, а последнее просто поразило)

[iamevgeny]

А где класс и как ты вообще к нему обращаешься?

Спасибо, правда спасибо.

Я со многим спорить не стану:

- блоки резиновые надо, верно, это я упростил себе задачу,

- заглавные да, точно,

но вот процитированное... ладно, я понял. Хотя может это я конечно мало понимаю, например, для обращения с помощью JS надо делать иначе, я еще книжек почитаю.

[Verder]

Мдя... Так вот ты какой, дедушка Ленин.

[buddah]

я решил как мне удобнее, конечно

вот эта фраза гениальна, я считаю)

Дворник:

- Какого хрена бычки сложены не в урну, а в кучку у подъезда?!!!

- Я решил как мне удобнее..

Гастарбайтер:

-Какого хрена дверной глазок на уровне пупка?!!!

- Я решил как мне удобнее..

Сборная России(Украины) по футболу:

- Какого хрена вы слили простейшую игру?!!!

- Мы решили, что нам так удобнее...

Все равно найдутся лохи, которые за это заплатят.

Edited June 27, 2011 by buddah

[iamevgeny]

Учитывая конструктивные комментарии внес изменения:

1. Структура резиновая с min и max;

2. Резиновые "Event block";

3. Заглавные сделал стилями;

4. Ссылку на "Photos and videos" сделал кнопкой;

5. Прижал футер;

6. По своему вкусу причесал css;

7. Убрал лишние абсолюты;

8. Убрал лишний div id="nav";

9. Поправил reset - убрал лишние стили;

10. Причесал html. upd. 19:37 28.06.11

Валидность html

Валидность css

Стоит поправить:

1. Собрать в спрайт декоративные элементы "Event block";

2. Откорректировать работоспособность в старых браузерах.

Edited June 28, 2011 by iamevgeny

[buddah]

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

[iamevgeny]

... это правила хорошего тона как минимум.

Полагаю, что так лучше (имею ввиду, что причесал см.п.10 выше).

Edited June 28, 2011 by iamevgeny

[iamevgeny]

Собрал в спрайт уголки блока "Event", структуру блока сделал более простую.

Из ошибок:

- В эксплорере 8, под ссылкой "All events and news" выползает двойное поле (zoom:1 не помогает);

- В FF последнем, Абзац "© 2010 - Spitfire & Hawker Hurricane Manchester Museum. All rights reserved" уползает вправо при большом разрешении или вниз при 1024, например (полагаю, что причина в div="guard" не позволяющем футеру наезжать на контент).

Как поправить не знаю, прошу вашего совета.

UPD 03.07.2011 19:38 Мск Суть была в том, что пустой блок я засунул в основной контейнер, что было неверно, сейчас вроде правильно во всех браузерах.

UPD 04.07.2011 11:44 Мск Убрал тени блоков событий для ie6 условными комментариями, добавил прозрачность png.

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

Работа. Валидность html, css.

Edited July 5, 2011 by iamevgeny

[advokatua]

Немного злостной археологии.

Тоже на досуге сверстал данный макет. 

http://webdevelop.zz.mu/spitfire/index.html