Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > как сделать чтобы блок div налазил на картинку

Автор: sgustok 18.6.2009, 19:55

Подскажите пожалуйста, как сделать чтобы блок div (Блок, который должен налазить на картинку) налазил на картинку?

Код:

Код

<div style='background:#F5F5F5;'>          
   <div style='background:#AF5196; float:right; width:100px;padding:10px; '>Блок, который должен налазить на картинку</div>
   <img src="#"/>
</div>

СЕЙЧАС:

НЕОБХОДИМО:

user posted image

Автор: Violator 18.6.2009, 20:26

Код


  <div style='background:#F5F5F5;position:relative;'>
     <div style='background:#AF5196;position:absolute; top:0; right:0; width:100px;padding:10px; '>Блок, который должен налазить на картинку</div>
     <img src="#" />
  </div>

Автор: sgustok 18.6.2009, 21:18

thx) помогло

Автор: K1ng 18.6.2009, 22:21

А мне больше нравится <img src="#" style="margin:-20px;"/>
И атрибут style, кажется уже нигде не используется...

Автор: Violator 18.6.2009, 23:36

K1ng,
наверное margin-top
1) в этом случае без z-index рисунок будет отображаться поверх блока с текстом
2) если блок с текстом будет резиновым по высоте, то вы не сможете указать margin-top
3) атрибут style используется, но лучше все стили прописывать в css-файле

Автор: K1ng 19.6.2009, 16:22

Violator,
вообщето { margin-right: -20px; }
1) Если теги img и div поменять местами, то z-index отпадает... (я им редко пользуюсь) Только когда приходится писать CSS под уже готовую разметку...
2) Во-первых, верхнее поле нам не особо нужно, во-вторых, почему это не смогу? Совместно с блоком текста легко можно поднять картинку margin-ом! =)
3) Я вроде читал когда-то что в 3-ем уберут его из спецификации...

Только в моем варианте нужно обеим тегам задать значение дисплая - инлайн, поменять местами(уже упоминал) и (желательно) задать фиксированную ширину... Мне просто это больше нравится чем позиционирование...

Автор: Violator 19.6.2009, 17:52

K1ng,
буду признателен за приведенный вами код...

Автор: K1ng 20.6.2009, 00:36

<html><head>
<style type="text/css">
* { margin: 0; border: 0; padding: 0; }
#qDIV {
display: inline;
background-color: #ff99ff;
}
#qIMG {
float: left;
margin-right: -20px;
}
</style>
</head><body>
<img src="rrr.jpg" id="qIMG" />
<div id="qDIV">Это типа у нас блок текста...</div>
</body></html>

как-то так...

Автор: Violator 21.6.2009, 00:15

K1ng,
неужели текст будет переносится в блоке с дисплей инлайн?
да и в ИЕ не совсем все хорошо.