Отключен JavaScript

У вас отключен JavaScript. Некоторые возможности системы не будут работать. Пожалуйста, включите JavaScript для получения доступа ко всем функциям.

3

Шапка Сайта. Фон

Автор oxigen, 21 апр. 2013 00:01

Назад

Вперед

Авторизуйтесь для ответа в теме

Сообщений в теме: 63

#21 Elif

Продвинутый пользователь

Пользователи
117 сообщений

ГородСтамбул

Отправлено 04 Январь 2014 - 11:31

Castiel (04 Январь 2014 - 01:57) писал:

Здравствуйте, редактируем шаблон HTML
Находим 45 строку и после <body> добавляем

<div id="header">

Добавляем на 315 строке

</div>

Далее мы прописываем стили для шапки
Редактируем style.css
Находим 410 строку

#header{position:relative;clear: both;}

Добавляем в нее необходимый нам фон (картинку или цвет)

Как установить фон на сайт

Скажите, а эта строка #header{position:relative;clear: both;} точно подходит для изменения свойств вот этой картинки?
<div id="header-right">
<div id="header_user_info">
<div id="header-logo">
<img src="{ASSETS_IMAGES_PATH}lipstick.jpg" alt="" />
<img align="right">
</div>
Ссылку которую вы дали конечно очень информативная, но мне не очень понятно что нужно изменить чтобы фоновая картинка была именно на фоне, а не закрывала собой, и не сдвигала элементы шапки(корзина, логотип...)

Наверх

#22 Castiel

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

Модераторы
3 519 сообщений

ГородНижний Новгород

Отправлено 04 Январь 2014 - 13:55

Elif (04 Январь 2014 - 11:31) писал:

Скажите, а эта строка #header{position:relative;clear: both;} точно подходит для изменения свойств вот этой картинки?
<div id="header-right">
<div id="header_user_info">
<div id="header-logo">
<img src="{ASSETS_IMAGES_PATH}lipstick.jpg" alt="" />
<img align="right">
</div>
Ссылку которую вы дали конечно очень информативная, но мне не очень понятно что нужно изменить чтобы фоновая картинка была именно на фоне, а не закрывала собой, и не сдвигала элементы шапки(корзина, логотип...)

Вы не в том месте поставили закрывающий тэг </div> , он должен быть на 314 строке, а не там где вы его поставили.

Наверх

#23 Elif

Продвинутый пользователь

Пользователи
117 сообщений

ГородСтамбул

Отправлено 04 Январь 2014 - 15:24

Castiel (04 Январь 2014 - 13:55) писал:

Вы не в том месте поставили закрывающий тэг </div> , он должен быть на 314 строке, а не там где вы его поставили.

Извините конечно, но я поставила его там где вы советовали,сейчас переместила тэг </div> на 314 строку, но это тоже не дало результата. Не могли бы вы полностью ответить на поставленный вопрос,сейчас, как и ранее меня интересует:
1) какой размер фоновой картинки для шапки должен быть чтобы он как надо вписался в шапку
2)что сделать чтобы эта картинка легла под логотип, контакты, корзину и прочее, а то сейчас картинка все собой закрывает...

Наверх

#24 Castiel

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

Модераторы
3 519 сообщений

ГородНижний Новгород

Отправлено 04 Январь 2014 - 15:38

Elif (04 Январь 2014 - 15:24) писал:

Извините конечно, но я поставила его там где вы советовали,сейчас переместила тэг </div> на 314 строку, но это тоже не дало результата. Не могли бы вы полностью ответить на поставленный вопрос,сейчас, как и ранее меня интересует:
1) какой размер фоновой картинки для шапки должен быть чтобы он как надо вписался в шапку
2)что сделать чтобы эта картинка легла под логотип, контакты, корзину и прочее, а то сейчас картинка все собой закрывает...

Отмените пожалуйста все действия которые не были даны в инструкции

В сообщении №20 была дана подробная инструкция что куда вставлять с указанием строк.

