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


Задача Сделать Дополнительные Блоки.

Автор grappp, 18 сент. 2014 12:30

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

#1 grappp

grappp

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

  • Пользователи
  • PipPipPipPip
  • 298 сообщений
  • ГородСанет-Петербург

Отправлено 18 Сентябрь 2014 - 12:30

Здравствуйте!

Очень нужно создать новые блоки. Помогите, пожалуйста с реализацией.
Более подробно и понятно га скринах

Так сейчас:
1.png

А вот такие блоки нужно добавить:
2.png



И сразу же, что бы не плодить новой темы напишу тут:

В стандартном шаблоне пластик при прокрутке страницы и фон и основное окно прокручиваюся вместе. А как сделать, что бы фон оставлася на месте, а прокручивалось только центральное окно?


Заранее спасибо за помощь.

#2 Ирина345

Ирина345

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

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

Отправлено 18 Сентябрь 2014 - 13:54

Просмотр сообщенияgrappp (18 Сентябрь 2014 - 12:30) писал:

Здравствуйте!

Очень нужно создать новые блоки. Помогите, пожалуйста с реализацией.
Более подробно и понятно га скринах

Так сейчас:
Прикрепленный файл 1.png

А вот такие блоки нужно добавить:
Прикрепленный файл 2.png



И сразу же, что бы не плодить новой темы напишу тут:

В стандартном шаблоне пластик при прокрутке страницы и фон и основное окно прокручиваюся вместе. А как сделать, что бы фон оставлася на месте, а прокручивалось только центральное окно?


Заранее спасибо за помощь.
Здравствуйте, найдите в HTML
   
	<div id="topobj">

	</div>
замените на

   
	<div id="topobj">
	  <div class="banner">
		<div class="bloc1">
		  <div class="left1">Текст слева в первом блоке</div>
		  <div class="left1">Текст справа в первом блоке</div>
		</div>
		<div class="bloc2">
		  <div class="right1">Текст</div>
		   <div class="right1">Текст</div>
			<div class="right1">Текст</div>
			 <div class="right1">Текст</div>
		</div>
		<div class="bloc3">Текст</div>
	  </div>
	</div>
загрузите картинки, которые необходимо вставить на сайт
Для того чтобы зафиксировать фон найдите в main.css
#backtop { background:url({ASSETS_IMAGES_PATH}bgout.jpg) bottom center no-repeat; }
замените на
#backtop { background:url({ASSETS_IMAGES_PATH}bgout.jpg) bottom center no-repeat fixed; }

#3 grappp

grappp

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

  • Пользователи
  • PipPipPipPip
  • 298 сообщений
  • ГородСанет-Петербург

Отправлено 18 Сентябрь 2014 - 14:28

Просмотр сообщенияИрина345 (18 Сентябрь 2014 - 13:54) писал:

Здравствуйте, найдите в HTML
   
<div id="topobj">

</div>
замените на

   
<div id="topobj">
<div class="banner">
<div class="bloc1">
<div class="left1">Текст слева в первом блоке</div>
<div class="left1">Текст справа в первом блоке</div>
</div>
<div class="bloc2">
<div class="right1">Текст</div>
<div class="right1">Текст</div>
<div class="right1">Текст</div>
<div class="right1">Текст</div>
</div>
<div class="bloc3">Текст</div>
</div>
</div>
загрузите картинки, которые необходимо вставить на сайт
Спасибо. С задним фоном справился.

А вот с блоками не выходит.
При таком коде все просто наслаивается поверх.
И как вставить картинки в эти блоке, что бы текст ложился сверху и имел активную ссылку!

#4 grappp

grappp

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

  • Пользователи
  • PipPipPipPip
  • 298 сообщений
  • ГородСанет-Петербург

Отправлено 18 Сентябрь 2014 - 14:41

Как развинуть границы сам понял. Через main.css поменять значение margin: на нужное в:

#topobj { background:url({ASSETS_IMAGES_PATH}conteiner-bg.png) no-repeat; width:1000px; height:11px; margin:100px 0 0 0; }

