Сторінка 1 з 1
Помощь с CSS
Додано: 13 червня 2014, 16:08
lunizz
Есть тут верстальщики? Нужна помощь.
Есть таблица
<tr>
<td width=300 align=center><img src="image1.jpg width=200><img src="label.png></td>
<td width=400 align=center><img src="image2.jpg width=250><img src="label.png></td>
</tr>
image.jpg - картинка,
label.png - картинка, типа метки "акция" и т.п.
к размерам картинок и ячеек желательно не привязываться, как видите картинка не заполняет ячейку, а просто центрируется в ней.
Необходимо размещение метки на расстоянии 20px от левого верхнего угла картинки imageX.jpg. Как это все завернуть?
Re: Помощь с CSS
Додано: 13 червня 2014, 16:28
slaxor
Через background, а його вже можна позиціонувати через padding як потрібно.
Re: Помощь с CSS
Додано: 13 червня 2014, 16:43
lunizz
slaxor писав:Через background, а його вже можна позиціонувати через padding як потрібно.
Небольшой примерчик очень бы помог.
Re: Помощь с CSS
Додано: 13 червня 2014, 16:48
slaxor
Для td в css пропишіть класс з фоном, яким і буде мітка. По Головне, просто трохи змінили тематику
Re: Помощь с CSS
Додано: 13 червня 2014, 16:52
lunizz
slaxor писав:Для td в css пропишіть класс з фоном, яким і буде мітка. По Головне, просто трохи змінили тематику
У меня td фиксированой ширины (например сайдбар), в нем отцентрирована картинка меньшей ширины.
Или делать в этом td еще один table?
Re: Помощь с CSS
Додано: 13 червня 2014, 17:35
Buxx
в background треба ставити не label, а основний img
якось так:
Код: Виділити все
<!DOCTYPE html>
<html>
<head>
<style>
td
{
vertical-align: top;
background-image:url('img/image1.jpg');
width: 50px;
height: 50px;
}
td img
{
padding:20px 0 0 20px;
}
</style>
</head>
<body>
<table>
<tr>
<td><img src="img/label.png"></td>
</tr>
</table>
</body>
</html>
якщо ж це незручно, то можна через div -
http://jsfiddle.net/g3t3m/
Код: Виділити все
<div class="backgr">
background
<div class="overlay">over</div>
</div>
.backgr {position: relative;}
.overlay {
position: absolute;
background-color: red;
top: 5px;
left: 5px;
}
Re: Помощь с CSS
Додано: 13 червня 2014, 22:00
lunizz
Всем спасибо, сделал по последнему примеру с небольшими допилом по свои нужды. Впринципе так и делал изначально, но лишний width портил всю малину. Еще раз спасибо
Re: Помощь с CSS
Додано: 15 червня 2014, 22:40
lunizz
slaxor писав:По Головне, просто трохи змінили тематику
Неплохо так поперло :)