Цитата

Здравствуйте, редактируем шаблон HTML
Находим 45 строку и после <body> добавляем

<div id="header">

Добавляем на 315 строке

</div>

Перед

<div class="fluid-bg" id="content-fluid">

1. Размер фоновой картинки 1900x360px
2. Она должна быть фоном, его вы можете прописать в main.css Вам была дана инструкция Как установить фон на сайт воспользуйтесь ей.
Находим

#header {
position: relative;
clear: both;
}

Заменяем на

#header {
position: relative;
clear: both;
background: url('Ссылка на картинку') no-repeat;
}

Наверх

#25 Elif

Продвинутый пользователь

Пользователи
117 сообщений

ГородСтамбул

Отправлено 05 Январь 2014 - 20:42

Castiel (04 Январь 2014 - 15:38) писал:

Отмените пожалуйста все действия которые не были даны в инструкции

В сообщении №20 была дана подробная инструкция что куда вставлять с указанием строк.

1. Размер фоновой картинки 1900x360px
2. Она должна быть фоном, его вы можете прописать в main.css Вам была дана инструкция Как установить фон на сайт воспользуйтесь ей.
Находим

#header {
position: relative;
clear: both;
}

Заменяем на

#header {
position: relative;
clear: both;
background: url('Ссылка на картинку') no-repeat;
}

Спасибо большое, сейчас все получилось, остался последний штрих, это зазоры от краев фоновой картинки сверху и по бокам до краев экрана. Как сделать чтобы картинка растянулась и зазоров не было. пробовала изменить значения для position и clear, пробовала увеличить размер изображения, не помогает. Подскажите пожалуйста что сделать?

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

Наверх

#26 Castiel

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

Модераторы
3 519 сообщений

ГородНижний Новгород

Отправлено 05 Январь 2014 - 21:15

Elif (05 Январь 2014 - 20:42) писал:

Спасибо большое, сейчас все получилось, остался последний штрих, это зазоры от краев фоновой картинки сверху и по бокам до краев экрана. Как сделать чтобы картинка растянулась и зазоров не было. пробовала изменить значения для position и clear, пробовала увеличить размер изображения, не помогает. Подскажите пожалуйста что сделать?

Здравствуйте, вы не верно выполнили инструкцию. Пожалуйста перечитайте сообщение №20

Пока вы верно не выполните инструкцию, у вас шапка на место не встанет.

Цитата

Здравствуйте, редактируем шаблон HTML
Находим 45 строку и после <body> добавляем

<div id="header">

Добавляем на 315 строке

</div>

Перед

<div class="fluid-bg" id="content-fluid">

Наверх

#27 Elif

Продвинутый пользователь

Пользователи
117 сообщений

ГородСтамбул

Отправлено 07 Январь 2014 - 10:24

Castiel (05 Январь 2014 - 21:15) писал:

Здравствуйте, вы не верно выполнили инструкцию. Пожалуйста перечитайте сообщение №20

Пока вы верно не выполните инструкцию, у вас шапка на место не встанет.

Извините, я не понимаю что у меня не так, подскажите пожалуйста, вот мой код :

44</head>
45<body><div id="header">
46<div class="group" id="wrapper">
47 <div class="fluid-bg" id="header-fluid">

311 
312
313   <div class="clear">
314
315      </div>
316  <div class="fluid-bg" id="content-fluid"></div>

Наверх

#28 Castiel

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

Модераторы
3 519 сообщений

ГородНижний Новгород

Отправлено 07 Январь 2014 - 12:58

Elif (07 Январь 2014 - 10:24) писал:

Извините, я не понимаю что у меня не так, подскажите пожалуйста, вот мой код :

44</head>
45<body><div id="header">
46<div class="group" id="wrapper">
47 <div class="fluid-bg" id="header-fluid">

311 
312
313   <div class="clear">
314
315      </div>
316  <div class="fluid-bg" id="content-fluid"></div>

Удалите на 298 строке </div>

Наверх

#29 Elif

Продвинутый пользователь

Пользователи
117 сообщений

ГородСтамбул

Отправлено 07 Январь 2014 - 20:57

Castiel (07 Январь 2014 - 12:58) писал:

Удалите на 298 строке </div>

Не помогло, еще и ошибка вылезла, я вернула тег </div> на 298 строку.

Наверх

#30 Castiel

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

Модераторы
3 519 сообщений

ГородНижний Новгород

Отправлено 07 Январь 2014 - 22:11

Elif (07 Январь 2014 - 20:57) писал:

Не помогло, еще и ошибка вылезла, я вернула тег </div> на 298 строку.

Какая ошибка вылезла?

Дело в том что ваш шаблон очень сильно изменен и чтобы поставить фоновую картинку в шапку, нужно создать эту шапку.
Все содержимое шапки должно находиться внутри

<div id="header">
Все блоки шапки
</div>

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

Наверх

#31 Elif

Продвинутый пользователь

Пользователи
117 сообщений

ГородСтамбул

Отправлено 08 Январь 2014 - 12:06

Castiel (07 Январь 2014 - 22:11) писал:

Какая ошибка вылезла?

Дело в том что ваш шаблон очень сильно изменен и чтобы поставить фоновую картинку в шапку, нужно создать эту шапку.
Все содержимое шапки должно находиться внутри

<div id="header">
Все блоки шапки
</div>

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

