Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML+CSS] rozciąganie DIVa
Forum PHP.pl > Forum > Przedszkole
aladin07
  1. <div id="wrapper">
  2. <div id="kolumna_a">
  3. <div id="blok_1"></div>
  4. <div id="blok_2"></div>
  5. </div>
  6. <div id="kolumna_b">
  7. <div id="blok_3"></div>
  8. <div id="blok_4"></div>
  9. </div>
  10. <div id="kolumna_c">
  11. <div id="text">lorem ipsum</div>
  12. </div>
  13. </div>


i do tego css
  1. div#wrapper{
  2. overflow: hidden;
  3. display: table;
  4. background-image: url(obrazek_tla);
  5. background-repeat: repeat-y;
  6. }
  7. div#kolumna_a, div#kolumna_b, div#kolumna_c{
  8. display: table-cell;
  9. }
  10. div#blok_1{
  11. background-image: url(obrazek_1);
  12. }
  13. div#blok_2{
  14. background-image: url(obrazek_2);
  15. }
  16. div#blok_3{
  17. background-image: url(obrazek_3);
  18. }
  19. div#blok_4{
  20. background-image: url(obrazek_4);
  21. }


potrzebuje uzyskac efekt samorozcigajacego sie div'a wrapper pod wzgledem ilosci tekstu w div'ie text
z tym jednak zalozeniem, ze kiedy zawartosc div'u text bedzie wieksza niz wysokosc obrazek_1 i obrazek_2
to zeby rozciagniecie div'u kolumna_1 powodowalo, ze obrazek_1 bedzie sie pozycjonowal u gory
div'a kolumna_1, a obrazek_2 pozycjonowal sie na samym dole div'a kolumna_1, a pomiedzy nimi bedzie
sie powtarzal obrazek_tla z div'a wrapper
podobnie sytuacja wyglada dla kolumna_2 i obrazek_3 i obrazek_4
przy obecnym zapisie div wrapper rozciaga sie pod wplywem wiekszej ilosci tresci ale zarowno obrazek_1 i obrazek_2
w kolumna_1 oraz obrazek_3 i obrazek_4 w kolumna_2 pozycjonuja sie do gory swoich kolumn

jak i czy mozna zrobic aby te obrazki ustawialy sie po przeciwstawnych stronach swoich div'ow?

dodam ze na razie to rozwiazanie dziala tylko dla FF w IE jeszcze sie sypie wiec moze jeszcze inaczej
nalezaloby to zbudowac?
Pilsener
Poczytaj w kursie o backround-position, możesz zarówno wyrównać tło dla lewej/prawej góry/dół jak i ustawić jego położenie w pikselach.
aladin07
ale tu nie problemem jest samo tlo (chyba ze zle zrozumialem intencje Twojej odpowiedzi)
chodzi o to by div'y odpowiednio sie rozmiescily wewnatrz kolumny 1 i 2 a w zaleznosci od wielkosci
tresci w kolumnie 3
i nie wiem czy to jest w ogole wykonalne
Pilsener
Niestety nie jest - możesz spróbować zrobić to ewentualnie nakładając JS, który zmierzy wysokość obiektu i ustawi w zależności od tego klasę/styl innego obiektu (o ile da się coś takiego zrobić w JS, bo nie jestem ekspertem od tej technologii).
aladin07
jedyne rozwiazanie ktore teraz przyszlo mi do glowy i dziala na FF
to (pozwole sobie to pogrubic i dac bez znacznika html):

css :
body{
position: absolute;
}

div#wrapper{
overflow: hidden;
display: table;
background-image: url(obrazek_tla);
background-repeat: repeat-y;
}
div#kolumna_a, div#kolumna_b, div#kolumna_c{
display: table-cell;
}
div#blok_1{
background-image: url(obrazek_1);
}
div#blok_2{
background-image: url(obrazek_2);
position: absolute;
bottom: 0px;

}
div#blok_3{
background-image: url(obrazek_3);
}
div#blok_4{
background-image: url(obrazek_4);
position: absolute;
bottom: 0px;

}


nie wiem czy jest to rozwiazanie "ladne" i dobre
ale dla FF mi dziala wiec pewnie i IE bedzie mozna pokonac
czy macie jeszcze inny pomysl na to?
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.