|
|
|
[CSS] картинка под текстом на все случаи жизни
|
|||
|---|---|---|---|
|
#18+
Как можно организовать такой прием: В публикуемых новостях хотелось бы видеть картинку под текстом новости, но проблема в том что в css все картинки и их параметры не засуниш (уж очень много категории и материалов), как можно организовать URL_Image >> CSS >> HTML+image каким необходимо сделать CSS и какой скрипт, ума не приложу ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 29.04.2008, 15:15 |
|
||
|
[CSS] картинка под текстом на все случаи жизни
|
|||
|---|---|---|---|
|
#18+
for_my_blogв css все картинки и их параметры не засуниш (уж очень много категории и материалов), как можно организовать URL_Image >> CSS >> HTML+image а непосредственно в style тега, содержащего текст, не пробовали бэкграунд прописывать? <div style="background:url(путь/имя.gif) no-repeat center;">текст</div> P.S. текст над картинкой в большинстве случаев трудно читаем, а иногда и вовсе неразборчив. Даже на Вашем скриншоте текст сливается с изображением. ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 29.04.2008, 15:37 |
|
||
|
[CSS] картинка под текстом на все случаи жизни
|
|||
|---|---|---|---|
|
#18+
у css есть z-index, вот пример из мануала... Думаю дальше доделаешь:) <html> <body> Слой 1 наверху <div style="position:relative; font-size:50px; z-index:2; color: navy">слой 1</div> <div style="position:relative; top:-55; left:5; color:orange; font-size:70px; z-index:1">слой 2</div> Слой два наверху <div style="position:relative; font-size:50px; z-index:3; color: navy">слой 1</div> <div style="position:relative; top:-55; left:5; color:orange; font-size:70px; z-index:4">слой 2</div> </body> </html> ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 29.04.2008, 15:40 |
|
||
|
[CSS] картинка под текстом на все случаи жизни
|
|||
|---|---|---|---|
|
#18+
illionP.S. текст над картинкой в большинстве случаев трудно читаем, а иногда и вовсе неразборчив. Даже на Вашем скриншоте текст сливается с изображением. полностью с вами солидарен, но картинки все будут на 70-90% прозрачны, поэтому не составит пользователю ни каких неудобств! ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 29.04.2008, 15:47 |
|
||
|
[CSS] картинка под текстом на все случаи жизни
|
|||
|---|---|---|---|
|
#18+
trevojnuiу css есть z-index, наверное так и поступлю, спасибо ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 29.04.2008, 15:50 |
|
||
|
[CSS] картинка под текстом на все случаи жизни
|
|||
|---|---|---|---|
|
#18+
for_my_blog trevojnuiу css есть z-index, наверное так и поступлю, спасибо основания? Не вижу никаких пока оснований, чтоб так мутить с позиционированием, а заодно и с выраниванием. Почему не годится <div style="background:url(путь/имя.gif) no-repeat center;">текст</div> ? Текст и адрес соответсвующего ему изображения берутся из одного места ( из БД, например), и вписываются в страницу одним скриптом, заранее знать адрес не нужно. Что такого особенного (кроме геморроя) вы в z-index увидели? Или как всегда задача не полно обрисована? ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 29.04.2008, 16:00 |
|
||
|
[CSS] картинка под текстом на все случаи жизни
|
|||
|---|---|---|---|
|
#18+
illionПочему не годится <div style="background:url(путь/имя.gif) no-repeat center;">текст</div> ? , годится и даже очень, за что вам спасибо так или иначе, но просто второй способ для меня немного перспективнее, а... illionТекст и адрес соответсвующего ему изображения берутся из одного места ( из БД, например), и вписываются в страницу одним скриптом, заранее знать адрес не нужно а... вот за эту идею, ограмаднешное спасибо еще раз! ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 29.04.2008, 16:08 |
|
||
|
[CSS] картинка под текстом на все случаи жизни
|
|||
|---|---|---|---|
|
#18+
illion for_my_blog trevojnuiу css есть z-index, наверное так и поступлю, спасибо основания? Не вижу никаких пока оснований, чтоб так мутить с позиционированием, а заодно и с выраниванием. Почему не годится <div style="background:url(путь/имя.gif) no-repeat center;">текст</div> ? Текст и адрес соответсвующего ему изображения берутся из одного места ( из БД, например), и вписываются в страницу одним скриптом, заранее знать адрес не нужно. Что такого особенного (кроме геморроя) вы в z-index увидели? Или как всегда задача не полно обрисована? если делать картинку фоном, тогда в зависимости от ширины елемента и будет вырисовываться картинка(то больше, то меньше). А тут как указал в img, то она не измениться..... Или что то так.... Наверное из этих побуждений... ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 29.04.2008, 16:09 |
|
||
|
[CSS] картинка под текстом на все случаи жизни
|
|||
|---|---|---|---|
|
#18+
По моему background тоже лучше. Без проблем по центру по высоте сделать можно, а абсолютным позиционоированием под ИЕ с этим делом помучатся придется. ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 29.04.2008, 22:18 |
|
||
|
[CSS] картинка под текстом на все случаи жизни
|
|||
|---|---|---|---|
|
#18+
trevojnuiесли делать картинку фоном, тогда в зависимости от ширины елемента и будет вырисовываться картинка(то больше, то меньше) чушь полнейшая. Хоть бы попробовали сначала, прежде чем писать. ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 30.04.2008, 00:32 |
|
||
|
[CSS] картинка под текстом на все случаи жизни
|
|||
|---|---|---|---|
|
#18+
а у меня при использовании z-index в Опере перестают работать CSSsprite. код примерно такой: [quote]<style type="text/css"> <!-- body { background: url(fon.jpg); } --> </style> <style media="screen"> #layer1 { z-index: 1; width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0.6; filter: alpha(Opacity=60); } #blobs { width: 1004px; height: 598px; z-index: 2; background: url(Fight.jpg); margin: 0px auto; padding: 0; position: relative; } #blobs li {margin: 0; padding: 0; list-style: none; display: block; position: absolute;} #blobs a {display: block;} #blob1 {left: 207px; top: 248px; width: 123px; height: 168px;} #blob1 a {height: 164px;} #blob1 a:hover {background: url(Fight.jpg) -1px -609px no-repeat;} </style> </head> <body> <ul id="blobs"> <li id="blob1"><a href="#"></a></li> </ul> <div id="layer1"> <img src="gg.jpg" width="100%" alt=""> </div> </body>[/quote] в других браузерах спрайты работают, можно ли как-то решить эту проблему с Оперой? ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 08.10.2008, 19:35 |
|
||
|
|
start [/forum/topic.php?fid=22&fpage=317&tid=1455765]: |
0ms |
get settings: |
5ms |
get forum list: |
12ms |
check forum access: |
2ms |
check topic access: |
2ms |
track hit: |
33ms |
get topic data: |
9ms |
get forum data: |
2ms |
get page messages: |
41ms |
get tp. blocked users: |
1ms |
| others: | 242ms |
| total: | 349ms |
| 0 / 0 |
