Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Rozjezdzajace sie DIVy
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
a600user
Witam,

Mam dosc oklepany temat, ale nie moge sobie z nim poradzic. Na mojej stronie mam duzo warstw (DIV) i efekt jest w miare dobry, to znaczy nie moge ustawic dobrej wysokosci strony. Generalnie dlugosc jest zmienna (to nie powoduje problemu, wydluzenia sa w porzadku), natomiast problemem jest zle wyrownanie warstwy glownej, tzn. jest ona za dluga sama w sobie.

Uproscilem schemat strony i jak widzicie, glowna warstwa czerwona jest za dluga. Jak zrobic, aby pokrywala sie z niebieska ? Jesli zostawie tak, jak jest, to na stronie mam po prostu wolne miejsce na dole i brzydko to wyglada, chcialbym dociac warstwe jakos do dlugosci podrzednej niebieskiej.

Nie moge dac na sztywno dlugosci czerwonej, bo nie znam jej jeszcze w tym momencie. Warstwa niebieska sama sie rozszerza w dol i to ona zaweira praktycznie tresc strony.

W kodzie widac resztki ekperymentow, bo probowalem sam cos zrobic, ale nie wyszlo.
Kod:

  1. <DIV id="glowny" style="
  2. position: relative; margin-left: auto; margin-right: auto; top: 0px; width: 1028px; border: 0px; background-color: #ff0000;
  3. overflow: none;">
  4.  
  5. <DIV id="lewy" style="
  6. position: relative; position: inline; clear: both; float: left; left: 0px; top: 0px; width: 175px; height: 366px; background-color: #ffff00;">
  7. </DIV>
  8.  
  9. <DIV id="prawy" style="
  10. position: relative; position: inline; clear: both; left: 175px; top: -366px; width: 853px; min-height: 366px; background-color: #00ff00;">
  11.  
  12. <DIV id="unname" style="
  13. position: relative;
  14. clear: both;
  15. overflow: hidden;
  16. left: 0px;
  17. top: 129px;
  18. width: 853px;
  19. height: 420px;
  20. background-color:#0000ff;">
  21. a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>
  22. a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>
  23. </DIV>
  24.  
  25. </DIV>
  26.  
  27. </DIV>



Dziekuje za sugestie.
krzysztof_kf
ale bałagan jednym słowem exclamation.gif!

  1. <DIV id="glowny" style="
  2. margin: 0 auto; width: 1028px; background-color: #ff0000;
  3. overflow: hidden;">
  4.  
  5. <DIV id="lewy" style="
  6. float: left; width: 175px; height: 366px; background-color: #ffff00;">
  7. </DIV>
  8.  
  9. <DIV id="prawy" style="float: left; width: 853px; min-height: 366px; background-color: #00ff00;">
  10.  
  11. <DIV id="unname" style="
  12. position: relative;
  13. clear: both;
  14. overflow: hidden;
  15. left: 0px;
  16. top: 129px;
  17. width: 853px;
  18. height: 420px;
  19. background-color:#0000ff;">
  20. a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>
  21. a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>
  22. </DIV>
  23.  
  24. </DIV>
  25.  
  26. </DIV>
a600user
Cytat(krzysztof_kf @ 10.05.2010, 15:19:37 ) *
ale bałagan jednym słowem exclamation.gif!
[ciach]


Troche mam awersje do "odkrywcow", ktorzy ostrzegani przeze mnie o syfie w kodzie wyrazaja tozsame zdanie na ten temat i podaja jeszcze zle rozwiazanie.
Uciales gore niebieskiej warstwy, kolego, nie mowiac juz o rozjechaniu poziomym i o samym "core" problemu, czyli dalej wystajacej wartwie glownej-czerwonej.

Z tego wzgledu preferowalbym rozwiazania sprawdzone, jesli nikt nie ma nic przeciwko.

Jakby to bylo latwe, to bym sie nie pytal ;-) Zreszta, nie chcialem poswiecac problemowi dluzej, jak 5 minut i dostalem za swoje - wystarczylo pomyslec 10 :-)

Kod
<DIV id="glowny" style="
    position: relative; margin-left: auto; margin-right: auto; top: 0px; width: 1028px; border: 0px; background-color: #ff0000;
    overflow: hidden; display: table;">

<DIV id="lewy" style="
    float: left; width: 175px; height: 366px; background-color: #ffff00; display: table-cell; vertical-align: top;">
</DIV>

<DIV id="prawy" style="
    position: inline; top: -366px; width: 853px; background-color: #00ff00; display: table-cell; vertical-align: top;">

  <DIV id="unname" style="
    position: relative;
    display: block;
    top: 200px;
    clear: both;
    overflow: hidden;

    width: 853px;
    height: 420px;
    background-color:#0000ff;">
1<BR>2<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>
a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>a<BR>
  </DIV>

</DIV>

</DIV>
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.