Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] Złe wyświetlanie DIV-ów
Forum PHP.pl > Forum > Przedszkole
Ramzaa
Nie ma co się rozpisywać, zdjęcie i kod powinno wszystko wyjaśnić.



Kod wygląda następująco:
  1. <div class="trow1" style="font-size: 11px; width: 190px; padding: 0; float: left;">
  2. <div style="padding: 5px; background: #dae1e6;">
  3. <img src="http://www.progames.pl/usr/pic/noavatar.gif"><br/>
  4. Posty:<br/>
  5. Grupa: Użytkownicy<br />
  6. Dołączył: 01.02.2003
  7. </div>
  8. </div>
  9.  
  10. <div class="trow1" style="width: 791px; padding: 0; float: left; display: inline;">
  11. <div class="row-p" style="padding: 5px; background: #e8eef2;">
  12. text posta
  13. </div>
  14.  
  15. if (warunek) {
  16. $msf->content .= '
  17. </div>
  18.  
  19. <div style="clear: both;">
  20. <div style="background-color: #dae1e6;">
  21. Link
  22. Link 2
  23. </div>
  24. </div>';
  25. };
  26.  
  27. $msf->content .= '</div><div class="tcat-bottom" style="clear: both;"></div><br />';

Chodzi o to, że to ma wyglądać mniej więcej jak to: http://unisolutions.pl/index.php?act=topic...mp;p=1#post6049
To tylko taki przykład.. jakby nie patrzeć.. <zniesmaczony>

I klasy css:
  1. .trow1 {
  2. border-top: 1px #9db1c2 solid;
  3. background: #e8eef2;
  4. border: 1px #9db1c2 solid;
  5. border-top: 0; border-bottom: 1px #dce3e8 solid;
  6. padding: 5px 0px 5px 7px;
  7. overflow: auto;
  8. color: #272727;
  9. }
  10.  
  11. .tcat-bottom {
  12. background-color: #839196;
  13. height: 3px;
  14. margin-bottom: 10px;
  15. display: block;
  16. }
  17.  
  18. .thead {
  19. border: 1px #9db1c2 solid;
  20. border-top: 0; border-bottom: 0;
  21. background: #cbd6db;
  22. height: 17px;
  23. padding: 5px 0px 3px 10px;
  24. font-size: 10px;
  25. font-weight: bold;
  26. }
  27.  
  28. .trow1 .row-p, .thead .row-p {
  29. display: block;
  30. float: left;
  31. clear: none;
  32. font-size: 11px;
  33. color: #525353;
  34. padding: 0 5px 0 5px;
  35. text-align: center;
  36. min-height: 17px;
  37. }
  38.  
  39. .tcat {
  40. background-color: #0a375c;
  41. color: #eee;
  42. padding: 9px 0px 9px 6px;
  43. margin: 0;
  44. clear: both;
  45. }

Zapewne problem jest banalny, a ja z przepracowania już nie widzę.. <zniesmaczony>
Z góry dziękuję za każdą pomoc.
Mlodycompany
w java scripcie to bardzo prosto zrobisz. wystarczy że pobierzesz wysokość jednego diva i ustawisz w drugim.
Ramzaa
Ale przecież w css też na pewno się da, tylko że ja już nie myślę trzeźwo.. dlatego zwróciłem się o pomoc.
Damonsson
Dajesz to w jednego DIVa i dzielisz na 2 kolejne DIVy. Do tego po prawej dajesz margin left o długości tego lewego DIVa.
Ramzaa
Cytat(Damonsson @ 18.08.2010, 19:50:22 ) *
Do tego po prawej dajesz margin left o długości tego lewego DIVa.


Ale ten div także ma się rozciągać, tak jak w linku, który podałem, tak ma to wyglądać.

Od nowa postanowiłem to napisać:
  1. <div style="background: #000; padding: 5px; color: #eee;">
  2. Nazwa kurwa tematu
  3. </div>
  4.  
  5. <div style="background: #eee; padding: 3px; color: #000;">
  6. <div style="width: 200px; float: left;">
  7. xxx
  8. </div>
  9. <div style="width="600px; float: left; display: inline;">
  10. xxx
  11. </div>
  12. </div>
  13.  
  14. <div style="width: 200px; float: left;">
  15. <div style="padding: 5px; background: #efedef; width: 200px;">
  16. <p style="text-align: center;">
  17. [Awatar]
  18. </p>
  19. xxx<br />
  20. xxx<br />
  21. xxx
  22. </div>
  23. </div>
  24.  
  25. <div style="width: 600px; float: left; display: inline;">
  26. <div style="padding: 5px; background: #efedef; width: 798px">
  27. xxx - to do samego dołu
  28. </div>
  29. </div>
  30.  
  31. <div style="background: #000; text-align: right; clear: both;">xxx</div>

I wygląda to tak:



Z chęcią bym to na tabelach zrobił.. ale nie..
Damonsson
  1. #glowny {
  2. background: #00f;
  3. }
  4. #avatar {
  5. margin-right: 90%;
  6. background: #0f0;
  7. }
  8. #post {
  9. width: 90%;
  10. float: right;
  11. background: #00f;
  12. }


  1. <div id="glowny">
  2. <div id="post">
  3. Lorem ipsum <br/>
  4. Lorem ipsum <br/>
  5. Lorem ipsum <br/>
  6. </div>
  7. <div id="avatar">
  8. Lorem ipsum <br/>
  9. Lorem ipsum <br/>
  10. Lorem ipsum <br/>
  11. Lorem ipsum <br/>
  12. Lorem ipsum <br/>
  13. </div>
  14. </div>


Chyba nic nie pomyliłem ;P
Ramzaa
Damonsson, wielkie dzięki za chęci, ale problem już rozwiązałem. Tzn sam się rozwiązał. Szczerze mówiąc nie wiem jak. Ja tylko przepisałem to od początku. Chyba otrzeźwiałem 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.