Forum PHP.pl > Rozszerzalny div zachodzący na inne div-y

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Rozszerzalny div zachodzący na inne div-y

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

rugby

21.05.2009, 14:03:16

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

21.05.2009, 15:25:32

Nie - pozostaje JavaScript

erix

21.05.2009, 15:40:58

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

21.05.2009, 16:15:52

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.

erix

22.05.2009, 16:39:52

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

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.