| |
автор: qw1 (06.03.2006 в 13:20) |
|
| | Каким образом можно установить <div> сверху необходимой картинки (размер картинок заранее не известен, каждый раз новая), при этом сместив сам div в правый нижний угол самой картинки (конечно с некоторым отступом снизу от правого нижнего угла картинки). Была у меня идея копать в область бэкграунда самого div'a но опять-же размер картинки не известен, да и не смог я без координатно-указательного (padding) способа задать координаты текста, который будет выведен сверху.
<div style="border-color:#BBB6B4; border-width:7; border-style:solid; width:100px; height:100px; background-image:url('pic1312.jpg');
text-align:right;"> <!-- padding: 90px 2px 2px 90px -->
<span>куку!</span>
</div>
|
| |
| |
|
|
| |
|
|
| |
для: qw1
(06.03.2006 в 13:20)
| | | Это называется не сверху, а поверх (если я правильно догадался о замысле). Надо, чтобы надпись была на картинке? | |
| |
|
|
| |
автор: qw1 (06.03.2006 в 13:38) |
|
| |
для: 12345
(06.03.2006 в 13:33)
| | | да! но что бы она не была привязана к координатам, а могла смещаться в соответствии с изменением окна браузера. | |
| |
|
|
| |
|
|
| |
для: qw1
(06.03.2006 в 13:38)
| | | Лучше не див, а в таблице, в ней проще привязать текст к низу.
Проще всего сделать рисунок фоновым. Чтобы таблица не разъезжалась в случае чего - стиль table-layout:fixed .
<table width=100 height=100 sty le=position:absolute; background=snow.gif><tr><td align=right valign=bottom> Текст сверху картинки.</td></tr></table>
|
Если размеры картинки надо менять принудительно, нужно делать слои. Решение для IE:
поток до <span style="width:100;height:100;border:1px solid">..
<img src=snow.gif width=100 height=100 st yle=position:absolute;>
<table width=100 height=100 style=position:absolute;><tr><td align=right valign=bottom> Текст сверху картинки.</td></tr></table>
</span> поток далее
|
Этот блок можно ставить в поток где угодно. (Пример: http://javascript.aho.ru/example/JsPrimeryCode-46.htm) Для кроссбраузерного решения нужно скриптом поправлять положение слоёв в потоке, но общая идея - делать их absolute . Может, кто знает общее решение проще. | |
| |
|
|
| |
автор: qw1 (06.03.2006 в 14:47) |
|
| |
для: 12345
(06.03.2006 в 14:21)
| | | Я так и не получаю должного эффекта. Я не могу узнать размеры картинки, поэтому я и говорю, что использование в качестве бэкграунда видимо не приемлемо. Да и во втором способе, тоже необходимо указывать размеры картинки :( | |
| |
|
|
| |
|
|
| |
для: qw1
(06.03.2006 в 14:47)
| | | например такой вариант:
<style>
#ps {
padding:0;
margin:0;
text-align:right;
}
#ps img{
border:1px solid red;
padding:0;
margin:0;
}
#ps p.text{
font:42pt Impact,sans-serif;
width:280px;
padding:5px 10px;
color:red;
color:white;
filter: alpha(opacity='60');
margin-top:-100px;
}
</style>
<div id="ps">
<img src="exampl.gif" alt="">
<p class="text">âàø òåêñò</p>
</div>
|
| |
| |
|
|
| |
|
|
| |
для: AlexSol
(06.03.2006 в 15:10)
| | | Стилями можно задать неповторение картинки, таблицу в таблице. В общем, это задача вёрстки. Размеры картинок чисаются скриптом после загрузки. | |
| |
|
|
| |
автор: qw1 (06.03.2006 в 21:42) |
|
| |
для: AlexSol
(06.03.2006 в 15:10)
| | | Спасибо за код! Но, есть одна не приятная штука. Этот пример прекрасно работает в IE , но отказывается нормально работать в “Опере”. Не будете ли вы так любезны, посмотреть ваш пример для работоспособности в “Опере”. Очень надеюсь на вашу помощь. | |
| |
|
|
| |
|
|
| |
для: qw1
(06.03.2006 в 21:42)
| | | на прозрачность можете не расчитывать | |
| |
|
|
