[PHP][HTML][CSS] Wyswietlanie wewnatrz div'a o zadanej min-height Opcje

[lukasszek]

Mam na stronie cos takiego:

[HTML] pobierz, plaintext 
<div class="content"></div>
[HTML] pobierz, plaintext 

w dolaczanym pliku .css mam m.in.

[HTML] pobierz, plaintext 
.content{
    width: 900px;
    min-height:600px;   
}
[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?

Ten post edytował lukasszek 11.11.2008, 00:51:10

[lukaszgolder]

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

Ten post edytował lukaszgolder 11.11.2008, 00:20:41

[ayeo]

Witaj na forum

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

Pozdrawiam!

PS Następnym razem zamknę temat

[lukasszek]

Ad.1 uzywam firefoxa, ale dziala tak samo na ie dzieki:

[HTML] pobierz, plaintext 
* html #default{
height: 600px;
}
[HTML] pobierz, plaintext 

Ad.3.
Cala struktura strony wyglada tak:

[HTML] pobierz, plaintext 
<div class="header">naglowek</diV>
<div class="page" id="default"> 
   <div class="leftcontent">tutaj laduje odpowiednie menu</div>
   <div class="content">tutaj laduje odp zawartosc </div>
</diV>     
<div class="footer">stopka</div>
[HTML] pobierz, plaintext 

i css do tego:

[HTML] pobierz, plaintext 
.header {
    background-image: url(Images/h1.gif);
    background-repeat: no-repeat;
    position: relative;
    width: 900px;
    height: 120px;
    margin: 0 auto ;
}
 
.footer {
    background-image: url(images/footer.gif);
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    width: 900px;
    height: 95px;
    text-align: center;
    font-size: 10px;
    color: #ffffff;
}
 
.page {
    background-repeat: repeat-y;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}
 
#default{
    background-image: url(images/shim4.gif);
    position: relative;
    width: 900px;    
    min-height:600px;
    font-family:Verdana;
    color:#ffffff;
    text-align:center;
    font-size:12px;
}
 
* html #default{
height: 600px;
}
 
.leftcontent{
    position: absolute;
    width: 200px;    
    left:15px;
}
 
.content{
    top: 5px;
    position: absolute;
    width: 670px;    
    left:215px;
}
[HTML] pobierz, plaintext 

Ad.2. Przykladowa funkcja wyswietlajaca:

[PHP] pobierz, plaintext 
<?php
 function wyswietl_tabele_klientow($dane,$zaznacz)
 {
 ?>
 
 <table>
 <tr bgcolor=#B90000>
 <td><strong>Login</strong></td>
 <td><strong>Klient</strong></td>
 <td><strong>Stan</strong></td>
 <td><strong>Adres</strong></td>
 <td><strong>Miasto</strong></td>
 <td><strong>Telefon</strong></td>
 <td><strong>Email</strong></td>
 
 </tr>
 <?php
 foreach($dane as $rzad)
 {
     if ($kolor == "#606060")
         $kolor = "#656565";
     else
         $kolor = "#606060";
     
     if($rzad['login_klienta']==$zaznacz) 
         $kolor = 'blue';
     echo "<tr bgcolor=$kolor><td>".$rzad['login_klienta']."</td>";
     echo "<td>".$rzad['imie_klienta'].' '.$rzad['nazwisko_klienta']."</td>";
     echo "<td>".$rzad['status_klienta']."</td>";
     echo "<td>".$rzad['adres']."</td>";
     echo "<td>".$rzad['miejscowosc']."</td>";
     echo "<td>".$rzad['telefon']."</td>";
     echo "<td>".$rzad['email']."</td></tr>";
 }
 ?>
 </table>
 <a href="klienci.php?akcja=n"><img src="../Images/nowy.gif" border=0/></a>
 
 <?php
 }
 ?>
[PHP] pobierz, plaintext 

Ten post edytował lukasszek 11.11.2008, 01:08:48

[hiszpanespaniol]

[HTML] pobierz, plaintext 
div#default {
 
height: auto !important;
 
height: 600px;
 
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 
div.clear {clear: both}
 
 
 
<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

Ten post edytował hiszpanespaniol 11.11.2008, 12:02:51

[lukasszek]

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?

[hiszpanespaniol]

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

Ten post edytował hiszpanespaniol 11.11.2008, 14:47:31

[lukasszek]

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?

Ten post edytował lukasszek 11.11.2008, 15:39:32

[hiszpanespaniol]

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.