Как понимаю этот тег находится в файле html, а все блоки шапки я прописывала в файле css:
#header {
position: relative;
clear:both;
background: url('фиолетовый.jpg') center;
}
Где что куда ставить? Конечно же шаблон изменен, но я не думаю что это может негативным образом влиять на вставку фонового рисунка в шапку(((

Наверх

#32 empty9228

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

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

Отправлено 08 Январь 2014 - 12:29

Здравствуйте. "Все блоки шапки" это то то у Вас находится в шапке, т.е. блоки поиск, корзина и тд.

Наверх

#33 Castiel

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

Модераторы
3 519 сообщений

ГородНижний Новгород

Отправлено 08 Январь 2014 - 14:09

Elif (08 Январь 2014 - 12:06) писал:

Как понимаю этот тег находится в файле html, а все блоки шапки я прописывала в файле css:
#header {
position: relative;
clear:both;
background: url('фиолетовый.jpg') center;
}
Где что куда ставить? Конечно же шаблон изменен, но я не думаю что это может негативным образом влиять на вставку фонового рисунка в шапку(((

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

Могу предложить вам такой вариант главной страницы.

Отправил вам в личном сообщении инструкцию как это сделать

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

Наверх

#34 Elif

Продвинутый пользователь

Пользователи
117 сообщений

ГородСтамбул

Отправлено 10 Январь 2014 - 14:33

Castiel (08 Январь 2014 - 14:09) писал:

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

Могу предложить вам такой вариант главной страницы.

Отправил вам в личном сообщении инструкцию как это сделать

Здравствуйте, я поменяла все как вы рекомендовали, спасибо, шапка получилась, но теперь появились 2 новые неполадки:
1. Когда открываешь вкладку в каталоге, то список товаров затмевает какой то серый фон
2. Между шапкой и слайдером у меня есть меню, которое сейчас стало заходить на шапку. Как сделать чтобы это меню встало в пространство между шапкой и слайдером

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

Наверх

#35 Castiel

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

Модераторы
3 519 сообщений

ГородНижний Новгород

Отправлено 10 Январь 2014 - 14:39

Elif (10 Январь 2014 - 14:33) писал:

Здравствуйте, я поменяла все как вы рекомендовали, спасибо, шапка получилась, но теперь появились 2 новые неполадки:
1. Когда открываешь вкладку в каталоге, то список товаров затмевает какой то серый фон
2. Между шапкой и слайдером у меня есть меню, которое сейчас стало заходить на шапку. Как сделать чтобы это меню встало в пространство между шапкой и слайдером

1. Редактируем main.css
Находим

#footer-fluid {
background: #3c3c3c;
}

Заменяем на

#footer-fluid {
}

2. Редактируем шаблон HTML
Находим

  <!-- Каталог товаров -->
								 {%IFNOT catalog_full_empty%}
												 {%FOR catalog_full%}
												 <ul class="menuHeader" >
												 <li {% IFNOT catalog_full.HIDE %}style="display:none;" {% ENDIF %} class="{% IF catalog_full.CURRENT %}active{% ELSEIF catalog_full.CURRENT_PARENT %}active{% ENDIF %}">
																 <a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a>
												 </li>						  
												 </ul>
												 {%ENDFOR%}
								 {%ENDIF%}
								 <!-- /Каталог товаров -->

Заменяем на

  <!-- Каталог товаров -->
		<div id="headermenu">
								 {%IFNOT catalog_full_empty%}
												 {%FOR catalog_full%}
												 <ul class="menuHeader" >
												 <li {% IFNOT catalog_full.HIDE %}style="display:none;" {% ENDIF %} class="{% IF catalog_full.CURRENT %}active{% ELSEIF catalog_full.CURRENT_PARENT %}active{% ENDIF %}">
																 <a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a>
												 </li>						  
												 </ul>
												 {%ENDFOR%}
								 {%ENDIF%}
		 </div>
								 <!-- /Каталог товаров -->

После того как вы внесете данные изменения, мы допишем вам стили, чтобы меню встало так как надо.

Наверх

#36 Elif

Продвинутый пользователь

Пользователи
117 сообщений

ГородСтамбул

Отправлено 11 Январь 2014 - 09:50

Castiel (10 Январь 2014 - 14:39) писал:

1. Редактируем main.css
Находим

#footer-fluid {
background: #3c3c3c;
}

Заменяем на

#footer-fluid {
}

2. Редактируем шаблон HTML
Находим

<!-- Каталог товаров -->
								 {%IFNOT catalog_full_empty%}
												 {%FOR catalog_full%}
												 <ul class="menuHeader" >
												 <li {% IFNOT catalog_full.HIDE %}style="display:none;" {% ENDIF %} class="{% IF catalog_full.CURRENT %}active{% ELSEIF catalog_full.CURRENT_PARENT %}active{% ENDIF %}">
																 <a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a>
												 </li>						
												 </ul>
												 {%ENDFOR%}
								 {%ENDIF%}
								 <!-- /Каталог товаров -->

Заменяем на

<!-- Каталог товаров -->
	 <div id="headermenu">
								 {%IFNOT catalog_full_empty%}
												 {%FOR catalog_full%}
												 <ul class="menuHeader" >
												 <li {% IFNOT catalog_full.HIDE %}style="display:none;" {% ENDIF %} class="{% IF catalog_full.CURRENT %}active{% ELSEIF catalog_full.CURRENT_PARENT %}active{% ENDIF %}">
																 <a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a>
												 </li>						
												 </ul>
												 {%ENDFOR%}
								 {%ENDIF%}
		 </div>
								 <!-- /Каталог товаров -->

После того как вы внесете данные изменения, мы допишем вам стили, чтобы меню встало так как надо.

Спасибо большое, я внесла изменения. А можно было бы еще прописать стили для меню между шапкой и слайдером, чтобы его дизайн был похож на дизайн главного меню, но с красным фоном?

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

Наверх

#37 Castiel

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

Модераторы
3 519 сообщений

ГородНижний Новгород

Отправлено 11 Январь 2014 - 09:57

Elif (11 Январь 2014 - 09:50) писал:

Спасибо большое, я внесла изменения. А можно было бы еще прописать стили для меню между шапкой и слайдером, чтобы его дизайн был похож на дизайн главного меню, но с красным фоном?

В style.css добавьте в любое удобное место

#headermenu {
width: 100%;
height: 20px;
padding: 5px;
background: red;
}

Наверх

#38 Elif

Продвинутый пользователь

Пользователи
117 сообщений

ГородСтамбул

Отправлено 11 Январь 2014 - 10:15

Castiel (11 Январь 2014 - 09:57) писал:

В style.css добавьте в любое удобное место

#headermenu {
width: 100%;
height: 20px;
padding: 5px;
background: red;
}

Олично! и последний штрих, это нужно спустить это меню чуть ниже, а то оно сейчас на шапке. А нужно чтобы между шапкой и слайдером.

Наверх

#39 Castiel

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

Модераторы
3 519 сообщений

ГородНижний Новгород

Отправлено 11 Январь 2014 - 10:33

Elif (11 Январь 2014 - 10:15) писал:

Олично! и последний штрих, это нужно спустить это меню чуть ниже, а то оно сейчас на шапке. А нужно чтобы между шапкой и слайдером.

Редактируем шаблон HTML
Находим 279-295 строки

<!-- Каталог товаров -->
			 <div id="headermenu">
																 {%IFNOT catalog_full_empty%}
																								 {%FOR catalog_full%}
																								 <ul class="menuHeader" >
																								 <li {% IFNOT catalog_full.HIDE %}style="display:none;" {% ENDIF %} class="{% IF catalog_full.CURRENT %}active{% ELSEIF catalog_full.CURRENT_PARENT %}active{% ENDIF %}">
																																 <a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a>
																								 </li>										
																								 </ul>
																								 {%ENDFOR%}
																 {%ENDIF%}
				 </div>
																 <!-- /Каталог товаров -->
							
								 <div class="clear"></div>
								
								 </div>

Заменяем на

<div class="clear"></div>
</div>
<!-- Каталог товаров -->
<div id="headermenu">
{%IFNOT catalog_full_empty%}
{%FOR catalog_full%}
<ul class="menuHeader" >
<li {% IFNOT catalog_full.HIDE %}style="display:none;" {% ENDIF %} class="{% IF catalog_full.CURRENT %}active{% ELSEIF catalog_full.CURRENT_PARENT %}active{% ENDIF %}">
<a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a>
</li>		
</ul>
{%ENDFOR%}
{%ENDIF%}
</div>
<!-- /Каталог товаров -->

Наверх

#40 Elif

Продвинутый пользователь

Пользователи
117 сообщений

ГородСтамбул

Отправлено 11 Январь 2014 - 11:40

Castiel (11 Январь 2014 - 10:33) писал:

Редактируем шаблон HTML
Находим 279-295 строки

<!-- Каталог товаров -->
			 <div id="headermenu">
																 {%IFNOT catalog_full_empty%}
																								 {%FOR catalog_full%}
																								 <ul class="menuHeader" >
																								 <li {% IFNOT catalog_full.HIDE %}style="display:none;" {% ENDIF %} class="{% IF catalog_full.CURRENT %}active{% ELSEIF catalog_full.CURRENT_PARENT %}active{% ENDIF %}">
																																 <a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a>
																								 </li>										
																								 </ul>
																								 {%ENDFOR%}
																 {%ENDIF%}
				 </div>
																 <!-- /Каталог товаров -->
							
								 <div class="clear"></div>
								
								 </div>

Заменяем на

<div class="clear"></div>
</div>
<!-- Каталог товаров -->
<div id="headermenu">
{%IFNOT catalog_full_empty%}
{%FOR catalog_full%}
<ul class="menuHeader" >
<li {% IFNOT catalog_full.HIDE %}style="display:none;" {% ENDIF %} class="{% IF catalog_full.CURRENT %}active{% ELSEIF catalog_full.CURRENT_PARENT %}active{% ENDIF %}">
<a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a>
</li>		
</ul>
{%ENDFOR%}
{%ENDIF%}
</div>
<!-- /Каталог товаров -->

От души благодарю! ^_^