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


Вопросы По Верстке: Шапка, Блоки.

Автор deadwear, 26 янв. 2012 17:20

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

#1 deadwear

deadwear

    Новичок

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

Отправлено 26 Январь 2012 - 17:20

Здравствуйте. мой магазин: http://deadwear.ru/ , наконец то я начал разбираться с дизайном и возникли такие вопросы:

1. Я изменяю высоту шапки, она изменяется,  это очевидно. Но белый контент по середине остается не подвижным смещая свое содержимое Оо?!?!?, где блок с контентом и какие вообще действия нужно сделать, чтобы шапка встала нормально?
#headerWrap {height: 190px;background: url({ASSETS_IMAGES_PATH}header_bg.jpg) repeat-x;}
таким же образом и панель с кнопочками смещается, но белый контент не подвижен.

Изображение

2. Можно ли создать свой блок и класс естественно, и какое позиционирование ему нужно задать чтобы сделать вот так?

Изображение

#2 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 26 Январь 2012 - 22:32

1.фон нужно двигать в ручную. в данном блоке
#headerWrap {height: 190px;background: url({ASSETS_IMAGES_PATH}header_bg.jpg) repeat-x;}
в этой строчке:
background: url({ASSETS_IMAGES_PATH}header_bg.jpg) repeat-x;
нужно указать положение например так:
background: url({ASSETS_IMAGES_PATH}header_bg.jpg) left 80px repeat-x;
80px - отступ от верха сайта

2.Данный вопрос обсуждался у нас на форуме.
Ознакомиться с ответом можете по сл.ссылке:
http://forum.storela...ch__1#entry8047
Чтобы найти аналогичные темы достаточно ввести в поиск слово банер.

#3 deadwear

deadwear

    Новичок

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

Отправлено 27 Январь 2012 - 12:31

Просмотр сообщенияVaccina (26 Январь 2012 - 22:32) писал:

нужно указать положение например так:
background: url({ASSETS_IMAGES_PATH}header_bg.jpg) left 80px repeat-x;
80px - отступ от верха сайта
спасибо, я так полагаю футер изменяется таким же образом да?.

#4 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 27 Январь 2012 - 21:01

фон футера меняется аналогичным способом в сл.блоке:
#footer {
	background: url("http://img.storeland.ru/web/upload/assets/images/40/39435/botfade.jpg") repeat-x scroll 50% 100% transparent;
	border-top: 1px solid #CCCCCC;
	clear: both;
	color: #999999;
	font-family: verdana;
	height: 139px;
	margin: 0;
	padding: 0;
	text-align: center;
}

#5 TAD-jik

TAD-jik

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

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

Отправлено 19 Февраль 2012 - 20:23

Nik я в скайпе :rolleyes:

#6 Watchstone.ru

Watchstone.ru

    Пользователь

  • Пользователи
  • PipPip
  • 44 сообщений
  • ГородНижний Новгород

Отправлено 15 Май 2012 - 16:37

не подскажите, при наведении на некоторую часть шапки есть возможность перейти на главную, а в другой части ее нет(
madeingood. ru
хотя бы покажите нужную строчку в блоке

#7 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 15 Май 2012 - 21:41

У вас идет перекрытие блоком 
#contactInfo {
	font-size: 1.6em;
	left: 0;
	position: absolute;
	top: 0;
}

замените его на 

#contactInfo {
	font-size: 1.6em;
	left: 0;
	position: absolute;
	top: 0;
	display:none;
}

#8 Watchstone.ru

Watchstone.ru

    Пользователь

  • Пользователи
  • PipPip
  • 44 сообщений
  • ГородНижний Новгород

Отправлено 31 Июль 2012 - 23:11

а как наоборот- надо чтобы на определенной части шапки можно было перейти на главную!) подскажите))

#9 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 01 Август 2012 - 21:02

Если вы про http://madeingood.ru/ то тут сделать ничего не получиться, так как у вас все изображение является ссылкой. Вам необходимо будет убрать в шаблоне "HTML" 
<span id="logo"></span
> из ссылки. И ссылку сделать отдельно.

Например 
<div id="header">
   <a title="Перейти на главную" href="http://madeingood.ru/">
	 <span id="logo"></span>
   </a>
заменяем на 

<div id="header">
	 <span id="logo"></span>
и ниже вставляем 

