|
| |
|
|
| |
для: kosta_in_net
(19.11.2010 в 07:28)
| | | Здравствуйте!
Я не смог разобраться по этому сообщению.
У меня картинка - прямоугольник с округленными углами, с фоном и рамкой (определенного размера).
Задача: поместить надпись поверх картинки, но так, чтобы размер картинки соответствовал размеру (див) текста и чтобы этот размер по ширине и высоте можно было бы изменять в зависимости от размера текста.
Как ее решить?
Прошу дать пример с полным кодом.
У меня в HTML хорошо работает код:
<center><div id="info1" style="width:86%; align:center;">
<b class="v1"></b>
<b class="v2"></b>
<b class="v3"></b>
<b class="v4"></b>
<b class="v5"></b>
<div border="0" style="background-color: #efffdc;" class="body_ffffff" style="padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;">
<table style="border:0px;" width="90%" cellpadding="0" cellspacing="5" align="center"><tbody style="border:0px;">
<tr border="0"><td style="border:0px; text-align: center;">
<span style="border: 0px; margin: 0px 0px 0px 0px;
font-size:150%; padding:6px; line-height: 118%; font-weight: bolg;
text-align: center; text-indent: 0px; color: #3e9c57;">Последние темы </span>
<br /></td></tr></tbody></table></div>
<b class="v5"></b>
<b class="v4"></b>
<b class="v3"></b>
<b class="v2"></b>
<b class="v1"></b></div></center>
|
Вот код CSS:
.v01,.v02,.v03,.v04,.v05,.v5,.v4,.v3,.v2,.v1 {
border:1px solid #00CD00;
border-width:0 1px;
display:block;
font-size:1px;
height:1px;
overflow:hidden;
}
.v01,.v1 {
background:#00CD00;
margin:0 5px;
}
.v02 {
background:#00CD00;
border-width:0 2px;
margin:0 3px;
}
.v03 {
background:#00CD00;
margin:0 2px;
}
.v04,.v05 {
background:#00CD00;
margin:0 1px;
}
.v2 {
background:#fff;
border-width:0 2px;
margin:0 3px;
}
.v3 {
background:#fff;
margin:0 2px;
}
.v5,.v4 {
background:#fff;
margin:0 1px;
}
|
Но в PHP почему-то искажается. Подскажите, что в этом случае требуется для PHP.
Заранее благодарю за помощь. | |
| |
|
|
| |
|
|
| |
для: victoor
(18.11.2010 в 01:11)
| | | никаких скриптов. Правильнее, чем я сказал, быть не может | |
| |
|
|
| |
|
|
| |
для: victoor
(19.11.2010 в 15:08)
| | | размеры багкграунда можно менять, но для этого требуется огромный скрипт (на этом форуме давали на него ссылку). | |
| |
|
|
| |
|
|
| |
для: Красная_шляпа
(19.11.2010 в 11:33)
| | | но в этом случае нельзя задавать размеры этой картинки... если ячейка будет меньше, картинку обрежет, если больше - или начнется кусок новой или будет пустое место
или можно задать размеры? | |
| |
|
|
| |
|
|
| |
для: victoor
(18.11.2010 в 01:11)
| | | css свойство background-image | |
| |
|
|
| |
|
|
| |
для: victoor
(18.11.2010 в 14:56)
| | | решение такое:
<a style="position:absolute; z-index:100" href=...><img width="100%" src=...>
В этом случае ссылка уступит место картинке и картинка займет всю ячейки, оказавшись под ссылкой
или такое:
<img style="width:100%; margin-right:100% " src=...><a style="position:relative; z-index:100" href=...>
в этом случае картинка займет всю ячейку, но ссылке будет позволено сместиться на ее место, став поверх нее.
Но, считаю более правильным, если картинку нужно сделать фоном..Есть множество вариантов. В одном из них имеется две картинки: одна с правым закруглением, другая с левым. Ячейке назначается, к примеру, с правым. Не растягивая, позиционируя по правому краю. Ссылке дается ширина 100% (а так же, может потребоваться дисплей блок и высота, или регулировка падингом). Фоном ссылки делается второй рисунок (с левым краем), выровненный, в данном случае, слева. В результате наложения и регулировки падингом-маргином получается нужный эффект. Тут http://smay.ru/ примерно так сделано горизонтальное меню | |
| |
|
|
|
| |
 5.5 Кб |
|
| |
для: АЯ
(18.11.2010 в 05:01)
| | | прекрасно понимаю :)
картинка представляет собой прямоугольник со скругленными краями с градиентной заливкой. Если она будет чуть более вытянута или сжата - ничего страшного с ней не случиться :)
Из-за того, что размер ячейки, а следовательно и картинки будет меняться, не хочется делать надписи как часть картинки, потому что текст тогда будет искажаться... | |
| |
|
|
| |
|
|
| |
для: victoor
(18.11.2010 в 01:11)
| | | Картинка (тег <IMG>) может растягиваться в любом направлении (и по ширине, и по высоте).
Как видно из Вашего описания, Вас интересует только одно направление - по ширине.
Вы понимаете, что изменение только одного из размеров приведёт к искажению пропорций картинки?
И вместо круга, например, Вы увидите яйцо?
Или не понимаете? | |
| |
|
|
| |
|
|
| | Здравствуйте!
Подскажите пожалуйста!
Делаю меню и возникла такая проблема:
меню горизонтальное, на всю ширину экрана, соответственно каждая ячейка может изменять размер свой (в зависимости от возможностей экрана)
Как сделать так, чтобы в каждой ячейке была картинка и поверх нее текс (именно как текст).
Картинка, соответственно, должна растягиваться и сжиматься вместе с ячейкой
Заранее спасибо за ответ. | |
| |
|
|
|
