Форум программистов «Весельчак У»
  *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

  • Рекомендуем проверить настройки временной зоны в вашем профиле (страница "Внешний вид форума", пункт "Часовой пояс:").
  • У нас больше нет рассылок. Если вам приходят письма от наших бывших рассылок mail.ru и subscribe.ru, то знайте, что это не мы рассылаем.
   Начало  
Наши сайты
Помощь Поиск Календарь Почта Войти Регистрация  
 
Страниц: [1]   Вниз
  Печать  
Автор Тема: Элемент поверх элемента  (Прочитано 27547 раз)
0 Пользователей и 1 Гость смотрят эту тему.
Dracul
Помогающий

ru
Offline Offline
Пол: Мужской

« : 17-02-2008 14:01 » 

Вот какой вопрпосик:
Нужно сделать так, что бы на картинке (расположенна в ячейке таблицы) появлялся текстовый блок.
Вот пример:
Цитата
<table>
   <tr>
      <td>
         <img src='путь_к_картнке'>
         <span id='pole'>Текст на картинке</span>
      <td>
   </tr>
</table>
Данный текст на картинке, должен начинаться в левом нижнем углу картинки

Я попытался реализовать это следующим способом:
Цитата
#pole
{
position: relative;
top: -18px;
left: 2px;
display:block;
float: left;
background-color:#ffffff;
}

Заработало, за исключением одного. Под картинкой осталось пустое место (ровно столько сколько и занимал бокс с текстом)
Жаль
Записан
Chuda
Гость
« Ответ #1 : 17-02-2008 15:33 » 

а если просто картинку фоном поставить?
Записан
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #2 : 17-02-2008 15:42 » 

Dracul, посмотри в спецификацию: http://www.w3.org/TR/CSS21/visuren.html#propdef-position

При position:relative элемент остается в потоке - можно лишь смещать его от начальной позиции.
Здесь тебе нужно position:absolute.

Есть несколько замечаний:
1. Используй не span с display:block, а div. span - inline-элемент, а div - блочный. В остальном они одинаковы.
2. Т.к. img - inline-элемент, а ячейка таблицы может быть больше этой картинки, то img может переместиться по горизонтали из-за выравнивания. Помести текстовый блок перед картинкой, а ячейке назначь выравнивание текста влево. Правда это с оговоркой: ты не сообщил задачу!

Цитата
а если просто картинку фоном поставить?
Тоже выход, но тогда надо четко задать размер ячейки под размер картинки.
Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
Dracul
Помогающий

ru
Offline Offline
Пол: Мужской

« Ответ #3 : 17-02-2008 15:57 » 

Картинка являеться ссылкой, а расопложенный текст на картинке короткий (в ширину он не более 50% от картинки) и указывает размер большой картинки (вес файла).

Если я бубу испоьзовать - position:absolute - то я так понял, что для нее координаты задаються от верхнего-левого угла окна браузера, а ведь я незнаю координаты картинки Жаль
Записан
Aveic
Постоялец

ru
Offline Offline
Пол: Мужской
Yellow


« Ответ #4 : 17-02-2008 16:20 » 

Если я бубу испоьзовать - position:absolute - то я так понял, что для нее координаты задаються от верхнего-левого угла окна браузера, а ведь я незнаю координаты картинки Жаль
Не всегда. если родительский элемент имеет position:relative, то дочерний элемент при выставлении position:absolute будет отсчитывать от верхнего левого угла родительского элемента Улыбаюсь вот так.
Код:
<table>
   <tr>
      <td style='position:relative'>
         <img src='путь_к_картнке'>
         <span style='position:absolute;left:5px;top:5px;'>Текст на картинке</span>
      <td>
   </tr>
</table>
В итоге span должен отступить от начала td по 5 пикселей влево и вниз.
Записан
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #5 : 17-02-2008 16:38 » 

"Абсолютные координаты" отсчитываются от верхнего левого угла родительского элемента.
http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme
Цитата
absolute
    The box's position (and possibly size) is specified with the 'top', 'right', 'bottom', and 'left' properties. These properties specify offsets with respect to the box's containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Also, though absolutely positioned boxes have margins, they do not collapse with any other margins.

Цитата
расопложенный текст на картинке короткий (в ширину он не более 50% от картинки)
Это никакой роли не играет. Ширину надо задавать руками.
Вот мой пример: https://forum.shelek.ru/index.php/topic,14140.msg166566#msg166566
Попробуй в нем у .caption убрать width и увидишь, о чем я говорю.
« Последнее редактирование: 17-02-2008 16:40 от RXL » Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
Aveic
Постоялец

ru
Offline Offline
Пол: Мужской
Yellow


« Ответ #6 : 17-02-2008 17:38 » 

"Абсолютные координаты" отсчитываются от верхнего левого угла родительского элемент
также как с JS Улыбаюсь
Записан
Dracul
Помогающий

ru
Offline Offline
Пол: Мужской

« Ответ #7 : 18-02-2008 11:39 » new

Aveic спасибки Улыбаюсь
Записан
Dracul
Помогающий

ru
Offline Offline
Пол: Мужской

« Ответ #8 : 18-02-2008 12:07 » 