<a title="Перейти на главную" href="http://madeingood.ru/" style="display:block; width: 200px; height: 200px; position: absolute; left: 20px; top: 50px;"> </a>


Позиция изменяется путем изменения top и left а размер width и height

#10 Watchstone.ru

Watchstone.ru

    Пользователь

  • Пользователи
  • PipPip
  • 44 сообщений
  • ГородНижний Новгород

Отправлено 05 Август 2012 - 18:55

спасибо, помогло!.....а как можно сделать шапку, чтоб на главной она была одна, а на остальных-другая?

#11 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 06 Август 2012 - 22:16

Это можно сделать например так

В шаблоне "HTML" после <body> вставить

<style>
{%IF index_page%}
#header #logo {
	background: url("http://madeingood.ru/web/upload/assets/images/78/77831/logo.png") no-repeat scroll 0 0 transparent;
}
{%ELSE%}
#header #logo {
	background: url("http://madeingood.ru/web/upload/assets/images/78/77831/logo2.png") no-repeat scroll 0 0 transparent;
}
{%ENDIF%}
</style>

#12 Watchstone.ru

Watchstone.ru

    Пользователь

  • Пользователи
  • PipPip
  • 44 сообщений
  • ГородНижний Новгород

Отправлено 06 Август 2012 - 22:33

разные размеры лого!?   наверн нада тоже обернуть header?

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

#13 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 07 Август 2012 - 20:32

Цитата

разные размеры лого!? наверн нада тоже обернуть header?

Не совсем вас понимаю. Пожалуйста, объясните по подробнее.

Цитата

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

Вам необходимо в файле стилей main.css найти 

#footer {
	background: none repeat scroll 0 0 #000000;
	border-radius: 0 0 12px 12px;
	border-top: 0 solid #FFFFFF;
	clear: both;
	color: #FFFFFF;
	font-family: verdana;
	height: 100px;
	margin: 0 auto;
	opacity: 0.6;
	padding: 0;
	text-align: center;
	width: 960px;
}

заменить на 

#footer {
	background: none repeat scroll 0 0 #000000;
	border-radius: 0 0 12px 12px;
	border-top: 0 solid #FFFFFF;
	clear: both;
	color: #FFFFFF;
	font-family: verdana;
	height: 100px;
	margin: 0 auto;
	opacity: 0.6;
	padding: 0;
	text-align: center;
	width: 960px;
	margin-top: -10px;
	position: relative;
	z-index: 0;
}

далее найти 

#contentWrap {
	background: none repeat scroll 0 0 #FFFFFF;
	border-radius: 12px 12px 12px 12px;
	clear: both;
	margin: 0 auto;
	width: 960px;
}

и заменить на 

#contentWrap {
	background: none repeat scroll 0 0 #FFFFFF;
	border-radius: 12px 12px 12px 12px;
	clear: both;
	margin: 0 auto;
	width: 960px;
	position: relative;
	z-index: 1;
}

#14 Watchstone.ru

Watchstone.ru

    Пользователь

  • Пользователи
  • PipPip
  • 44 сообщений
  • ГородНижний Новгород

Отправлено 07 Август 2012 - 20:58

вот так выглядит главная страница с лого №1 - http://imglink.ru/sh...7842ddb03b0bc32
а вот так все остальные страницы - http://imglink.ru/sh...f14b2c1d5caa3b7

#15 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 08 Август 2012 - 22:41

Вы можете кроме самого изображение, указывать еще и размеры в блоке 

<style>
{%IF index_page%}
#header #logo {
	background: url("http://madeingood.ru/web/upload/assets/images/78/77831/logo.png") no-repeat scroll 0 0 transparent;
}
{%ELSE%}
#header #logo {
	background: url("http://madeingood.ru/web/upload/assets/images/78/77831/logo2.png") no-repeat scroll 0 0 transparent;
}
{%ENDIF%}
</style>

например 

<style>
{%IF index_page%}
#header #logo {
	background: url("http://madeingood.ru/web/upload/assets/images/78/77831/logo.png") no-repeat scroll 0 0 transparent;
}
{%ELSE%}
#header #logo {
	background: url("http://madeingood.ru/web/upload/assets/images/78/77831/logo2.png") no-repeat scroll 0 0 transparent;
	height: 200px;
}
#headerWrap {
	height: 220px;
}
{%ENDIF%}
</style>

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


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

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

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