Картинка в короткой новости

Vlad888 · 2 августа 2008

Ужасно выглядит когда в короткой новости правее от картинки идёт текст. Получается так что нет никакого промежутка, т.е. текст вплотную клеится к картинке. На многих сайтах вижу такую ерунду и в коротких и в полных новостях.

Для полной новости я выход нашел для себя. А вот с короткими новостями ничего не получается. Может кто подскажет?

<tr><td align="left" valign="top" bgcolor="#F8F8F8" class="news"><span style="font-weight: bold; color: rgb(153, 0, 0);"><b>{title}{approve}</b></span>

<div align="right">[edit]<img src="{THEME}/images/edit.png" border="0" align="absmiddle" title = "Редактировать объявление">[/edit] {favorites} автор: <strong>{author}</strong> <img src="{THEME}/images/icon.gif" align="absmiddle" border="0" /> {date} <img src="{THEME}/images/icon.gif" align="absmiddle" border="0" /> просмотров: {views}</div><br />

{short-story}

[xfgiven_gorog]       <b>Город:</b>    [xfvalue_gorog] [/xfgiven_gorod]<br /><table width="100%" cellspacing="0" cellpadding="0" class="blocdown"> <tr> <td align="left">{rating}</td> <td align="right">[com-link]<img src="{THEME}/images/icon.gif" align="absmiddle" border="0" /> Комментарии ({comments-num})[/com-link]  [full-link]<img src="{THEME}/images/icon.gif" align="absmiddle" border="0" /><strong> Читать объявление</strong>[/full-link]</td></tr> </table></td></tr></table>

Как здесь перед --> {short-story} вставить изображение --> [xfgiven_img001] <img style="width: 111px; height: px;" alt="" src="[xfvalue_img001]"> [/xfgiven_img001]

Что бы текст не в плотную был с картинкой, т е. как промежуток сделать ~10px.

Пожалуйста подскажите

empirator · 3 августа 2008

В style.css

.news img {margin: 10px;}

Vlad888 · 3 августа 2008

Спасибо огромное за подсказку. Таким образом видимо можно решить и многие другие вопросы.

Только пока не могу разобраться заменить что-либо этим в style.css или дописать там куда-то это.

Если на сайте добавляются все новости только самим админом, то конечно таких проблем нету, а у меня всё публикуется только посетителями и многие из которых понятия не имеют о разных наваротах. В ДЛЕ7,0 если посетитель добавляя новость хочет вставить загрузив картинку ,то всплывает куча сложностей и лишь некоторые умудряются загрузить/вставить изображение. Проблема в том ,что сложно всё очень, возможно многие нашли как и что переделать т.е. упростить. Я смог сделать лишь вот что: вставил дополнительные поля в которые посетители добавляя новость вставляют URL адрес изображения. Изображения появляются в полной новости где я вставил таблицу:

<table style="width: 100%; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="3" cellspacing="0"><tr><td style="white-space: nowrap; text-align: center;">[xfgiven_img001]       <b>Изображение 1:</b> <br /><img style="width: 230px; height: px;" alt="" src="[xfvalue_img001]"> [/xfgiven_img001]</td><td style="text-align: center; white-space: nowrap;">[xfgiven_img002]       <b>Изображение 2:</b> <br /><img style="width: 230px; height: px;" alt="" src="[xfvalue_img002]"> [/xfgiven_img002]</td><td style="text-align: center; white-space: nowrap;"> [xfgiven_img003]       <b>Изображение 3:</b> <br /><img style="width: 230px; height: ;" alt="" src="[xfvalue_img003]"> [/xfgiven_img003]</td></tr></table>

Таким же образом хотел первое изображение добавить в короткую новость, но вставив в таблицу {short-story} у меня стиль текста меняется, а какой здесь стоит типа по умолчанию не врубаюсь.

Хочется надеяться что с такой ерундой не придётся столкнуться в ДЛЕ7.2

