Javascript-форум (https://javascript.ru/forum/)
-   Ваши сайты и скрипты (https://javascript.ru/forum/project/)
-   -   Магазин GROWERCITY.RU (https://javascript.ru/forum/project/36250-magazin-growercity-ru.html)

Zuenf 10.03.2013 17:43

Дизайн в общем понравился, но есть несколько вещей которые на мой взгляд не очень:
  1. Как уже сказал walik подменю не вписывается в дизайн. Убери этот убогий выезд, пусть просто появляется,убери opacity:0.8, фон сделай типа rgba(235,235,235,0.8), а тень box-shadow:0 0 10px rgba(0,0,0,0.5);
    При наведении на пункт подменю можно сделать текст синим, как в главных пунктах + осветлить фон (rgba(245,245,245,0.8))
  2. Список товаров. Реагировать на мышку должна не только кнопка купить, но и весь блок или текст описания при наведении.
  3. Самим блокам с продукцией задать высоту, кнопку купить выровнять по низу, но для этого нужно задать им класс.
  4. Такой вид кнопки "купить" можно сделать просто на css, но также следует почитать про css спрайты - http://habrahabr.ru/post/159027/
  5. Стрелка в меню должна приезжать к центру пункта, а у тебя она сбоку.
  6. Блоку "Онлайн консультация" нужно задать position: fixed;
    Если не хочешь чтоб она двигалась вместе с прокруткой, то лучше вообще переместить ее в другое место и задать ей горизонтальное положение. например ее можно поместить слева от выбора языка, но и естественно немного видоизменить.
  7. У слайдера стрелки на некоторых картинках почти не видно, нужно задать им тень.
  8. Нужно как-то выделять активный пункт меню(тот на который перешли, например страница "оплата").
  9. Страницу "оплата" нужно править и править.

Html и css ооочень корявые:
  1. Вместо тега <center> лучше сделать выравнивание в css
  2. Meta, title, link и т.п. надо поместить в head.
  3. Много лишних свойств в css например: у подменю идет сначала border: 1px solid #222; а потом border-width: 0 0px 0px;
  4. Зачем обрамлять лого тегом H1? Используй div. А вообще можно без проблем обойтись только тегом <a> с правильными css свойствами.

и еще много всего.

walik 10.03.2013 18:14

Цитата:

Сообщение от DR.GONZO
ссылочку что ты мне дал (по ней не как не пройти, пишет мне вот так "Вложение не указано или не существует. Если Вы уверены, что использовали правильную ссылку, свяжитесь с администрацией" )


DR.GONZO 10.03.2013 21:37

Цитата:

Сообщение от Zuenf (Сообщение 239826)
Дизайн в общем понравился, но есть несколько вещей которые на мой взгляд не очень:
  1. Как уже сказал walik подменю не вписывается в дизайн. Убери этот убогий выезд, пусть просто появляется,убери opacity:0.8, фон сделай типа rgba(235,235,235,0.8), а тень box-shadow:0 0 10px rgba(0,0,0,0.5);
    При наведении на пункт подменю можно сделать текст синим, как в главных пунктах + осветлить фон (rgba(245,245,245,0.8))
  2. Список товаров. Реагировать на мышку должна не только кнопка купить, но и весь блок или текст описания при наведении.
  3. Самим блокам с продукцией задать высоту, кнопку купить выровнять по низу, но для этого нужно задать им класс.
  4. Такой вид кнопки "купить" можно сделать просто на css, но также следует почитать про css спрайты - http://habrahabr.ru/post/159027/
  5. Стрелка в меню должна приезжать к центру пункта, а у тебя она сбоку.
  6. Блоку "Онлайн консультация" нужно задать position: fixed;
    Если не хочешь чтоб она двигалась вместе с прокруткой, то лучше вообще переместить ее в другое место и задать ей горизонтальное положение. например ее можно поместить слева от выбора языка, но и естественно немного видоизменить.
  7. У слайдера стрелки на некоторых картинках почти не видно, нужно задать им тень.
  8. Нужно как-то выделять активный пункт меню(тот на который перешли, например страница "оплата").
  9. Страницу "оплата" нужно править и править.

Html и css ооочень корявые:
  1. Вместо тега <center> лучше сделать выравнивание в css
  2. Meta, title, link и т.п. лучше поместить в head.
  3. Много лишних свойств в css например: у подменю идет сначала border: 1px solid #222; а потом border-width: 0 0px 0px;
  4. Зачем обрамлять лого тегом H1? Используй div. А вообще можно без проблем обойтись только тегом <a> с правильными css свойствами.

и еще много всего.

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

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

Фуухх.. не знаю даже как решать эту проблему с мазилой, фиг знает даже....

Zuenf 11.03.2013 00:04

Для начала сделай следующее
  1. Перенеси все что после </html> на место перед </body> + удали нижний head.
  2. Перенеси блок #headerr в начало body.
  3. Закрой все незакрытые теги.
  4. Зайди на сайт http://validator.w3.org вставь ссылку на свой сайт и исправь все ошибки которые он тебе выдаст.
Потом:
  1. Исправь у элемента "онлайн консультант" чтоб он всегда по центру был top:50%; margin-top:-176px; (перемещаем верхний край на середину и сдвигаем обратно вверх на половину высоты элемента)
  2. Изначальный цвет текста в подменю сделай белым, при ховере все отлично.
  3. И поставь обратно фон на меню.
Скинь сюда JS код ездящей стрелки.

DR.GONZO 11.03.2013 08:28

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

А менюшка написана не на js а на чистом css, вот и фиг знает в чем канитель то...

Вот консультанта бы ещё прокачать как нибудь(чтобы при клике менялась картинка.)

Маэстро 11.03.2013 12:43

Цитата:

Сообщение от DR.GONZO (Сообщение 239562)
Спасибо, да согласен, надо как то от центровать её.. ищу решения) (на все разрешения)

Посмотрите свой файл stylesheet.css
#headerr .logos {
  floar: center;
  margin: 0;
  padding: 0;
}

Наверное не floar, а float, но если даже и float, то center - нет такого.
Отцентрировать можно по-разному, например, так:
<h1 style="height: 185px; text-align:center; background: url('http://growercity.ru/images/logo.png') 50% 50% no-repeat;">
<a href="http://growercity.ru"></a>
</h1>

-Посмотрите сайт в IE8. Практически ничего не работает. Вы думаете таких браузеров уже нет?
Кстати, центрирование главной страницы не работает потому что у Вас каша из тегов <center></center>. Некоторые браузеры могут исправить эту кашу, некоторые не справляются.

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

Shaci 11.03.2013 19:59

Цитата:

Сообщение от Маэстро
но если даже и float

опечатка, но даже если и floar наверно

DR.GONZO 11.03.2013 20:08

Спасибо Маэстро,Zuenf,Shaci и всем кто отписывался тут за наставления.

В связи с множество работ я пока закрыл магазин..

DR.GONZO 12.03.2013 12:13

Цитата:

Сообщение от Маэстро (Сообщение 239986)
Посмотрите свой файл stylesheet.css
#headerr .logos {
  floar: center;
  margin: 0;
  padding: 0;
}

Наверное не floar, а float, но если даже и float, то center - нет такого.
Отцентрировать можно по-разному, например, так:
<h1 style="height: 185px; text-align:center; background: url('http://growercity.ru/images/logo.png') 50% 50% no-repeat;">
<a href="http://growercity.ru"></a>
</h1>

-Посмотрите сайт в IE8. Практически ничего не работает. Вы думаете таких браузеров уже нет?
Кстати, центрирование главной страницы не работает потому что у Вас каша из тегов <center></center>. Некоторые браузеры могут исправить эту кашу, некоторые не справляются.

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

соглашусь скролинг запрещать ну не как не стоит.....
Уважаемый Маэстро, а как тогда поступить? ситуация такова что лого надо сделать строго по пикселям ибо оно слишком большое а перерисовывать его в фотошопе очень напряжено...

Маэстро 12.03.2013 13:33

Цитата:

Сообщение от DR.GONZO (Сообщение 240164)
соглашусь скролинг запрещать ну не как не стоит.....
Уважаемый Маэстро, а как тогда поступить? ситуация такова что лого надо сделать строго по пикселям ибо оно слишком большое а перерисовывать его в фотошопе очень напряжено...

Я не очень понял вопроса. Что значит "сделать строго по пикселям"? Это значит, что координата картинки (лого) должна быть строго в определенном месте экрана? -вроде нет. Картинка должна быть отцентрирована по горизонтали также как и весь нижележащий контент. В простых случаях я делаю следующим образом: исходя из среднестатистической ширины экранов 1024px создаю главный DIV шириной 900px и в него помещаю всё содержимое сайта (в т.ч. и лого). а весь этот DIV обрамляю тегами <center></center>
<html>
<body>
<center>
<div id="main" style="width:900px">
...контент
</div>
</center>
</body>
</html>

P.S. Не стоит грузить большие картинки лого. Нужно уменьшить его размеры в любом графическом редакторе (который поддерживает прозрачный фон).


Часовой пояс GMT +3, время: 09:39.