• Страница 1 из 1
  • 1
Модератор форума: -SAM-  
Расположение фотографий в информере
trem200
Вторник, 14 Февраля 2017, 17:15 | Сообщение 1
Оффлайн
Проверенные
Сообщений:433
Награды: 4
Я решил рипнуть с одного сайта информер фотографий, так как выглядит очень красиво, но при рипе у меня возникла проблема, я ни как не могу разместить все картинки как на сайте. Если, что внизу скриншот как по идее должен выглядеть информер.



А у меня получилось так.



Вот сайт с которого я рипал данный простой вид материала 11a

stalker-network.ru
Прикрепления: 4293117.png (122.8 Kb) · 4034527.png (122.8 Kb)
Страна: (RU)
trem200
Вторник, 14 Февраля 2017, 17:16 | Сообщение 2
Оффлайн
Проверенные
Сообщений:433
Награды: 4


Вот как должен выглядит информер, накосячил при создание темы.
Прикрепления: 5191593.png (209.4 Kb)
Страна: (RU)
Nikas
Вторник, 14 Февраля 2017, 17:24 | Сообщение 3
Оффлайн
Проверенные
Сообщений:229
Награды: 3
в 2 колонки поставь в информере
Страна: (FR)
trem200
Вторник, 14 Февраля 2017, 17:26 | Сообщение 4
Оффлайн
Проверенные
Сообщений:433
Награды: 4
Цитата Nikas ()
в 2 колонки поставь в информере


Мне хочется, чтобы выглядело так, но я не знаю как это сделать

Прикрепления: 5451223.png (209.4 Kb)
Страна: (RU)
Сопрано
Вторник, 14 Февраля 2017, 17:49 | Сообщение 5
Оффлайн
Vip
Сообщений:461
Награды: 4
trem200, а что информер не скинуть?
Страна: (RU)
trem200
Вторник, 14 Февраля 2017, 17:56 | Сообщение 6
Оффлайн
Проверенные
Сообщений:433
Награды: 4
Сопрано,

Код информера

Код
<td class="infTd" width="33%">
<div class="phot">
<a href="$PHOTO_URL$"><img style="margin:0;padding:0;border:0;" src="$FULL_PHOTO_DIRECT_URL$"></a>
</div>
</td>


Код CSS

Код
.phot{
padding:2px ;
border: 1px solid #000; border-radius: 8px;box-shadow: 0px 0px 6px 2px #000000;
max-width: 137px;
height:87px;
}
.phot img {
border-radius: 8px;
width:137px;
height:87px;
opacity:0.6;
-moz-opacity:0.6;
filter: alpha(opacity=10) black;
-khtml-opacity: 0.6;
}

.phot img:hover {
border-radius: 8px;
width:137px;
height:87px;
opacity:1;
-moz-opacity:1;
filter: alpha(opacity=100) black;
-khtml-opacity: 1;
}
Страна: (RU)
kldou24
Среда, 15 Февраля 2017, 08:21 | Сообщение 7
Оффлайн
Пользователи
Сообщений:39
Награды: 0
trem200, выбери материалов 10,колонок 5.Код информера:<div align="center"><div class="phot"><a href="$PHOTO_URL$"><img style="margin:0;padding:0;border:0;" src="$FULL_PHOTO_DIRECT_URL$"></a>
</div>

Добавлено (15.02.2017, 07:21)
---------------------------------------------
trem200, css
/*************************/
.phot{
padding:2px ;
border: 1px solid #000; border-radius: 8px;box-shadow: 0px 0px 6px 2px #000000;
max-width: 150px;
height:100px;
}
.phot img {
border-radius: 8px;
width:150px;
height:100px;
opacity:0.6;
-moz-opacity:0.6;
filter: alpha(opacity=10) black;
-khtml-opacity: 0.6;
}

.phot img:hover {
border-radius: 8px;
width:150px;
height:100px;
opacity:1;
-moz-opacity:1;
filter: alpha(opacity=100) black;
-khtml-opacity: 1;
}
/********************************/

Добавлено (15.02.2017, 07:25)
---------------------------------------------
trem200,

Добавлено (15.02.2017, 08:21)
---------------------------------------------
Вот бы адаптировать его.Пробовал не фига неполучается. Может кто-то адаптирует его под мобилу?.... 04b

Страна: (RU)
trem200
Среда, 15 Февраля 2017, 09:11 | Сообщение 8
Оффлайн
Проверенные
Сообщений:433
Награды: 4
kldou24, данный информер нормально смотрится на мобильнике

Прикрепления: 2619506.png (171.1 Kb)
Страна: (RU)
kldou24
Среда, 15 Февраля 2017, 10:02 | Сообщение 9
Оффлайн
Пользователи
Сообщений:39
Награды: 0
trem200, у меня нет...Ты по какому коду ставил?
Прикрепления: 2727812.png (186.3 Kb)
Страна: (RU)
trem200
Среда, 15 Февраля 2017, 10:18 | Сообщение 10
Оффлайн
Проверенные
Сообщений:433
Награды: 4
kldou24, по этому коду

Код
<div class="phot">
<a href="$PHOTO_URL$"><img style="margin:0;padding:0;border:0;" src="$FULL_PHOTO_DIRECT_URL$"></a>
</div>


Код

.phot{
padding:2px ;
border: 1px solid #000; border-radius: 8px;box-shadow: 0px 0px 6px 2px #000000;
max-width: 137px;
height:87px;

}
.phot img {
border-radius: 8px;
width:137px;
height:87px;
opacity:0.6;
-moz-opacity:0.6;
filter: alpha(opacity=10) black;
-khtml-opacity: 0.6;
}

.phot img:hover {
border-radius: 8px;
width:137px;
height:87px;
opacity:1;
-moz-opacity:1;
filter: alpha(opacity=100) black;
-khtml-opacity: 1;
}
.ph-inf img {
float: left;
width: 150px;
padding: 3px;
border-radius: 3px;
}
Страна: (RU)
  • Страница 1 из 1
  • 1
Поиск: