Rozszerzalny div zachodzący na inne div-y Opcje

[rugby]

Witam!

Chciałbym wstawić div-a z tekstem o zmiennej długości (inner), który przesłaniałby 3 div-y (top, mid i bot) z pewnymi background-image. Oczywiście można ustawić:

[SQL] pobierz, plaintext 
#inner { position: absolute; top: 20px; left: 20px; }
[SQL] pobierz, plaintext 

natomiast chodzi mi o to, żeby w miarę zwiększania się tekstu w div-ie inner, zwiększała się wysokość mid, natomiast div-y top i bot miały stałą wysokość. Da się to zrobić w czystym CSS?


Szkic:

Kod

+-top-----------------------------------------+
|     +-inner------------------------------+  |
|     |                                    |  |
+-mid-|   text text text text text text    |--+
|     |   text text text text text text    |  |
|     |   text text text text text text    |  |
|     |   text text text text text text    |  |
|     |   text text text text text text    |  |
+-bot-|   text text text text text text    |--+
|     |                                    |  |
|     +------------------------------------+  |
+---------------------------------------------+

HTML:

[HTML] pobierz, plaintext 
<div id="outer">
  <div id="top"></div>
  <div id="mid"></div>
  <div id="bot"></div>
  <div id="inner">text ...</div>
</div>
[HTML] pobierz, plaintext 

[kamil4u]

Nie - pozostaje JavaScript

[erix]

Da się.

Tylko trzeba zmienić - niestety - kolejność warstw w HTML:

[HTML] pobierz, plaintext 
<div id="top">
<div id="bottom">
<div id="mid">
<div id="inner">
</div></div></div></div>
[HTML] pobierz, plaintext 

Ustawiasz odpowiednio background bez powtarzania. Ogólna zasada - tło mid jest na całej wysokości, bottom i top zasłaniają je w odpowiednich miejscach. I wtedy nie ma potrzeby korzystania z position: absolute, tylko sobie manipulujesz marginesami.

[rugby]

Zrobiłem podobnie, wstawiłem inner wewnątrz mid i ustawiłem CSS:

[XML] pobierz, plaintext 
#inner { position: relative; margin: -10px 20px -10px 20px; }
[XML] pobierz, plaintext 

W ten sposób inner zachodzi mi 10px na top i bot.

Ten post edytował rugby 21.05.2009, 16:16:40

[erix]

Rób paddingami dla rodziców. Z marginesami jest nieraz dziwna sprawa (zależy od przeglądarki) oraz tzw. zapadanie się marginesów.