Упс... В осле работают оба примера и от RXL и от Aveic
В Опере и Мазиле - оба работают одинаково - не так как надо:
 - от Aveic - не работает ваще (то есть указания координат начинают отсчитываться от верхнего левого угла браузера)
 - от RXL - не совсем как надо (если настроить смещение для осла, то в опере и мазиле - эти смещения выглядят совсем по другому)

Так что видать ридеться делать все ввиде фона Жаль
Записан
Aveic
Постоялец

ru
Offline Offline
Пол: Мужской
Yellow


« Ответ #9 : 18-02-2008 12:39 » 

- от Aveic - не работает ваще (то есть указания координат начинают отсчитываться от верхнего левого угла браузера)
Так что видать ридеться делать все ввиде фона Жаль
для того чтобы в опере пахал надо или
Код:
<table>
<tr>
<td style='position:relative;display:block;'>
<img src='' style='position:absolute;top:20px;left:220px;'/>
</td>
</tr>
</table>
тогда отсчитает и в опере и мазиле Улыбаюсь
Записан
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #10 : 18-02-2008 14:14 » 

Dracul, поклеп! Улыбаюсь Я испытывал в SeaMonkey 1.1 (Gecko 1.8.1.2pre) и IE6. Картина совершенно одинакова. С точностью до пикселя.
В IE есть проблемы когда задаешь смещение в процентах - используй абсолютные единицы.
Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
Dracul
Помогающий

ru
Offline Offline
Пол: Мужской

« Ответ #11 : 19-02-2008 10:10 » 

%) вот пример:

* err.mht (43.09 Кб - загружено 1004 раз.)
Записан
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #12 : 19-02-2008 12:06 » 

Dracul, ты издеваешься что ли?
Помимо мыльного формата, положил неручной код, да еще и с абсолютными путями... Позор! В помойку такой код!
Кроме того: у тебя html 4.0 transitional с укороченным DTD (что не правильно), а у меня xhtml 1.0 transitional. Разные это вещи. Сравнивать надо корректно.
Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
Dracul
Помогающий

ru
Offline Offline
Пол: Мужской

« Ответ #13 : 19-02-2008 14:17 » 

нет не издеваюся Жаль а формат mht мне ваще нравиться, в нем намного удобнее веб странички сохранять, чем в паре фалик + папочка с картинками и прочим...

Насчет неручного кода, ну да неручной, патаму что человек делающий дизайн все равно равно не руками его делает и значит вставлять патом в его неручной код все надо Жаль

ps: набрал сей код ручками - действительно работает, приношу извенения за тугодумость (я о примере Aveic-а)
Записан
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #14 : 19-02-2008 17:21 » 

Не ручной код действительно надо причесывать - эти редакторы опираются прежде всего на визуальность, а качество и совместимость оставляют желать лучшего.

Насчет mht: ну, да, просмотреть в IE я могу и так, но как только я хочу открыть в чем-то еще, посмотреть код (не в notepad.exe, а в другом редакторе) и поправить код, тут начинается геморрой. Лучше не извращаться...
Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
Chuda
Гость
« Ответ #15 : 19-02-2008 19:53 » 

Dracul, вот посмотри:

* page.webarchive (211.58 Кб - загружено 1097 раз.)
Записан
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #16 : 20-02-2008 00:25 » 

Шильгия, история повторяется? Теперь чтоб посмотреть надо искать софтину, которая это дело распакует? Зачем шифруетесь?
Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
Chuda
Гость
« Ответ #17 : 20-02-2008 00:40 » 

нет не повторяюся  а формат webarchive мне ваще нравиться, в нем намного удобнее веб странички сохранять, чем в паре фалик + папочка с картинками и прочим... ©

Вообще-то это в адрес Дракула. Простая демонстрация, как каждому может своё оказываться удобнее, и насколько неудобно это может оказаться для широкой общественности. Ничего ценного в приложенном мною файле нет, но ведь зато как удобно этот формат использовать на любом макинтоше, где есть safari3!
Записан
Sla
Команда клуба

ua
Offline Offline
Пол: Мужской

WWW
« Ответ #18 : 20-02-2008 07:05 » 

Шильгия, злая ты Улыбаюсь
Записан

Мы все учились понемногу... Чему-нибудь и как-нибудь.
Алексей++
глобальный и пушистый
Глобальный модератор

ru
Offline Offline
Сообщений: 13


« Ответ #19 : 20-02-2008 07:09 » 

Инга не злая, Инга хорошая
Записан

Sla
Команда клуба

ua
Offline Offline
Пол: Мужской

WWW
« Ответ #20 : 20-02-2008 07:26 » 

 ФЛУДЕР!!!
Записан

Мы все учились понемногу... Чему-нибудь и как-нибудь.
Алексей++
глобальный и пушистый
Глобальный модератор

ru
Offline Offline
Сообщений: 13


« Ответ #21 : 20-02-2008 07:27 » 

просто я злой )
Записан

RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #22 : 20-02-2008 13:05 » 

Будет вам. Давайте лучше по теме.
Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
Страниц: [1]   Вверх
  Печать  
 

Powered by SMF 1.1.21 | SMF © 2015, Simple Machines