LINUX.ORG.RU

[div][Ънтерпрайз костылестроение] запутался как выводить картинку в фон

 


0

1

задача:
нужно выводить превьюшки товара.
див для вывода описан так:

#item_icon {
width: 90px;
height: 60px;
border: 1px;
border-style: solid;
border-color: #cc0000;
border-radius: 10px;
}

(не прикапывайтесь, что радиус указан только один, все костыли для других браузеров я тоже учел, просто решил не засорят Тут листинг)

на странице этих дивов будет много.
как видно из ксс - выводимое в этом диве изображение - должно иметь скругленные края и рамку.

а еще это изображение должно быть кликабельно.

как я хотел сделать:

<div id=item_icon background-image=url('<?php echo blabla ?>')>
<a href=«» title=«»><img src=«images/icon.png» alt=«<?php echo blabla ?>» /></a>
</div>

где images/icon.png - это прозрачный пнг размером 60*90, для кликабельности ссылки.

нафига такой изврат? я не знаю как выводить обрезанные жипеги в диве
радиус 10 от css и радиус 10 закругления от фотошопа - несовместимы почемуто. лезет хрень. да и делать вместо жипега - пнг = утроить вес превьюшек

как вообще лучше поступить?

PS
мне тут подсказывают, что идеологически правильно резать жипеги пых пыхом (при помощи всяких там imagemagick), пририсовывать к ним обводку и так и выводить. может оно и верно - но это значительно усложнит мне процесс написания. хотелось бы правильную реализацию моего костыля

<div id=item_icon background-image>
как правильно выводить этот background-image?



Последнее исправление: dk- (всего исправлений: 2)

Не очень понимаю, что ты делаешь, однако

images/icon.png - это прозрачный пнг размером 60*90, для кликабельности ссылки.


Не нужно, достаточно задать размеры ссылки.

Deleted
()
Ответ на: комментарий от Deleted

в общем нужен вывод картинки в скругленной рамке, картинка должна быть кликабельна.

dk-
() автор топика

самая то хрень в чем:
да могу я легко и просто все жипеги сделать со встроенной рамкой. и просто выводить прямоугольные картинки.

НО. шоп генерит довольно кривую обводку. у браузера куда лучше

dk-
() автор топика
Ответ на: комментарий от dk-

А что не работает то?

http://ompldr.org/vNjR1eA

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="UTF-8"/>
	<title>Test</title>
	<style type="text/css">
#item_icon {
	width: 90px;
	height: 60px;
	border: 1px;
	border-style: solid;
	border-color: #cc0000;
	border-radius: 10px;
}
#item_icon a { height: 60px; width: 90px; display: block; }
	</style>
</head>
<body>

<div id=item_icon style="background-image: url('2.png');">
	<a href="/" title="some title here"></a>
</div>

</body>
</html>
Deleted
()

Вместо прозрачного .png лучше взять .gif размером 1 пиксель. Я бы сделал так:

<div class="item_icon" style="background:url('<?php echo blabla ?>');"><a href="" title=""><img src="1.gif" alt="<?php echo blabla ?>"></a>
</div>
.item_icon {
width: 60px;
height: 90px;
border: 1px;
border-style: solid;
border-color: #cc0000;
border-radius: 10px;
} 

.item_icon img
{
border:none !important;
width:60px;
height:90px;
}

lucif0rm
()
Ответ на: комментарий от Deleted

Ыыыы
вроде работает!

пасиба!!!

а «не работало» у меня из-за неправильного синтаксиса в [ style=«background-image: url('2.png'); ]

dk-
() автор топика
Ответ на: комментарий от Deleted

хех
а в ишаке не работает. не скругленные дивы.

ну да и х с ними. у нас в городе ишаком мааало кто пользуется. а сайт от этого не «поедет». просто смотреться хуже будет

dk-
() автор топика
Ответ на: комментарий от dk-

Так он border-radius умеет, наверное, только в 9ой версии. Т.е. будет уметь. А так — да, если над головой не стоят безумные люди, это нормально.

Deleted
()
Ответ на: комментарий от Deleted

Расстреливать надо вот за такое:

<div id=item_icon style="background-image: url('2.png');">
   <a href="/" title="some title here"></a>
</div>
Из-за таких криворуких «веб-программистов», которые превьюшки в фон запихивают, приходится временно разрешать огнелису использовать цветовую схему сайтов. А это - быстрая смерть глазам.

Eddy_Em ☆☆☆☆☆
()
Ответ на: комментарий от Eddy_Em

Шёл бы ты лесом, малыш. Что ТС хотел, то и получил. А ты здесь только воду мутишь.

Deleted
()
Ответ на: комментарий от Turbid

HTML блок ≠ CSS блок. В 1ом случае логика, во втором — представление. С display: block на a нет проблем её и в див как обычно поместить как раз.

Deleted
()
Ответ на: комментарий от SOmni

Будет работать не значит, что так надо делать. Потом случаются новости в духе «Изменение поведения memcpy в glibc привело к странным ошибкам» :}

Используя метод «через задницу» всегда есть вероятно, что в каком-нибудь браузере проявится что-то «необычное» (пока не пофиксят). Зачем себе осложнять жизнь?

Deleted
()
Ответ на: комментарий от Deleted

Не совсем согласен. Конечно, надо писать в соответствии со стандартами. «Стандартами» в случае web. Но браузеры это всё же отдельная история, всё делается для того, чтобы максимально сгладить все ошибки.

SOmni ★★
()
Ответ на: комментарий от SOmni

Это понятно. Но тем не менее это всё равно их не исключает.

Deleted
()

Более изящный способ (хотя по-сути то же самое):
habrahabr.ru/blogs/css/107093/

avol
()

А что должен делать «клик» на прневьюшке? Мож его через onClick дива обрабатывать?

Saloed
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.