Перейти к содержимому


Шапка Сайта


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 141

#1 arver

arver

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 982 сообщений

Отправлено 27 Июль 2013 - 21:22

Добрый вечер,возникла проблема с шаблоном Мокко,решил поменять шапку сайта на свою,только шапка отображается не полностью,а отображается только часть шапки.
Как сделать чтобы картинка отображалась по центру и минимальное разрешение было 1024px?

#2 arver

arver

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 982 сообщений

Отправлено 27 Июль 2013 - 21:28

адрес http://s905333.storeland.ru/

#3 sengun

sengun

    Активный участник

  • Модератоpы
  • 1 139 сообщений
  • ГородНижний Новгород

Отправлено 27 Июль 2013 - 22:21

Просмотр сообщенияarver (27 Июль 2013 - 21:22) писал:

Добрый вечер,возникла проблема с шаблоном Мокко,решил поменять шапку сайта на свою,только шапка отображается не полностью,а отображается только часть шапки.
Как сделать чтобы картинка отображалась по центру и минимальное разрешение было 1024px?
В main.css прописан код стилей шапки
#headerWrap {height: 150px;background: url("http://files.storeland.net/f687/820/header_bg.jpg") repeat-x;}
если изменить его так
#headerWrap {height: 150px;background: url("{ASSETS_IMAGES_PATH}header_bg.jpg") top center no-repeat;}
то фон центрируется.
А по ширине шапка отображается полностью, скрытых частей нет. Если у вас не так, скажите, каким браузером пользуетесь?

#4 arver

arver

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 982 сообщений

Отправлено 27 Июль 2013 - 23:24

Просматривал со всех браузеров chrome,firefox,explorer разрешение экрана 1024*768

Прикрепленные изображения

  • шапка.jpg


#5 miyako

miyako

    Активный участник

  • Модератоpы
  • 5 372 сообщений

Отправлено 28 Июль 2013 - 08:27

Просмотр сообщенияarver (27 Июль 2013 - 23:24) писал:

Просматривал со всех браузеров chrome,firefox,explorer разрешение экрана 1024*768

Сейчас у Вас шапка на всю ширину экрана. Как я понимаю вопрос неактуален?

#6 arver

arver

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 982 сообщений

Отправлено 28 Июль 2013 - 09:38

На всю ширину только на мониторах 1280*1024 и выше,а это скриншот с монитора разрешением 1024*768

так что проблема актуальна

#7 miyako

miyako

    Активный участник

  • Модератоpы
  • 5 372 сообщений

Отправлено 28 Июль 2013 - 10:53

Просмотр сообщенияarver (28 Июль 2013 - 09:38) писал:

На всю ширину только на мониторах 1280*1024 и выше,а это скриншот с монитора разрешением 1024*768

так что проблема актуальна

Шапка у Вас отображается корректно, а происходит это из-за того, что сам текст выходит за допустимые размеры ширины при таком разрешении

#8 arver

arver

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 982 сообщений

Отправлено 28 Июль 2013 - 20:46

И как устранить проблему?поскольку если смотреть с мониторов меньше 1024*768 становится еще хуже...

#9 shnafix

shnafix

    Активный участник

  • Модератоpы
  • 506 сообщений

Отправлено 28 Июль 2013 - 22:35

Просмотр сообщенияarver (28 Июль 2013 - 20:46) писал:

И как устранить проблему?поскольку если смотреть с мониторов меньше 1024*768 становится еще хуже...
Вставьте в конец файла main.css следующий код:
@media screen and (min-width: 801px) and (max-width: 1024px) {
html {width: 110%;}
}
@media screen and (max-width: 800px) {
html {width: 125%;}
}


#10 arver

arver

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 982 сообщений

Отправлено 29 Июль 2013 - 15:39

Изменил как вы посоветовали,на данный момент нет возможности проверить помогло ли,отпишусь позже,спасибо за помощь.
На данный момент имеются следующие проблемы и пролазив форум так и не нашел ответы:
1)как мне сделать состояние корзины как показано на рисунке?
2)строки "сравнение товаров" и "вы смотрели" переместить вправо?<p>3)как установить любой слайдер в место под цифрой 4? p.s.уточнение:не совсем любой,например nivo-slider установил без проблем,да и инструкция на форуме более чем подробная,а как уст%D

картинка

а как уст%D*
а как установить простенький слайд без всяких спецэффектов например 15 или 17(по ссылке ниже) не понимаю,в архиве там только картинки и файл который я уже загрузил  
jquery-1.4.2.js
http://followdesign....ou-chast-1.html

Прикрепленные изображения

  • мокко_1.JPG


#11 support 2.0

support 2.0

    Активный участник

  • Модераторы
  • 4 924 сообщений

Отправлено 29 Июль 2013 - 19:07

Просмотр сообщенияarver (29 Июль 2013 - 15:39) писал:

Изменил как вы посоветовали,на данный момент нет возможности проверить помогло ли,отпишусь позже,спасибо за помощь.
На данный момент имеются следующие проблемы и пролазив форум так и не нашел ответы:
1)как мне сделать состояние корзины как показано на рисунке?
2)строки "сравнение товаров" и "вы смотрели" переместить вправо?<p>3)как установить любой слайдер в место под цифрой 4? p.s.уточнение:не совсем любой,например nivo-slider установил без проблем,да и инструкция на форуме более чем подробная,а как уст%D

картинка

а как уст%D*
а как установить простенький слайд без всяких спецэффектов например 15 или 17(по ссылке ниже) не понимаю,в архиве там только картинки и файл который я уже загрузил  
jquery-1.4.2.js
http://followdesign....ou-chast-1.html

По поводу правого блока, туда лучше не ставить эти блоки, т.к. при разрешении экрана в 1280 и 1024 это содержимое не поместится в экрана. Можно зафиксировать строчку с корзиной, чтобы при прокрутки вниз она следовала за курсором. Также можно сместить цену (как у Вас на скриншоте) строчкой ниже.
Для этого в main.css найдите
#cartInfo a {
color:#000;
text-transform: uppercase;
}
за этим блоком поставьте
span#cartSum { margin-left: 30%;}

в шаблоне HTML найдите
<span id="cartSum">
замените на
<br> <span id="cartSum">

по поводу слайдера, Вы можете поставить этот слайдер
вместо 10 и 11 пункта используем этот:
найдите в HTML строчку
<!-- end Каталог -->
сразу после нее вставляем
	 <!-- Обёртка, указывающая стиль темы -->
<div class="theme-default" style="padding:1em;display:none;">
<!-- Непосредственный код слайдера -->
<div id="slider">
	 <img src="http://storeland.ru/img/faq/questions/nyvo_slider/slider.jpg" alt="" />
	 <a href="/"><img src="/img/faq/questions/nyvo_slider/nemo.jpg" alt="" /></a>
	 <img src="http://storeland.ru/img/faq/questions/nyvo_slider/toystory.jpg" alt="" />
	 <img src="http://storeland.ru/img/faq/questions/nyvo_slider/walle.jpg" alt="" />
	 <img src="http://storeland.ru/img/faq/questions/nyvo_slider/cars.jpg" alt="" />
</div>
</div>

<!-- Запуск слайдера -->
<script type="text/javascript">
$(window).load(function() {
	 $('#slider').nivoSlider({effect: 'slideInRight'}).parent().show();
});
</script>

после установки слайдера зайдите в файл nyvo.css и найдите
.theme-default .nivo-controlNav {
text-align: center;
padding: 20px 0;
}
замените на
.theme-default .nivo-controlNav {
text-align: center;
padding: 20px 0;
display: none;
}

также найдите
.theme-default .nivoSlider {
position:relative;
background:#fff url({ASSETS_IMAGES_PATH}nyvo_loading.gif) no-repeat 50% 50%;
margin-bottom:50px;
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;
}
замените на
.theme-default .nivoSlider {
position:relative;
background:#fff url({ASSETS_IMAGES_PATH}nyvo_loading.gif) no-repeat 50% 50%;
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;
}

ссылки на изображения:
http://storeland.ru/img/faq/questions/nyvo_slider/slider.jpg
/img/faq/questions/nyvo_slider/nemo.jpg
http://storeland.ru/img/faq/questions/nyvo_slider/toystory.jpg
http://storeland.ru/img/faq/questions/nyvo_slider/walle.jpg
http://storeland.ru/img/faq/questions/nyvo_slider/cars.jpg
нужно будет изменить на свои изображения

#12 arver

arver

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 982 сообщений

Отправлено 29 Июль 2013 - 20:00

Здравствуйте,спасибо за помощь,все получилось,единственное я когда первый раз писал,сообщение отправилось видимо с ошибкой потому что получилось вот что:а как уст%D*а потом я уже забыл дописать,проблема с установкой nivo-slider не возникала,я тоже нашел эту подробную инструкцию http://storeland.ru/about/faq#51...а спрашивал я о том,что непонятно как установить еще 1 слайдер цитирую "например 15 или 17(по ссылке ниже) не понимаю,в архиве там только картинки и файл который я уже загрузил  jquery-1.4.2.js"http://followdesign....ou-chast-1.html.
p.s
Пробовал устанавливать 2 nivo-slider,но страница тормозит и картинки на обоих слайдерах дублируются((

#13 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 23 788 сообщений

Отправлено 30 Июль 2013 - 00:28

Загружать и подключать дополнительный файл "jquery-1.4.2.js" не нужно, так как это приведет к проблемам в работе javascript'a на странице. Возможно ваша проблема в подключении "17. jQuery слайд-шоу" именно с этим и связана. Пожалуйста, попробуйте еще раз установить данный слайдер в случае необходимости, и если у вас возникнут проблемы - сообщите нам об этом, и не убирайте изменений на вашем сайте после попытки установки слайдера.

#14 arver

arver

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 982 сообщений

Отправлено 30 Июль 2013 - 10:21

Загрузил слайдер под номером 17 с сайта http://followdesign....ou-chast-1.html,загрузил на сайт файлы jquery.xfade-1.0.min.js,jquery.xfade-1.0.js,style.css,добавил в html <!-- Загрузка  Slider -->
<link rel="stylesheet" href="{ASSETS_STYLES_PATH}style.css" type="text/css" media="screen" />
<script src="{ASSETS_JS_PATH}jquery.xfade-1.0.min.js" type="text/javascript"></script>
<script src="{ASSETS_JS_PATH}jquery.xfade-1.0.js" type="text/javascript"></script> не понимаю что дальше надо сделать чтобы подключить этот слайд

#15 miyako

miyako

    Активный участник

  • Модератоpы
  • 5 372 сообщений

Отправлено 30 Июль 2013 - 13:31

Просмотр сообщенияarver (30 Июль 2013 - 10:21) писал:

Загрузил слайдер под номером 17 с сайта http://followdesign....ou-chast-1.html,загрузил на сайт файлы jquery.xfade-1.0.min.js,jquery.xfade-1.0.js,style.css,добавил в html <!-- Загрузка  Slider -->
<link rel="stylesheet" href="{ASSETS_STYLES_PATH}style.css" type="text/css" media="screen" />
<script src="{ASSETS_JS_PATH}jquery.xfade-1.0.min.js" type="text/javascript"></script>
<script src="{ASSETS_JS_PATH}jquery.xfade-1.0.js" type="text/javascript"></script> не понимаю что дальше надо сделать чтобы подключить этот слайд

Добавьте в конец main.js код -
$(document).ready(function() {
 $('#photos').xfade({height: 430});
});
В шаблон HTML добавьте код -
<ul id="photos">
  <li><a href="#p1"><img src="путь до изображений" /></a></li>
  <li><a href="#p2"><img src="путь до изображений" /></a></li>
  <li><a href="#p3"><img src="путь до изображений" /></a></li>
</ul>

Загрузите изображения для слайдера в раздел Сайт - Файлы и скопируйте путь до изображений

#16 arver

arver

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 982 сообщений

Отправлено 30 Июль 2013 - 13:49

Спасибо,слайдер встал,только по размерам возникла проблема,подумал это можно исправить добавив значение ширины  $('#photos').xfade({height: 430,width:800});,но все равно слайд остается сжатым по ширине.Планировал использовать следующие размеры слайда 800 на 500 px

#17 shnafix

shnafix

    Активный участник

  • Модератоpы
  • 506 сообщений

Отправлено 30 Июль 2013 - 16:15

Просмотр сообщенияarver (30 Июль 2013 - 13:49) писал:

Спасибо,слайдер встал,только по размерам возникла проблема,подумал это можно исправить добавив значение ширины  $('#photos').xfade({height: 430,width:800});,но все равно слайд остается сжатым по ширине.Планировал использовать следующие размеры слайда 800 на 500 px
В файле style.css в блок добавьте строки:
a img {
border: none;
}
width: 800px;
height: 500px;

#18 arver

arver

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 982 сообщений

Отправлено 30 Июль 2013 - 18:55

Спасибо за столь оперативную помощь,остались некоторые вопросы,которые мешают мне открыть ИМ.
1)Все так же в этим слайдером.Появилась слева от слайдера какая-то непонятная точка красного цвета,которую я никак не могу убрать,так же не получается сдвинуть слайдер левее,так чтобы текст был прямо под слайдером.(думал пропишу img{top://;left://;)но не получилось.
2)На форуме прочитал чтобы сделать фон по бокам необходимо отредактировать файл contentWrap_bg.jpg,но мне нужно чтобы фон также захватал область где располагается каталог,сравнение товаров и тп(выделено желтым цветом).
3)Нигде на форуме не нашел каким образом в шаблоне мокко подвинуть основное меню и увеличить расстояние между пунктами меню.
4)Как переместить пункт:вы смотрели,прямо под состояние корзины
картинку прилагаю

Прикрепленные изображения

  • slaid_3.jpg


#19 shnafix

shnafix

    Активный участник

  • Модератоpы
  • 506 сообщений

Отправлено 30 Июль 2013 - 20:31

Просмотр сообщенияarver (30 Июль 2013 - 18:55) писал:

Спасибо за столь оперативную помощь,остались некоторые вопросы,которые мешают мне открыть ИМ.
1)Все так же в этим слайдером.Появилась слева от слайдера какая-то непонятная точка красного цвета,которую я никак не могу убрать,так же не получается сдвинуть слайдер левее,так чтобы текст был прямо под слайдером.(думал пропишу img{top://;left://;)но не получилось.
2)На форуме прочитал чтобы сделать фон по бокам необходимо отредактировать файл contentWrap_bg.jpg,но мне нужно чтобы фон также захватал область где располагается каталог,сравнение товаров и тп(выделено желтым цветом).
3)Нигде на форуме не нашел каким образом в шаблоне мокко подвинуть основное меню и увеличить расстояние между пунктами меню.
4)Как переместить пункт:вы смотрели,прямо под состояние корзины
картинку прилагаю
1. В style.css найдите блок
#photos {
margin: 0 auto;
} 
и добавьте после него
#photos li {background: none !important;padding-left: 0px !important;margin-left: -20px !important;}
2. Найдите style.css
body, table {
background: #fff;
font: normal 13px/1.3 "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
color: #333;
}
и измените на
body, table {
font: normal 13px/1.3 "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
color: #333;
}
измените изображение contentWrap_bg.jpg на свое с таким же именем
И в style.css измените
#primaryContent {width: 750px;padding:0 0px 40px 0;vertical-align:top;}
на
#primaryContent {width: 750px;padding:0 0px 40px 0;vertical-align:top;background: #fff;}
3. Если вы хотите подвинуть меню правее, то найдите в main.css
#mainNav {position: absolute;left: 5px;bottom: 0;height: 35px;background: url("{ASSETS_IMAGES_PATH}nav_bg.jpg") no-repeat;}
и измените left: 5px; на больший параметр, который Вам подойдет.
Для того, чтобы раздвинуть пункты меню в main.css найдите
#mainNav table td div a:visited {display: block;height: 26px;color: #666;padding: 4px 10px 0 10px;background: url("http://s905333.storeland.net/nav_item_bg.gif") repeat-x bottom left;}
и в с параметре
padding: 4px 10px 0 10px;
замените 10px на значение которое сочтете подходящим. Только заменяйте на одинаковое значение оба показателя 10px.
4.Выше в теме уже писалось об этом

Цитата

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

#20 arver

arver

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 982 сообщений

Отправлено 30 Июль 2013 - 21:06

Да действительно)спасибо вам за помощь.




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных