Поиск Реализовать подобное...

[yavasilek]

так я сейчас у меня есть немного времени, то вот держи работающий код(наверно, т.к. писал все в блокноте )))
Итак в краткую новость добавляем изображении размером 300 на 160 без превью!
Затем шаблон краткой новости приводим к виду:

<div class='main'>
    <div class="short">
      [full-link]
      <div class="title">
        <h1>{title}</h1>
        </div>
      [/full-link]
      [full-link]{short-story}[/full-link]
      <div>[com-link]Комментарии ({comments-num})[/com-link]  [full-link]Смотреть онлайн[/full-link]</div>
    </div>
</div>

ну а в файл стилей (style.css)

.main{
	width: 32%;
	float: left;
	margin-bottom:18px;
	margin-left:9px; 
}
.short img {
	border: solid 1px #000;
}
.short {
	position:relative;;
	margin: 0 4px 0 0;
}
.short h1 {
	position:absolute;
	float: left;
	font:Arial, Helvetica, sans-serif;
	font-size:11px;
	text-decoration: none;
	color:#FFF;
	left: 5px;
	top: 13px;
}
.short h1 a {
	position:absolute;
	float: left;
	font:Arial, Helvetica, sans-serif;
	font-size:12px;
	color: #FFF;
	text-decoration: none;
}
.title {
	opacity:0.7;
	position:absolute;
	height: 40px;
	width:302px;
	background:#000;
	left: 0px;
	top: 121px;
}
.short .img{
	position:absolute;
	opacity:0.7;
	font-size:11px;
	text-decoration: none;
	color:#FFF;
	left: 2px;
	top: 2px;
}

с тебя пиво и спасибо:az:

 

[Npix]

так я сейчас у меня есть немного времени, то вот держи работающий код(наверно, т.к. писал все в блокноте )))
Итак в краткую новость добавляем изображении размером 300 на 160 без превью!
Затем шаблон краткой новости приводим к виду:

<div class='main'>
    <div class="short">
      [full-link]
      <div class="title">
        <h1>{title}</h1>
        </div>
      [/full-link]
      [full-link]{short-story}[/full-link]
      <div>[com-link]Комментарии ({comments-num})[/com-link]  [full-link]Смотреть онлайн[/full-link]</div>
    </div>
</div>

ну а в файл стилей (style.css)

.main{
	width: 32%;
	float: left;
	margin-bottom:18px;
	margin-left:9px; 
}
.short img {
	border: solid 1px #000;
}
.short {
	position:relative;;
	margin: 0 4px 0 0;
}
.short h1 {
	position:absolute;
	float: left;
	font:Arial, Helvetica, sans-serif;
	font-size:11px;
	text-decoration: none;
	color:#FFF;
	left: 5px;
	top: 13px;
}
.short h1 a {
	position:absolute;
	float: left;
	font:Arial, Helvetica, sans-serif;
	font-size:12px;
	color: #FFF;
	text-decoration: none;
}
.title {
	opacity:0.7;
	position:absolute;
	height: 40px;
	width:302px;
	background:#000;
	left: 0px;
	top: 121px;
}
.short .img{
	position:absolute;
	opacity:0.7;
	font-size:11px;
	text-decoration: none;
	color:#FFF;
	left: 2px;
	top: 2px;
}

с тебя пиво и спасибо:az:

Работает, но нужно убрать [full-link]{short-story}[/full-link] инече будет текст накладываться. И еще такой вопрос, а что это за программа или тулбар Для просмотра ссылки Войди или Зарегистрируйся ?





П.П.С Первая трабла!

Для просмотра ссылки Войди или Зарегистрируйся

 

[lift]

П.П.С Первая трабла!

Высоту добавь в шортстори и будет тебе счастье.

 

[yavasilek]

трабла у тебя возникла потому что размеры изображений не такие как в оригинале. Добавь параметр min-height для блока.

 

[Npix]

Высоту добавь в шортстори и будет тебе счастье.

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

Подправь код пожалуйсят.

 

[yavasilek]

поменяй в коде на это

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

и добавь в css

.img{
min-height:162px;
}

162, т.к. 2а пикселя уходят на бордюр у изображения
должно получиться ))