Business Co.

Dinow · June 29, 2011

Сверстала еще один макет - Business Co.

Постаралась выполнить все требования указанные в ТЗ:

Задание:
- фикс неинтересно, поэтому вёрстка должна быть резиновая
- минимальная ширина 780px, максимальная бесконечно
- все градиенты, закруглённые уголки и прочие вещи должны быть
- верхнее меню в хедере должно тянуться по ширине, так же вкладки этого меню тоже должны растягиваться в зависимости от их содержимого. Не забудьте про активную вкладку, как видно, она отличается от обычных
- изображение с планетой должно быть так же резиновым или сделайте так, чтобы было красиво при широком экране + текст в этом блоке всегда прижат к правому краю
- под этим изображением есть панель с тремя разными картинками. Это кнопки, при нажатии на любую из них изображение планеты должно меняться на то, которое нарисовано на кнопке. И не забывайте, что всё должно так же тянуться и т.д.
- в центре две колонки, левая фикс по ширине, правая резина
- все блоки внутри колонок, должны тянуться по ширине и высоте, если что
- если в блоках нет содержимого, то сжиматься по высоте они должны так, чтобы не портился вид градиента
- футер всегда прижат к низу
- вёрстка должна быть полностью кроссбраузерной, включая IE6 и должна везде смотреться одинаково

Проверен в IE 6+, Mozilla 3+, Opera 9+, Chrome, Safari

Какие есть ошибки, замечания по коду?

У меня сомнения относительно некоторых пунктов:

подключила с помощью js три разных файла со стилями для меняющегося изображения в слайдере (т.к. при общих стилях текст на них был не читабельным). Правильно ли такое решение? Или есть более правильные и красивые варианты?
панель под изображением спозиционировала абсолютно, потому что иначе в некоторых браузерах появлялся зазор + при увеличении количества текста на изображении она съезжала. Стоило ли так делать?
можно ли блок Solutions showcase реализовать как то попроще?

P.s. psywalker, спасибо за макет. Можешь оценить верстку? Желательно так же подробно и не жалея как в соседней теме))

ShumNo · June 29, 2011

какие-то слишком большие отступы вокруг навигации и контента по бокам.. наверное так в макете

iamevgeny · June 29, 2011

GChrome разрешение 1920*1080:

Не хватает куска фона.

psywalker · June 29, 2011

P.s. psywalker, спасибо за макет. Можешь оценить верстку? Желательно так же подробно и не жалея как в соседней теме))

К сожалению пока не могу, у самого работы много и цейтнот страшный :facepalmxd:

Не знаю, када закончиться, может вообще через неделю(

Dinow · June 30, 2011

GChrome разрешение 1920*1080:
Не хватает куска фона.

Терь будет хватать)) ограничила ширину

К сожалению пока не могу, у самого работы много и цейтнот страшный
Не знаю, када закончиться, может вообще через неделю(

Буду ждать тогда)

iamevgeny · June 30, 2011

Терь будет хватать)) ограничила ширину

На мой взгляд так значительно лучше.

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

Так и должно быть?

buddah · June 30, 2011

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

Бордер стоит на активной картинке.

Dinow · June 30, 2011

iamevgeny , да, так и должно быть, картинки кликабельны и, как уже сказал buddah, бордер появляется у активной

psywalker · July 1, 2011

Dinow, Держи Алиса, как просила

1. Отдельный стили для ИЕ6, ИЕ7 можно и нужно было написать в одном файле.

2.Вот этот скрипт можно было подключить линком, а не выписывать.

		<script>
			var e = ("article,aside,footer,header,nav,section,hgroup").split(',');
			for (var i = 0; i < e.length; i++) {
			document.createElement(e[i]);
			}
		</script>

3.Почему класс "logo" не повешан на ссылку? Плохо.

<a href="">
<img class="logo" title="Business Co - Reach stability with us!" alt="Business Co - Reach stability with us!" src="Imgs/logo.png">
</a>

4. Это же HTML5, и поэтому на странице легко может быть 10 хедеров, не думала об этом?

