Здравствуйте, суть следующая, есть 2 блока в конце каждой статьи "Реклама от яндекса" и "Похожие темы" нужно подогнать по стилю блок "похожие темы" под блок "Реклама яндекс" что бы выглядело как один блок.
Кто чем сможет помочь, помогите.
В данной случае рассматриваю эту страницу http://gaz-autoclub.ru/lifegaz/2015/08/ ... hitelnaya/ внизу.
Изображение
Комментарии: 47

solo 07 авг 2019, 00:22 Сообщение

Спасибо, получилось
  • 0

solo 07 авг 2019, 00:29 Сообщение

Ещё одна загвоздка. На другой страничке https://potolokroom.ru/vidy/ стоят два блока с фото.
Вопросик: правильно ли я прописал код html для блока и стили css??
И второе: при уменьшении экрана браузера все начинает ломаться.
Помогите пожалуйста!
Заранее спасибо.
  • 0

CabinetAdmin 07 авг 2019, 11:51 Сообщение

Ломается, потому что для блоков указанны фиксированные размеры:

Код: Выделить всё

.vies{
  font-family: sans-serif;
  width: 300px;
  height: 186px;
  border: 10px solid transparent;
  box-shadow:  1px 1px  8px rgba(170, 170, 170, 0.49);
  /* Обязательные условия*/
  position: relative;
  overflow: hidden;
}
и здесь:

Код: Выделить всё

.vies .mask{
  width: 300px;
  height:186px;
  text-align: center;
  /* Обязательные условия*/
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
}
если поменять размеры width и height на auto. У .vies .mask у width сделать 100%.
Плюс для изображения надо задать 100% ширину...

В общем если смотреть весь код, то так:

Код: Выделить всё

.vies {
	font-family: sans-serif;
	width: auto;
	height: auto;
	border: 10px solid transparent;
	box-shadow:  1px 1px  8px rgba(170, 170, 170, 0.49);
	/* Обязательные условия*/
	position: relative;
	overflow: hidden;
}
a {
	display:block;
}
.mask h2 {
	color: #4b4848;
	font-size: 13px;
	font-weight: 400;
	line-height: 40px;
	letter-spacing:1px;
	margin-top: 10px;
	padding: 0 5px;
	text-transform: uppercase;
	text-shadow: 1px 1px 1px #0d0a0b;
	background: rgba(248, 194, 71, 0.6);
}
.vies .mask {
	width: 100%;
	height: auto;
	text-align: center;
	/* Обязательные условия*/
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
}
.vies img {
	transition: all ease-in .5s;
	margin-bottom: 0;
	width: 100%;
}
.vies:hover img {
	box-shadow: 3px 3px 5px #000;
	transform: scale(1.5, 1.5);
}
Вот так всё будут работать как надо.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!