Макет Business Сo.

amelice · July 27, 2011

Всем привет!

Сверстала макет с форума.

Прошу оценить верстку.

Из заданий не реализован этот пункт:

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

Пока скрипты не знаю, для меня трудновато такое реализовать.

Поэтому сильно не ругайте за это.

Всем заранее спасибо.

Vlad · July 28, 2011

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

* {
    margin: 0;
    padding: 0;
}

buddah · July 28, 2011

Используй вместо

* {
    margin: 0;
    padding: 0;
}

reset.css от Мейера:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

amelice · July 28, 2011

Vlad, buddah спасибо!

Но объясните пожалуйста, почему так нельзя? Чтоб я раз и навсегда поняла, что так нельзя потому что то-то.. Пока мне кажется, что это самый простой способ, ведь это правило сработает один раз, и он не повлияет на внутренние вложенные теги, если их переопределю?

sigma77 · July 28, 2011

Vlad, buddah спасибо!
Но объясните пожалуйста, почему так нельзя? Чтоб я раз и навсегда поняла, что так нельзя потому что то-то.. Пока мне кажется, что это самый простой способ, ведь это правило сработает один раз, и он не повлияет на внутренние вложенные теги, если их переопределю?

Потому что это правило сработает ко всем элементам, что может в последствии вызвать сложности в их стилизации, например с формами. Ну или, например, такой, крайний случай - http://jsfiddle.net/MbKjT/

Тут можешь почитать обсуждения по поводу различных вариантов сброса:

- http://forum.htmlbook.ru/index.php?showtopic=13814

- http://forum.htmlbook.ru/index.php?showtopic=25081

Про универсальный селектор - http://reference.sitepoint.com/css/universalselector

Vlad · July 28, 2011

Есть технические доводы и "идеологические".

- Универсальный селектор применяет стиль ко всем элементам веб-страницы, включая невидимые, что приводит к замедлению браузера, поскольку ему требуется некоторое время для построения дерева элементов и добавления к ним стилей. Чем больше элементов в коде, тем сильнее выражено замедление. В некоторых крайних случаях вообще может появиться «зависание» браузера на несколько секунд.

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

* { 
 display: block; 
 border: 1px solid #c00;
}

- «Обнуление стилей» прививает у разработчика дурную манеру вёрстки. Вместо того чтобы знать, какие значения свойств установлены по умолчанию, разработчик перекладывает эту работу на браузер, насильно устанавливая все значения в ноль. В результате некоторые значения применяются к свойствам, для которых не могут устанавливаться или к свойствам, у которых данное значение и так нулевое. Это опять же приводит к повышению нагрузки на браузер и замедлению его работы.

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

* { 
 padding: 0; 
} 
a {
 text-decoration: none;
 border-bottom: 1px dashed red;
}

Замечу также, что reset.css тоже не следует использовать в том виде, что привёл buddah. Сам Мейер неоднократно заявлял, что этот код всего-лишь основа для собственных изменений. Об этом или забывают или не желают знать. В итоге используют код, который заведомо излишен. Вот скажите, кто в последний раз использовал тег h6? А может вы активно применяете тег ruby и не представляете страницу без него? Короче, перед использованием чего-либо подобного, подумайте вначале и подредактируйте его "под себя", а не вставляйте бездумно, как это делает большинство.

amelice · July 28, 2011

Vlad, buddah спасибо!
Но объясните пожалуйста, почему так нельзя? Чтоб я раз и навсегда поняла, что так нельзя потому что то-то.. Пока мне кажется, что это самый простой способ, ведь это правило сработает один раз, и он не повлияет на внутренние вложенные теги, если их переопределю?
Потому что это правило сработает ко всем элементам, что может в последствии вызвать сложности в их стилизации, например с формами. Ну или, например, такой, крайний случай - http://jsfiddle.net/MbKjT/
Тут можешь почитать обсуждения по поводу различных вариантов сброса:
- http://forum.htmlbook.ru/index.php?showtopic=13814
- http://forum.htmlbook.ru/index.php?showtopic=25081
Про универсальный селектор - http://reference.sitepoint.com/css/universalselector

Большое спасибо, приступила к изучению.

Это немножко оффтоп:

sigma77, ты мне посоветовала отличную книгу по CSS Дэвида Макфарленда, с практикой, по ней я как раз занимаюсь в данный момент. Не знаешь подобную книжку по javaScript, чтоб именно было с практикой для обучения.

Great Rash · July 28, 2011

А я считаю, что юзать

* {
    margin: 0;
    padding: 0;
}

можно и нужно.

И вообще это холиварная тема

По теме:

1) Пункты меню зачем же резиновыми делать?

2) <div id="container"> - ID это очень плохо. Программист, который будет "оживлять" верстку, не должен задумываться, что на ID могут быть навешаны стили. Если программисту понадобится сменить ID то верстка развалится. Поэтому надо везде использовать только классы.

3)


<div class="logo">
  <a href="#">
    <img alt="Business Co - Reach stability with us!" src="img/logo_01.png" height="56" width="220">
  </a>
</div>

Зачем понадобилась лишняя обертка?

4) <img src="img/icon_map.gif" height="14" width="14" alt="home"> - зачем везде прописывать размеры картинок в атрибутах?

5) .marker {clear: both; position: absolute; ...} - зачем тут clear: both?

6) можно обойтись без дива с классом marker

7) блок Recent solutions: правильней было бы сделать не <ul>, а <dl>.

8) в блоке Ideal solutions

<strong>Praesent vestibulum molestie lacus. Aenean nonummy.</strong>

это очевидно заголовок, а не просто <strong>.

9) основной контент (Business Solutions) - ну какой же это список?

В общем пока плохо.

buddah · July 28, 2011

Замечу также, что reset.css тоже не следует использовать в том виде, что привёл buddah. Сам Мейер неоднократно заявлял, что этот код всего-лишь основа для собственных изменений. Об этом или забывают или не желают знать. В итоге используют код, который заведомо излишен. Вот скажите, кто в последний раз использовал тег h6? А может вы активно применяете тег ruby и не представляете страницу без него? Короче, перед использованием чего-либо подобного, подумайте вначале и подредактируйте его "под себя", а не вставляйте бездумно, как это делает большинство.

Я не знаю заранее, как и Мейер, какие элементы нужны cheburek, а какие нет. Но да, спасибо за уточнение, все верно.

Vlad · July 28, 2011

Great Rash, про "ID это очень плохо" тоже холиварная тема.

amelice · July 28, 2011

Есть технические доводы и "идеологические".
- Универсальный селектор применяет стиль ко всем элементам веб-страницы, включая невидимые, что приводит к замедлению браузера, поскольку ему требуется некоторое время для построения дерева элементов и добавления к ним стилей. Чем больше элементов в коде, тем сильнее выражено замедление. В некоторых крайних случаях вообще может появиться «зависание» браузера на несколько секунд.
- При неверном использовании универсального селектора результат может оказаться непредсказуемым. Пример ниже является полностью корректным с точки зрения CSS, но приводит страницу к парадоксальному виду.
* { 
 display: block; 
 border: 1px solid #c00;
} 
- «Обнуление стилей» прививает у разработчика дурную манеру вёрстки. Вместо того чтобы знать, какие значения свойств установлены по умолчанию, разработчик перекладывает эту работу на браузер, насильно устанавливая все значения в ноль. В результате некоторые значения применяются к свойствам, для которых не могут устанавливаться или к свойствам, у которых данное значение и так нулевое. Это опять же приводит к повышению нагрузки на браузер и замедлению его работы.
- Применение одного стиля сразу ко всем элементам иногда приводит к ошибкам отображения элементов в отдельных браузерах. В примере ниже к ссылкам добавляется пунктирное подчеркивание, которое не показывается в IE7 из-за заданного обнуления полей у ссылок.
* { 
 padding: 0; 
} 
a {
 text-decoration: none;
 border-bottom: 1px dashed red;
}
Замечу также, что reset.css тоже не следует использовать в том виде, что привёл buddah. Сам Мейер неоднократно заявлял, что этот код всего-лишь основа для собственных изменений. Об этом или забывают или не желают знать. В итоге используют код, который заведомо излишен. Вот скажите, кто в последний раз использовал тег h6? А может вы активно применяете тег ruby и не представляете страницу без него? Короче, перед использованием чего-либо подобного, подумайте вначале и подредактируйте его "под себя", а не вставляйте бездумно, как это делает большинство.

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

Я буду сбрасывать только те, которые имеет смысл обнулять.

Softlink · July 28, 2011

я не использую ни глобального сброса, ни сброса по Мейеру. Нафиг они нужны? Хорошие доводы привел Влад.

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

Посмотрели, в каких тегах вам надо все обнулить, и ставьте их в этот самый сброс. Получится одна-две строчки максимум. А то и вовсе в селекторах их обнулять, если их штук 5 нарпимер.

Nekromancer · July 28, 2011

2) <div id="container"> - ID это очень плохо. Программист, который будет "оживлять" верстку, не должен задумываться, что на ID могут быть навешаны стили. Если программисту понадобится сменить ID то верстка развалится.

А зачем программисту менять ID? Он не может что ле к нему обратится? Или у id "container" плохая ассоциативность? Даже если там будет написано любое другое слово, никто не отменял названия переменных для ассоциаций.

Ихмо вообще, тот кто верстает должен и JS писать. Даже на оборот - JavaScript программист должен уметь верстать сайт

Поэтому надо везде использовать только классы.

Это кривое утверждение.

amelice · July 28, 2011

А я считаю, что юзать
* {
    margin: 0;
    padding: 0;
}
можно и нужно.
И вообще это холиварная тема
По теме:
1) Пункты меню зачем же резиновыми делать?
2) <div id="container"> - ID это очень плохо. Программист, который будет "оживлять" верстку, не должен задумываться, что на ID могут быть навешаны стили. Если программисту понадобится сменить ID то верстка развалится. Поэтому надо везде использовать только классы.
3)
<div class="logo">
  <a href="#">
    <img alt="Business Co - Reach stability with us!" src="img/logo_01.png" height="56" width="220">
  </a>
</div>
Зачем понадобилась лишняя обертка?
4) <img src="img/icon_map.gif" height="14" width="14" alt="home"> - зачем везде прописывать размеры картинок в атрибутах?
5) .marker {clear: both; position: absolute; ...} - зачем тут clear: both?
6) можно обойтись без дива с классом marker
7) блок Recent solutions: правильней было бы сделать не <ul>, а <dl>.
8) в блоке Ideal solutions
<strong>Praesent vestibulum molestie lacus. Aenean nonummy.</strong>
это очевидно заголовок, а не просто <strong>.
9) основной контент (Business Solutions) - ну какой же это список?
В общем пока плохо.

Спасибо за замечания!

1.по заданию так нужно было делать:

-

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

2. Переделаю на class.

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

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

.

Пошла исправлять ошибки.

Great Rash · July 28, 2011

В задании написано:

...так же вкладки этого меню тоже должны растягиваться в зависимости от их содержимого.

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

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

Ну и что? Что мешает задать ссылке display: block; и float: left;, а меню под ней задать отступ?

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

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

buddah · July 28, 2011

Ну и что? Что мешает задать ссылке display: block; и float: left;, а меню под ней задать отступ?

float и так делает из элементов блочные, зачем display?

Great Rash · July 28, 2011

На самом деле не display: block; а display: inline; чтоб баг один в ИЕ поправить, ашипся

amelice · July 28, 2011

...так же вкладки этого меню тоже должны растягиваться в зависимости от их содержимого.

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

Верно, но как я могу растянуть меню, если вкладки в нем не тянутся?

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

Ну и что? Что мешает задать ссылке display: block; и float: left;, а меню под ней задать отступ?

Если я задам ссылке float: left;, то она автоматом станет блочным. Но она должна быть кликабельной, а ИЕ6 ведь не понимает когда строчному элементу меняешь представление на блочный?

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

Про это не задумалась ... буду исправлять

Great Rash · July 28, 2011

а ИЕ6 ведь не понимает когда строчному элементу меняешь представление на блочный?

ЩИТО?

Верно, но как я могу растянуть меню, если вкладки в нем не тянутся?

Блин, вы реально не понимаете, что я вам хочу сказать... Вкладки должны тянуться в зависимости от ширины текста внутри, а у вас они тянутся еще и в зависимости от ширины окна. Я считаю, что это неправильно. Точнее скажет тот кто писал ТЗ (кто это был, psywalker?).

amelice · July 28, 2011

Блин, вы реально не понимаете, что я вам хочу сказать... Вкладки должны тянуться в зависимости от ширины текста внутри, а у вас они тянутся еще и в зависимости от ширины окна. Я считаю, что это неправильно. Точнее скажет тот кто писал ТЗ (кто это был, psywalker?).

По заданию было так:

верхнее меню в хедере должно тянуться по ширине,

тогда объясните как меню может тянуться если вкладки в нем фиксированной ширины?

Я не понимаю.

а ИЕ6 ведь не понимает когда строчному элементу меняешь представление на блочный?
ЩИТО?

Это бы вопрос, я у вас спрашивала, что если менять строчному элементу представление на блочный ИЕ6 понимает или нет?

Edited July 28, 2011 by cheburek

Great Rash · July 28, 2011

тогда объясните как меню может тянуться если вкладки в нем фиксированной ширины?
Я не понимаю.

Ладно, значит это я вас не понял. Тогда извиняюсь.

Это бы вопрос, я у вас спрашивала, что если менять строчному элементу представление на блочный ИЕ6 понимает или нет?

Конечно понимает. Только правильные свойства должны выглядеть так:


.logo {
  display: inline;
  float: left;
}

Это нужно для того чтобы избавить баг ИЕ, когда он удваивает левый маргин.

amelice · July 28, 2011

Great Rash, еще раз спасибо за подробные замечания.

По теме:
1) Пункты меню зачем же резиновыми делать?
2) <div id="container"> - ID это очень плохо. Программист, который будет "оживлять" верстку, не должен задумываться, что на ID могут быть навешаны стили. Если программисту понадобится сменить ID то верстка развалится. Поэтому надо везде использовать только классы.
3)
<div class="logo">
  <a href="#">
    <img alt="Business Co - Reach stability with us!" src="img/logo_01.png" height="56" width="220">
  </a>
</div>
Зачем понадобилась лишняя обертка?
4) <img src="img/icon_map.gif" height="14" width="14" alt="home"> - зачем везде прописывать размеры картинок в атрибутах?
5) .marker {clear: both; position: absolute; ...} - зачем тут clear: both?
6) можно обойтись без дива с классом marker
7) блок Recent solutions: правильней было бы сделать не <ul>, а <dl>.
8) в блоке Ideal solutions
<strong>Praesent vestibulum molestie lacus. Aenean nonummy.</strong>
это очевидно заголовок, а не просто <strong>.
9) основной контент (Business Solutions) - ну какой же это список?
В общем пока плохо.

3.убрала оберточный див, к элементу <а> присвоила:

display:block

и добавила отступ сверху. Мне кажется флоатом делать нет необходимости, так как он и так стоит вверху и слева.

4. перенесла все атрибуты размерности в css.

5. сначала .marker был обычным дивом, и нужно было писать это правило, чтоб учесть сверху флоат, а потом применила position, а clear убрать забыла.

6. убрала див, class="marker" перенесла внутреннему списку.

7. исправила.

8. исправила.

9. убрала список, вместо этого использовала дивы, чтобы обернуть внутренние 3(один из них рисунок с float:left) элемента.

Правильно ли так делать?

Edited July 28, 2011 by cheburek

sigma77 · July 31, 2011

sigma77, ты мне посоветовала отличную книгу по CSS Дэвида Макфарленда, с практикой, по ней я как раз занимаюсь в данный момент. Не знаешь подобную книжку по javaScript, чтоб именно было с практикой для обучения.

По чистому js таких не знаю.

Флэнагана для начала не советую. Будет сложно, если это первый язык программирования.

У того же Макфарланда также есть книга по js - http://www.ozon.ru/context/detail/id/4563273/, http://www.books.ru/books/javascript-podrobnoe-rukovodstvo-685671/

Там даются основные понятия как по чистому js, так и по jquery. В принципе, если стоит задача научится за достаточно короткое время писать не сложные скрипты и решать основные задачи - само то.

По чистому js также есть отличный сайт javascript.ru. Правда рассматривать его лучше больше как справочник, или также нужно иметь хотя бы небольшой базис, т.к. многие вещи описаны там достаточно поверхностно и не очевидно для новичков. Если есть хотя бы небольшие знания английского, то у того же автора недавно появился учебник - javascript.info. Та всё более подробно, плюс есть упражнения для самостоятельной работы.

Для дальнейшего изучения:

- чистый js - Флэнаган (должна выйти 6-я редакция его книги)

- jQuery - Бер Бибо, Иегуда Кац "jQuery. Подробное руководство по продвинутому JavaScript"

amelice · July 31, 2011

sigma77, ты мне посоветовала отличную книгу по CSS Дэвида Макфарленда, с практикой, по ней я как раз занимаюсь в данный момент. Не знаешь подобную книжку по javaScript, чтоб именно было с практикой для обучения.
По чистому js таких не знаю.
Флэнагана для начала не советую. Будет сложно, если это первый язык программирования.
У того же Макфарланда также есть книга по js - http://www.ozon.ru/context/detail/id/4563273/, http://www.books.ru/books/javascript-podrobnoe-rukovodstvo-685671/
Там даются основные понятия как по чистому js, так и по jquery. В принципе, если стоит задача научится за достаточно короткое время писать не сложные скрипты и решать основные задачи - само то.
По чистому js также есть отличный сайт javascript.ru. Правда рассматривать его лучше больше как справочник, или также нужно иметь хотя бы небольшой базис, т.к. многие вещи описаны там достаточно поверхностно и не очевидно для новичков. Если есть хотя бы небольшие знания английского, то у того же автора недавно появился учебник - javascript.info. Та всё более подробно, плюс есть упражнения для самостоятельной работы.
Для дальнейшего изучения:
- чистый js - Флэнаган (должна выйти 6-я редакция его книги)
- jQuery - Бер Бибо, Иегуда Кац "jQuery. Подробное руководство по продвинутому JavaScript"

Огромное спасибо!

- чистый js - Флэнаган (должна выйти 6-я редакция его книги). Купила 5-ое издание, она такая большая, что даже страшновато начинать. Хотелось, чтоб была еще практическая книга. Буду искать книгу Макфарланда. Его книга по CSS очень понравилась.

Edited July 31, 2011 by cheburek

Shift-Web · July 31, 2011

>> - «Обнуление стилей» прививает у разработчика дурную манеру вёрстки. Вместо того чтобы знать, какие значения свойств установлены по умолчанию, разработчик перекладывает эту работу на браузер, насильно устанавливая все значения в ноль. В результате некоторые значения применяются к свойствам, для которых не могут устанавливаться или к свойствам, у которых данное значение и так нулевое. Это опять же приводит к повышению нагрузки на браузер и замедлению его работы.

Согласен полностью. В последнее время всё очевиднее становится, что фрэймворки и заготовки -- это зло.

>> 2) <div id="container"> - ID это очень плохо. Программист, который будет "оживлять" верстку, не должен задумываться, что на ID могут быть навешаны стили. Если программисту понадобится сменить ID то верстка развалится. Поэтому надо везде использовать только классы.

Бред... Нафиг такова программиста, которые лезет менять ID. пусть классы подставляет или фэйковые атрибуты жабакодом. Это не так трудно. В противном случае подразумевается, что человек понимает, что делает.

—

p.s: на мой взгляд неплохо. вообще в отрыве оценивать трудно ... если это будет одеваться на чистый самопис -- это одно, если же на что-то готовое, то уже другая песня. Нужно читывать этот момент, а не просто верстать

Sign In

Макет Business Сo.

Recommended Posts

Link to comment

Share on other sites

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Seva1986

sigma77

Seva1986

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

Обсуждения

Important Information