header {
    height: 91px;

5. Кстати насчёт лого ещё кое-что. Вот это лучше было повесить на ссылку.

title="Business Co - Reach stability with us!"

6.

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

7.

Зачем же так сразу обрезать весь контент, а если в нём будут вылезающие части?

.content {

    overflow: hidden;

8.

Зачем нужны классы у этого меню? Пункты абсолютно одинаковые, а потом что будет если картинки поменяются местами или в пунктах будет другое содержимое?

<li class="option">
<li class="consulting">
<li class="planning">

9.

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

10.

Добавил несколько слов в заголовок левой колонки и ппц, текста не видно, заголовок по высоте не стал больше, ужасно

<h1>Recent solо аыв лаоыв авылаоылоа вылыолоаывл аывлаывоutions</h1>

11.

Тоже самое в правой колонке(((

12.

Зачем зафлоаченный элемнет делать ещё и блочным?

a.more {

    display: block;
    float: right;

13.

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

<section class="business_sol">

14.

Так же, кстати и в других местах. см. пункт 13.

15. Вот в этой же секции (<section class="business_sol">) в меню (где картинки), если в параграфы забить много текста, то текст заходит под картинку. Хреново. Сделай так, чтобы он не заходил под неё и при этом если я убираю картинку, то он вставал на её место.

16.

В футере, в меню палки между пунктами нужно было делать бордерами, а не текстом.

17.

Нафига в общих стилях такая запись? font-size: 100.01%; Это нужно только для ИЕ, и то ИЕ6,7. Из-за этого могут быть проблемы в нормальных браузерах.

18.

В стилях бардак какой-то, никакой организованности и т.д.

Резюме:

В целом работа сделана некачественно и непродуманно, ощущается заболевание "Избыточный минимализм", жуткая нехватка классов, там где они необходимы и просятся на 100%. Так же много лишнего кода, неорганизованность в CSS и прочее.

Из плюсов, виден небольшой потенциал, а так же маленький, но всё же рост, как верстальщика.

И отдельно, что меня порадовало, это вот эта деталька .75em. Тут молодец конечно же, хвалю.

Оценка: 1 из 10.

В общем есть большая необходимость в чтении литературы, общения на форуме и постоянной тренировке. Удачи Алиса

Dinow · July 1, 2011

Макс, спасибо! То что надо! Пошла обдумывать и исправлять ошибки.

psywalker · July 1, 2011

Макс, спасибо! То что надо! Пошла обдумывать и исправлять ошибки.

Давай, беги, повнимательнее там

mishka · July 1, 2011

3.Почему класс "logo" не повешан на ссылку? Плохо.

Ну дык лого не всегда может быть ссылкой.

psywalker · July 1, 2011

3.Почему класс "logo" не повешан на ссылку? Плохо.
Ну дык лого не всегда может быть ссылкой.

Согласен, но в данной ситуации например на ссылке вообще нет класса, а управлять её позиционированием засчёт элемента header считаю неправильным. А в данной ситуации к ссылке вообще идёт обращение так:

a {
    color: #1981D9;
    text-decoration: none;
}

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

Dinow · July 1, 2011

5. Кстати насчёт лого ещё кое-что. Вот это лучше было повесить на ссылку.
title="Business Co - Reach stability with us!"

И за счет text-indent убрать текст за пределы видимости? Просто где-то тут на форуме читала, что так делать не желательно. Так как все же правильнее поступать?

psywalker · July 1, 2011

5. Кстати насчёт лого ещё кое-что. Вот это лучше было повесить на ссылку.
title="Business Co - Reach stability with us!"
И за счет text-indent убрать текст за пределы видимости? Просто где-то тут на форуме читала, что так делать не желательно. Так как все же правильнее поступать?

А нафига тебе вообще текст? У тебя есть титл и альт, тебе этого мало?

Dinow · July 1, 2011

А нафига тебе вообще текст? У тебя есть титл и альт, тебе этого мало?

Я тебя не так поняла :facepalmxd: сча дошло, что ты имел в виду

psywalker · July 1, 2011

А нафига тебе вообще текст? У тебя есть титл и альт, тебе этого мало?
Я тебя не так поняла сча дошло, что ты имел в виду

:boast:

mishka · July 1, 2011

3.Почему класс "logo" не повешан на ссылку? Плохо.
Ну дык лого не всегда может быть ссылкой.
Согласен, но в данной ситуации например на ссылке вообще нет класса, а управлять её позиционированием засчёт элемента header считаю неправильным. А в данной ситуации к ссылке вообще идёт обращение так:
a {
    color: #1981D9;
    text-decoration: none;
}
Т.е. тут вообще непонятно, что это за ссылка и для чего она. А отступы вообще стоят у вложенных элементов.

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

psywalker · July 1, 2011

3.Почему класс "logo" не повешан на ссылку? Плохо.
Ну дык лого не всегда может быть ссылкой.
Согласен, но в данной ситуации например на ссылке вообще нет класса, а управлять её позиционированием засчёт элемента header считаю неправильным. А в данной ситуации к ссылке вообще идёт обращение так:
a {
    color: #1981D9;
    text-decoration: none;
}
Т.е. тут вообще непонятно, что это за ссылка и для чего она. А отступы вообще стоят у вложенных элементов.
Тогда можно обернуть дивом/спаном, ему дать класс, и внутрь вложить имагу, ну а линку дописывать или нет - зависит от того кликабельно ли лого.

Я всё же предпочитаю другой подход, смотри.

Мы засовываем в h1 например линку, в неё имгу, класс мы вешаем на заголовок "logo"

<h1 class="logo"><a title="Business Co - Reach stability with us!" href="#"><img class="logo" src="Imgs/logo.png" alt="Business Co - Reach stability with us!" /></a></h1>

Далее если что, то динамически просто убираем линку, вот и всё. Например на главной странице её не будет, а на остальных будет.

Так же если что, то мы меняем текст тега "h1" на "div".

Как тебе такой вариант?

psywalker · July 1, 2011

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

amelice · July 2, 2011

Классный макет. Dinow, ты молодец. Мне бы так сверстать как у тебя получилось. Особенно понравилось твое решение по поводу навигации в хедере. Я наверное, тоже попробую через position-background. )

Dinow · July 3, 2011

Dinow, Держи Алиса, как просила
1. Отдельный стили для ИЕ6, ИЕ7 можно и нужно было написать в одном файле.
2.Вот этот скрипт можно было подключить линком, а не выписывать.
		<script>
			var e = ("article,aside,footer,header,nav,section,hgroup").split(',');
			for (var i = 0; i < e.length; i++) {
			document.createElement(e[i]);
			}
		</script>
3.Почему класс "logo" не повешан на ссылку? Плохо.
<a href="">
<img class="logo" title="Business Co - Reach stability with us!" alt="Business Co - Reach stability with us!" src="Imgs/logo.png">
</a>
5. Кстати насчёт лого ещё кое-что. Вот это лучше было повесить на ссылку.
title="Business Co - Reach stability with us!"
7.
Зачем же так сразу обрезать весь контент, а если в нём будут вылезающие части?
.content {

    overflow: hidden;

Исправила

4. Это же HTML5, и поэтому на странице легко может быть 10 хедеров, не думала об этом?
header {
    height: 91px;

Не учла сразу.. добавила класс

9.
В контентной части при большом разрешении (даже не очень большом) получается очень большое пространство между колонками. Очень некрасиво, нужно было сделать резиновую левую колонку, либо прижать правую к левой.

Уменьшила отступы

10.
Добавил несколько слов в заголовок левой колонки и ппц, текста не видно, заголовок по высоте не стал больше, ужасно
<h1>Recent solо аыв лаоыв авылаоылоа вылыолоаывл аывлаывоutions</h1>
11.
Тоже самое в правой колонке(((

Везде для проверки добавляла текст, а про заголовки даже не подумала.. переделала, теперь растягиваются)

12.
Зачем зафлоаченный элемнет делать ещё и блочным?
a.more {

    display: block;
    float: right;

А вот про это все время забываю((

13.
Вот в этой секции большая жадность на классы, их не хватает у списка например. Такие вещи обязаны иметь свой класс, иначе это несерьёзный и неправильный подход к делу. Минимализм не оправдан.
<section class="business_sol">
14.
Так же, кстати и в других местах. см. пункт 13.

Добавила классов везде, где посчитала, что они будут оправданы. Правда теперь боюсь, что перестаралась..

15. Вот в этой же секции (<section class="business_sol">) в меню (где картинки), если в параграфы забить много текста, то текст заходит под картинку. Хреново. Сделай так, чтобы он не заходил под неё и при этом если я убираю картинку, то он вставал на её место.
16.
В футере, в меню палки между пунктами нужно было делать бордерами, а не текстом.

Переделала

17.
Нафига в общих стилях такая запись? font-size: 100.01%; Это нужно только для ИЕ, и то ИЕ6,7. Из-за этого могут быть проблемы в нормальных браузерах.

Такая конструкция в начале твоего CSS позволит избежать некоторых багов:
1. исключает проблему в IE/Win с непропорциональным увеличением или уменьшением размера шрифта, если он установлен в em
2. в Opera шрифт 100% может отобразиться более мелким, чем в других браузерах
3. 101% не следует использовать из-за проблем с размерами в Safari
Данный прием используется в сборке reset.css.

http://www.xiper.net/collect/html-and-css-tricks/typographics/font-size-100-for-html.html

6.
Слайдера не увидел, просто тупо меняющиеся картинки. Можно было бы сделать поинтереснее тогда уж.
8.
Зачем нужны классы у этого меню? Пункты абсолютно одинаковые, а потом что будет если картинки поменяются местами или в пунктах будет другое содержимое?
<li class="option">
<li class="consulting">
<li class="planning">

Так классы, чтобы скрипт по смене файлов со стилями срабатывал. C js, jquery не дружу, как сделать нормальный слайдер понятия не имею, те что нашлись в сети не дают того эффекта что нужен: чтобы был нормальный слайдер, причем менял и картинку и бэкраунд и + текст на каждом имел свои стили. Есть идеи как это реализовать?

18.
В стилях бардак какой-то, никакой организованности и т.д.
Так же много лишнего кода, неорганизованность в CSS и прочее.

А вот тут можно поподробнее? Почему бардак и неорганизованность в стилях? Все же разделено последовательно и по логическим блокам.

И на счет лишнего кода: можешь показать, где можно было сделать проще? Хочу довести верстку до возможного идеала..

Из плюсов, виден небольшой потенциал, а так же маленький, но всё же рост, как верстальщика.
И отдельно, что меня порадовало, это вот эта деталька .75em. Тут молодец конечно же, хвалю.
Оценка: 1 из 10.
В общем есть большая необходимость в чтении литературы, общения на форуме и постоянной тренировке. Удачи Алиса

Спасибо большое за разбор ошибок и оценку! А чтение и тренировка - это обязательный и непрерывный процесс)

Классный макет. Dinow, ты молодец. Мне бы так сверстать как у тебя получилось. Особенно понравилось твое решение по поводу навигации в хедере. Я наверное, тоже попробую через position-background. )

cheburek, спасибо)

psywalker · July 4, 2011

Dinow,

1.

Такая конструкция в начале твоего CSS позволит избежать некоторых багов:
1. исключает проблему в IE/Win с непропорциональным увеличением или уменьшением размера шрифта, если он установлен в em
2. в Opera шрифт 100% может отобразиться более мелким, чем в других браузерах
3. 101% не следует использовать из-за проблем с размерами в Safari
Данный прием используется в сборке reset.css.

Алис, если честно, насчёт последних двух пунктов я узнал только от тебя сейчас, раньше как-то лично не испытывал проблем с этим. Я даже предполагаю, что может быть они и были, но в каких-то очень ранних версиях Опера и Сафари, так как я лично всегда задавал 100.01% только для ИЕ6-7, потому что там действительно с этим были траблы, помню, что как-то сам даже тестировал и подтверждал это. Т.е. все размеры в em будут высчитываться непропорционально, и это касается не только текста, но и любых вычислений на этих единицах длины.

2.

Зачем нужны классы у этого меню? Пункты абсолютно одинаковые, а потом что будет если картинки поменяются местами или в пунктах будет другое содержимое?
<li class="option">
<li class="consulting">
<li class="planning">
Так классы, чтобы скрипт по смене файлов со стилями срабатывал. C js, jquery не дружу, как сделать нормальный слайдер понятия не имею, те что нашлись в сети не дают того эффекта что нужен: чтобы был нормальный слайдер, причем менял и картинку и бэкраунд и + текст на каждом имел свои стили. Есть идеи как это реализовать?

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

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

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

3

А вот тут можно поподробнее? Почему бардак и неорганизованность в стилях? Все же разделено последовательно и по логическим блокам.
И на счет лишнего кода: можешь показать, где можно было сделать проще? Хочу довести верстку до возможного идеала..

Алиса, довести до идеала всё равно не получится. Идеал - это то, к чему нужно стремиться всю жизнь, иначе твоё развитие в этом плане остановиться и тебе некуда будет расти. У меня лично нет ни одной, даже приближенной к идеалу работы, если что.

Просто организуй по другому, выдели разделы под основные блоки, выдели секции под второстепенные. Т.е. не просто прочерти линию между ними, как сейчас, а нарисуй полноценную, красивую картинку.

А вот ещё что заметил (и она там не одна!), смотри:

/*----------- Navigation ---------*/
nav { margin: -16px 0 0 190px; }
	nav li { 
		list-style: none;
		float: right; 
		width: 19%; 
		padding-top: 10px;
	}
		nav li a {
		background: #ccc url(Imgs/menu-left.png) top left no-repeat;
		display: block;
		text-align: center;
		text-decoration: none;
		font-weight: bold; 
		color: #000;
		cursor: pointer;
		}
			nav li a span {
				background: url(Imgs/menu-right.png) top right no-repeat;
				display: block;
				height: 19px; padding-top: 7px;
			}

		nav li a:hover, nav li.active a {
			background-position: 0 -26px;	
			margin-top: -9px;
			text-decoration: none;
		}	
			nav li a:hover span, nav li.active a span {
				background-position: right -26px; 
				padding-top: 13px; padding-bottom: 4px;	
			}

Вот это грубая ошибка, ты её видишь?

Насчёт остального пока посмотреть к сожалению не могу, так как я не дома, а тут очень медленный инет. Но думаю пока достаточно, а если что, то позже отпишу.

Dinow · July 4, 2011

Dinow,
1.
Такая конструкция в начале твоего CSS позволит избежать некоторых багов:
1. исключает проблему в IE/Win с непропорциональным увеличением или уменьшением размера шрифта, если он установлен в em
2. в Opera шрифт 100% может отобразиться более мелким, чем в других браузерах
3. 101% не следует использовать из-за проблем с размерами в Safari
Данный прием используется в сборке reset.css.
Алис, если честно, насчёт последних двух пунктов я узнал только от тебя сейчас, раньше как-то лично не испытывал проблем с этим. Я даже предполагаю, что может быть они и были, но в каких-то очень ранних версиях Опера и Сафари, так как я лично всегда задавал 100.01% только для ИЕ6-7, потому что там действительно с этим были траблы, помню, что как-то сам даже тестировал и подтверждал это. Т.е. все размеры в em будут высчитываться непропорционально, и это касается не только текста, но и любых вычислений на этих единицах длины.

Тогда писать только в стилях для ИЕ? или лучше на всякий для подстраховки пусть остается?

Да ничего пока не делай, оставь, как есть. Чтобы сделать слайдер, нужно хотя бы знать основы JS и посвятить много времени этой технологии.
Твоя задача на сегодняшний день - это изучить вёрстку на должном уровне, познать её аспекты и т.д. А JS - это уже более сложная штука, поэтому пока не вникай, всё надо делать последовательно.
Так что просто возьми моё замечание на заметку, на будущее. Вот такой вот тебе совет от меня.

Окей, оставлю тогда, переделаю, когда/если за js возьмусь. спасибо за совет кстати)

Алиса, довести до идеала всё равно не получится. Идеал - это то, к чему нужно стремиться всю жизнь, иначе твоё развитие в этом плане остановиться и тебе некуда будет расти. У меня лично нет ни одной, даже приближенной к идеалу работы, если что.
Просто организуй по другому, выдели разделы под основные блоки, выдели секции под второстепенные. Т.е. не просто прочерти линию между ними, как сейчас, а нарисуй полноценную, красивую картинку.

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

А вот ещё что заметил (и она там не одна!), смотри:

/*———-- Navigation ———*/
nav { margin: -16px 0 0 190px; }
	nav li { 
		list-style: none;
		float: right; 
		width: 19%; 
		padding-top: 10px;
	}
		nav li a {
		background: #ccc url(Imgs/menu-left.png) top left no-repeat;
		display: block;
		text-align: center;
		text-decoration: none;
		font-weight: bold; 
		color: #000;
		cursor: pointer;
		}
			nav li a span {
				background: url(Imgs/menu-right.png) top right no-repeat;
				display: block;
				height: 19px; padding-top: 7px;
			}

		nav li a:hover, nav li.active a {
			background-position: 0 -26px;	
			margin-top: -9px;
			text-decoration: none;
		}	
			nav li a:hover span, nav li.active a span {
				background-position: right -26px; 
				padding-top: 13px; padding-bottom: 4px;	
			}

Вот это грубая ошибка, ты её видишь?

В упор не вижу(( заметила только что в одном месте паддинги не объединила и все.. Что там не так?

psywalker · July 4, 2011

Dinow,

Тогда писать только в стилях для ИЕ? или лучше на всякий для подстраховки пусть остается?

Я бы оставил только для ИЕ6-7

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

На мой взгляд там есть ещё куда расти, и очень много.

В упор не вижу(( заметила только что в одном месте паддинги не объединила и все.. Что там не так?

Нет, дело не в паддингах, посмотри на селекторы, а точнее на самый первый

Sign In

Business Co.

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information