При работе веб-программистом, значительная часть задач- это верстка . Ну и приходится за некоторыми проверять их ‘Труды’. Попутно комментируя. Всё что ниже — это часть критики работ. И вообще- начинающим верстальщика будет полезно это почитать. При этом у меня был приступ ярости! Ох… Ну читай те же.
0. ПОСЛЕ ВЕРСТКИ ЛЮБОГО ЭЛЕМЕНТА проверять 2-мя способами сразу
а) pecfect Pikcell
б) щелкая по вкладкам (в одной-макет, во второй твоя верска).
1. Не разбрасывать css по id и class внутри блока
.wrapper-in
#wrapper-in-main
2. Процентное выражение не использовать (кроме width:100% и fixed плавающих элементов).
margin: 2% auto 2%;
height: 40%;
а за такие вещи — отлуплю батоном! У нас все в пикселах!.
height: 65%;
min-height: 65%;
3. Отрицательный маргин использовать только в крайнем случае. Если не можешь делать по другому. У тебя же натыкано всюду, для каждого центрирующегося элемента.
НЕЛЬЗЯ использовать отрицательный маргин для замены css свойства Line-height ( Если не значешь что это такое -читай);
3.1 Верхний ПАДДИНГ нельзя использвать для смещения внутренних элементов вниз!!
4. Кликабельность элемента а (должент заполнять полностью элемент) -например город.
5. в половине ашек нет hover cursor-pointer
6. Внутренние отступы НЕ выставлются паддингами для центрирующихся элементов. ( для форм можно- и то что бы минимизировать) . Делается еще один вложенный блок и там используются маржины. Для форм нужно использовать box-zisinЖ:border-box/
7. обрезка элементов в фотошопе (увеличивать — и резать с точностью до пиксела ) — неправильный пример — левый верхний угол — серый уголок, лого на странице входа. В фотошопе для обрезки есть увеличение (знаешь? да ..нет)
8. Если используешь absolute — зачем использовать margin?
9. Цвет шрифта, размер и Название — ВСЕГДА брать из того что в макете. У тебя то шрифт не тот, то цвет, то размер.
10. чебокс должен быть кликабелен по его лабели (У тебя в фильтрах не кликабльно, и в форме входа) input +label
11. отступ по вертикали выставлять маргином для текущего элемента. Маргин боттом недопустим.
12. Позиционирование элементов (отсупы , расстояния между элементами) после верскти должно 100% совпадать с макетом. См. Пункт 1
13. Основная ширина сайта должна совпадать с шириной из фотошопа (ты использовал паддниги для внутренних отступов — от этого все косяки) .
14. Косяки с меню (к меню мы по особому относимся, если помнишь)
a) ширина элемента- не залазиет(не подлазиет) на соседний
б) Подсветка при наведении, cursor pointer , должна быть шириной с элемент меню ( У тебя короче на половину), а сам тег А длинне элемента меню… Это вообще как так вышло?
в. Когда тебе говорят: возьми меню из таккого-такого места, ты должен её взять и разобраться. Если бы ты это сделал- то пункта 14 не было бы. А ты посути написал свою мега кривую минюху, которую опять же… править в нормальную.
г.выравнивание иконок по вертикали- не по макету
15. блок user_kab . еще раз увижу что ты иконку фоном центрируешь(а сам блок растягиваешь до мегаразмеров, что бы вместить справа от иконки текст) , то вспомни про батон.
16. Где в этом css выравнивание или отступ по вертикали?…. У тебя везде такое. Я вот тоже не вижу, что ты с вертикалью для рисунка делаешь.
background: url(‘../images/main_menu_zakaz.png’) left no-repeat;
Эту хрень я встретил раз 16 и каждый раз жестко матерился- т.к. НЕ совпадение с макетом.
17. Это меню. Зачем каждому элементу li меню давать класс main-menu ?
не судьба воспользоваться конструкцией ul.Nameclass>li ?
<li class=»main-menu» id=»calls»>
18. зачем испльзуешь id и при этом добавлять li.main-block:hover ?????? у тебя уже подразумевается что это уникальный элемент.
у тебя:
li.main-block:hover #block_zapros{
background: url(‘../images/main_zapros_new.png’) center 1px no-repeat;
}
надо
#block_zapros:hover{}
19 Посмотри как пишется тег IMG в html — УБЬЮ НАХ!!!
20. О кнопках и рисунках внутри.
a) внутри кнопки НЕТ рисунка-ОН делается фоном и через css
б)если ты всё таки рисунок поместил в кнопку, вот пример , чем отличаются эти две строки? и к чему это приведет?
<a></a><img/>
<a><img/></a>
————-JS———————-
1. Не надо использовать принудительное добавление margin — надо добавлять удалять класс.
if(list.length > 0){
jQuery(‘div.mod_razb_pagination>span.active’).show();
jQuery(‘div.select_pagination_reports’).css(«margin-top»,»-25px»);
}
else {
jQuery(‘div.mod_razb_pagination>span.active’).hide();
jQuery(‘div.select_pagination_reports’).css(«margin-top»,»-8px»);
}
21 Вот в этом коде ты прозрачность для надёжности сделал? типо display: none; скрыл а opacity: 0; для того что бы наверняка? а Hover- что бы наверняка показать в обратном порядке?
.popup_summ {
top: 20px;
right: 0;
left: 50px;
font-size: 14px;
z-index: 10;
display: none;
margin: 0 auto;
width: 10%;
min-width: 190px;
max-width: 600px;
position: absolute;
padding: 15px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
background-color: transparent;
opacity: 0;
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
-ms-transition: all ease .5s;
-o-transition: all ease .5s;
transition: all ease .5s;
height: 20%;
}
.wrapper_modal:hover .popup {
top: 90%;
display: block;
opacity: 1;
left: 70%;
}
22 Если ты нарезал рисунок размером 22px на 22px то какого размера должна быть иконка в который ты это вставляешь? ( Хвост у всплывашки) у тебя как минимум 40 на 70… или 24 на 43… Ну никак же не 20 на 20. А зачем ?можно ж ебануть побольше.
