Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP][HTML][CSS] Wyswietlanie wewnatrz div'a o zadanej min-height
Forum PHP.pl > Forum > Przedszkole
lukasszek
11.11.2008, 00:16:33
Mam na stronie cos takiego:
[HTML] pobierz, plaintext 
  1. <div class="content"></div>
[HTML] pobierz, plaintext


w dolaczanym pliku .css mam m.in.
[HTML] pobierz, plaintext 
  1. .content{
  2.     width: 900px;
  3.     min-height:600px;   
  4. }
[HTML] pobierz, plaintext

no bo chce zeby wysokosc tego div'a wynosila minimum 600 nawet jesli nic tam nie wpisze.

Teraz tak, do tego diva laduje rozne funkcje php, ktore cos wyswietlaja. Czasem wysokosc tego co wyswietlaja przekracza 600px. Wowczas jednak wysokosc tego diva content automatycznie sie NIE powieksza, caly czas ma 600.. a wyswietlane rzeczy nachodza mi na stopke strony i wszystko inne.

Stad pytanie jest takie. Jak zrobic by wysokosc tego div content byla zalezna od wysokosci tego co wyswietla skrypt php?
lukaszgolder
11.11.2008, 00:20:20
PHP nie ma tu nic do rzeczy, ważne jest tylko w jaki sposób wyświetlane są dane z tych funkcji. 

1) Napisz jakiej przeglądarki używasz, gdyż IE nie obsługuje min-height
2) Pokaż przykładową funkcje którą wyświetla dane w środku tego diva.
3) Co to jest między innymi, napisz dokładnie jak wygląda CSS tego diva
ayeo
11.11.2008, 00:41:49
Witaj na forum winksmiley.jpg

@lukasszek jesteś nowy więc przymykam oko. Zapoznaj się z regulaminem. Popraw tytuł swojego posta. Uzupełnij też treść o brakujące znaczniki BBcode winksmiley.jpg I pamiętaj o tym na przyszłość.

Pozdrawiam!

PS Następnym razem zamknę temat winksmiley.jpg
lukasszek
11.11.2008, 00:58:47
Ad.1 uzywam firefoxa, ale dziala tak samo na ie dzieki: 
[HTML] pobierz, plaintext 
  1. * html #default{
  2. height: 600px;
  3. }
[HTML] pobierz, plaintext


Ad.3.
Cala struktura strony wyglada tak:
[HTML] pobierz, plaintext 
  1. <div class="header">naglowek</diV>
  2. <div class="page" id="default"> 
  3.    <div class="leftcontent">tutaj laduje odpowiednie menu</div>
  4.    <div class="content">tutaj laduje odp zawartosc </div>
  5. </diV>     
  6. <div class="footer">stopka</div>
[HTML] pobierz, plaintext


i css do tego:
[HTML] pobierz, plaintext 
  1. .header {
  2.     background-image: url(Images/h1.gif);
  3.     background-repeat: no-repeat;
  4.     position: relative;
  5.     width: 900px;
  6.     height: 120px;
  7.     margin: 0 auto ;
  8. }
  9.  
  10. .footer {
  11.     background-image: url(images/footer.gif);
  12.     background-repeat: no-repeat;
  13.     margin-left: auto;
  14.     margin-right: auto;
  15.     width: 900px;
  16.     height: 95px;
  17.     text-align: center;
  18.     font-size: 10px;
  19.     color: #ffffff;
  20. }
  21.  
  22. .page {
  23.     background-repeat: repeat-y;
  24.     margin-left: auto;
  25.     margin-right: auto;
  26.     text-align: left;
  27. }
  28.  
  29. #default{
  30.     background-image: url(images/shim4.gif);
  31.     position: relative;
  32.     width: 900px;    
  33.     min-height:600px;
  34.     font-family:Verdana;
  35.     color:#ffffff;
  36.     text-align:center;
  37.     font-size:12px;
  38. }
  39.  
  40. * html #default{
  41. height: 600px;
  42. }
  43.  
  44. .leftcontent{
  45.     position: absolute;
  46.     width: 200px;    
  47.     left:15px;
  48. }
  49.  
  50. .content{
  51.     top: 5px;
  52.     position: absolute;
  53.     width: 670px;    
  54.     left:215px;
  55. }
[HTML] pobierz, plaintext


Ad.2. Przykladowa funkcja wyswietlajaca:
[PHP] pobierz, plaintext 
  1. <?php
  2.  function wyswietl_tabele_klientow($dane,$zaznacz)
  3.  {
  4.  ?>
  5.  
  6.  <table>
  7.  <tr bgcolor=#B90000>
  8.  <td><strong>Login</strong></td>
  9.  <td><strong>Klient</strong></td>
  10.  <td><strong>Stan</strong></td>
  11.  <td><strong>Adres</strong></td>
  12.  <td><strong>Miasto</strong></td>
  13.  <td><strong>Telefon</strong></td>
  14.  <td><strong>Email</strong></td>
  15.  
  16.  </tr>
  17.  <?php
  18.  foreach($dane as $rzad)
  19.  {
  20.      if ($kolor == "#606060")
  21.          $kolor = "#656565";
  22.      else
  23.          $kolor = "#606060";
  24.      
  25.      if($rzad['login_klienta']==$zaznacz) 
  26.          $kolor = 'blue';
  27.      echo "<tr bgcolor=$kolor><td>".$rzad['login_klienta']."</td>";
  28.      echo "<td>".$rzad['imie_klienta'].' '.$rzad['nazwisko_klienta']."</td>";
  29.      echo "<td>".$rzad['status_klienta']."</td>";
  30.      echo "<td>".$rzad['adres']."</td>";
  31.      echo "<td>".$rzad['miejscowosc']."</td>";
  32.      echo "<td>".$rzad['telefon']."</td>";
  33.      echo "<td>".$rzad['email']."</td></tr>";
  34.  }
  35.  ?>
  36.  </table>
  37.  <a href="klienci.php?akcja=n"><img src="../Images/nowy.gif" border=0/></a>
  38.  
  39.  <?php
  40.  }
  41.  ?>
