Minibuka 0 Опубликовано: 31 октября 2014 Рассказать Опубликовано: 31 октября 2014 (изменено) В общем, хочу сделать чтобы похожие новости выводились с картинками, но не в столбец, а в строку.. помогите отредактировать... сейчас выглядит так <li><a href="{link}">{title}</a></li> <img align="left" width="100px" src="{image-1}"><br clear="all" /> Изменено 31 октября 2014 пользователем Minibuka Цитата Ссылка на сообщение Поделиться на других сайтах
odys 384 Опубликовано: 31 октября 2014 Рассказать Опубликовано: 31 октября 2014 (изменено) помогите отредактировать... в .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 1 Цитата Ссылка на сообщение Поделиться на других сайтах
Minibuka 0 Опубликовано: 31 октября 2014 Рассказать Опубликовано: 31 октября 2014 (изменено) Автор помогите отредактировать... в .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"> </div> исход Изменено 31 октября 2014 пользователем Minibuka Цитата Ссылка на сообщение Поделиться на других сайтах
odys 384 Опубликовано: 31 октября 2014 Рассказать Опубликовано: 31 октября 2014 у меня выравнивает картинкину так что мешает для картинок прописать условие, чтобы они все были одного размера? .related-news li img отвечает за картинку, настраивай как душе угодно. И да, в твоём варианте всё поплыло, кнопка «вернуться» вверх ускакала, полоса, которая идёт по низу, прилипла с слева...всё гуд сам разобрался, но всё равно спасибону-ну, я вижу. Или мои 2 строчки, или твои хренова туча, плюс ко всему в IE поплывёт всё... Цитата Ссылка на сообщение Поделиться на других сайтах
Minibuka 0 Опубликовано: 1 ноября 2014 Рассказать Опубликовано: 1 ноября 2014 (изменено) Автор у меня выравнивает картинкину так что мешает для картинок прописать условие, чтобы они все были одного размера? .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 Опубликовано: 1 ноября 2014 Рассказать Опубликовано: 1 ноября 2014 (изменено) ошибка такая: если название новости короткая то норм, а если длинная то вот что получается.. и точки желательно убрать а поставить картинку=)это не ошибка, а не внимательность. У тебя заголовок за пределами списка <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 Опубликовано: 1 ноября 2014 Рассказать Опубликовано: 1 ноября 2014 Автор ошибка такая: если название новости короткая то норм, а если длинная то вот что получается.. и точки желательно убрать а поставить картинку=)это не ошибка, а не внимательность. У тебя заголовок за пределами списка <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 Опубликовано: 1 ноября 2014 Рассказать Опубликовано: 1 ноября 2014 (изменено) чёт не канаетконечно не канает, если стили не заменил как я писал в последнем сообщении http://forum.dle-new...ndpost&p=333971 и не говори, что менял, перед тем как писать код, я его проверил. Всё отлично работает. И в стилях у тебя не тот код, и код в relatednews.tpl не тот, что я писал. Изменено 1 ноября 2014 пользователем odys Цитата Ссылка на сообщение Поделиться на других сайтах
Minibuka 0 Опубликовано: 1 ноября 2014 Рассказать Опубликовано: 1 ноября 2014 Автор чёт не канаетконечно не канает, если стили не заменил как я писал в последнем сообщении 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 Опубликовано: 1 ноября 2014 Рассказать Опубликовано: 1 ноября 2014 .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 Опубликовано: 2 ноября 2014 Рассказать Опубликовано: 2 ноября 2014 Автор .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"> </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"> </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 Опубликовано: 2 ноября 2014 Рассказать Опубликовано: 2 ноября 2014 Автор в общем чуть подлатал осталось только с текстом разобраться чтобы не вылазил за фотку Цитата Ссылка на сообщение Поделиться на других сайтах
odys 384 Опубликовано: 2 ноября 2014 Рассказать Опубликовано: 2 ноября 2014 .related-news li[/CODE]задай фиксированную ширину, как у картинок и всё Цитата Ссылка на сообщение Поделиться на других сайтах
Minibuka 0 Опубликовано: 2 ноября 2014 Рассказать Опубликовано: 2 ноября 2014 Автор .related-news li[/CODE]задай фиксированную ширину, как у картинок и всё не получается коряво выходит (( Цитата Ссылка на сообщение Поделиться на других сайтах
odys 384 Опубликовано: 2 ноября 2014 Рассказать Опубликовано: 2 ноября 2014 не получается коряво выходит ((зашел на сайт, открыл .css файл и там я не вижу чтобы ты что-либо прописал в related-news li[/CODE] Цитата Ссылка на сообщение Поделиться на других сайтах
Minibuka 0 Опубликовано: 2 ноября 2014 Рассказать Опубликовано: 2 ноября 2014 Автор не получается коряво выходит ((зашел на сайт, открыл .css файл и там я не вижу чтобы ты что-либо прописал в related-news li[/CODE] бле я откатываю её когда не работает =) щас Цитата Ссылка на сообщение Поделиться на других сайтах
alex32 942 Опубликовано: 2 ноября 2014 Рассказать Опубликовано: 2 ноября 2014 задай фиксированную ширину, как у картинок и всё и высоту тоже, а то так и будет корежить Цитата Ссылка на сообщение Поделиться на других сайтах
Minibuka 0 Опубликовано: 2 ноября 2014 Рассказать Опубликовано: 2 ноября 2014 Автор задай фиксированную ширину, как у картинок и всё и высоту тоже, а то так и будет корежить я задаю не получается короче костыли придумываю Цитата Ссылка на сообщение Поделиться на других сайтах
odys 384 Опубликовано: 2 ноября 2014 Рассказать Опубликовано: 2 ноября 2014 я задаю не получается короче костыли придумываю тебе не костыли нужны, а знания! Замени весь .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 Опубликовано: 3 ноября 2014 Рассказать Опубликовано: 3 ноября 2014 Автор я задаю не получается короче костыли придумываю тебе не костыли нужны, а знания! Замени весь .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;} спасибо большое ! но теперь нет пробела между картинками Цитата Ссылка на сообщение Поделиться на других сайтах
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.