помогите поправить похожие новости

[Minibuka 0]

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

помогите отредактировать...

сейчас выглядит так

<li><a href="{link}">{title}</a></li>

<img align="left" width="100px" src="{image-1}"><br clear="all" />

Изменено 31 октября 2014 пользователем Minibuka

[odys 384]

помогите отредактировать...

в .css это

.related-news {

  margin-left:-10px;

  *zoom:1;

}


.related-news:before,

.related-news:after {

  display:table;

  line-height:0;

  content: "";

}


.related-news:after {

  clear:both;

}


.related-news li {

  float: left;

  min-height: 1px;

  margin-left: 10px;

}


.related-news li img {width:100px;}

в шаблон fullstory.tpl в нужное место

<ul class="related-news">{related-news}</ul>

в шаблон relatednews.tpl

<li><a href="{link}">{title}</a><br /><img src="{image-1}" /></li>[/code]

Изменено 31 октября 2014 пользователем odys

[Minibuka 0]

помогите отредактировать...

в .css это

.related-news {

  margin-left:-10px;

  *zoom:1;

}


.related-news:before,

.related-news:after {

  display:table;

  line-height:0;

  content: "";

}


.related-news:after {

  clear:both;

}


.related-news li {

  float: left;

  min-height: 1px;

  margin-left: 10px;

}


.related-news li img {width:100px;}

в шаблон fullstory.tpl в нужное место

<ul class="related-news">{related-news}</ul>

в шаблон relatednews.tpl

<li><a href="{link}">{title}</a><br /><img src="{image-1}" /></li>

щас попробуем я сам пытался ковырять сделал так .main-news{ float: left; width: 215px; margin: 0 7px 20px 6px; } .main-news-image{ width: 207px; height: 140px; border: 3px solid #d6d6d6; overflow: hidden; } .main-news-image img{ width: 207px; min-height: 140px; } .main-news h2{ background: url(../images/shadow-video.png) center top no-repeat; padding: 10px 0 0 0; } .main-news h2 a{ font: 12px Verdana; color: #01589c; text-decoration: underline; display: block; padding: 0 0 0 20px; background: url(../images/main-news-point.png) left 3px no-repeat; height: 30px; overflow: hidden; line-height: 15px; } .main-news h2 a:hover{ color: #000; } .postnews {position:absolute;left:-1950px;} relatednews <div class="main-news"> <div class="main-news-image"> <a href="{link}"><img src="{image-1}" alt="{title}" /></a> </div> <h2><a href="{link}">{title}</a></h2> </div> получилось вот так как видите ушла кнопочка вернуться ковыряю css найти не как не могу(( попробую ваше вот так будет лучше с кликом по картинке только при наведение не показывает название новости (( <li><a href="{link}">{title}</a><br /><a href="{link}"><img src="{image-1}" alt="{title}" /></a></li> Да получилось не плохо, но есть тоже ерундовина как видите у меня выравнивает картинки, а тут кривизна получается (( вот теперь есть описание, но картинки всё равно кривые (( <li><a href="{link}" title="{title}"style="font-size:9pt;">{title}</a><br /> <a href="{link}" title="{title}"><img src="{image-1}" alt="{title}"></a></li> всё гуд сам разобрался, но всё равно спасибо .. и так css

.main-news{

float: left;

width: 215px;

margin: 0 7px 20px 6px;

}


.main-news-image{

  width: 207px;

  height: 140px;

  border: 3px solid #d6d6d6;

  overflow: hidden;

}


  .main-news-image img{

   width: 207px;

   min-height: 140px;

  }


.main-news h2{

  background: url(../images/shadow-video.png) center top no-repeat;

  padding: 10px 0 0 0;

}


.main-news h2 a{

  font: 12px Verdana;

  color: #DA8524;

  text-decoration: underline;

  display: block;

  padding: 0 0 0 20px;

  background: url(../images/search1.png) left 3px no-repeat;

  height: 30px;

  overflow: hidden;

  line-height: 15px;

}


  .main-news h2 a:hover{

   color: #000;

  }


  .main-news:after {

		    clear:both;

    }


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

relatednews.tpl

<div class="main-news">

<div class="main-news-image">

  <a href="{link}" title="{title}"><img src="{image-1}" alt="{title}" /></a>

</div>

<h2><a href="{link}" title="{title}"style="font-size:9pt;">{title}</a></h2>

</div>

fullstory.tpl

<ul class="related-news">{related-news}</ul>

</ul><span class="argback"><a href="javascript:history.go(-1)" title="Назад"><strong>Вернуться</strong></a></span>

<div class="hsep">&nbsp;</div>

исход

Изменено 31 октября 2014 пользователем Minibuka

[odys 384]

у меня выравнивает картинки

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

.related-news li img отвечает за картинку, настраивай как душе угодно.

И да, в твоём варианте всё поплыло, кнопка «вернуться» вверх ускакала, полоса, которая идёт по низу, прилипла с слева...

всё гуд сам разобрался, но всё равно спасибо

ну-ну, я вижу. Или мои 2 строчки, или твои хренова туча, плюс ко всему в IE поплывёт всё...

[Minibuka 0]

у меня выравнивает картинки

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

.related-news li img отвечает за картинку, настраивай как душе угодно.

И да, в твоём варианте всё поплыло, кнопка «вернуться» вверх ускакала, полоса, которая идёт по низу, прилипла с слева...

всё гуд сам разобрался, но всё равно спасибо

ну-ну, я вижу. Или мои 2 строчки, или твои хренова туча, плюс ко всему в IE поплывёт всё...

на скринах посмотри я на локальной машине настраивал =)))

