Нужна проверка кода верстки

@Tansegrity · Регистрация: 27.05.2014

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

Привет. У меня проблема. Решил стать веб программистом, изучил HTML CSS и начал с верстки. Надеялся научиться верстать и уже дальше на работе выучить JavaScript и JQuery. Но так не получается. Видимо верстаю плохо ибо получил уже не один отказ от работодателей. Где мои ошибки я не знаю ибо учусь сам и некому показать.
В данный момент есть 2 сверстанных шаблона, нужно проверить код и описать мои ошибки.
В теме есть 2 прикрепленных архива с версткой. Очень надеюсь на Вашу помощь.

@kvant355 · 27.05.2014, 16:28

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

Добавлено через 2 минуты
код сильно налеплен, родительские элементы всегда левее, а дорчерние правее, код очень плохо читается

Добавлено через 3 минуты
далее ниже
меню категорий тоже никуда не годиться, зачем каждый элемент помещать в отдельный div когда можно просто ul li сделать

Добавлено через 1 минуту
<div id="news_text"> это блок, если вы в него помещаете текст, нужно добавлять тег <p>, <h_> и т д...тут много косяков, вы все сильно усложняете

@ypfirm · 27.05.2014, 16:31

1) Сменяй DOCTYPE
2) charset юзай UTF-8
3) Все файлы в шаблонах называй латиницей и без пробелов
4) Посмотри новые теги теги HTML5, глянь шаблоны помеченные лого HTLM5
По крайней мере нужно добавлять header, content, footer
5) Задавай стили классами, а не id. Используй id для скриптов.
6) Сделай свою "рыбу"
7) Код стилей совершенно не читаемый. Почитай про чайлды, прекрати использовать 20 стилей там, где можно обойтись двумя.

Делай крутые вещи, читай форум, помогай другим. Все придет с опытом.

P.S. Надеюсь более опытные коллеги пополнят список замечаний.

@Tansegrity · 27.05.2014, 17:16 **[ТС]**

если в место div делать через ul li то тогда как мне выставить необходимые отступы?
И еще не понятно почему нужно использовать class вместо id если стиль для этого элемента используется только один рас?

@kvant355 · 27.05.2014, 17:40

для ul и li используются те же параметры что и для div

@wLight · 27.05.2014, 19:32

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

@Tansegrity · 27.05.2014, 19:38 **[ТС]**

Спасибо. Вы мне помогли.
Вопрос вдогонку: как научиться самому качественной верстки?

@kvant355 · 27.05.2014, 19:40

я учился по качественному готовому коду

@Tansegrity · 27.05.2014, 21:05 **[ТС]**

Да, действительно. По качественному коду хорошо учиться. Сейчас только понял =)
А как лучше позиционировать обьект: через position или margin/paddng? А то у меня в коде через каждый селектор встречается position.

@kvant355 · 27.05.2014, 21:24

в каждом случае по своему, нет одного правила для всего

@Taatshi · 28.05.2014, 09:27

Tansegrity, возьмите один макет в psd и начните верстать. Сверстали скелет - основные блоки - показали. Исправили ошибки. Сверстали меню - показали...

Пусть у Вас на это месяц уйдет - но Вы поймете логику.

И проверяйте КАЖДЫЙ шаг при верстке ВО ВСЕХ основных браузерах и при всех доступных разрешениях.

Поищите в сети бесплатный курс Ченгаева по верстке - он поставит Вам мозги на нужную позицию - сразу многое станет понятно.

@Tansegrity · 28.05.2014, 18:49 **[ТС]**

Можно сюда скидывать код для проверки?

@Taatshi · 31.05.2014, 12:52

Tansegrity, не нужно. Создавайте новые темы. У нас на форуме правило: одна тема - один вопрос.

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Первый деплой lagorue 16.01.2026 Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .

@kvant355 43 / 43 / 25 Регистрация: 21.07.2013 Сообщений: 367
	27.05.2014, 16:28
	с ходу глянув test1 сразу видно что очень криво сверсталено меню. Вы для каждого разделителя отдельный блок создавали, когда можно было просто обойтись ul li Добавлено через 2 минуты код сильно налеплен, родительские элементы всегда левее, а дорчерние правее, код очень плохо читается Добавлено через 3 минуты далее ниже меню категорий тоже никуда не годиться, зачем каждый элемент помещать в отдельный div когда можно просто ul li сделать Добавлено через 1 минуту <div id="news_text"> это блок, если вы в него помещаете текст, нужно добавлять тег <p>, <h_> и т д...тут много косяков, вы все сильно усложняете 0

@ypfirm 4 / 4 / 5 Регистрация: 26.05.2014 Сообщений: 22
	27.05.2014, 16:31
	1) Сменяй DOCTYPE 2) charset юзай UTF-8 3) Все файлы в шаблонах называй латиницей и без пробелов 4) Посмотри новые теги теги HTML5, глянь шаблоны помеченные лого HTLM5 По крайней мере нужно добавлять header, content, footer 5) Задавай стили классами, а не id. Используй id для скриптов. 6) Сделай свою "рыбу" 7) Код стилей совершенно не читаемый. Почитай про чайлды, прекрати использовать 20 стилей там, где можно обойтись двумя. Делай крутые вещи, читай форум, помогай другим. Все придет с опытом. P.S. Надеюсь более опытные коллеги пополнят список замечаний. 0

@Tansegrity 0 / 0 / 0 Регистрация: 27.05.2014 Сообщений: 34
	27.05.2014, 17:16 [ТС]
	если в место div делать через ul li то тогда как мне выставить необходимые отступы? И еще не понятно почему нужно использовать class вместо id если стиль для этого элемента используется только один рас? 0

@kvant355 43 / 43 / 25 Регистрация: 21.07.2013 Сообщений: 367
	27.05.2014, 17:40
	для ul и li используются те же параметры что и для div 0

@wLight 38 / 38 / 22 Регистрация: 27.04.2014 Сообщений: 131
	27.05.2014, 19:32
	Tansegrity, Даже не заглядывая в код можно уже увидеть много нехорошего. При разном разрешении сайт "скачет", на высоком разрешении это отлично видно, текст накладывается на другой, вылетают кнопки, линии, часть меню слетает, съезжает контент футера, строка поиска вообще гуляет по разрешениям. По самому коду в принципе основное уже написали выше. 0

@Tansegrity 0 / 0 / 0 Регистрация: 27.05.2014 Сообщений: 34
	27.05.2014, 19:38 [ТС]
	Спасибо. Вы мне помогли. Вопрос вдогонку: как научиться самому качественной верстки? 0

@kvant355 43 / 43 / 25 Регистрация: 21.07.2013 Сообщений: 367
	27.05.2014, 19:40
	я учился по качественному готовому коду 0

@Tansegrity 0 / 0 / 0 Регистрация: 27.05.2014 Сообщений: 34
	27.05.2014, 21:05 [ТС]
	Да, действительно. По качественному коду хорошо учиться. Сейчас только понял =) А как лучше позиционировать обьект: через position или margin/paddng? А то у меня в коде через каждый селектор встречается position. 0

@kvant355 43 / 43 / 25 Регистрация: 21.07.2013 Сообщений: 367
	27.05.2014, 21:24
	в каждом случае по своему, нет одного правила для всего 0

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	28.05.2014, 09:27
	Tansegrity, возьмите один макет в psd и начните верстать. Сверстали скелет - основные блоки - показали. Исправили ошибки. Сверстали меню - показали... Пусть у Вас на это месяц уйдет - но Вы поймете логику. И проверяйте КАЖДЫЙ шаг при верстке ВО ВСЕХ основных браузерах и при всех доступных разрешениях. Поищите в сети бесплатный курс Ченгаева по верстке - он поставит Вам мозги на нужную позицию - сразу многое станет понятно. 1

@Tansegrity 0 / 0 / 0 Регистрация: 27.05.2014 Сообщений: 34
	28.05.2014, 18:49 [ТС]
	Можно сюда скидывать код для проверки? 0

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	31.05.2014, 12:52
	Tansegrity, не нужно. Создавайте новые темы. У нас на форуме правило: одна тема - один вопрос. 0