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

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

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

Автор: polosatij 15.10.2007, 18:45

не могу расположить один div внутри другого => снизу. заранее не известна высота внешнего дифа.. яваскрипт для решения не подходит, т.к. нужно решение для печати.. smile

внешний див может содержать background-image или просто <img .. с position:absolute

млин.. как решить траблу? smile

Автор: SamDark 15.10.2007, 18:50

polosatij,
Схему в виде картинки в студию.

Автор: polosatij 15.10.2007, 19:03

Добавлено через 3 минуты и 47 секунд

то есть диф1 имеет backgroud-image, а див2 должен расположиться внизу дифа1 и перекрыть image smile

Добавлено через 8 минут и 17 секунд

мне надо отсечь картинку снизу на 20 пикселей

Автор: Illuminaty 16.10.2007, 09:47

что-то вроде этого:

Код


<div style="height: 150px; background-color: #CC9900;"></div> 
<div style="height: 100px; margin-top: -100px; background-color: #CC3333;"></div>

Автор: polosatij 16.10.2007, 11:07

Illuminaty,

так ничего не выйдет.. расположи в первом дифе картинку + я вверху сказал: "неизвестна высота внешнего дифа"

если бы высота была известна, вопроса вообще не стояло бы smile

Автор: kizune 16.10.2007, 11:38

может так?

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
html, body {height: 100%; margin: 0; padding: 0;}
#content {min-height: 100%; height: 100%; background-color:#666666;}
.content {padding-bottom: 100px;}
#bottom {margin-top: -20px; height: 20px; background: red;}
</style>
</head>
<body>
<div id="content">
<div class="content">
   content<br>
   content<br>
</div>
</div>
<div id="bottom">
   footer
</div>
</body>
</html>

Автор: Illuminaty 16.10.2007, 11:53

polosatij, размеры как и цвета даны для наглядности.
В будущем прошу вас поточнее формулировать свой вопрос

Автор: polosatij 16.10.2007, 12:41

Цитата(kizune @ 16.10.2007, 11:38

)

может так?

нет.. у тебя див распологается в конце страницы..

Цитата(Illuminaty @ 16.10.2007, 11:53

)

polosatij, размеры как и цвета даны для наглядности.
В будущем прошу вас поточнее формулировать свой вопрос

млин.. как же объяснить ещё.. я ведь написал.. у меня есть некая картинка.. мне не известны заранее её размеры и мне надо отсечь у неё внизу 20 пикселей или перекрасить просто 20 нижних пикселей на белый цвет.. smile

Автор: kizune 16.10.2007, 13:19

Цитата

нет.. у тебя див распологается в конце страницы..

он перекрывает основной div на 20px
можно поменять стиль высоты и поставить auto

Код


<style>
html, body {height: 100%; margin: 0; padding: 0;}
#content {min-height:auto ; height:auto; background-color:#666666;}
#bottom {margin-top: -20px; height: 20px; background: red;}
</style>

Автор: polosatij 16.10.2007, 15:51

kizune,

ага.. тока вот так:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
html, body {height: 100%; margin: 0; padding: 0;}
#content {min-height:auto ; height:auto; }
#bottom {margin-top: -20px; height: 20px; }
</style>
</head>
<body>
<div id="content">
  <div class="content">
     <img src="architektur.gif" alt="" />
  </div>
</div>
  <div id="bottom">
     <img src="white.gif" alt="" height="20" width="100%" />
  </div>
</body>
</html>

странно.. на .хтмле я написал уже пару десятков страниц, но к такому простому решению я вчера не дошёл.. как только я не пытался.. блин..

зачёт smile