DIV'ная проблема с позиционированием и понятием "контента"

BaBL · February 29, 2008

В общем есть проблема. Схема страницы:

проблема такого плана, не могу получить правильное отображение. Контент находится "поверх" картинки, загнать картинку в background нельзя, так как она должна тянуться от ширины экрана, соответственно это абсолютно спозиционированная картинка с width:100%, которая принимает ширину внешнего DIV'а (бордового). У этой картинки сверху прозрачные уголки. В общем это должно выглядеть примерно так:

bgstrip - вертикальная полоса цвета "низа" картинки и прозрачная сверху (чтоб прозрачные уголки картинки не перекрылись)

- абсолютное позиционирование top-0, left-0, чтобы быть привязанной к внешнему диву

- текст и другая информация, должны быть ПОВЕРХ картинки, но если им задать position-absolute, чтоб поиграться с z-index, div outer перестает воспринимать контент этого дива и схлопывается в пиксель, а div content висит сверху сам по себе. Это проблема, так как под внешним дивом есть еще подвал, который от нижней границы div outer отступает фиксированную высоту и улетает, соответственно, вверх за ним. Если абсолютного позиционирования контенту не задавать, внешний див имеет правильный размер, подвал тоже на месте, но спозиционированная картинка перекрывает контентный див. Если поместить картинку ВНЕ div-outer и спозиционировать ее относительно всего документа - получаем почти нужный эффект. Почему почти? потому что тогда картинка перекрывается куском bgstrip, так как он задан на внешний div. Подогнать "прозрачную" часть этого куска под всю высоту картинки не просто, так как она масштабируется =)))

в общем попал я в замкнутый круг. Очень надеюсь на помощь, знаю что проблему можно решить через js, привязав пересчет позиций бэкграунда во втором случае или же позиционируя подвал абсолютно в зависимости от размера контента к событиям onresize и onload, но очень хотелось бы обойтись без этого. Вообще реально добиться поставленной задачи? В идеале было бы привязать абсолютный div-content в качестве контента div-outer, но как!? может есть какие-то свойства, которых я просто не учел? К сожалению CSS3 background-size так же пока в пролете.

klierik · February 29, 2008

неуверен что понял о чем именно вы говорите, но возможно данный подход вам поможет:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

 <style type="text/css">
 * {margin:0; padding:0;}

 img {border:1px solid red; display:block; background-color:#0c0;} /* block only for browse */


 div.holder {background-color:#ccc;}
 div.content {position:relative; margin-top:-100px;} /* 100px == imh.height */

 div.footer {height:64px; background-color:#aaa;}
 </style>

</head>

<body>

 <div class="holder">
 <img src="#" width="100%" height="100" alt="" />
 <div class="content">
 <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
Where does it come from?
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. Where can I get some?
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
 </div>
 </div>
 <div class="footer"><span>footer</span></div>

</body>
</html>

BaBL · February 29, 2008

Немного не поняли. В данном случае Вы задаете смещение контентного слоя на 100px вверх и все, НО! я не знаю высоту картинки!!! Вы ее зафиксировали в 100px, у меня же она масштабируется постоянно. То есть margin-top придется обсчитывать через JS (ну или expression, уж не знаю что из них страшнее). Мне нужно позиционирование контентного слоя в абсолюте +0+0 относительно внешнего блока, а не относительно низа фоновой картинки. тянучка идет от 1000 до 1600, то есть на 60%, это достаточно большой разброс, самое поганое - я не могу зафиксировать высоту картинки, в этом случае мог бы банально сделать "прозрачный".кусок страйпа высотой с картинку, а дальше пустить фон, даже не нужно было бы смещение контентного поля, так как картинка имела бы абсолют "под" контентом, но тут очень специфично дизайнеры поработали =(

klierik · February 29, 2008

хм.. чтото ничего в голову не приходит... (((

на если это реализовывать на JS

в таком случае можно попробывать узнать высоту рисунка и выставить margin-top: -Х; через JS,

BaBL · February 29, 2008

хм.. чтото ничего в голову не приходит... (((
на если это реализовывать на JS
в таком случае можно попробывать узнать высоту рисунка и выставить margin-top: -Х; через JS,

да с JS проще бэкграунд "под картинкой" позиционировать, но не хотелось бы.

Sign In

DIV'ная проблема с позиционированием и понятием "контента"

Question

BaBL

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

klierik

Link to comment

Share on other sites

BaBL

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

BaBL

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information