По поводу картинок и активных ссылок на кртинках вопрос актуален.

В общем нужно было сделать просто вот так:

найдите в HTML

<div id="topobj">
</div>

и перед ним, а не вместо него уже вставить:

<div class="banner">
<div class="bloc1">
<div class="left1">Текст слева в первом блоке</div>
<div class="left1">Текст справа в первом блоке</div>
</div>
<div class="bloc2">
<div class="right1">Текст</div>
<div class="right1">Текст</div>
<div class="right1">Текст</div>
<div class="right1">Текст</div>
</div>
<div class="bloc3">Текст</div>
</div>


По поводу картинок и активных ссылок на картинках вопрос актуален.

#5 Ирина345

Ирина345

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

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

Отправлено 18 Сентябрь 2014 - 14:44

Просмотр сообщенияgrappp (18 Сентябрь 2014 - 14:41) писал:

Как развинуть границы сам понял. Через main.css поменять значение margin: на нужное в:

#topobj { background:url({ASSETS_IMAGES_PATH}conteiner-bg.png) no-repeat; width:1000px; height:11px; margin:100px 0 0 0; }

По поводу картинок и активных ссылок на кртинках вопрос актуален.

В общем нужно было сделать просто вот так:

найдите в HTML

<div id="topobj">
</div>

и перед ним, а не вместо него уже вставить:

<div id="topobj">
<div class="banner">
<div class="bloc1">
<div class="left1">Текст слева в первом блоке</div>
<div class="left1">Текст справа в первом блоке</div>
</div>
<div class="bloc2">
<div class="right1">Текст</div>
<div class="right1">Текст</div>
<div class="right1">Текст</div>
<div class="right1">Текст</div>
</div>
<div class="bloc3">Текст</div>
</div>
</div>


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

#6 grappp

grappp

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

  • Пользователи
  • PipPipPipPip
  • 298 сообщений
  • ГородСанет-Петербург

Отправлено 18 Сентябрь 2014 - 14:46

Вернул.
Да и забыл указать, что это должно быть только на главной странице.

#7 Ирина345

Ирина345

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

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

Отправлено 18 Сентябрь 2014 - 15:08

Просмотр сообщенияgrappp (18 Сентябрь 2014 - 14:46) писал:

Вернул.
Да и забыл указать, что это должно быть только на главной странице.
загрузите необходимые картинки на сайт
далее добавьте в конец файла стилей код
.bloc1{width: 1000px;}
.left1{width: 485px;
float: left;
height: 100px;
border: 1px solid;}
.bloc2{width: 1000px;
height: 100px;
}

.right1{width: 235px;
height: 50px;
float: left;
border: 1px solid;
margin-right: 7px;}

.bloc3{width: 974px;
height: 50px;
border: 1px solid black;
overflow: hidden;
}
так же найдите в hTML

<div class="banner">
<div class="bloc1">
<div class="left1">Текст слева в первом блоке</div>
<div class="left1">Текст справа в первом блоке</div>
</div>
<div class="bloc2">
<div class="right1">Текст</div>
<div class="right1">Текст</div>
<div class="right1">Текст</div>
<div class="right1">Текст</div>
</div>
<div class="bloc3">Текст</div>
</div>

замените на

  {% IF index_page %} <div class="banner">
<div class="bloc1">
<div class="left1">Текст слева в первом блоке</div>
<div class="left1">Текст справа в первом блоке</div>
</div>
<div class="bloc2">
<div class="right1">Текст</div>
<div class="right1">Текст</div>
<div class="right1">Текст</div>
<div class="right1">Текст</div>
</div>
<div class="bloc3">Текст</div>
</div>
{% ENDIF %}

#8 grappp

grappp

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

  • Пользователи
  • PipPipPipPip
  • 298 сообщений
  • ГородСанет-Петербург

Отправлено 18 Сентябрь 2014 - 15:22

