Оцените верстку

@andreyqin · Регистрация: 14.02.2013

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

Совсем недавно начал изучать HTML и CSS, скачиваю бесплатные макеты и "верстаю", как мне кажется, не ок. Основное, на что хотел бы, чтобы бы вы обратили внимание - позиционирование элементов на странице. Если честно, я иногда сам не понимаю "как оно получилось". Меня интересуют отступы (много отрицательных) и плавающие элементы. Если еще на что-то плохое обратите внимание, тоже будет не плохо, говорите. Собственно, сами макеты:
X-Torrent.rar
MobiShop.rar
PS. Оба сайта одностраничные, с сравнительно небольшим кодом, поэтому, если кому не сложно уделить 10-15 минут времени, пожалуйста, оцените.

@Lovrentiy · 23.02.2013, 09:28

На что обращать внимание? Это пустой шаблон, в нём нет контента.

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

@StopSmell · 23.02.2013, 11:07

Смотрела только шаблон X-torrent.
Вы правы, верстка - очень плохая.
Первое на что сразу обращаешь внимание, то что левое меню (навигация) сделано картинками тогда как. Это ни разу не универсально и не оптимально. Такое простое меню запросто можно сверстать. Тоже самое можно сказать и про заголовки плашек-модулей "Навигация" "Топ торрентов" "Прямой эфир" и т.д.
Второе - использование высоты равной 100%. В то время как у элемента html высота не задана. Хотя у родителей элемента которому нужно задать высоту равную 100%, нужно тоже задать высоту 100%, т.о. у самого главного родителя html нет высоты, соответственно все эти значения не имеют смысла.
Третье - на примере #menu. Вы ставите ему абсолютное позиционирования не используя при этом значений left top, но используете отрицательный маржин, зачем? Или не задавайте вообще позиционирование - просто используйте отр. маржин (что в данном конкретном случае более оптимально). Либо раз уж прописали position: absolute; пишите и значение top: -27px; (без всяких маржинов)
Четверное. Блок #maincontent. Наполните его большим кол-ом текста. И увидите что блок этом снизу вылезет со страницы и поедет вниз без растягивания боковых колонок.
В общем вам явно еще учиться и учиться.

@andreyqin · 23.02.2013, 17:07 **[ТС]**

StopSmell, спасибо большое за критику. Есть несколько вопросов:
1) Почему навигацию и прочие меню лучше верстать (когда это возможно)? Правильно ли я понял, что если возникнет необходимость менять формление этого самого меню, то легче править код, чем картинку? Или есть еще какие-то нюансы?
2) По поводу блока #menu. Я убераю его позиционирование, задаю отрицательный верхний отступ и список становится вверху блока:
Вложение 237498
При попытки задать больший отступ самого списка (#menu ul {margin-top: 15px

, он сдвигается вместе с картинкой:
Вложение 237499
Мне кажется это тривиальная задач, но я не понимаю как решить её. Чему надо задать отступ, чтобы опустился сам список?
3) Как сделать, чтобы боковые блоки растягивались вместе с блоком контента? Опишите в общих чертах, без конкретных значений.

@Lovrentiy · 23.02.2013, 18:12

Пожалуй отвечу я:
1. Лучше всего менять задавать стили в css, то есть всю графику и особенности отображения выполнять в css.
2. Подозреваю вам необходимо его просто прижать или с позиционировать относительно других элементов(например float:left, это прижмет его к левой стороне и опустит под элемент)
3. Для этого блоки задаются не фиксировано в пикселях, а в процентах.

@andreyqin · 23.02.2013, 18:48 **[ТС]**

Сообщение от Lovrentiy

3. Для этого блоки задаются не фиксировано в пикселях, а в процентах.

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

@Lovrentiy · 23.02.2013, 19:32

CSS
1
2
3
4
5
6
7
#navigation1 {
    width: 230px;/*Заданный размер, где проценты?*/
    float: left;
    margin-top: -10px;
    border-right: 1px solid #b4bdbe;
    background: #d0d6d7 url(images/radius-left.png) no-repeat bottom left;
}

CSS
1
2
3
4
5
6
7
#maincontent {
    background-color: white;
    float: left;
    width: 698px;/*Заданный размер, где проценты?*/
    min-height: 904px;
    height: 100%
}

CSS
1
2
3
4
5
6
7
#navigation2 {
    width: 230px;/*Заданный размер, где проценты?*/
    float: left;
    margin-top: -10px;
    border-left: 1px solid #b4bdbe;
    background: #d0d6d7 url(images/radius-right.png) no-repeat bottom left;
}

@andreyqin · 23.02.2013, 20:37 **[ТС]**

Lovrentiy, это старый код, сейчас там width: 20%;, width: 20%;, width: 59.8%; соответственно. И ничего! Надо сделать так, чтобы все 3 блока как бы "сцепились" между собой и их высота зависела от высоты больше из них. Я не знаю как это сделать.

@StopSmell · 23.02.2013, 21:10

