Блок <div... поверх картинки

dima2207 · April 18, 2008

всем привет !

как разместить несколько блоков поверх картинки на примере :

#header {
margin: 0 0 0.2em 0;
padding: 1em 1.5em;
height:8em;


/* CHANGED */
background: #343434 url('header.jpg') no-repeat top left;
border:1px solid ##2D5289;;
}

Dimitry Wolotko · April 18, 2008

И в ч?м проблема?

mav · April 18, 2008

тоже не вижу проблем...

берешь

и внутри него накидываешь нужные блоки %) все %)

dima2207 · April 18, 2008

Не понял . приведите пример пожалуйста . нужно спозиционировать относительно блока

другой блок на 500 px по горизонтали .

Mary_RND · April 18, 2008

Тебе надо чтобы header был под другим блоком, который находить снизу?

mav · April 18, 2008

тогда поясните что именно вам нужно %) как должен быть спозиционирован блок? %)

в общем же виде это будет выглядеть так:

<html>
<head>
<style type=text/css>
#header {
 width: 100%;
 height: 100px;
 background: #0f0;
}

#blok {
 height: 50px;
 width: 500px;
 background: #f00;
}
</style>
</head>
<body>
<div id="header">
 <div id="blok"></div>
</div>
</body>
</html>

красный блок находится внутри контейнера header и в целом может быть какой угодно ширины и высоты, но раз у исходного блока в данном случае 100px, то большего размера внутренний блок делать смысла не имеет. к тому же внутренний блок если не будет иметь своего бекграунда, то он будет прозрачным и все его содержимое будет на фоне блока header, который представляет собой нужное вам изображение %)

извиняюсь, если несколько витиевато выразился, но думаю основная мысль ясна %)

Sign In

Блок <div... поверх картинки

Question

dima2207

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Dimitry Wolotko

Link to comment

Share on other sites

mav

Link to comment

Share on other sites

dima2207

Link to comment

Share on other sites

Mary_RND

Link to comment

Share on other sites

mav

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information