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


Выровнять Элементы В Шапке

Автор magiya1984, 23 окт. 2014 06:58
шапка корзина поиск

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

#1 magiya1984

magiya1984

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

  • Пользователи
  • PipPipPipPip
  • 439 сообщений
  • ГородМосква

Отправлено 23 Октябрь 2014 - 06:58

доброго времени суток уважаемые гуру!!!
Снова понадобилась Ваша помощь. Не получается выровнять в шапке корзину поиск и слоган выбивает то одно то другое .Аккаунт SL-266399.
Заранее спасибо!!!

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

  • шапка1.jpg

#2 RayLi

RayLi

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

  • Модераторы
  • 2 864 сообщений

Отправлено 23 Октябрь 2014 - 07:07

Просмотр сообщенияmagiya1984 (23 Октябрь 2014 - 06:58) писал:

доброго времени суток уважаемые гуру!!!
Снова понадобилась Ваша помощь. Не получается выровнять в шапке корзину поиск и слоган выбивает то одно то другое .Аккаунт SL-266399.
Заранее спасибо!!!
Здравствуйте.
Найдите сначала первый код в шаблоне style.css :
#search_block_top {
position: static;
float: right;
margin: 8px 60px 0 0;
}
И замените этим кодом:
#search_block_top {
position: static;
float: right;
margin: -70px 230px 0 0;
}
Теперь ищем в том же шаблоне следующий код:
#header_shopping_cart {
position: static;
width: 170px;
float: right;
clear: both;
margin-top: 8px;
list-style: none;
background-clip: padding-box;
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background: #f7f7f7 url('http://design.bellmarket.ru/cart_red.png') no-repeat 12px;
border: 1px solid #cecece;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05);
-moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05);
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05);
}
И заменяет вот этим:
#header_shopping_cart {
position: static;
width: 170px;
float: right;
clear: both;
margin-top: -70px;
list-style: none;
background-clip: padding-box;
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background: #f7f7f7 url('http://design.bellmarket.ru/cart_red.png') no-repeat 12px;
border: 1px solid #cecece;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05);
-moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05);
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05);
}

#3 magiya1984

magiya1984

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

  • Пользователи
  • PipPipPipPip
  • 439 сообщений
  • ГородМосква

Отправлено 23 Октябрь 2014 - 07:14

Да супер спасибо большое. Скажите ещё при наведение курсора на корзину вылазит рамка и всё бьёт её можно как-то привести в порядок?

#4 RayLi

RayLi

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

  • Модераторы
  • 2 864 сообщений

Отправлено 23 Октябрь 2014 - 08:17

Просмотр сообщенияmagiya1984 (23 Октябрь 2014 - 07:14) писал:

Да супер спасибо большое. Скажите ещё при наведение курсора на корзину вылазит рамка и всё бьёт её можно как-то привести в порядок?
Выявлены были ошибки в отображение сайта, поэтому внесите следующие изменения:
1. Ищем код:
#header-logo {
position: relative;
display: table;
float: left;
margin-top: 20px;
width: 200px;
z-index: 30;
margin-left: 10px;
}
Заменяем на:
#header-logo {
position: relative;
display: table;
float: left;
margin-top: 20px;
width: 460px;
z-index: 30;
margin-left: 10px;
}
2. Ищем второй код:
element.style {
width: 600px;
height: 100px;
float: left;
}
И заменяем:
element.style {
width: 460px;
height: 100px;
float: left;
}
3. Ищем третий код:

