Страница 1 из 11
Форум про uCoz » Создание сайта на uCoz » Вопросы по uCoz » Расположение фотографий в информере
Расположение фотографий в информере
trem200
Дата: Вторник, 14.02.2017, 17:15 | Сообщение # 1
Проверенные
Сообщений:374
Награды: 3


Я решил рипнуть с одного сайта информер фотографий, так как выглядит очень красиво, но при рипе у меня возникла проблема, я ни как не могу разместить все картинки как на сайте. Если, что внизу скриншот как по идее должен выглядеть информер.



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



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

stalker-network.ru
Прикрепления: 4293117.png(123Kb) · 4034527.png(123Kb)
Страна: (RU)
trem200
Дата: Вторник, 14.02.2017, 17:16 | Сообщение # 2
Проверенные
Сообщений:374
Награды: 3




Вот как должен выглядит информер, накосячил при создание темы.
Прикрепления: 5191593.png(209Kb)
Страна: (RU)
Nikas
Дата: Вторник, 14.02.2017, 17:24 | Сообщение # 3
Проверенные
Сообщений:223
Награды: 3


в 2 колонки поставь в информере

Страна: (UA)
trem200
Дата: Вторник, 14.02.2017, 17:26 | Сообщение # 4
Проверенные
Сообщений:374
Награды: 3


Цитата Nikas ()
в 2 колонки поставь в информере


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

Прикрепления: 5451223.png(209Kb)
Страна: (RU)
Сопрано
Дата: Вторник, 14.02.2017, 17:49 | Сообщение # 5
Пользователи
Сообщений:413
Награды: 2


trem200, а что информер не скинуть?
Страна: (RU)
trem200
Дата: Вторник, 14.02.2017, 17:56 | Сообщение # 6
Проверенные
Сообщений:374
Награды: 3


Сопрано,

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

Код
<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.02.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.02.2017, 09:11 | Сообщение # 8
Проверенные
Сообщений:374
Награды: 3


kldou24, данный информер нормально смотрится на мобильнике

Прикрепления: 2619506.png(171Kb)
Страна: (RU)
kldou24
Дата: Среда, 15.02.2017, 10:02 | Сообщение # 9
Пользователи
Сообщений:39
Награды: 0


trem200, у меня нет...Ты по какому коду ставил?
Прикрепления: 2727812.png(186Kb)
Страна: (RU)
trem200
Дата: Среда, 15.02.2017, 10:18 | Сообщение # 10
Проверенные
Сообщений:374
Награды: 3


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)
Форум про uCoz » Создание сайта на uCoz » Вопросы по uCoz » Расположение фотографий в информере
Страница 1 из 11
Поиск: