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


Добавление Блоков На Сайт


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

#1 alkazare

alkazare

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

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

Отправлено 03 Декабрь 2012 - 04:52

как создать такие же три блока , как на http://markil.ru/. гарантия   акция(со встроенным счетчиком)  скидки и предложения. аналогично реализовано тут http://modavsumke.ru/

#2 support 2.0

support 2.0

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

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

Отправлено 03 Декабрь 2012 - 12:56

Просмотр сообщенияalkazare (03 Декабрь 2012 - 04:52) писал:

как создать такие же три блока , как на http://markil.ru/. гарантия   акция(со встроенным счетчиком)  скидки и предложения. аналогично реализовано тут http://modavsumke.ru/


3 блока
в файл main.css вставьте этот блок в самом конце
<!-- 3 блока -->
.blocks{margin-top:0px;}
.blocks>table{width:989px;border-collapse:separate;border-spacing: 17px;margin: -30px 0px 0px -16px;}
.blocks>table>tbody{vertical-align:top;}
.blocks .block{height:100%;}
.block>h2{font-size:15px;padding-bottom:15px;}
.block:after{content:' ';clear:both;display:block;width:0;height:0;overflow:hidden;font-size:0;}
.block>.R{margin-left:105px;color:#575757;}
.block>.L{float:left;width:91px;text-align:center;}
.block>.L img{max-width:91px;}
.block .text{color:#575757;font-size:12px;}
.block .name{font-size:14px;padding-bottom:5px;}
.block .timer{width: 124px;height: 47px;background:url(http://...clock.png) 0 0 no-repeat;margin:0 auto;text-align:center;padding: 0px 6px 3px 40px;margin: 6px 0px -6px -3px;}
.block .timer>p{font-size: 13px;padding:0;}
.block .timer > .digits {font-size: 20px;font-weight: normal;line-height: 5px;}
.block .timer>.digits span{font-size:16px;}
.w {
background: white;
padding: 16px;
margin: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
}

Теперь зайдите в шаблон HTML и после
<div class="content_page">

Вставьте
<!-- 3 блока -->
<div class="blocks"><table><tbody><tr>
	 <td width="33%" class="w"><div class="block">
		 <h2>Гарантия возврата</h2>
		 <div class="L"><a href="javascript:;"><img src="http://...guarantee.png" alt=""></a></div>
		 <div class="R">
			 <div class="text"><p>Если Вам попадется некачественный товар, мы без вопросов заменим его на другой, или вернем Вам деньги.</p></div>
		 </div>
	 </div></td>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
setInterval(function(){
	 var now = new Date();
	 var endTS = 1354591201*1000;
	 var totalRemains = (endTS-now.getTime());
	 if (totalRemains>1){
		 var RemainsSec=(parseInt(totalRemains/1000));
		 var RemainsFullDays=(parseInt(RemainsSec/(24*60*60)));
		 var secInLastDay=RemainsSec-RemainsFullDays*24*3600;
		 var RemainsFullHours=(parseInt(secInLastDay/3600));
		 if (RemainsFullHours<10){RemainsFullHours="0"+RemainsFullHours};
		 var secInLastHour=secInLastDay-RemainsFullHours*3600;
		 var RemainsMinutes=(parseInt(secInLastHour/60));
		 if (RemainsMinutes<10){RemainsMinutes="0"+RemainsMinutes};
		 var lastSec=secInLastHour-RemainsMinutes*60;
		 if (lastSec<10){lastSec="0"+lastSec};
		 $('.timer>.digits').html((RemainsFullDays ? "<span>"+RemainsFullDays+"дн.</span> " :"")+RemainsFullHours+":"+RemainsMinutes+":"+lastSec);
	 }
	 else {$(".timer").remove();}
},1000);
});
</script>
	 <td width="33%" class="w"><div class="block">
		 <h2>Акции и спецпредложения</h2>
		 <div class="L"><a href="javascript:;"><img src="http://...promo.png" alt=""></a></div>
		 <div class="R">
			 <div class="text"><h3 id="toc0"> Дарим скидку <span style="color: #EF2929;">30%</span></h3><p>10 первых покупателей получат РУ модели со скидкой <span style="color: #EF2929;"><strong>30%</strong> </span>Спешите!</p></div>
			 <div class="timer">
				 <p>До конца акции</p>
				 <div class="digits"></div>
			 </div>
		 </div>
	 </div></td>
	 <td width="33%" class="w"><div class="block">
		 <h2>СКИДКИ</h2>
		 <div class="L"><a href="./"><img src="http://...discount.png" alt=""></a></div>
		 <div class="R"><div class="text"><p>Доставка по всей Росии<span style="color: #EF2929;"> <strong>БЕСПЛАТНО</strong></span><br> Батарейки в <span style="color: #EF2929;"><strong>падарок</strong></span></p><a href="#">Скидки</a></div></div>
	 </div></td>
</tr></tbody></table></div>
<!-- END 3 блока -->

Для того, чтобы заменить изображения, замените в Шаблоне HTML эти изображения на свои:
1. guarantee.png
2. promo.png
3. discount.png

Во 2-ом блоке около таймера, чтобы заменить изображение, зайдите в main.css -> найдите
clock.png
и замените ссылку на любую другую

Также на слове Скидки (3-й блок) есть ссылка, чтобы ее удалить или поставить на нужную страницу, в шаблоне HTML найдите строчку
<a href="#">Скидки</a>
и вместо # поставьте нужную ссылку
1354591201 - время в секундах

Сообщение отредактировал support 2.0: 08 Апрель 2013 - 16:21
изменен код


#3 alkazare

alkazare

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

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

Отправлено 04 Декабрь 2012 - 07:02

блоки отображаются некорректно

#4 Koderhan

Koderhan

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

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

Отправлено 04 Декабрь 2012 - 08:52

Не совсем понятно. Где именно отображаются блоки не корректно.
.blocks>table{width:996px;border-collapse:separate;border-spacing: 17px;margin: -9px 0px 0px 452px;}
Если вы про отступы. То:

margin: -9px 0px 0px 452px;
http://htmlbook.ru/css/margin

#5 alkazare

alkazare

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

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

Отправлено 05 Декабрь 2012 - 06:44

блоки также стоят и счетчика нет

#6 Koderhan

Koderhan

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

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

Отправлено 05 Декабрь 2012 - 13:05

Просмотр сообщенияalkazare (05 Декабрь 2012 - 06:44) писал:

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

#7 support 2.0

support 2.0

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

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

Отправлено 05 Декабрь 2012 - 16:39

Просмотр сообщенияalkazare (05 Декабрь 2012 - 06:44) писал:

блоки также стоят и счетчика нет
Счетчика нет, т.к. там задано было время и был отсчет в обратную сторону. После того как счетчик дошел да 00.00.00, он отключился и убрался. Замените в шаблоне HTML строчку
var endTS = 1354591201*1000;
на вот эту
var endTS = 1355691201*1000;
Да, действительно, в зависимости от разрешения экрана Ваши блоки меняют месторасположения. Для того, чтобы такого не было, вырежьте(ctrl x) из файла HTML блок
<div class="blocks"><table><tbody><tr>
		 <td width="33%" class="w"><div class="block">
				 <h2>Гарантия возврата</h2>
				 <div class="L"><a href="javascript:;"><img src="http://markil.ru/images/stuff/guarantee.png" alt=""></a></div>
				 <div class="R">
						 <div class="text"><p>Если Вам попадется некачественный товар, мы без вопросов заменим его на другой, или вернем Вам деньги.</p></div>
				 </div>
		 </div></td>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
setInterval(function(){
		 var now = new Date();
		 var endTS = 1354591201*1000;
		 var totalRemains = (endTS-now.getTime());
		 if (totalRemains>1){
				 var RemainsSec=(parseInt(totalRemains/1000));
				 var RemainsFullDays=(parseInt(RemainsSec/(24*60*60)));
				 var secInLastDay=RemainsSec-RemainsFullDays*24*3600;
				 var RemainsFullHours=(parseInt(secInLastDay/3600));
				 if (RemainsFullHours<10){RemainsFullHours="0"+RemainsFullHours};
				 var secInLastHour=secInLastDay-RemainsFullHours*3600;
				 var RemainsMinutes=(parseInt(secInLastHour/60));
				 if (RemainsMinutes<10){RemainsMinutes="0"+RemainsMinutes};
				 var lastSec=secInLastHour-RemainsMinutes*60;
				 if (lastSec<10){lastSec="0"+lastSec};
				 $('.timer>.digits').html((RemainsFullDays ? "<span>"+RemainsFullDays+"дн.</span> " :"")+RemainsFullHours+":"+RemainsMinutes+":"+lastSec);
		 }
		 else {$(".timer").remove();}
},1000);
});
</script>
		 <td width="33%" class="w"><div class="block">
				 <h2>Акции и спецпредложения</h2>
				 <div class="L"><a href="javascript:;"><img src="http://markil.ru/images/stuff/promo.png" alt=""></a></div>
				 <div class="R">
						 <div class="text"><h3 id="toc0"> Дарим скидку
						
				 </h3></div>
		 </div></div></td>
		 <td width="33%" class="w"><div class="block">
				 <h2>СКИДКИ</h2>
				 <div class="L"><a href="./"><img src="http://markil.ru/images/stuff/discount.png" alt=""></a></div>
				 <div class="R"><div class="text"><p>Доставка по всей России<span style="color: #EF2929;"> <strong>БЕСПЛАТНО</strong></span><br> Батарейки в <span style="color: #EF2929;"><strong>подарок</strong></span></p><a href="#">Скидки</a></div></div>
		 </div></td>
</tr></tbody></table></div>

и вставьте его после строчки

Цитата

<div class="content_page">

Далее зайдите в файл main.css и замените этот блок
.blocks>table{width:996px;border-collapse:separate;border-spacing: 17px;margin: -9px 0px 0px 452px;}

на этот
.blocks>table{width:989px;border-collapse:separate;border-spacing: 17px;margin: -30px 0px 0px -16px;}


#8 Alex2512006

Alex2512006

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

  • Пользователи
  • PipPipPip
  • 182 сообщений
  • ГородРжев, Тверская обл.

Отправлено 25 Январь 2013 - 15:48

у меня не работает таймер (((((

#9 Дмитрий К

Дмитрий К

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

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

Отправлено 25 Январь 2013 - 16:44

Просмотр сообщенияAlex2512006 (25 Январь 2013 - 15:48) писал:

у меня не работает таймер (((((
Также не работает таймер. При обновлении страницы выскакиквает и сразупропадает.

#10 support 2.0

support 2.0

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

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

Отправлено 25 Январь 2013 - 17:29

Просмотр сообщенияAlex2512006 (25 Январь 2013 - 15:48) писал:

у меня не работает таймер (((((

Просмотр сообщенияДмитрий К (25 Январь 2013 - 16:44) писал:

Также не работает таймер. При обновлении страницы выскакиквает и сразупропадает.

поставьте цифры побольше, например, 1356691201*1000 или 1357691201*1000 или 1365691201*1000
Просто попробуйте самостоятельно менять эти цифры на большие числа и счетчик появится

#11 Дмитрий К

Дмитрий К

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

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

Отправлено 25 Январь 2013 - 20:34

Просмотр сообщенияsupport 2.0 (25 Январь 2013 - 17:29) писал:

поставьте цифры побольше, например, 1356691201*1000 или 1357691201*1000 или 1365691201*1000
Просто попробуйте самостоятельно менять эти цифры на большие числа и счетчик появится
Спасибо, как ни странно с 1365691201*1000 заработало.

#12 Lesson

Lesson

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

  • Пользователи
  • PipPipPip
  • 97 сообщений
  • ГородРостов-на-Дону

Отправлено 26 Январь 2013 - 19:29

В хроме нормально отображается, в мазиле вправо смещено, в эксплоре тоже криво. Как исправить?

Сайт: ShopLesson.ru

#13 Lesson

Lesson

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

  • Пользователи
  • PipPipPip
  • 97 сообщений
  • ГородРостов-на-Дону

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

Просмотр сообщенияLesson (26 Январь 2013 - 19:29) писал:

В хроме нормально отображается, в мазиле вправо смещено, в эксплоре тоже криво. Как исправить?

Сайт: ShopLesson.ru

Смещение в браузерах было из-за той же строчки:
.blocks>table{width:989px;border-collapse:separate;border-spacing: 17px;margin: -30px 0px 0px 0px;}
Сейчас нормально, исправил на:
.blocks>table{width:989px;border-collapse:separate;border-spacing: 17px;margin: 0px 0px 0px 0px;}

Время счетчика некорректно отображается: Ошибка.png

#14 Vaccina

Vaccina

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

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

Отправлено 28 Январь 2013 - 23:57

Попробуйте в файле стилей main.css найти

.block .timer > .digits {
font-size: 20px;
font-weight: 400;
line-height: 5px;
}

и заменить на

.block .timer > .digits {
font-size: 12px;
font-weight: 400;
line-height: 12px;
}


#15 Lesson

Lesson

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

  • Пользователи
  • PipPipPip
  • 97 сообщений
  • ГородРостов-на-Дону

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

Просмотр сообщенияVaccina (28 Январь 2013 - 23:57) писал:

Попробуйте в файле стилей main.css найти

.block .timer > .digits {
font-size: 20px;
font-weight: 400;
line-height: 5px;
}

и заменить на

.block .timer > .digits {
font-size: 12px;
font-weight: 400;
line-height: 12px;
}
Спасибо!

#16 Alex2512006

Alex2512006

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

  • Пользователи
  • PipPipPip
  • 182 сообщений
  • ГородРжев, Тверская обл.

Отправлено 29 Январь 2013 - 13:43

Просмотр сообщенияДмитрий К (25 Январь 2013 - 20:34) писал:

Спасибо, как ни странно с 1365691201*1000 заработало.
я пробовал менять время - таймер не работает ((((

#17 Alex2512006

Alex2512006

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

  • Пользователи
  • PipPipPip
  • 182 сообщений
  • ГородРжев, Тверская обл.

Отправлено 29 Январь 2013 - 14:00

Заработал, но при нужном мне времени не работает (((

#18 Vaccina

Vaccina

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

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

Отправлено 29 Январь 2013 - 22:45

Пожалуйста, сообщите какое время вам необходимо отображать в таймере?

#19 emix777

emix777

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

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

Отправлено 09 Февраль 2013 - 23:39

Подскажите, как сделать, чтобы блоки были немного поуже.

#20 miyako

miyako

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

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

Отправлено 10 Февраль 2013 - 08:25

Просмотр сообщенияemix777 (09 Февраль 2013 - 23:39) писал:

Подскажите, как сделать, чтобы блоки были немного поуже.

Нужно уменьшить их ширину свойством width




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

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