Перейти к публикации

Помогите с кодом

Miracle

Автор: Miracle,
в DataLife Engine (Общие вопросы)

 Рассказать Подписчики 0

Рекомендованные сообщения

Miracle

Miracle 4

Опубликовано:
Опубликовано:

Не пойму в чем дело, при вставке картинки она не уменьшается, а обрезается, в чем проблема?

Код:



<div class="globright">

    <h1 class="hblock">Скриншоты</h1>

<div id="slider" class="nivoSlider">

  <img width="290px" height="170px" src="[xfvalue_screen1]" alt=""  title="Скриншот 1 - {title}" />

  [xfgiven_screen2]<img width="290px" height="170px" src="[xfvalue_screen2]" alt=""  title="Скриншот 2 - {title}" />[/xfgiven_screen2]

  [xfgiven_screen3]<img width="290px" height="170px" src="[xfvalue_screen3]" alt=""  title="Скриншот 3 - {title}" />[/xfgiven_screen3]

</div>

    {include file="template/ganre.tpl"}

</div>
Кусочек CSS 


/* If an image is wrapped in a link */

.nivoSlider a.nivo-imageLink {

position:absolute;

top:0px;

left:0px;

width:290px;

height:170px;

border:0;

padding:0;

margin:0;

z-index:60;

display:none;

}

post-49652-0-82876400-1396373007.png

Ссылка на сообщение
Поделиться на других сайтах
igorus

igorus 6

Опубликовано:
Опубликовано:

вообщето параметры картинок нужно ставить после ссылки на картинку. код ксс не отвечает за размер имдж. там стиль линков. стиль должен быть типа .nivoSlider img


<img width="290px" height="170px" src="[xfvalue_screen1]" alt=""  title="Скриншот 1 - {title}" />

Ссылка на сообщение
Поделиться на других сайтах
Miracle

Miracle 4

Опубликовано:
Опубликовано: Автор

вообщето параметры картинок нужно ставить после ссылки на картинку. код ксс не отвечает за размер имдж. там стиль линков. стиль должен быть типа .nivoSlider img


<img width="290px" height="170px" src="[xfvalue_screen1]" alt=""  title="Скриншот 1 - {title}" />
Проблема не решена до сих пор. Вот CSS: 

/* If an image is wrapped in a link */

.nivoSlider a.nivo-imageLink {

position:absolute;

top:0px;

left:0px;

width:290px;

height:170px;

border:0;

padding:0;

margin:0;

z-index:60;

display:none;

}

/* The slices in the Slider */

.nivo-slice {

display:block;

position:absolute;

z-index:50;

height:170px;

}

/* Caption styles */

.nivo-caption {

position:absolute;

left:0px;

bottom:0px;

background:#000;

color:#fff;

opacity:0.8; /* Overridden by captionOpacity setting */

width:290px;

z-index:89;

}

.nivo-caption p {

padding:5px;

margin:0;

}

.nivo-caption a {

display:inline !important;

}

.nivo-html-caption {

    display:none;

}

/* Direction nav styles (e.g. Next & Prev) */

.nivo-directionNav a {

position:absolute;

top:35%;

z-index:99;

cursor:pointer;

}

.nivo-prevNav {

left:0px;

}

.nivo-nextNav {

right:0px;

}

/* Control nav styles (e.g. 1,2,3...) */

.nivo-controlNav a {

position:relative;

z-index:99;

cursor:pointer;

}

.nivo-controlNav a.active {

font-weight:bold;

}

.nivo-directionNav a {

display:block;

width:30px;

height:30px;

background:url(../images/arrows.png) no-repeat;

text-indent:-9999px;

border:0;

}

a.nivo-nextNav {

background-position:-30px 0;

right:15px;

}

a.nivo-prevNav {

left:15px;

}

#slider .nivo-controlNav{

position:absolute;

left:47%;

bottom:-30px;

}

#slider .nivo-controlNav a{

display:none;

}

#slider .nivo-controlNav a.active {

background-position:-10px 0;

}

Ссылка на сообщение
Поделиться на других сайтах
igorus

igorus 6

Опубликовано:
Опубликовано:

Вы пробовали width="290px" height="170px" поставить после src="[xfvalue_screen1]" ? Не помню точно, но в слайдер нужно картинки определенного размера кажется. Либо попробовать сделать стиль в ксс

.nivoSlider img {

width:290px;

height:170px;

}

Ссылка на сообщение
Поделиться на других сайтах
alex32

alex32 942

Опубликовано:
Опубликовано: 

<img width="290px" height="170px" src="[xfvalue_screen1]" alt="" title="Скриншот 1 - {title}" />[/CODE]

и не будет у вас ошибка, просто уберите единицы из размеров

<img [color=#ff0000][b]width="290" height="170" [/b][/color]src="[xfvalue_screen1]" alt="" title="Скриншот 1 - {title}" вот так должно быть.

Ссылка на сообщение
Поделиться на других сайтах
alex32

alex32 942

Опубликовано:
Опубликовано:

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

Ссылка на сообщение
Поделиться на других сайтах
Miracle

Miracle 4

Опубликовано:
Опубликовано: (изменено) Автор

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

fullstory:


<script type="text/javascript">

Cufon.replace('h2', { fontFamily:'Museo Slab' });

Cufon.replace('h3', { fontFamily:'Museo Slab' });

$(window).load(function() {

setTimeout(function(){

  $('#slider').nivoSlider({ pauseTime:5000, pauseOnHover:false, effect: 'sliceUpDownLeft' });

}, 1000);


});

</script>

[xfgiven_vk]

<div id="online" class="online" style="display:none;">

	<a href="#" class="close" onclick="$('#online').toggle();return false;">Close</a>

[xfvalue_vk]

</div>

[/xfgiven_vk]

<div class="fullstory">

	<div class="globleft">

		<h1>{title}</h1>

  <div class="mmarg"></div>

  <div class="full-left">

	  [xfgiven_poster]

	  <img src="[xfvalue_poster]">

   [/xfgiven_poster]

   [xfgiven_postertr]

   <img src="[xfvalue_postertr]">

   [/xfgiven_postertr]

	   <div class="full-left-info">

		[xfgiven_vk]<span><a href="#" onclick="$('#online').toggle();return false;">Смотреть фильм онлайн</a></span>[/xfgiven_vk]

	 [xfnotgiven_vk]<span><b>Смотреть фильм онлайн</b></span>[/xfnotgiven_vk]

	 [xfgiven_download]<span><a href="[xfvalue_download]">Скачать фильм бесплатно</a></span>[/xfgiven_download]

	 [xfnotgiven_download]<span><b>Скачать фильм бесплатно</b></span>[/xfnotgiven_download]

	 [xfgiven_dvd]<span><a href="[xfvalue_dvd]">Купить фильм на DVD</a></span>[/xfgiven_dvd]

	 [xfnotgiven_dvd]<span><b>Купить фильм на DVD</b></span>[/xfnotgiven_dvd]

	   </div>


  </div>

	 <div class="full-center">

	  <ul class="full-ul">

	   <li><b>Оригинал:</b><span>[xfvalue_orig]</span></li>

	[xfgiven_poster]<li><b>Жанр фильма:</b><span>{link-category}</span></li>[/xfgiven_poster]

	[xfgiven_postertr]<li><b>Раздел:</b><span>{link-category}</span></li>

	<li><b>Жанр фильма:</b><span>[xfvalue_ganre]</span></li>[/xfgiven_postertr]

	<li><b>Страна:</b><span>[xfvalue_strana]</span></li>

	<li><b>Год выхода:</b><span>[xfvalue_god]</span></li>

	<li><b>Режиссёр:</b><span>[xfvalue_regisser]</span></li>

	<li><b>Актёры:</b><span>[xfvalue_akters]</span></li>

	<li><b>Сборы в мире:</b><span>[xfvalue_sbmir]</span></li>

	<li><b>Премьера в мире:</b><span>[xfvalue_prmir]</span></li>

	<li><b>Премьера в РФ:</b><span>[xfvalue_prrf]</span></li>

	<li><b>Релиз на DVD:</b><span>[xfvalue_reldvd]</span></li>

	<li><b>Время:</b><span>[xfvalue_time]</span></li>

   </ul>

  </div>

</div>

<div class="globright">

	 <dl>

		 <dt>{rating}</dt>

   <dd><div class="favpeople">{favorites}</div></dd>

   [group=5]<div class="favpeople"><a href="javascript:showStickyNoticeToast();"><img src="{THEME}/dleimages/plus_fav.gif" title="Добавить в свои закладки на сайте"></a></div>[/group]

	  <dt>Выставили рейтинг: {vote-num}</dt>

  </dl>

  <h2 style="margin-bottom:10px;">Советуем посмотреть</h2>

  {related-news}

</div>

</div>

<div class="globleft">

	<h2 style="margin-bottom:10px;">Краткое содержание</h2>

<div style="margin-bottom:20px;">{short-story}</div>

[xfgiven_trailer]

<div class="trailer">

	 <h1>Трейлер "{title}"</h1>

	 [xfvalue_trailer]

</div>

[/xfgiven_trailer]

<div class="soc-zakladki">

  <div class="galoba">[complaint]Пожаловаться на новость[/complaint]</div>

  [group=5]<div class="galoba"><a href="javascript:showStickyNoticeToast();">Пожаловаться на новость</a></div>[/group]

  <div class="galoba">[edit]Редактировать[/edit]</div>

</div>


	{addcomments}

[comments]<h2>Комментарии пользователей</h2>[/comments]

[not-comments]Ещё не добавлено ниодного комментария. Станьте первым.[/not-comments]

<br>

	{comments}

	{navigation}

</div>

<div class="globright">

	<h1 class="hblock">Скриншоты</h1>

<div id="slider" class="nivoSlider">

  <img width="290px" height="170px" src="[xfvalue_screen1]" alt=""  title="Скриншот 1 - {title}" />

  [xfgiven_screen2]<img width="290px" height="170px" src="[xfvalue_screen2]" alt=""  title="Скриншот 2 - {title}" />[/xfgiven_screen2]

  [xfgiven_screen3]<img width="290px" height="170px" src="[xfvalue_screen3]" alt=""  title="Скриншот 3 - {title}" />[/xfgiven_screen3]

</div>

	{include file="template/ganre.tpl"}

</div>
CSS: 

/*---search---*/

.searchbar {

    float: right;

    width: 284px;

    height: 25px;

}

.searchbar li {

    float: left;

    height: 25px;

border:1px solid #000;

background: #fff;

list-style:none;

}

.searchbar .lfield {

    width: 243px;

    padding-left: 7px;

    overflow: hidden;

margin-right:5px;

}

.searchbar .lfield input {

    color: #8b99a8;

    float: left;

    height: 15px;

    width: 250px;

    border: 0 none;

    background: none;

    margin-top: 5px;

}

.searchbar .lbtn input {

    width: 25px;

    height: 25px;

    background: #db143d url("../images/search.png") no-repeat 0 0;

}

.searchbar .lbtn input:hover {

    background-position: -25px 0;

}

.postnews {position:absolute;left:-1950px;}

/*Слайдер*/

/* CONTAINER */

div.orbit { width: 1px; height: 1px; position: relative; overflow: hidden; }

div.orbit img { position: absolute; top: 0; left: 0;width:610px;height:320px; }

div.orbit a img { border: none; }


/* CAPTIONS */

div.caption { background: #000; background: url(../images/back.png) repeat; width: 100%; height:64px; z-index: 1000; position: absolute; bottom:-100px; color: #fff;}

.orbit-caption { display: none; }

.orbit-caption a{display:block;padding:8px 10px;text-decoration:none;float:right;margin:15px 15px 0 0;background:#e5460c;color:#fff;font-size:17px;border:1px solid #222;}

.orbit-caption a:hover{background:#eee;color:#222;}

.orbit-caption-rel{display:block;overflow:hidden;margin:10px;width:400px;float:left;}

.orbit-caption-title{display:block;overflow:hidden;position:absolute;top:0;left:0;padding:5px 7px; font-size:15px; color:#fff;background:#111;z-index: 1002;}

.orbit-caption-title span{color:#e5460c;}


/* DIRECTIONAL NAV */

div.slider-nav { display: block; }

div.slider-nav span { width: 30px; height: 30px; text-indent: -9999px; position: absolute; z-index: 1000; bottom:64px; cursor: pointer;}

div.slider-nav span.right { background: url(../images/bull.png) -90px -30px no-repeat; left: 50px; }

div.slider-nav span.left { background: url(../images/bull.png) 0 -30px no-repeat; left: 20px;}  

div.slider-nav span.right:hover{ background: url(../images/bull.png) -90px 0px no-repeat;}

div.slider-nav span.left:hover{ background: url(../images/bull.png) 0 0px no-repeat;}

/* BULLET NAV */

.orbit-bullets { position: absolute; z-index: 1000; list-style: none; bottom:64px; left: 80px; margin: 0; padding: 0; }

.orbit-bullets li { float: left; margin:0;cursor: pointer; color: #999; text-indent: -9999px; background: url(../images/bull.png) -30px 0 no-repeat;  width: 30px; height: 30px; overflow: hidden; }

.orbit-bullets li.active { color: #222; background-position: -30px -30px; }

.orbit-bullets li:hover{background-position: -60px 0;}

.orbit-bullets li.active:hover{background-position: -30px -30px;}

/*tabs*/

div.tabs {

display:block;

overflow:hidden;

}

div.container {

margin: 0;

width: 290px;

margin-bottom: 10px;

}

ul.tabNavigation {

list-style: none;

margin: 0;

padding: 0;

}

ul.tabNavigation li {

display: inline;

}

ul.tabNavigation li a {

display:block;

height:20px;

padding: 6px 10px 0 10px;

background: url("../images/bd-menu.png") 0 0 repeat-x;

color: #222;

text-decoration: none;

float:left;

margin:0;

font-size: 15px;

margin-left:10px;

margin-right:-10px;

margin-bottom:-1px;

background:#f2f2f2;

border-bottom:1px solid #ccc;

}

ul.tabNavigation li a.selected,

ul.tabNavigation li a.selected:hover {

padding: 5px 10px 0 10px;

border:1px solid #ccc;

border-bottom:1px solid #fff;

background:#fff;

}

ul.tabNavigation li a:hover {

background: #ddd;

color: #000;

}

ul.tabNavigation li a:focus {

outline: 0;

}

#first, #second, #third {

display:block;

overflow:hidden;

padding: 12px 10px 0 10px;

margin-top: 3px;

width:268px;

min-height:270px;

border:1px solid #ccc;

}

div.tabs div h2 {

margin-top: 0;

}

/* The Nivo Slider styles */

#slider {

position:relative;

width:290px; /* Изменить размер картинки */

height:170px; /* Изменить размер картинки */

background:#202834 url(../images/loading.gif) no-repeat 50% 50%;

}

#slider img {

position:absolute;

    top:0px;

    left:0px;

    display:none;

}

#slider a {

border:0;

display:block;

}

/* If an image is wrapped in a link */

.nivoSlider a.nivo-imageLink {

position:absolute;

top:0px;

left:0px;

width:290px;

height:170px;

border:0;

padding:0;

margin:0;

z-index:60;

display:none;

}

/* The slices in the Slider */

.nivo-slice {

display:block;

position:absolute;

z-index:50;

height:170px;

}

/* Caption styles */

.nivo-caption {

position:absolute;

left:0px;

bottom:0px;

background:#000;

color:#fff;

opacity:0.8; /* Overridden by captionOpacity setting */

width:290px;

z-index:89;

}

.nivo-caption p {

padding:5px;

margin:0;

}

.nivo-caption a {

display:inline !important;

}

.nivo-html-caption {

    display:none;

}

/* Direction nav styles (e.g. Next & Prev) */

.nivo-directionNav a {

position:absolute;

top:35%;

z-index:99;

cursor:pointer;

}

.nivo-prevNav {

left:0px;

}

.nivo-nextNav {

right:0px;

}

/* Control nav styles (e.g. 1,2,3...) */

.nivo-controlNav a {

position:relative;

z-index:99;

cursor:pointer;

}

.nivo-controlNav a.active {

font-weight:bold;

}

.nivo-directionNav a {

display:block;

width:30px;

height:30px;

background:url(../images/arrows.png) no-repeat;

text-indent:-9999px;

border:0;

}

a.nivo-nextNav {

background-position:-30px 0;

right:15px;

}

a.nivo-prevNav {

left:15px;

}

#slider .nivo-controlNav{

position:absolute;

left:47%;

bottom:-30px;

}

#slider .nivo-controlNav a{

display:none;

}

#slider .nivo-controlNav a.active {

background-position:-10px 0;

}

.toast-container {

width: 280px;

z-index: 9999;

}


* html .toast-container {

position: absolute; 

}


.toast-item {

height: auto;

background: #333;

    opacity: 0.9;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

color: #eee;

padding-top: 20px;

padding-bottom: 20px;

padding-left: 6px;

padding-right: 6px;

font-family: lucida Grande;

font-size: 14px;

border: 2px solid #999;

display: block;

position: relative;

margin: 0 0 12px 0;

}

.toast-item p {

    text-align: left;

    margin-left: 50px;

}

.toast-item-close {

    background:url(../images/close.gif);

    width:22px;

    height:22px;

    position: absolute;

    top:7px;

    right:7px;

cursor:pointer;

}

.toast-item-image {

    width:32px;

    height: 32px;

    margin-left: 10px;

    margin-top: 10px;

    margin-right: 10px;

    float:left;

}

.toast-item-image-notice {

    background:url(../images/error.png);

}

/**

* toast types

*

* pattern: toast-type-[value]

* where 'value' is the real value of the plugin option 'type'

*

*/

.toast-type-notice {

    color: white;   

}

.toast-type-success {

    color: white;   

}

.toast-type-warning {

    color: white;

    border-color: #FCBD57;

}

.toast-type-error {

    color: white;

    border-color: #B32B2B;

}

/**

* positions

*

* pattern: toast-position-[value]

* where 'value' is the real value of the plugin option 'position'

*

*/

.toast-position-top-left {

    position: fixed;

    left: 20px;

    top: 20px;

}

.toast-position-top-center {

    position: fixed;

    top: 20px;

    left: 50%;

    margin-left: -140px;

}

.toast-position-top-right {

    position: fixed;

    top: 20px;

    right: 20px;

}

.toast-position-middle-left {

    position: fixed;

    left: 20px;

    top: 50%;

    margin-top: -40px;

}

.toast-position-middle-center {

    position: fixed;

    left: 50%;

    margin-left: -140px;

    margin-top: -40px;

    top: 50%;

}

.toast-position-middle-right {

    position: fixed;

    right: 20px;

    margin-left: -140px;

    margin-top: -40px;

    top: 50%;

}

Изменено пользователем Miracle
Ссылка на сообщение
Поделиться на других сайтах
Lomot

Lomot 134

Опубликовано:
Опубликовано:

Не смешно.

Ссылку на страницу нужно.

Чтобы ты не написал в стилях или на странице, я изменю это через js до неузнаваемости. Да и кто будет смотреть как ведут себя твои стили? Наркоман что ли?

  • Поддерживаю 1
Ссылка на сообщение
Поделиться на других сайтах
IgorA100

IgorA100 90

Опубликовано:
Опубликовано: (изменено)

style.css 177 строка сделать так:


.nivo-slice {

	background-size: 290px 170px !important;

	display: block;

	position: absolute;

	z-index: 50;

}

Т.е. добавить размерность бекграунда. А размерность картинок задавать нет смысла, они игнорируются!

Изменено пользователем IgorA100
Ссылка на сообщение
Поделиться на других сайтах
igorus

igorus 6

Опубликовано:
Опубликовано:

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

Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

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

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

×
 Рассказать
Подписчики 0
Перейти к списку тем
×
×
  • Создать...