[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Надпись поверх рисунка
l@pteff
всем привет, в шапке страницы есть рисунок, поверх него нужно поместить span. Желаемого эффекта удаётся добиться таким образом:

<div id="header">
<img
width="100%" height="100%" src="../pictures/head.jpg"/>
<span
style="position:relative; top:-25%">

но это конечно не выход. подскажите пжл способ поуниверсальнее.



Спустя 5 минут, 22 секунды (25.05.2011 - 10:49) nugle написал(а):
а в margin-top: -тут ваши пиксели, нельзя?

Спустя 8 минут, 30 секунд (25.05.2011 - 10:57) l@pteff написал(а):
так уезжает под рисунок даже если z-индексы поставить

Спустя 3 минуты, 20 секунд (25.05.2011 - 11:01) ИНСИ написал(а):
l@pteff можно сделать див с background-ом и в него уже вставить текст smile.gif

Спустя 3 минуты, 26 секунд (25.05.2011 - 11:04) l@pteff написал(а):
если сделать фоном то при больших разрешениях рисунок начинает повторяться

Спустя 18 минут, 12 секунд (25.05.2011 - 11:22) ИНСИ написал(а):
l@pteff :) тогда сделай так:

background: no-repeat center;


Спустя 8 минут, 28 секунд (25.05.2011 - 11:31) l@pteff написал(а):
так тоже повторяется и по-вертикали и по-горизонтали wink.gif

Спустя 1 час, 17 минут, 12 секунд (25.05.2011 - 12:48) Лёха написал(а):
Цитата (l@pteff @ 25.05.2011 - 11:31)
так тоже повторяется и по-вертикали и по-горизонтали ;)

Врешшшшш....

background: url(../pictures/head.jpg) no-repeat center;


Или выложи как ты это сделал.

Спустя 32 минуты, 25 секунд (25.05.2011 - 13:20) ИНСИ написал(а):
Цитата
так тоже повторяется и по-вертикали и по-горизонтали wink.gif

Странно smile.gif

Спустя 9 минут, 40 секунд (25.05.2011 - 13:30) Winston написал(а):
В принципе так можно

<div id="header">
<img
width="100%" height="100%" src="../pictures/head.jpg" style="position: absolute;"/>
<span
style="position:relative;">Текст</span>
</div>

Спустя 3 минуты, 55 секунд (25.05.2011 - 13:34) Winston написал(а):
Ну или так

<div id="header" style="position:relative;">
<img
width="100%" height="100%" src="../pictures/head.jpg" style="position: relative; z-index: 0;"/>
<span
style="position:relative; top: -150px; z-index: 999;">Текст</span>
</div>

И вместо процентов при позиционировании лучше использовать px
top: -150px; и.т.д.
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.