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



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



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

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


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


Мне хочется, чтобы выглядело так, но я не знаю как это сделать
Прикрепления: 5451223.png (209.4 Kb)
Страна: (RU)
Сопрано
 		Вторник, 14 Февраля 2017 | Сообщение 5
Оффлайн
Vip
Сообщений:462
Награды: 4
« 14 »
trem200, а что информер не скинуть?
Страна: (RU)
trem200
 		Вторник, 14 Февраля 2017 | Сообщение 6
Оффлайн
Проверенные
Сообщений:433
Награды: 4
« 84 »
Сопрано,

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

Код
<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 | Сообщение 7
Оффлайн
Пользователи
Сообщений:39
Награды: 0
« 7 »
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 | Сообщение 8
Оффлайн
Проверенные
Сообщений:433
Награды: 4
« 84 »
kldou24, данный информер нормально смотрится на мобильнике

Прикрепления: 2619506.png (171.1 Kb)
Страна: (RU)
kldou24
 		Среда, 15 Февраля 2017 | Сообщение 9
Оффлайн
Пользователи
Сообщений:39
Награды: 0
« 7 »
trem200, у меня нет...Ты по какому коду ставил?
Прикрепления: 2727812.png (186.3 Kb)
Страна: (RU)
trem200
 		Среда, 15 Февраля 2017 | Сообщение 10
Оффлайн
Проверенные
Сообщений:433
Награды: 4
« 84 »
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 » Расположение фотографий в информере
  • Страница 1 из 1
  • 1
Поиск: