Магазин GROWERCITY.RU
 

dd

Мне понравилось, только надпись growercity возможно надо отцентрировать

dd

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

dd

10 из 10 - четко!

dd

Симпатишный)

Только под-меню не очень.
1) Есть небольшой зазор между основным меню и подменю. Из за чего иногда под-меню закрывается когда на него хочется навести. То есть надо резко навести.
Как вариант либо убрать зазор, либо поставить задержку что бы под-меню не закрывалось сразу.

2) И внешний вид подменю мне не очень нравится, по моему как то не очень вписывается в основной дизайн)))


И лого по моему слишко много места занимает, почему бы его так не сделать ?))
http://javascript.ru/forum/attachmen...5&d=1362838258

Учитывая что там как раз место свободное есть))

DR.GONZO,
не знаю чем,но меня раздражают эти выезжающие списке...попозже напишу по конкретнее

Главный вопрос: ты играл в soldat 2d?

dd

Дизайн в общем понравился, но есть несколько вещей которые на мой взгляд не очень:

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- про подсветку блока товара хорошая идея, тоже про нее уже думал.

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

Для начала сделай следующее

1. Перенеси все что после </html> на место перед </body> + удали нижний head.
2. Перенеси блок #headerr в начало body.
3. Закрой все незакрытые теги.
4. Зайди на сайт http://validator.w3.org вставь ссылку на свой сайт и исправь все ошибки которые он тебе выдаст.

Потом:

1. Исправь у элемента "онлайн консультант" чтоб он всегда по центру был top:50%; margin-top:-176px; (перемещаем верхний край на середину и сдвигаем обратно вверх на половину высоты элемента)
2. Изначальный цвет текста в подменю сделай белым, при ховере все отлично.
3. И поставь обратно фон на меню.

Скинь сюда JS код ездящей стрелки.

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

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

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

Посмотрите свой файл 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>. Некоторые браузеры могут исправить эту кашу, некоторые не справляются.

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

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

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

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

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

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

<html>
<body>
<center>
<div id="main" style="width:900px">
...контент
</div>
</center>
</body>
</html>

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

Маэстро, Да именно так, вы все правильно поняли.. Просто лого с размером 1000-300 занимает много место. вот я и пытаюсь его как то обрезать через css и зафиксировать строго по центру..
Маэстро, А не посоветуете не какой нибудь редактор ?

Уважаемые пользователи помогите найти решения, хочется реализовать.
Нажимаешь на кнопку (картинку) и картинка меняется

Есть просто две крутых картинки (онлайн консультант)
Линк http://yraaa.ru/publ/3-1-0-1282

PS с уважением.

Я уже сказал, что корректировать изображение на клиенте (в браузере) с помощью css - это плохо. У Вас же есть Adobe Photoshop? Сохраните картинку как растровое изображение в файл *.png
Если интерфейс на русском, то дальше работайте в Меню-Изображение-Размер изображения/Размер холста.
Используйте событие onclick на картинке и по нему меняйте свойство src у этой картинки.

Спасибо Маэстро, за помощь..
Приятно когда люди окликаются :thanks:

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

Теперь новый делама
В java есть такие события как onmouseover, onmouseout и onclick

А как на счет CSS.
Возможно ли реализовать открытие подобной понели, только по клику..
P.S на сайте такая панель реализзована, осталось только найти решение открытия по клику...

Одна "джава" кнопка и так грузит сайт? :lol:
Видимо ты что-то не так делаешь.

Что то типа события onclick на css - http://ruseller.com/lessons.php?rub=2&id=1516

Да не, просто кнопка такая.... не знаю кто её делал!
Но она тормазит даже пустой движек без модулей и на дефолтном шабе...

Спасибо за ссылочку буду разбираться.. ;)

Доброго ночи.

Что то у меня не особо получается прикрепить функцию актив к моей панели =(

Кто нибудь подскажите пожалуйста как правельно прикрепить функцию active

#panel {
z-index: 999;
position: fixed; /* положение */
top: 100px; /* отступ сверху */
right: 0; /* отступ слева */
background-image: url(); /* цвет фона */
background-position: center;
background-repeat: no-repeat;
width: 62px; /* ширина блока */
height: 389px; /* высота блока */
font: 14px Lobster; /* размер и тип шрифта */
color: #fff; /* цвет текста */
text-align: center; /* выравнивание текста по центру */
padding: 5px; /* отступы от границ внутри блока */
-webkit-transition-duration: 0.3s; /* анимационное выдвижение для всех браузеров*/
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-border-radius: 0 5px 5px 0; /* закругление границ для всех браузеров*/
-moz-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}


/* СКРЫТЫЙ БЛОК */
#hidden_panel {
z-index: 999;
position: fixed; /* положение */
top: 100px; /* отступ сверху */
right: -200px; /* отступ слева */
background: url(**);
background-repeat: no-repeat;
background-position: center;
color: #000; /* цвет текста */
width: 185px; /* ширина блока */
height: 389px; /* высота блока */
padding: 4px; /* отступы от границ внутри блока */
text-align: left; /* выравнивание текста */

-webkit-transition-duration: 0.3s; /* анимационное выдвижение для всех браузеров*/
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;

-webkit-border-radius: 0 5px 5px 0; /* закругление границ для всех браузеров*/
-moz-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}

#panel:hover {
z-index: 999;
right: 185px; /* при наведении выдвигается на скрытые 200px + 20px отступы */
background-image: url(http://); /* цвет фона */
background-position: center;
background-repeat: no-repeat;
-webkit-transition-duration: 0.3s; /* анимационное выдвижение для всех браузеров*/
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-border-radius: 0 5px 5px 0; /* закругление границ для всех браузеров*/
-moz-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}
#panel:hover #hidden_panel {
right: 0; /* отступ слева */
z-index: 999;
background: url(***);
background-repeat: no-repeat;
background-position: center;
}

http://fiddle.jshell.net/45s6u/1/
Вот смотри, разбирайся, прикручивай анимацию к .hiding_panel
Но этот вариант не кроссбраузерный, лучше на js делать.