Да ты прав, но у меня косяк опять (( сделал так.

/*related-news*/

.related-news {

  margin-left:-10px;

  *zoom:1;

}

.related-news:before,

.related-news:after {

  display:table;

  line-height:0;

  content: "";

}

.related-news:after {

  clear:both;

}

.related-news li {

  float: left;

  min-height: 1px;

  margin-left: 10px;

}

.related-news li img {

  width: 207px;

  height: 140px;

  border: 3px solid #d6d6d6;

  overflow: hidden;

}  

<a href="{link}" title="{title}"><img src="{image-1}" alt="{title}"></a></li>

<li><a href="{link}" title="{title}"style="font-size:9pt;">{title}</a><br />

ошибка такая: если название новости короткая то норм, а если длинная то вот что получается.. и точки желательно убрать а поставить картинку=)

Изменено 1 ноября 2014 пользователем Minibuka

[odys 384]

ошибка такая: если название новости короткая то норм, а если длинная то вот что получается.. и точки желательно убрать а поставить картинку=)

это не ошибка, а не внимательность. У тебя заголовок за пределами списка <li>

Надо так:

<li><a href="{link}" title="{title}"><img src="{image-1}" alt="{title}"><br />{title}</a></li>

а в .css этот код, он уберёт точки. Замени то, что есть на этот:

.related-news {

  list-style:none;

  padding:0;

  margin:0 0 0 -10px;

  *zoom:1;

}

.related-news:before,

.related-news:after {

  display:table;

  line-height:0;

  content: "";

}

.related-news:after {

  clear:both;

}

.related-news li {

  float: left;

  min-height: 1px;

  margin-left: 10px;

}

.related-news li img {

  width: 207px;

  height: 140px;

  border: 3px solid #d6d6d6;

  overflow: hidden;

}

.related-news li a {font-size:9pt;}[/code]

Изменено 1 ноября 2014 пользователем odys

[Minibuka 0]

ошибка такая: если название новости короткая то норм, а если длинная то вот что получается.. и точки желательно убрать а поставить картинку=)

это не ошибка, а не внимательность. У тебя заголовок за пределами списка <li>

Надо так:

<li><a href="{link}" title="{title}"><img src="{image-1}" alt="{title}"><br />{title}</a></li>

а в .css этот код, он уберёт точки. Замени то, что есть на этот:

.related-news {

  list-style:none;

  padding:0;

  margin:0 0 0 -10px;

  *zoom:1;

}

.related-news:before,

.related-news:after {

  display:table;

  line-height:0;

  content: "";

}

.related-news:after {

  clear:both;

}

.related-news li {

  float: left;

  min-height: 1px;

  margin-left: 10px;

}

.related-news li img {

  width: 207px;

  height: 140px;

  border: 3px solid #d6d6d6;

  overflow: hidden;

}

.related-news li a {font-size:9pt;}[/code]

чёт не канает

[odys 384]

чёт не канает

конечно не канает, если стили не заменил как я писал в последнем сообщении http://forum.dle-new...ndpost&p=333971

и не говори, что менял, перед тем как писать код, я его проверил. Всё отлично работает. И в стилях у тебя не тот код, и код в relatednews.tpl не тот, что я писал.

Изменено 1 ноября 2014 пользователем odys

[Minibuka 0]

чёт не канает

конечно не канает, если стили не заменил как я писал в последнем сообщении http://forum.dle-new...ndpost&p=333971

и не говори, что менял, перед тем как писать код, я его проверил. Всё отлично работает. И в стилях у тебя не тот код, и код в relatednews.tpl не тот, что я писал.

так скриншот я сделал как поставил в ксс и tpl когда увидел то вернул всё обратно ...

щас ещё раз попробую

чёт не канает

конечно не канает, если стили не заменил как я писал в последнем сообщении http://forum.dle-new...ndpost&p=333971

и не говори, что менял, перед тем как писать код, я его проверил. Всё отлично работает. И в стилях у тебя не тот код, и код в relatednews.tpl не тот, что я писал.

да ты был прав просто косяк в этом коде

.full-news h1 {

font: 22px Verdana;

color: #151515;

line-height: 27px;

margin: 0 0 10px 0;

font-weight: normal;

}

.full-news-content {

color: #555555;

line-height: 18px;

font-size: 13px;

}

.full-news-content img {

margin: 10px 0;

max-width: 680px;

padding: 3px;

background: #fff;

box-shadow: #dddddd 0px 0px 6px 0px;

border-radius: 3px;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

}

.full-news-content a {

color: #000;

font-weight: bold;

}

.full-news-content a:hover {

text-decoration: underline;

}

.full-news-info{

border-top: 2px solid #b2b2b2;

padding: 5px 0 0 0;

font: 11px Arial;

color: #313131;

}

.full-news-info a{

color: #2966a3;

text-decoration: underline;

}

.full-news-info a:hover{

text-decoration: none;

}

чтобы картинки и текст выровнять