EzS · 4 августа 2008

Хочется надеяться что с такой ерундой не придётся столкнуться в ДЛЕ7.2

Это не ерунда, а отсутствие базовых знаний по CSS

Vlad888 · 5 августа 2008

..... каждому своё .....

Elektro · 16 ноября 2008

В style.css
.news img {margin: 10px;}

Поставил Ваш "способ", НЕ работает! Подскажите пожалуйста решение проблемы.... чтобы в глобальных настройках скрипта задать такие параметры, как: hspace="30" vspace="20", чтобы картинки в обеих новостях (короткой и полной) "отлипли" от текста! Заранее большое спасибо!

Archi2 · 15 января 2009

.news img {margin: 10px;}

все работает!

empirator · 15 января 2009

Поставил Ваш "способ", НЕ работает! Подскажите пожалуйста решение проблемы.... чтобы в глобальных настройках скрипта задать такие параметры, как: hspace="30" vspace="20", чтобы картинки в обеих новостях (короткой и полной) "отлипли" от текста! Заранее большое спасибо!

Это конкретное решение.

Вы должны вместо .news подставить класс того элемента, куда вставляется картинка.

Пример:

tpl

<div class="myclass">{short-story}</div>

<div class="myclass">{full-story}</div>

css

.myclass img {margin:...;}

Изменено 15 января 2009 пользователем empirator

Ozels · 21 января 2009

Поставил Ваш "способ", НЕ работает! Подскажите пожалуйста решение проблемы.... чтобы в глобальных настройках скрипта задать такие параметры, как: hspace="30" vspace="20", чтобы картинки в обеих новостях (короткой и полной) "отлипли" от текста! Заранее большое спасибо!
Это конкретное решение.
Вы должны вместо .news подставить класс того элемента, куда вставляется картинка.
Пример:
tpl
<div class="myclass">{short-story}</div>
<div class="myclass">{full-story}</div>
css
.myclass img {margin:...;}

Спасибо огромное !!! Все работает !!!

.myclass img {margin-right: 7px;}

baxus · 23 января 2009

Это всё можно сделать намного проще... в самый низ style.css добавить

div#images img[align="right"] {margin-left: 7px}

div#images img[align="left"] {margin-right: 7px}

7px - опционально

veb74 · 28 апреля 2009

В style.css
.news img {margin: 10px;}

Этот способ работает. Только развигаются все картинки (значки в меню)

Фрагмент файла shortstory.tpl

<td align="left" valign="top" bgcolor="#F8F8F8" class="news"><div align="right">[edit]<img src="{THEME}/images/edit.png" border="0" align="absmiddle" title = "Редактировать новость">[/edit] {favorites} автор: <strong>{author}</strong> <img src="{THEME}/images/icon.gif" align="absmiddle" border="0" /> {date} <img src="{THEME}/images/icon.gif" align="absmiddle" border="0" /> просмотров: {views}</div><br /> {short-story}<br />

Подскажите в какое место вставить в файл css этот фрагмент .news img {margin: 10px;}

body {

	background: #E9EFF5;

	color: #000000;

	margin: 0;

	padding: 0;

	font: 11px Arial, Helvetica, sans-serif;

}


a {

	color: #3C6491;

	background-color: inherit;

	text-decoration: none;

}


a:hover {

	color: #BF3E17;

	background-color: inherit;

}

.heder	   {

	font: italic bold 14px Arial, Helvetica, sans-serif;

	color: #B5DAF0;

	background: #6AA6CC url(../images/h_fon.jpg) repeat;

	border-bottom: 2px solid #3C6491;

}

.heder a {

	color: #3C6491;

	background-color: inherit;

	text-decoration: none;

}


.heder a:hover {

	color: #fff;

	background-color: inherit;

}

.fut	  {

	font:  bold 11px Georgia, "Times New Roman", Times, serif;

	color: #B5DAF0;

	background: #6AA6CC url(../images/f-fut.jpg) repeat;

	border-bottom: 2px solid #3C6491;

}

.fut a {

	color: #2E4D6D;

	background-color: inherit;

	text-decoration: none;

}


.fut a:hover {

	color: #fff;

	background-color: inherit;

}

.srt	  {

	color: #003859;

	height: 18px;

	padding-left: 3px;

	border: 1px solid #003859;

	font: bold 11px/18px tahoma;

	width: 180px;

}


#hmenu { 

	float: center;

}


#hmenu a {

	text-decoration: none;

	color: #FFFFFF;

	background: url(../images/tbut_on.jpg) no-repeat center top;

	display: block;

	height: 24px;

	width: 100px;

	text-align: center;

	font: bold 10px/24px tahoma, Times, serif;

}


#hmenu a:hover {

	background: #ccc url(../images/tbut_off.jpg) no-repeat top center;

	display: block;

	height: 24px;

	width: 100px;

	color: #A0C6DE;

}

.blockmenu								{height:22px; width: 100%;}

.blockmenu a:link,

.blockmenu a:visited					   {color:#222; background-color:#edecec; text-decoration:none;

										   padding-left:12px; line-height:22px; display:block; font-weight:bold;

										   border-bottom:1px solid #dad9d9;}

.blockmenu a:hover						 {

	color:#B90000;

	text-decoration:none;

	padding-left:12px;

	line-height:22px;

	display:block;

	font-weight:bold;

	border-bottom:1px solid #dad9d9;

	background: #f9f9f9 url(../images/icon.gif) no-repeat left center;

}


.cf2  {

	border-top: 1px solid #DFDFDF;

	border-bottom: 4px solid #DFDFDF;

	font: bold 12px Arial, Helvetica, sans-serif;

	color: #FFF;

	text-align: left;

	background: url(../images/title_rvfr.jpg) no-repeat;

	height: 37px;

	width: 250px;

	text-indent: 12px;

	border-right: 1px solid #DFDFDF;

	border-left: 1px solid #DFDFDF;

	padding-bottom: 7px;

	padding-top: 3px;

}

.cf4  {

	padding: 9px;

	font: 11px Arial, Helvetica, sans-serif;

	text-align: justify;

	border-right: 1px solid #DFDFDF;

	border-bottom: 4px solid #DFDFDF;

	border-left: 1px solid #DFDFDF;

}

.cf5  {

	border-top: 1px solid #DFDFDF;

	border-right: 1px solid #DFDFDF;

	border-bottom: 4px solid #DFDFDF;

	border-left: 1px solid #DFDFDF;

	background: url(../images/hd_f.jpg) repeat;

	font: bold 12px Arial, Helvetica, sans-serif;

	color: #BFFFFF;

	text-align: center;

}


.titleblock  {

	border-top: 1px solid #DFDFDF;

	border-right: 1px solid #DFDFDF;

	border-bottom: 4px solid #DFDFDF;

	border-left: 1px solid #DFDFDF;

	background: url(../images/title_rvf.jpg) repeat;

	text-indent: 12px;

	font: bold 12px Arial, Helvetica, sans-serif;

	color: #757575;

}

.blocdown  {

	font: bold 11px Arial, Helvetica, sans-serif;

	color: #757575;

}

.news  {

	padding: 12px;

	font: 11px Arial, Helvetica, sans-serif;

	text-align: justify;

	color: #333;

	border-right: 1px solid #DFDFDF;

	border-bottom: 4px solid #DFDFDF;

	border-left: 1px solid #DFDFDF;

}

.news a {

	color: #3C6491;

	background-color: inherit;

	text-decoration: none;

}


.news a:hover {

	color: #BF3E17;

	background-color: inherit;

}

.stcenter {

		color: #333;

	font: 11px Arial, Helvetica, sans-serif;

	text-align: justify;

}

.stcenter a {

	color: #3C6491;

	background-color: inherit;

	text-decoration: none;

}


.stcenter a:hover {

	color: #BF3E17;

	background-color: inherit;

}

.speedbar   {

		background: #FFFFFF;

	font: bold 12px Arial, Helvetica, sans-serif;

	color: #757575;

	padding: 7px 12px;

	border-top: 2px solid #DFDFDF;

	border-right: 1px solid #DFDFDF;

	border-bottom: 4px solid #DFDFDF;

	border-left: 1px solid #DFDFDF;

}

.f_input {

	color: #333;	

	font-size: 11px;	

	font-family: tahoma;

	text-indent: 7px;

	background: #FFFFFF;

	width: 180px;

	height: 18px;

	border: 1px solid #6AA6CC;

}

.f_textarea {

	color: #333;	

	font-size: 11px;	

	font-family: tahoma;

	background: #FFFFFF;	

	width: 459px;

	height: 156px;

	border: 1px solid #6AA6CC;

}

.userstop {

	color: #333;

	font-size: 11px;		

	font-family: tahoma;	

	text-decoration: none;

}

.userstop a {

	color: #4B73D4;

	text-decoration: none;

}

.userstop a:hover {

	color: #910000;

	text-decoration: none;

}

.userstop td {

	padding: 3px;

}

.userstop thead {

	color: #757575;

	font-weight: bold;

}

/*  navigation   */

.navigation {

	color:#fff; 

	border:0px;

	padding:2px 4px;

}


.navigation a:link,

.navigation a:visited,

.navigation a:hover,

.navigation a:active {

	text-decoration:none;

	color: #6AA6CC;

	background:#BED8E9;

	border:1px solid #6AA6CC;

	padding:2px 4px;

	font-size:10px

}


.navigation a:hover {

	background:#6AA6CC;

	color:#BED8E9;

	border-color:#BED8E9;

}


.navigation span {

	text-decoration:none;

	background:#fff;

	padding:2px 4px;

	border:1px solid #BED8E9;

	color:#5498C5;

	font-size:10px;

}

PS и какой тег на форуме прячет сообщение [more] [cut] - не работают.

Изменено 28 апреля 2009 пользователем veb74

baxus · 29 апреля 2009

сразу после

.news  {

	padding: 12px;

	font: 11px Arial, Helvetica, sans-serif;

	text-align: justify;

	color: #333;

	border-right: 1px solid #DFDFDF;

	border-bottom: 4px solid #DFDFDF;

	border-left: 1px solid #DFDFDF;

}

А то что раздвигаются это неудивительно. У тебя класс news стоит на всю ячейку в которой находится шортстори... да и вообще какой то шортстори странный... не понимаю частью чего он является. Тоесть у тебя весь шортстори состоит из одной ячейки ... а таблица и строка сама в маин тпл? Глупо как-то. В общем class="news" нужно поставить на блок в котором тег short-story а на остальные блоки выставить другой класс

Картинка в короткой новости

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

Vlad888 0

Ссылка на сообщение

Поделиться на других сайтах

empirator 0

Ссылка на сообщение

Поделиться на других сайтах

Vlad888 0

Ссылка на сообщение

Поделиться на других сайтах

EzS 2

Ссылка на сообщение

Поделиться на других сайтах

Vlad888 0

Ссылка на сообщение

Поделиться на других сайтах

Elektro 0

Ссылка на сообщение

Поделиться на других сайтах

Archi2 0

Ссылка на сообщение

Поделиться на других сайтах

empirator 0

Ссылка на сообщение

Поделиться на других сайтах

Ozels 0

Ссылка на сообщение

Поделиться на других сайтах

baxus 49

Ссылка на сообщение

Поделиться на других сайтах

veb74 10

Ссылка на сообщение

Поделиться на других сайтах

baxus 49

Ссылка на сообщение

Поделиться на других сайтах

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