[PHP] pobierz, plaintext
hiszpanespaniol
11.11.2008, 11:58:38 
[HTML] pobierz, plaintext 
  1. div#default {
  2.  
  3. height: auto !important;
  4.  
  5. height: 600px;
  6.  
  7. min-height: 600px;
[HTML] pobierz, plaintext




1sza ustawia automatyczną wysokość w przeglądarkach typu ie7, Fx, Opera i każe im zignorować drugą linijkę.

2ga jest dla ie6 (która nie rozumie 1szej ani 3ciej. dla ie "height" znaczy tyle co "min-height") i ustawia minimalną wysokość dla tej przeglądarki.

3cia jest dla ie7, Fx, Opera i ustawia minimalną wysokość dla nich.



div'y floatowane nie mają wysokości, zeby div default sie rozciągał musisz pod nimi dać element z clear: both. zazwyczaj jest to stopka, ale jeżeli nic Ci tamnie pasuje, to napisz po prostu:



[HTML] pobierz, plaintext 
  1. div.clear {clear: both}
  2.  
  3.  
  4.  
  5. <div class="clear"><!-- --></div>
[HTML] pobierz, plaintext




pozdrawiam

edit:
chyba mi się div'y pomyliły. powinienes to zastosowac dla "content", nie "default". div z "clear: both" zostaje pod div'ami floatowanymi
lukasszek
11.11.2008, 14:41:48
Dzieki za odp.
dodalem te 3 linijki do div default oraz wpis z clear:both do div footer, ale efekt jest dokladnie taki sam, czyli ustawia 600 i jesli cos jest wieksze to wchodzi na footer. Jak dodam te 3 linijki do div content to od razu pod header laduje mi footer, czyli tak w ogole nie moze byc. Ehh. Co robie zle? sadsmiley02.gif
hiszpanespaniol
11.11.2008, 14:46:51
dodaj clear: both do div'a wewnątrz tego co w nim floatujesz, czyli u Ciebie to bedzie wewnątrz default
Ci napiałem, że jak Ci stopka w tym miejscu nie pasuje, to daj tam pustego diva z clear: both, czytaj uważnie. wewnatrz div'a default masz miec 3 divy: leftcontent, content i clear. stopka i header nic nie maja d tego co sie dzieje wewnątrz default
lukasszek
11.11.2008, 15:37:40
Nadal gdzies mam blad, pewnie znow czegos nie zrozumialem.
Przykladowy plik php:
Kod
<html>
   <head>
       <link rel="stylesheet" href="style2.css"  type="text/css"/>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   </head>
   <body>
   <div class="header">naglowek</diV>

   <div class="default2">
       <div class="leftcontent2">tutaj laduje odpowiednie menu</div>

       <div class="content2"> tutaj laduje odp zawartosc
           <table border=1>
               <?php for($i=0;$i<100;$i++) echo '<tr><td>'.$i.'<td><tr>'; ?>
           </table>
       </div>

       <div class="clear"><!--  --></div>

   </div>
   
   <div class="footer">stopka</div>
 
   </body>
</html>


plik style2.css - grafiki zastapilem kolorami zeby bylo dobrze widac.
Kod
body {
     margin: 0;
     padding: 0;
     text-align: center;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     color: #000000;
}


.header {
     background-color: blue;
     position: relative;
     width: 900px;
     height: 120px;
     margin: 0 auto;
}


.footer {
background-color: green;
     background-repeat: no-repeat;
     margin-left: auto;
     margin-right: auto;
     width: 900px;
     height: 95px;
     text-align: center;
     font-size: 10px;
     color: #000000;
}

.default2{
     background-repeat: repeat-y;
     margin-left: auto;
     margin-right: auto;
     height: auto !important;
     height: 600px;
     min-height: 600px;
     background-color: red;
     position: relative;
     width: 900px;
     font-family:Verdana;
     color:#000000;
     text-align:center;
     font-size:12px;
}

.leftcontent2{
background-color: yellow;
     position: absolute;
     width: 121px;    
     left:15px;
}

.content2{
background-color: aqua;
     top: 5px;
     position: absolute;
     width: 749px;    
     left:136px;
}

.clear {clear: both;}


Co tym razem sknocilem?
hiszpanespaniol
11.11.2008, 17:02:38
całkiem niepotrzebnie pozycjonujesz absolutnie. tak wypozycjonowany div już w ogóle się "nie liczy" podczas generowania strony. 

dla leftcontent2 "position: absolute" zamień na "clear: left; float: left", dla content2 zamień na "float: left". atrybuty "top" i "left" całkiem usuń. suma szerokości tych dwóch div'ów (z paddingami i marginesami i borderami) nie może być większa od szerokości default'a.

z tego co widzę, to po omacku stosujesz te atrybuty i stąd problemy. najlepiej zacznij od kursu ewentualnie od gotowego layout'u.
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.