#search_block_top {
position: static;
float: right;
margin: -70px 230px 0 0;
}
И меняем его на этот:
#search_block_top {
position: static;
float: left;
margin: 41px 0px 0 0;
}
4. Ищем четвёртый код:
#header_shopping_cart {
position: static;
width: 170px;
float: right;
clear: both;
margin-top: -70px;
list-style: none;
background-clip: padding-box;
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background: #f7f7f7 url('http://design.bellmarket.ru/cart_red.png') no-repeat 12px;
border: 1px solid #cecece;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05);
-moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05);
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05);
}
И заменяем на этот:
#header_shopping_cart {
position: static;
width: 170px;
float: left;
/* clear: both; */
margin-top: 41px;
list-style: none;
background-clip: padding-box;
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background: #f7f7f7 url('http://design.bellmarket.ru/cart_red.png') no-repeat 12px;
border: 1px solid #cecece;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05);
-moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05);
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05);
}
5. Теперь ищем пятый код:
@media only screen and (max-width: 959px)
.two-third {
width: 450px;
}
Заменяем его:
@media only screen and (max-width: 959px)
.two-third {
width: 390px;
}
6. Ищем шестой код:
@media only screen and (max-width: 959px)
#header_shopping_cart {
margin-top: 21px;
}
Заменяем этим:
@media only screen and (max-width: 959px)
#header_shopping_cart {
margin-top: 40px;
float: left;
}
7. Ищем седьмой код:
@media only screen and (max-width: 959px)
#search_block_top {
position: relative;
float: right;
margin: 40px 0px 0 0;
clear: both;
}
Заменяем на следующий:
@media only screen and (max-width: 959px)
#search_block_top {
position: relative;
float: left;
margin: 40px 0px 0 0;
clear: both;
}
8. Ищем восьмой код:
#search_block_top #search_query_top {
width: 350px;
vertical-align: middle !important;
border: 1px solid #cecece!important;
padding-right: 30px;
}
И заменяем его этим кодом:
#search_block_top #search_query_top {
width: 250px;
vertical-align: middle !important;
border: 1px solid #cecece!important;
padding-right: 30px;
}
Все эти изменения производим в шаблоне style.css

Теперь заходим в шаблон html и производим следующие изменения:
Находим данный код:
		  <!-- Корзина -->
	 <div id="header_shopping_cart">
	  <div id="shopping_cart">
	   <a href="{CART_URL}" title="Перейти в корзину">
				{% IF cart_count_empty %}
				  <span class="ajax_cart_no_product">Корзина пуста</span>
				{% ELSE %}
				  <span class="ajax_cart_quantity">{CART_COUNT_TOTAL} товар{CART_COUNT_TOTAL | gen_word_end("","а","ов")}</span>
				{% ENDIF %}	  
		<span class="down_arrow_dark"></span>
	   </a>
	  </div>
	 </div>
		 
		  <!-- Форма поиска -->
		   <div id="search_block_top">
			<form id="searchbox" action="http://bellmarket.ru/search" method="get" onsubmit="if($(this).find('#search_query_top').val()=='Воспользуйтесь поиском') return false;">
			  <div class="search_block_top_form">
				<input id="search_query_top" type="text" name="q" value="Воспользуйтесь поиском" onfocus="if(this.value=='Воспользуйтесь поиском'){this.value='';}" onblur="if(this.value==''){this.value='Воспользуйтесь поиском';}" class="search_query light ac_input" />
				<input type="submit" name="submit_search" title="Искать" value="" class="search_button">
			  </div>
			</form>
		  </div>
		 
		  <div id="cart_block">
 
		  <!-- /Форма поиска -->
		  <div id="cart_block">
	  <div id="cart_block_bottom">
	   <div id="cart_block_other_costs">
		<div class="other_cost_wrapper"  style="width: 100%">
				  {% IF cart_count_empty %}
					<p id="cart_block_no_products">Ваша корзина пуста</p>
				  {% ELSE %}
		   <span>Товаров </span>
		   <span class="price" id="cart_block_shipping_cost">{CART_COUNT_TOTAL}</span>
					<span>на сумму </span>
		  {% ENDIF %}
		   <span class="price" id="cart_block_total" style="text-align: right;">{% IF cart_count_empty %}{% ELSE %}{% FOR cart_sum %}{cart_sum.NOW_WITH_DISCOUNT | money_format}{% ENDFOR %}{% ENDIF %}</span>
		</div>
	   </div>
	   <div id="cart_block_total_checkout">
		<a class="exclusive" href="{CART_URL}" id="button_order_cart" rel="nofollow" title="Оформить заказ"><span>Оформить заказ</span></a>
	   </div>
	  </div>
	 </div>
		 
		  <div class="clear"></div></ul>	   
		</div>
И заменяем его на этот:
		  <!-- Корзина -->
	 <div id="header_shopping_cart">
	  <div id="shopping_cart">
	   <a href="{CART_URL}" title="Перейти в корзину">
				{% IF cart_count_empty %}
				  <span class="ajax_cart_no_product">Корзина пуста</span>
				{% ELSE %}
				  <span class="ajax_cart_quantity">{CART_COUNT_TOTAL} товар{CART_COUNT_TOTAL | gen_word_end("","а","ов")}</span>
				{% ENDIF %}	  
		<span class="down_arrow_dark"></span>
	   </a>
	  </div>
			 <div id="cart_block">
 
	
		  <div id="cart_block">
	   <div id="cart_block_bottom">
	   <div id="cart_block_other_costs">
		<div class="other_cost_wrapper"  style="width: 100%">
				  {% IF cart_count_empty %}
					<p id="cart_block_no_products">Ваша корзина пуста</p>
				  {% ELSE %}
		   <span>Товаров </span>
		   <span class="price" id="cart_block_shipping_cost">{CART_COUNT_TOTAL}</span>
					<span>на сумму </span>
		  {% ENDIF %}
		   <span class="price" id="cart_block_total" style="text-align: right;">{% IF cart_count_empty %}{% ELSE %}{% FOR cart_sum %}{cart_sum.NOW_WITH_DISCOUNT | money_format}{% ENDFOR %}{% ENDIF %}</span>
		</div>
	   </div>
	   <div id="cart_block_total_checkout">
		<a class="exclusive" href="{CART_URL}" id="button_order_cart" rel="nofollow" title="Оформить заказ"><span>Оформить заказ</span></a>
	   </div>
	  </div>
	 </div>
		 
		  <div class="clear"></div></ul>	   
		</div>
			  </div>
		 
		  <!-- Форма поиска -->
		   <div id="search_block_top">
			<form id="searchbox" action="http://bellmarket.ru/search" method="get" onsubmit="if($(this).find('#search_query_top').val()=='Воспользуйтесь поиском') return false;">
			  <div class="search_block_top_form">
				<input id="search_query_top" type="text" name="q" value="Воспользуйтесь поиском" onfocus="if(this.value=='Воспользуйтесь поиском'){this.value='';}" onblur="if(this.value==''){this.value='Воспользуйтесь поиском';}" class="search_query light ac_input" />
				<input type="submit" name="submit_search" title="Искать" value="" class="search_button">
			  </div>
			</form>
		  </div>
			   <!-- /Форма поиска -->

На счёт рамки информация будет чуть позже.

#5 magiya1984

magiya1984

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

  • Пользователи
  • PipPipPipPip
  • 439 сообщений
  • ГородМосква

Отправлено 23 Октябрь 2014 - 08:58

посмотрите пожалуйста мне кажется я что-то напутал

@media only screen and (max-width: 959px)

  .container{width:710px;position: relative;}
  .column,.columns{margin:0 10px}
  .half{width:364px}
  .one-third{width:220px}
  .two-third{width:390px}
  .hide-desktop{display:inline!important}
  .hide-mobile{display:none!important}
  #header-right {height: 100%;margin: 0;}
  #megamenu{display:none!important}
  #header_shopping_cart {
margin-top: 40px;
float: left;
}
#search_block_top {
position: relative;
float: left;
margin: 40px 0px 0 0;
clear: both;
}

#6 Danil

Danil

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

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

Отправлено 23 Октябрь 2014 - 09:04

Просмотр сообщенияmagiya1984 (23 Октябрь 2014 - 08:58) писал:

посмотрите пожалуйста мне кажется я что-то напутал

@media only screen and (max-width: 959px)

  .container{width:710px;position: relative;}
  .column,.columns{margin:0 10px}
  .half{width:364px}
  .one-third{width:220px}
  .two-third{width:390px}
  .hide-desktop{display:inline!important}
  .hide-mobile{display:none!important}
  #header-right {height: 100%;margin: 0;}
  #megamenu{display:none!important}
  #header_shopping_cart {
margin-top: 40px;
float: left;
}
#search_block_top {
position: relative;
float: left;
margin: 40px 0px 0 0;
clear: both;
}
В конец style.css добавьте код
div#header-logo img {
width: 100%;
}

#7 magiya1984

magiya1984

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

  • Пользователи
  • PipPipPipPip
  • 439 сообщений
  • ГородМосква

Отправлено 23 Октябрь 2014 - 09:23

ок
Обратно в Изменение общей стилистики


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

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

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Осень
  5. → Изменение общей стилистики
  6. Privacy Policy