1. Совершенно верно. Просто если вам понадобится поменять например название пункта меню, вы это сделаете за 5 секунд, в случае с картинкой вам придется ее перерисовывать, естественно за 5 секунд вы это не сделаете. Кроме всего прочего каждая картинка на каждый пункт меню это дополнительный трафик, в то время как в css используются картинки одна (например маленькая 1-2 пикселя в ширину с фоновым изображением) для всех пунктов меню.
2. Используйте padding-top для #menu ul.
3. В данном конкретном случае колонки одинаковой высоты можно имитировать с помощью фонового изображения. Как вариант - использовать table-cell для трех блоков. Можно воспользоваться jquery для задания высоты. В общем вариантов много, если интересно гуглите "колонки одинаковой высоты css"

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@andreyqin 0 / 0 / 0 Регистрация: 14.02.2013 Сообщений: 48

	Оцените верстку 23.02.2013, 01:16. Показов 1103. Ответов 8 Метки нет (Все метки) Совсем недавно начал изучать HTML и CSS, скачиваю бесплатные макеты и "верстаю", как мне кажется, не ок. Основное, на что хотел бы, чтобы бы вы обратили внимание - позиционирование элементов на странице. Если честно, я иногда сам не понимаю "как оно получилось". Меня интересуют отступы (много отрицательных) и плавающие элементы. Если еще на что-то плохое обратите внимание, тоже будет не плохо, говорите. Собственно, сами макеты: X-Torrent.rar MobiShop.rar PS. Оба сайта одностраничные, с сравнительно небольшим кодом, поэтому, если кому не сложно уделить 10-15 минут времени, пожалуйста, оцените. 0

@Lovrentiy 162 / 162 / 11 Регистрация: 07.09.2011 Сообщений: 995
	23.02.2013, 09:28
	На что обращать внимание? Это пустой шаблон, в нём нет контента. у вас странное использование див-а лого, неиспользуемый див топв целом что то определить без накполнения сложно 0

@StopSmell 293 / 169 / 29 Регистрация: 16.09.2012 Сообщений: 370
	23.02.2013, 11:07
	Смотрела только шаблон X-torrent. Вы правы, верстка - очень плохая. Первое на что сразу обращаешь внимание, то что левое меню (навигация) сделано картинками тогда как. Это ни разу не универсально и не оптимально. Такое простое меню запросто можно сверстать. Тоже самое можно сказать и про заголовки плашек-модулей "Навигация" "Топ торрентов" "Прямой эфир" и т.д. Второе - использование высоты равной 100%. В то время как у элемента html высота не задана. Хотя у родителей элемента которому нужно задать высоту равную 100%, нужно тоже задать высоту 100%, т.о. у самого главного родителя html нет высоты, соответственно все эти значения не имеют смысла. Третье - на примере #menu. Вы ставите ему абсолютное позиционирования не используя при этом значений left top, но используете отрицательный маржин, зачем? Или не задавайте вообще позиционирование - просто используйте отр. маржин (что в данном конкретном случае более оптимально). Либо раз уж прописали position: absolute; пишите и значение top: -27px; (без всяких маржинов) Четверное. Блок #maincontent. Наполните его большим кол-ом текста. И увидите что блок этом снизу вылезет со страницы и поедет вниз без растягивания боковых колонок. В общем вам явно еще учиться и учиться. 1

@andreyqin 0 / 0 / 0 Регистрация: 14.02.2013 Сообщений: 48
	23.02.2013, 17:07 [ТС]
	StopSmell, спасибо большое за критику. Есть несколько вопросов: 1) Почему навигацию и прочие меню лучше верстать (когда это возможно)? Правильно ли я понял, что если возникнет необходимость менять формление этого самого меню, то легче править код, чем картинку? Или есть еще какие-то нюансы? 2) По поводу блока #menu. Я убераю его позиционирование, задаю отрицательный верхний отступ и список становится вверху блока: Вложение 237498 При попытки задать больший отступ самого списка (#menu ul {margin-top: 15px, он сдвигается вместе с картинкой: Вложение 237499 Мне кажется это тривиальная задач, но я не понимаю как решить её. Чему надо задать отступ, чтобы опустился сам список? 3) Как сделать, чтобы боковые блоки растягивались вместе с блоком контента? Опишите в общих чертах, без конкретных значений. 0

@Lovrentiy 162 / 162 / 11 Регистрация: 07.09.2011 Сообщений: 995
	23.02.2013, 18:12
	Пожалуй отвечу я: 1. Лучше всего менять задавать стили в css, то есть всю графику и особенности отображения выполнять в css. 2. Подозреваю вам необходимо его просто прижать или с позиционировать относительно других элементов(например float:left, это прижмет его к левой стороне и опустит под элемент) 3. Для этого блоки задаются не фиксировано в пикселях, а в процентах. 1

@andreyqin 0 / 0 / 0 Регистрация: 14.02.2013 Сообщений: 48
	23.02.2013, 20:37 [ТС]
	Lovrentiy, это старый код, сейчас там width: 20%;, width: 20%;, width: 59.8%; соответственно. И ничего! Надо сделать так, чтобы все 3 блока как бы "сцепились" между собой и их высота зависела от высоты больше из них. Я не знаю как это сделать. 0

@StopSmell 293 / 169 / 29 Регистрация: 16.09.2012 Сообщений: 370
	23.02.2013, 21:10
	1. Совершенно верно. Просто если вам понадобится поменять например название пункта меню, вы это сделаете за 5 секунд, в случае с картинкой вам придется ее перерисовывать, естественно за 5 секунд вы это не сделаете. Кроме всего прочего каждая картинка на каждый пункт меню это дополнительный трафик, в то время как в css используются картинки одна (например маленькая 1-2 пикселя в ширину с фоновым изображением) для всех пунктов меню. 2. Используйте padding-top для #menu ul. 3. В данном конкретном случае колонки одинаковой высоты можно имитировать с помощью фонового изображения. Как вариант - использовать table-cell для трех блоков. Можно воспользоваться jquery для задания высоты. В общем вариантов много, если интересно гуглите "колонки одинаковой высоты css" 1