Правильная верстка

@Beezy · Регистрация: 14.09.2014

Студворк — интернет-сервис помощи студентам

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

@sashok89 · 12.02.2015, 16:27

Для первого разе вроде ничего)
Но:
1. При открытии страницы (при стандартном разрешении) вот что у меня, хотя монитор 24 дюйма

2. При попытке изменить размер окна background тот что применен для body делает repeat и выглядит это не очень красиво

3. Ни одно из меню не работает. Вы всего лишь вставили картинки, а это не дело.
4. Прокрутка для текста не работает. Тогда зачем она тут?

я бы предложил вам все переделать правильно, т.е написать все менюшки, добавить к нужным элементам hover, сделать прокрутку для текста, переход по иконкам. Ну и конечно же все что вы только сможете придумать и реализовать. Это будем прекрасной практикой)
И как только будет вопросы сразу же обращайтесь, предварительно пробуя найти информацию самостоятельно!

@Beezy · 12.02.2015, 16:38 **[ТС]**

sashok89, спасибо за комментарий. Задача была просто сверстать, чтобы было также как на макете. А так согласен, что с меню и тд. было бы лучше. А насчет 24 дюймового монитора, ширина макета огромная просто, поэтому так открывается.

@sashok89 · 12.02.2015, 16:40

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

@Beezy · 12.02.2015, 16:44 **[ТС]**

а как тогда вставить меню редактирования текста, как на скриншоте, не обойдется без js

@sashok89 · 12.02.2015, 16:48

Тут без JS не обойтись, но меню редактирования сейчас не обязательно делать. Просто сверстать правильно и семантично

@Beezy · 12.02.2015, 21:56 **[ТС]**

Появился такой вопрос: как примерно, сделать такую тень в логотипе, которая отбрасывается в правый нижний угол?

@Beezy · 19.02.2015, 20:09 **[ТС]**

Переделал, убрал почти все картинки, сделал в соответствии с HTML5. Проверьте, пожалуйста, все ли сделал правильно?

@Beezy · 20.02.2015, 07:57 **[ТС]**

Проверьте, пожалуйста

@Goal · 20.02.2015, 14:27

По поводу тени - http://css3gen.com/box-shadow/
у меня 2 монитора, на одном из них такая лажа с задним фоном.

@Beezy · 20.02.2015, 16:59 **[ТС]**

Переделал, сейчас все нормально с фоном. Есть замечания по HTML в плане построения документа?

@cellse · 20.02.2015, 20:57

имхо, чересчур много header'ов

HTML5
1
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

Достаточно просто

HTML5
1
<meta charset="utf-8">

Некоторые моменты тоже можно перенести в css, сделав html менее загруженным
И еще, вендорные префиксы в начале, а не в конце

@Beezy · 21.02.2015, 14:32 **[ТС]**

cellse, header для каждого семантического элемента нужен в html5, если я не ошибаюсь.
В остальном, спасибо, поправил.

Новые блоги и статьи Все статьи Все блоги /
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20%	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .
Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .	Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .

@sashok89 75 / 75 / 11 Регистрация: 04.08.2012 Сообщений: 526 Записей в блоге: 2
	12.02.2015, 16:27
	Для первого разе вроде ничего) Но: 1. При открытии страницы (при стандартном разрешении) вот что у меня, хотя монитор 24 дюйма 2. При попытке изменить размер окна background тот что применен для body делает repeat и выглядит это не очень красиво 3. Ни одно из меню не работает. Вы всего лишь вставили картинки, а это не дело. 4. Прокрутка для текста не работает. Тогда зачем она тут? я бы предложил вам все переделать правильно, т.е написать все менюшки, добавить к нужным элементам hover, сделать прокрутку для текста, переход по иконкам. Ну и конечно же все что вы только сможете придумать и реализовать. Это будем прекрасной практикой) И как только будет вопросы сразу же обращайтесь, предварительно пробуя найти информацию самостоятельно! 1

@Beezy 0 / 0 / 0 Регистрация: 14.09.2014 Сообщений: 173
	12.02.2015, 16:38 [ТС]
	sashok89, спасибо за комментарий. Задача была просто сверстать, чтобы было также как на макете. А так согласен, что с меню и тд. было бы лучше. А насчет 24 дюймового монитора, ширина макета огромная просто, поэтому так открывается. 0

@sashok89 75 / 75 / 11 Регистрация: 04.08.2012 Сообщений: 526 Записей в блоге: 2
	12.02.2015, 16:40
	Всегда рад. Но вот просто сверстать и вставить в блоки картинки имеет большую разницу. Вы же просто вставили картинки в блоки, это не есть верстка! 0

@Beezy 0 / 0 / 0 Регистрация: 14.09.2014 Сообщений: 173
	12.02.2015, 16:44 [ТС]
	а как тогда вставить меню редактирования текста, как на скриншоте, не обойдется без js 0

@sashok89 75 / 75 / 11 Регистрация: 04.08.2012 Сообщений: 526 Записей в блоге: 2
	12.02.2015, 16:48
	Тут без JS не обойтись, но меню редактирования сейчас не обязательно делать. Просто сверстать правильно и семантично 1

@Beezy 0 / 0 / 0 Регистрация: 14.09.2014 Сообщений: 173
	12.02.2015, 21:56 [ТС]
	Появился такой вопрос: как примерно, сделать такую тень в логотипе, которая отбрасывается в правый нижний угол? 0

@Beezy 0 / 0 / 0 Регистрация: 14.09.2014 Сообщений: 173
	20.02.2015, 07:57 [ТС]
	Проверьте, пожалуйста 0

@Goal Футболист 533 / 435 / 142 Регистрация: 31.10.2011 Сообщений: 1,010
	20.02.2015, 14:27
	По поводу тени - http://css3gen.com/box-shadow/ у меня 2 монитора, на одном из них такая лажа с задним фоном. Миниатюры 1

@Beezy 0 / 0 / 0 Регистрация: 14.09.2014 Сообщений: 173
	21.02.2015, 14:32 [ТС]
	cellse, header для каждого семантического элемента нужен в html5, если я не ошибаюсь. В остальном, спасибо, поправил. 0