Сообщений в теме: 6

[ogonek7777]

Сайт
Помогите, пожалуйста, сделать следующее:
1. Выставить постоянную высоту места изображения и отцентровать картинку.
2. Выставить постоянный размер места для названия (для 3х строк) и центровать, если их 2 или 1.
3. Закрепить кнопки купить/подробнее и немного их раздвинуть. (возможно, предложите тему, где создание кнопок описано лучше, чем они выполнены сейчас).
Заранее большое спасибо!

[Vaccina]

Не совсем понимаю ваш вопрос, так как у вас, да и по умолчанию именно так все и сделано. Единственно можно сделать - в файле стилей

.goodsListItemImage {
	display: table-cell;
	height: 100px;
	margin-top: 1em;
	vertical-align: middle;
	width: 430px;
}

заменить на

.goodsListItemImage {
	display: table-cell;
	height: 100px;
	margin-top: 1em;
	overflow: hidden;
	vertical-align: middle;
	width: 430px;
}

это чтобы изображение не вылазило из своих пределов.

Остальное имеет фиксированный размер. Для выравнивания описания - вам необходимо найти

.goodsListItemName {
	line-height: 1.4em;
	margin: 5px;
	max-height: 3.16em;
	overflow: hidden;
	padding: 0 2px 12px;
}

и заменить на

.goodsListItemName {
	display: table-row;
	height: 48px;
	line-height: 1.4em;
	margin: 5px;
	max-height: 3.16em;
	overflow: hidden;
	padding: 0 2px 12px;
}

далее найти

.goodsListItemName a {
	color: #363636;
	font-family: calibri;
	font-size: 20px;
	line-height: 1.2em;
	margin: 0;
	padding: 0;
}

и заменить на

.goodsListItemName a {
	color: #363636;
	display: table-cell;
	font-family: calibri;
	font-size: 20px;
	line-height: 1.2em;
	margin: 0;
	padding: 0;
	vertical-align: middle;
}

далее придется добавить

[ogonek7777]

Спасибо!

[Eleneva]

Vaccina (27 Сентябрь 2012 - 13:31) писал:

Не совсем понимаю ваш вопрос, так как у вас, да и по умолчанию именно так все и сделано. Единственно можно сделать - в файле стилей

.goodsListItemImage {
display: table-cell;
height: 100px;
margin-top: 1em;
vertical-align: middle;
width: 430px;
}

заменить на

.goodsListItemImage {
display: table-cell;
height: 100px;
margin-top: 1em;
overflow: hidden;
vertical-align: middle;
width: 430px;
}

это чтобы изображение не вылазило из своих пределов.

Остальное имеет фиксированный размер. Для выравнивания описания - вам необходимо найти

.goodsListItemName {
line-height: 1.4em;
margin: 5px;
max-height: 3.16em;
overflow: hidden;
padding: 0 2px 12px;
}

и заменить на

.goodsListItemName {
display: table-row;
height: 48px;
line-height: 1.4em;
margin: 5px;
max-height: 3.16em;
overflow: hidden;
padding: 0 2px 12px;
}

далее найти

.goodsListItemName a {
color: #363636;
font-family: calibri;
font-size: 20px;
line-height: 1.2em;
margin: 0;
padding: 0;
}

и заменить на

.goodsListItemName a {
color: #363636;
display: table-cell;
font-family: calibri;
font-size: 20px;
line-height: 1.2em;
margin: 0;
padding: 0;
vertical-align: middle;
}

далее придется добавить

Попробовала, картинки не отцентрировались а просто вся информация карточек в каталоге прижалась кверху. Как сделать чтобы картинки располагались вертикально и горизонтально по центру в своей зоне?

[MikDark]

Eleneva (22 Июнь 2014 - 20:00) писал:

Попробовала, картинки не отцентрировались а просто вся информация карточек в каталоге прижалась кверху. Как сделать чтобы картинки располагались вертикально и горизонтально по центру в своей зоне?

Что касаемо горизонтальной центровки, у Вас в каталоге как вижу все нормально. Вертикально, к сожалению, отцентровать нельзя, при использовании изображения разных размеров..

[Vaccina]

Eleneva (22 Июнь 2014 - 20:00) писал:

Попробовала, картинки не отцентрировались а просто вся информация карточек в каталоге прижалась кверху. Как сделать чтобы картинки располагались вертикально и горизонтально по центру в своей зоне?

В main.css найдите:

.goodsListItemImage {
	height: 190px;
	margin-top: 1em;
}

после нее вставьте:

.goodsListItemImage a {
	display: table-cell;
	height: 190px;
	position: relative;
	text-align: center;
	vertical-align: middle;
	width: 185px;
}

[Eleneva]

Vaccina (24 Июнь 2014 - 00:46) писал:

В main.css найдите:

.goodsListItemImage {
height: 190px;
margin-top: 1em;
}

после нее вставьте:

.goodsListItemImage a {
display: table-cell;
height: 190px;
position: relative;
text-align: center;
vertical-align: middle;
width: 185px;
}

Отлично работает! Спасибо!