Верстка + jQuery

gare4ka · November 14, 2012

Цель была сделать кроссбраузерно от ie7+.

в 7ке не работают кнопки слайдера, пока не разобрался в причине.

Сама работа:

http://gare4ka.ru/bis/index.html

Исходник:

http://ui-cloud.com/business-internet-studio-theme-psd/

Также хотелось бы услышать критику по CSS, особенно по header и footer.

Edited November 14, 2012 by gare4ka

Viper · November 14, 2012

Также хотелось бы услышать критику по CSS, особенно по header и footer.

1. каскады(например, #nav ul li a) в CSS плохо - страдает скорость обработки стилей. Но не критично на не больших проектах.

2. привязка стилей к ID плохо - ID для скриптов, страдает гибкость и поддержка

3.

font-size: 14px;
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;

можно записать как:

font: bold 14px 'Open Sans', sans-serif;

list-style-image:none;
    list-style-position:outside;
    list-style-type:none;

можно записать как:

list-style: none outside none

4. !important - плохо

5.

0px;

- достаточно писать - "0"

6.

display:block;
    position:absolute;

- если стоит absolute, то dispay:block не нужен

7.

-moz-opacity: 0.8;

- это ж для какой версии FF?

-webkit-box-sizing

- какую версию хрома поддерживаешь?

8.

width: 999999px;

- :blink:

9. не удобно когда нету пробелов между ":" и значением

Edited November 14, 2012 by Viper

pismenny · November 14, 2012

1.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Это артефакты.

Уже можно смело писать

<!DOCTYPE html>
<html>
<meta charset="utf-8">

2.

<div id="slider-shadow"></div>

Совсем не комильфо. Лучше сделать один novi-slider-bg.png.

3. Нужно поправить фон в "шапке" и "подвале".

bis.png

bis2.png

4.

<h1>Business
<span> Internet Studio</span></h1>

Это тоже неправильно.

Отступы нужно задавать в css - padding: 0 0 0 5px;. Вместо переноса строки <br> - display: block;

5. По сетке тоже есть вопросы.

bis3.png

bis4.png

6. О-о-очень желательно добавить a:hover.

7. Социокнопки лучше делать спрайтом.

8. Пора бы уже переходить на HTML5 - <header>, <nav>, <section>, <article>, <aside>, <footer> и т.д.

Рекомендую для начала: Избегаем популярных ошибок в HTML5 и htmlbook.ru/html5.

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

Думаю, есть ещё какие-то нюансы.

Edited November 14, 2012 by pismenny

gare4ka · November 14, 2012

1. каскады(например, #nav ul li a) в CSS плохо - страдает скорость обработки стилей. Но не критично на не больших проектах.
2. привязка стилей к ID плохо - ID для скриптов, страдает гибкость и поддержка
...

1-3) Про каскад, шрифты и ID понял, исправлюсь

4-9) Это я поленился проверить копипасту стилей к слайдеру. буду внимательнее.

3. Нужно поправить фон в "шапке" и "подвале".

Хм. У меня в 7ми браузерах всё нормально отображается. И на других компах тоже...

background: #080808;
    height: 160px;

Вот весь код, у родителей ширина тоже не задана, соот. на весь экран.

5. По сетке тоже есть вопросы.

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

7. Социокнопки лучше делать спрайтом.

Даже не догадывался. полезная наводка

Всем спасибо за помощь!

Edited November 14, 2012 by gare4ka

pismenny · November 14, 2012

Хм. У меня в 7ми браузерах всё нормально отображается. И на других компах тоже...
background: #080808;
    height: 160px;
Вот весь код, у родителей ширина тоже не задана, соот. на весь экран.

Хоть во всех версиях этих 7ми браузеров. Не в этом дело.

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

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

Я строил направляющие по логотипу, а уже потом по слайдеру, они совпали, а вот карусель и футер нет. При этом, left-post тоже совпал. Поэтому это точно недочёт.

gare4ka · November 20, 2012

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

Таки да! min-width решил проблему.

Я строил направляющие по логотипу, а уже потом по слайдеру, они совпали, а вот карусель и футер нет. При этом, left-post тоже совпал. Поэтому это точно недочёт.

Да. Оказывается в заголовках даже при нулевом padding есть отступы.

pismenny · November 21, 2012

Да. Оказывается в заголовках даже при нулевом padding есть отступы.

Поэтому обратите внимание на CSS Reset. Я не рекомендую его в качестве серебряной пули, но, по крайней мере, вы можете увидеть, что он обнуляет и взять на заметку, чтобы уже иметь ввиду такие особенности.

gare4ka · November 23, 2012

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

Да да. Я его использую и постепенно под себя заполняю, когда узнаю что-то новое.

Sign In

Верстка + jQuery

Recommended Posts

gare4ka

Link to comment

Share on other sites

Viper

Link to comment

Share on other sites

pismenny

Link to comment

Share on other sites

gare4ka

Link to comment

Share on other sites

pismenny

Link to comment

Share on other sites

gare4ka

Link to comment

Share on other sites

pismenny

Link to comment

Share on other sites

gare4ka

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information