Первая верстака.

[LESTAD]

Добрый день, срочно нужна жёсткая критика!

верстал из этой темы: http://forum.htmlbook.ru/index.php?showtopic=16763

Готовое здесь: http://clan-lh.ru/werstka/buissines.html

Жду оценки, и указаний на ошибки, + может кто посоветует куда дальше двигаться, HTMLbook прочел, весь кроме блога и справочников.

[LunatiK]

Учи сь работать в фотошопе боковые градиенты у тебя - кака

Забуть про лорем ипсум, наши сайты пишутся кириллицей, нужно под неё адаптировать.

Html код в целом чистенький.

[swetlana]

ну раз нужны указания на ошибки…

Вообще, в целом неплохо, но ошибки есть.

В частности, использовать <br> для задания отступов — не комильфо. На то паддинги с маргинами есть.

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

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

В правой колонке картинки выстроились лестницей — это ошибка.

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

Например overflow: hidden в данном случае решает.

В форме поиска смещены относительно друг друга поле и кнопка — не гут.

Ещё с Лунатиком соглашусь почти во всём.

Кроме того, что html-код чист. Бывает и почище. Но в ошибки это записывать незачем.

В остальном вроде как неплохо.

[LESTAD]

Учи сь работать в фотошопе боковые градиенты у тебя - кака

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

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

В частности, использовать <br> для задания отступов — не комильфо. На то паддинги с маргинами есть.

Смотрел, видео уроки, в которых советовалось так делать, для упрощения, попробую исправить.

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

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

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

В правой колонке картинки выстроились лестницей — это ошибка.

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

Например overflow: hidden в данном случае решает.

я во всех браузерах которые себе установил, просмотрел ничего не едет... За совет c "overflow: hidden" спасибо.

Переделал свои параграфы. Теперь вообще песня, избавился от кучи БР

В форме поиска смещены относительно друг друга поле и кнопка — не гут.

Я честно не знаю, что уже с ними делат и почему они себя так ведут.

Буду благодарен, если кто подскажет как их позиционировать.

Ещё с Лунатиком соглашусь почти во всём.

Кроме того, что html-код чист. Бывает и почище. Но в ошибки это записывать незачем.

если можно, на что кроме <br />, следует обратить внимание?

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

Edited April 6, 2011 by LESTAD

[LunatiK]

Ещё с Лунатиком соглашусь почти во всём.

Кроме того, что html-код чист. Бывает и почище. Но в ошибки это записывать незачем.

Нет приделу совершенства. я оценивал с точки зрения допустимости. При желании придраться можно и к Псиволкеру

[swetlana]

я во всех браузерах которые себе установил, просмотрел ничего не едет... За совет c "overflow: hidden" спасибо.

Переделал свои параграфы. Теперь вообще песня, избавился от кучи БР

Так было. Но сейчас этой проблемы нет, исправлено.

А для скриншота вчерашнее состояние воспроизведено искусственно.

[LESTAD]

Так было. Но сейчас этой проблемы нет, исправлено.

А для скриншота вчерашнее состояние воспроизведено искусственно.

Да же не знаю почему...

Но подправил по советам у же многое, и в HTML и в CSS.

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

Еще появился вопрос, по шрифтам, может посоветуете что почитать по ним? (строчный интервал, и различия шрифтов).

[swetlana]

о шрифтах и здесь, на htmlbook.ru, достаточно написано.

О форме: в какие-то лишние дивы не надо, скорее имеет смысл посмотреть в сторону vertical-align.

[LESTAD]

о шрифтах и здесь, на htmlbook.ru, достаточно написано.

О форме: в какие-то лишние дивы не надо, скорее имеет смысл посмотреть в сторону vertical-align.

vertical-align не помогало, как не странно, с утра все решил margin-top:1px; к текстовому полю, а я вчера возился только с кнопкой.

Прошу ссылку, где на htmlbook.ru пишут о шрифтах.

Поиск выдал только то что читал, или из справочника - как использовать шрифты. Можно поискать в интернете, но я прежде чем попал на HTMLbook, и начал изучать CSS и HTML тут, потратил где то неделю на чтение всякой непонятной информации, и просмотр видео уроков, которые толком ничему не научили, по этому такая вот и просьба посоветуйте что почитать, чувствую пустоту знаний по шрифтам.

Edited April 7, 2011 by LESTAD

[swetlana]

Да же не знаю почему...

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

Потому объясню:

картинке в абзаце был задан float: left. При этом она выбивается из потока и прижимается к левому краю. Остальные же эелементы её обтекают.

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

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

Указав же overflow:hidden, вы создаёте отдельный контекст форматирования. То есть, как бы своя песочница для такого блока, в которой свой поток.

[LESTAD]

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

Потому объясню:

картинке в абзаце был задан float: left. При этом она выбивается из потока и прижимается к левому краю. Остальные же элементы её обтекают.

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

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

Указав же overflow:hidden, вы создаёте отдельный контекст форматирования. То есть, как бы своя песочница для такого блока, в которой свой поток.

во тут я не рассчитал что картинка вырвется из блока P, как теперь понимаю ее overflow:hidden принудительно заставляет оставаться в теге P. Все равно как то он странно работает, ведь из дива она не вырывается, а вроде как и DIV и H1 и P - это блочные элементы, не ожидал в них разницы.

Edited April 7, 2011 by LESTAD

[swetlana]

LESTAD, а понятие потока вам знакомо?

Именно в нём объяснение.

[SelenIT]

ведь из дива она не вырывается

По умолчанию вырывается, если диву не присвоено ничего из того, что создает упомянутый Светланой контекст форматирования (кроме overflow:hidden/auto/scroll, это может быть display:inline-block/table-cell/table/inline-table и float:left/right).

[LESTAD]

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

P.S. Спасибо всем кто ответил.

[Temiks]

1. Заметно что линии толще

2. Линия которая делит контен не должно доходить до конца, детали на скрине

У вас

у меня

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

[Temiks]

так же, вот что в ИЕ9

[LESTAD]

Исправил, спасибо за замечание, я просто не воспринял это сразу как ошибку, ну зато 10 минут времени потратил на развлечение, и по пробовал увеличивал шрифт в ИЕ7 на самый крупный - все хорошо. Единственное что хочется добавить, что если бы делал верстку сейчас, сделал бы процентов 80 по другому, может когда то и переделаю, хотя думаю лучше оставлять и потом смотреть на свои первые творения, да же сейчас меня позиционирование заставило улыбнуться .

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

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

Edited April 16, 2011 by LESTAD