Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css] poprawka w ulozeniu divow
Forum PHP.pl > Forum > Przedszkole
wzd
Witam
Potrzebuje pomocy, chciałbym aby w przypadku gdy div4 ma dużo tekstu to pozostałe divy przesuwały sie na dól.
A więc tak najpierw obrazek jak to teraz wygląda :



Tutaj kod css :


  1. .div4
  2. {
  3. position:relative;
  4. left:251px;
  5. top:212px;
  6. width:463px;
  7. height:auto;
  8. background:#FFFFFF;
  9. }
  10.  
  11. .div2
  12. {
  13. position:absolute;
  14. left:714px;
  15. top:454px;
  16. width:238px;
  17. height:159px;
  18. background-image:url(images/index_15.jpg);
  19. }
  20.  
  21. .div1
  22. {
  23. position:absolute;
  24. left:77px;
  25. top:454px;
  26. width:174px;
  27. height:159px;
  28. background-image:url(images/index_14.jpg);
  29. }
  30.  
  31. .div3
  32. {
  33. position:absolute;
  34. left:77px;
  35. top:613px;
  36. width:875px;
  37. height:44px;
  38. background-image:url(images/index_16.jpg);
  39. }
kbsucha
Zrob tak zeby obrazek z div3 zawieral sie w jeszcze jednym duzym "kontenerze" (tekst+ div1+div2) i on bedzie sie rozszerzal razem z div4. Prawdopodobnie trzeba bedzie nadac div3 wartosc clear: both

pozdr
wzd
zrobiłem tak :

HTML :

  1. <div class="obszar">
  2.  
  3. <div class="menu_lewa">
  4. </div>
  5.  
  6. <div class="srodek">
  7. </div>
  8.  
  9. <div class="menu_prawa">
  10. </div>
  11.  
  12. <div class="dol">
  13. </div>
  14. </div>


CSS :

  1. .obszar
  2. {
  3. position:relative;
  4. left:81px;
  5. top:212px;
  6. width:859px;
  7. height:auto;
  8. background-image:url(images/index_06.jpg);
  9. }
  10.  
  11. .menu_lewa
  12. {
  13. position:absolute;
  14. top:0px;
  15. left:4px;
  16. width:174px;
  17. height:auto;
  18. background:#FFFFFF;
  19.  
  20. }
  21.  
  22. .menu_prawa
  23. {
  24. position:absolute;
  25. top:0px;
  26. left:678px;
  27. width:174px;
  28. height:auto;
  29. background:#FFFFFF;
  30. }
  31.  
  32. .srodek
  33. {
  34. margin-left:200px;
  35. width:463px;
  36. height:auto;
  37. background:#FFFFFF;
  38. text-align:justify;
  39. }
  40.  
  41. .dol
  42. {
  43. position:absolute;
  44. width:858px;
  45. height:44px;
  46. background-image:url(images/index_16.jpg);
  47. }


Efekt jest taki, że teraz jeżeli na środku jest dużo tekstu to elegancko się powiększa obszar. Ale w momencie gdy środek nie ma np tekstu to menu lewe i prawe nie powiększa się i wyjeżdża poza. Jakieś pomysły jak to ugryźć ?
Kreton
Pisane z palca, mogą być błędy biggrin.gif

Kod
<div class="obszar">            
       <div class="menu_lewa"></div>
       <div class="srodek"></div>
       <div class="menu_prawa"></div>  
       <div class="dol"></div>
</div>


Kod
#obszar {
width: 100%;
}

#menu_lewa {
float: left;
width:250px;
}

#menu_prawa {
float: right;
width: 250px;
}

#srodek {
margin: 0 260px; /* czy jak tam chcesz ustawić marginesy*/
}

#dol {
width: 100%;
clear: both;
}
wzd
dzięki sprawdze
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.