Спасибо большое.
Только объясните, пожалуйста как картинки в блоки вставлять?

#9 Ирина345

Ирина345

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

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

Отправлено 18 Сентябрь 2014 - 15:37

Просмотр сообщенияgrappp (18 Сентябрь 2014 - 15:22) писал:

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

#10 grappp

grappp

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

  • Пользователи
  • PipPipPipPip
  • 298 сообщений
  • ГородСанет-Петербург

Отправлено 18 Сентябрь 2014 - 15:43

Просмотр сообщенияИрина345 (18 Сентябрь 2014 - 15:37) писал:

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

Момент. Сейчас сделаю.

Закинул тестовые изображения для первого блока.
  • 1test-block1.jpg
  • 2test-block1.jpg

#11 Ирина345

Ирина345

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

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

Отправлено 18 Сентябрь 2014 - 16:18

Просмотр сообщенияgrappp (18 Сентябрь 2014 - 15:43) писал:

Момент. Сейчас сделаю.

Закинул тестовые изображения для первого блока.
  • 1test-block1.jpg
  • 2test-block1.jpg

найдите в main.css
.left1{width: 485px;
float: left;
height: 100px;
border: 1px solid;}
замените на

.left1{width: 485px;
float: left;
height: 157px;
padding-top: 30px;
border: 1px solid;}

span.testleft {
font-size: 39px;
color: #fff;
}
.bloc3 img {
width: 103px;
margin-top: 7px;
}
так в hTML найдите

  {% IF index_page %} <div class="banner">
<div class="bloc1">
<div class="left1">Текст слева в первом блоке</div>
<div class="left1">Текст справа в первом блоке</div>
</div>
<div class="bloc2">
<div class="right1">Текст</div>
<div class="right1">Текст</div>
<div class="right1">Текст</div>
<div class="right1">Текст</div>
</div>
<div class="bloc3">Текст</div>
</div>
{% ENDIF %}
замените на

{% IF index_page %} <div class="banner">
<div class="bloc1">
<div class="left1"style=" background:url({ASSETS_IMAGES_PATH}1test-block1.jpg)">
<span class="testleft">Приветствуем Вас на нашем сайте</span></div>
<div class="left1" style=" background:url({ASSETS_IMAGES_PATH}1test-block1.jpg)">Текст справа в первом блоке</div>
</div>
<div class="bloc2">
<div class="right1">Текст</div>
<div class="right1">Текст</div>
<div class="right1">Текст</div>
<div class="right1">Текст</div>
</div>
<div class="bloc3">Текст
  <img src="{ASSETS_IMAGES_PATH}1test-block1.jpg"/>
</div>
</div>
{% ENDIF %}

#12 grappp

grappp

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

  • Пользователи
  • PipPipPipPip
  • 298 сообщений
  • ГородСанет-Петербург

Отправлено 18 Сентябрь 2014 - 16:22

Спасибо большое. Просто огромное спасибо!
Я так понимаю остальные картинки вставлять по аналогии?

#13 Ирина345

Ирина345

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

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

Отправлено 18 Сентябрь 2014 - 16:31

Просмотр сообщенияgrappp (18 Сентябрь 2014 - 16:22) писал:

Спасибо большое. Просто огромное спасибо!
Я так понимаю остальные картинки вставлять по аналогии?
Если смотреть по скриншоту в первом сообщение, у Вас только в последнем блоке требуется установить тег img для картинок, а во всех остальных картинок как фон потребуется тег background

#14 grappp

grappp

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

  • Пользователи
  • PipPipPipPip
  • 298 сообщений
  • ГородСанет-Петербург

Отправлено 18 Сентябрь 2014 - 16:33

Просмотр сообщенияИрина345 (18 Сентябрь 2014 - 16:31) писал:

Если смотреть по скриншоту в первом сообщение, у Вас только в последнем блоке требуется установить тег img для картинок, а во всех остальных картинок как фон потребуется тег background

Понял Вас. Спасибо большое.
Обратно в Главная


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

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

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