binner карявый пришлось это делать(( и как видно эти файлы конфликтуют=)

[odys 384]

.full-news-content img {

margin: 10px 0;

max-width: 680px;

padding: 3px;

background: #fff;

box-shadow: #dddddd 0px 0px 6px 0px;

border-radius: 3px;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

}

проблема из-за того, что такое написание: .full-news-content img означает для всех картинок, которые расположены в <div class="full-news-content"></div>. Так не делается, вернее делается, но не в твоём случае.

[Minibuka 0]

.full-news-content img {

margin: 10px 0;

max-width: 680px;

padding: 3px;

background: #fff;

box-shadow: #dddddd 0px 0px 6px 0px;

border-radius: 3px;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

}

проблема из-за того, что такое написание: .full-news-content img означает для всех картинок, которые расположены в <div class="full-news-content"></div>. Так не делается, вернее делается, но не в твоём случае.

ну я вообще и хотел выровнять шрифт и картинки, т.е я в fullstory сделал так

{poll}

<div class="base">

<div class="bheading">

  <div class="full-news">

	 [rating]<div class="ratebox"><div class="rate">{rating}</div></div>[/rating]

   <span class="isicons"><span>[complaint]<img src="{THEME}/images/complaint.png" title="Сообщить о ошибке" alt="Сообщить о ошибке"/>[/complaint]</span><span>{favorites}</span>[edit]<span>Редактировать</span>[/edit]</span>

   <h3 class="btl"><span id="news-title">{title}</span></h3>

   <div class="hinfo">

			    <span><img class="iview" src="{THEME}/images/spacer.gif" alt="" />Просмотров: {views} </span>

    <span><img class="icom" src="{THEME}/images/spacer.gif" alt="" />Комментариев: {comments-num}</span>

    <span><img class="icat" src="{THEME}/images/spacer.gif" alt="" />Раздел: {link-category}</span>

   </div>

  </div>

</div>

<div class="full-news-content">

  <div class="maincont">

  {full-story}

<!--<br /><b>Не забудьте поделиться с друзьями:</b><br />

<script type="text/javascript">(function() {

  if (window.pluso)if (typeof window.pluso.start == "function") return;

  if (window.ifpluso==undefined) { window.ifpluso = 1;

    var d = document, s = d.createElement('script'), g = 'getElementsByTagName';

    s.type = 'text/javascript'; s.charset='UTF-8'; s.async = true;

    s.src = ('https:' == window.location.protocol ? 'https' : 'http')  + '://share.pluso.ru/pluso-like.js';

    var h=d[g]('body')[0];

    h.appendChild(s);

  }})();</script>!-->

<div xmlns="http://www.w3.org/1999/xhtml" data-services="vkontakte,odnoklassniki,facebook,twitter,google,moimir,email,print" data-options="medium,square,line,horizontal,counter,theme=03" data-background="transparent" class="pluso"></div>

<div class="clr"></div>

[edit-date]<p class="editdate"><br /><i>Новость отредактировал: <b>{editor}</b> - {edit-date}

<br />[edit-reason]Причина: {edit-reason}[/edit-reason]</i></p>[/edit-date]

[tags]<br /><p class="basetags"><i>Теги: {tags}</i></p>[/tags]

  </div>

<br /><b>Ознакомьтесь с другими проектами:</b><br />

<div class="hsep">&nbsp;</div>

<ul class="related-news">{related-news}</ul>

<span class="argback"><a href="javascript:history.go(-1)" title="Назад"><strong>Вернуться</strong></a></span>

<div class="hsep">&nbsp;</div>

[group=5]

<div class="binner">

<div class="errors">Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.<br/>

	 Мы рекомендуем Вам <a href="/index.php?do=register">зарегистрироваться</a> либо войти на сайт под своим именем.</div>

</div>

[/group]

</div>

{addcomments}

{comments}

{navigation}

[Minibuka 0]

в общем чуть подлатал осталось только с текстом разобраться чтобы не вылазил за фотку

[odys 384]

.related-news li[/CODE]

задай фиксированную ширину, как у картинок и всё

[Minibuka 0]

.related-news li[/CODE]

задай фиксированную ширину, как у картинок и всё

не получается коряво выходит ((

[odys 384]

не получается коряво выходит ((

зашел на сайт, открыл .css файл и там я не вижу чтобы ты что-либо прописал в

related-news li[/CODE]

[Minibuka 0]

не получается коряво выходит ((

зашел на сайт, открыл .css файл и там я не вижу чтобы ты что-либо прописал в

related-news li[/CODE]

бле я откатываю её когда не работает =) щас

[alex32 942]

задай фиксированную ширину, как у картинок и всё

и высоту тоже, а то так и будет корежить

[Minibuka 0]

задай фиксированную ширину, как у картинок и всё

и высоту тоже, а то так и будет корежить

я задаю не получается короче костыли придумываю

[odys 384]

я задаю не получается короче костыли придумываю

тебе не костыли нужны, а знания!

Замени весь .css на этот

.related-news {

    list-style:none;

    padding:0;

    margin:0 0 0 -10px;

    *zoom:1;

}

.related-news:before,

.related-news:after {

    display:table;

    line-height:0;

    content: "";

}

.related-news:after {

    clear:both;

}

.related-news li {

    width:207px;

    float: left;

    min-height: 1px;

    margin-left: 10px;

    margin-bottom:10px;

    display:-moz-inline-stack;

    display:inline-block;

    float:none !important;

    vertical-align:top;

    zoom: 1;

    *display: inline;

    _height:150px;

}

.related-news li img {

    width: 207px;

    height: 140px;

    border: 3px solid #d6d6d6;

    overflow: hidden;

}

.related-news li a {font-size:9pt;}   

[Minibuka 0]

я задаю не получается короче костыли придумываю

тебе не костыли нужны, а знания!

Замени весь .css на этот

.related-news {

	list-style:none;

	padding:0;

	margin:0 0 0 -10px;

	*zoom:1;

}

.related-news:before,

.related-news:after {

	display:table;

	line-height:0;

	content: "";

}

.related-news:after {

	clear:both;

}

.related-news li {

	width:207px;

	float: left;

	min-height: 1px;

	margin-left: 10px;

	margin-bottom:10px;

	display:-moz-inline-stack;

	display:inline-block;

	float:none !important;

	vertical-align:top;

	zoom: 1;

	*display: inline;

	_height:150px;

}

.related-news li img {

	width: 207px;

	height: 140px;

	border: 3px solid #d6d6d6;

	overflow: hidden;

}

.related-news li a {font-size:9pt;}   

спасибо большое !

но теперь нет пробела между картинками