Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP][CSS]Wydłuzanie obrazka tła zgodnie z ilością tekstu
Forum PHP.pl > Forum > Przedszkole
Mlody993
Witam,
jakiej opcji użyć, aby obrazek rozciągał się według tego ile jest tekstu??


@edit:

Albo zapytam inaczej. Czy jest możliwość, aby jeden blok wydłużał się według długości innego bloku??
erix
google: faux columns albo http://www.alistapart.com/articles/holygrail
Drav
można tez:
  1. padding-bottom: 100000000px;
  2. margin-bottom: -100000000px;

i
  1. overflow: hidden
dla elementu nadrzędnego smile.gif
Mlody993
O wielkie dzięki. smile.gif

Tylko teraz jest problem. Bo mam podzielone na taki układ: Lewa ścianka, pole na treść, pole na menu, prawa ścianka.

Tak: |- - |

I gdy uzupełnię tekst w polu na treść robi się tak:
|- -|
|- -

A gdy uzupełnię polę na menu, a pole na treść nie to wygląda tak:
|- -|
- -|

No i jak to naprawić? Myślę, żeby pole na treść i na menu dać w jeden np. <div id="counter">. Czy jak? :/
Maxik
To jest własnie faux column o którym pisał erix
Drav
ja proponuje zrobic to tak:
CSS (tylko do wydłużania się, reszte sobie sam ustaw)
  1. .wydloz {
  2. padding-bottom: 100000000px;
  3. margin-bottom: -100000000px;
  4. }
  5.  
  6. .kontener {
  7. overflow: hidden;
  8. }

HTML
  1. <div class="kontener">
  2. <div class="wydloz">lewa</div>
  3. <div class="wydloz">srodek</div>
  4. <div class="wydloz">prawa</div>
  5. </div>
Mlody993
Cytat(Drav @ 8.07.2009, 01:11:19 ) *
ja proponuje zrobic to tak:
CSS (tylko do wydłużania się, reszte sobie sam ustaw)
  1. .wydloz {
  2. padding-bottom: 100000000px;
  3. margin-bottom: -100000000px;
  4. }
  5.  
  6. .kontener {
  7. overflow: hidden;
  8. }

HTML
  1. <div class="kontener">
  2. <div class="wydloz">lewa</div>
  3. <div class="wydloz">srodek</div>
  4. <div class="wydloz">prawa</div>
  5. </div>


Myślę, że Twoja rada by rozwiązała mój problem.

Ale czy mógłbyś podać przykład na moim wzorze? Czyli lewa sciana, treść, menu, prawa sciana ?


@edit:
Problem rozwiązałoby to, gdyby długość pola na menu rozciągała się według dłuości pola na treść. Wtedy jedno od drugiego byłoby zależne. Bo gdy dużo treści w menu, to się wydłuża i prawa ściana też...

@edit2:
Aha u mnie jest tak, że pod środek i menu są inne obrazki tła, więc jak dam wszystko w blok "wydluz" to po prostu się powali z tłem. :/
Drav
Nie rozumiem. Daj jakiś obrazek w paincie tego jak to ma wyglądać to Ci podam kod smile.gif

Jeśli chcesz, zeby wydłuzały sie tylko niektóre elementy to ustaw
  1. padding-bottom: 100000000px;
  2. margin-bottom: -100000000px;

tylko dla tych elementów, a jeśli chodzi Ci o coś innego to patrz wyżej (rysunek).
erix
Cytat
CSS (tylko do wydłużania się, reszte sobie sam ustaw)

A do czego ja zalinkowałem... dry.gif

Cytat
Ale czy mógłbyś podać przykład na moim wzorze? Czyli lewa sciana, treść, menu, prawa sciana ?

Chcesz gotowca? Rusz się trochę.
Mlody993
Dobra chłopaki, wielkie dzięki za pomoc. Poradziłem sobie.

Po prostu skorzystałem z Faux Column i dodałem go do każdej ściany (lewa i prawa).

Blok wyglądał tak: DIV sciana + treść /DIV (następny blok) DIV menu + ściana /DIV

I po prostu dałem to tak: DIV ściana + treść /DIV (następny blok) DIV menu + ściana /DIV Ściana /DIV

Czyli po bloku z menu dodałem jeszcze jedną ścianę i jest super. smile.gif
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.