Есть тут верстальщики? Нужна помощь.
Есть таблица
<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. Как это все завернуть?
Помощь с CSS
-
lunizz
- Активіст
- Повідомлень: 334
- З нами з: 28 листопада 2012, 14:18
- Дякував (ла): 7 разів
- Подякували: 20 разів
Re: Помощь с CSS
Небольшой примерчик очень бы помог.slaxor писав:Через background, а його вже можна позиціонувати через padding як потрібно.
Востаннє редагувалось 13 червня 2014, 16:47 користувачем lunizz, всього редагувалось 1 раз.
Re: Помощь с CSS
Для td в css пропишіть класс з фоном, яким і буде мітка. По Головне, просто трохи змінили тематику 
-
lunizz
- Активіст
- Повідомлень: 334
- З нами з: 28 листопада 2012, 14:18
- Дякував (ла): 7 разів
- Подякували: 20 разів
Re: Помощь с CSS
У меня td фиксированой ширины (например сайдбар), в нем отцентрирована картинка меньшей ширины.slaxor писав:Для td в css пропишіть класс з фоном, яким і буде мітка. По Головне, просто трохи змінили тематику
Или делать в этом td еще один table?
-
Buxx
- Поважний користувач
- Повідомлень: 2740
- З нами з: 25 листопада 2012, 21:11
- Дякував (ла): 21 раз
- Подякували: 30 разів
Re: Помощь с CSS
в background треба ставити не label, а основний img
якось так:
якщо ж це незручно, то можна через div - http://jsfiddle.net/g3t3m/
якось так:
Код: Виділити все
<!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 class="backgr">
background
<div class="overlay">over</div>
</div>
.backgr {position: relative;}
.overlay {
position: absolute;
background-color: red;
top: 5px;
left: 5px;
}
Востаннє редагувалось 13 червня 2014, 17:36 користувачем Buxx, всього редагувалось 2 разів.
-
lunizz
- Активіст
- Повідомлень: 334
- З нами з: 28 листопада 2012, 14:18
- Дякував (ла): 7 разів
- Подякували: 20 разів
Re: Помощь с CSS
Всем спасибо, сделал по последнему примеру с небольшими допилом по свои нужды. Впринципе так и делал изначально, но лишний width портил всю малину. Еще раз спасибо
Востаннє редагувалось 13 червня 2014, 22:02 користувачем lunizz, всього редагувалось 1 раз.