Forum PHP.pl > tekst w boxach w 2 kolumnach o różnych wielkościach

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: tekst w boxach w 2 kolumnach o różnych wielkościach

trzykas

27.01.2009, 18:48:07

Witam mam taki problem .

Interesuje mnie żeby wyświetlić kawały w sposób bardzo podobny jak na stronie www.wcipy.pl

Mam zrobione 2 kolumny wszystko spoko ale po wyświetleniu boksy się dziwnie przesuwają nie wiem jak temu zapobiec.
Efekt można zobaczy na http://ahtak.pl/strony/dowcipy2/dowcipy-25-Glupie.html

poniżej prezentuje kod php i css

Kod

#kawaly {
    width: 680px;
    padding: 0px;
    margin: 0px;
}
.reklama_box {
    width: 319px;
    margin: 5px;
    z-index: 2;
}
#kawal_box {
    vertical-align: top;
    padding: 0px;
    margin: 5px;
    border: 1px solid grey;
    width: 300px;
    float: right
}
#kawal_box2 {
    vertical-align: top;
    padding: 0px;
    margin: 5px;
    border: 1px solid grey;
    width: 300px;
    float: left;
}
#kawal_head {
    border: 2px;
    border-bottom: 1px solid grey;
    background-color: lightgrey;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
}
#kawal_top_left {
    width:270px;
    float: left;
    background-color: lightgrey;
    border: 0px;
    padding: 2px;
}
#kawal_top_right {
    float: right;
    width:20px;
    background-color: lightgrey;
    border: 0px;
    padding: 2px;
}

#kawal {
    text-align: justify;
    padding: 9px;
    clear: both;
}
#kawal_bottom {
    border: 2px;
    border-bottom: 1px solid grey;
    background-color: lightgrey;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
}
#kawal_vote {
    width: 60px;
    text-align: left;
    float:left
}
#kawal_ocena {
    width: 100px;
    text-align: left;
    float:left
}
#kawal_autor {
    width: 120px;
    text-align: left;
    float:right;

Kod

        echo '<div id="kawaly">
<div id="kawal_box">
    <div id="kawal_head">
     <div id="kawal_top_left"><strong><span class="style19"><a href="index.html" >Dowcipy</a></span>» <a href="dowcipy-' . $_GET['cat'] .'-'. $cat . '.html" class="style19" >' . $cat . '</a></strong></div>
  <div id="kawal_top_right"><a href="polec-dowcipy-znajomemu-' . $row['id'] . '.html" title="wyslij  znajomemu" class="style16"  >wy</a></div></div>
  <div id="kawal"><span class="kawal">' . $row['opis'] . '</span></div>
<div id="kawal_bottom">
     <div id="kawal_vote">
       <input class="plus" type="submit" name="ocena2" value="5" />
       <input class="minus"  type="submit" name="ocena2" value="1" />
     </div>
     <div id="kawal_ocena"><span class="style17">Ocena:</span>   <span class="style16">' . $row['ocena'] . '</div>
     <div id="kawal_autor">' . $row['login'] . ' lewa </div>
  </div>
</div>';
  $row = mysql_fetch_assoc($res);
      echo '<div id="kawal_box2">
    <div id="kawal_head">
     <div id="kawal_top_left"><strong><span class="style19"><a href="index.html" >Dowcipy</a></span>» <a href="dowcipy-' . $_GET['cat'] .'-'. $cat . '.html" class="style19" >' . $cat . '</a></strong></div>
     <div id="kawal_top_right"><a href="polec-dowcipy-znajomemu-' . $row['id'] . '.html" title="wyslij  znajomemu" class="style16"  >wy</a></div></div>
  <div id="kawal"><span class="kawal">' . $row['opis'] . '</span></div>
<div id="kawal_bottom">
     <div id="kawal_vote">
       <input class="plus" type="submit" name="ocena2" value="5" />
       <input class="minus"  type="submit" name="ocena2" value="1" />
     </div>
     <div id="kawal_ocena"><span class="style17">Ocena:</span>   <span class="style16">' . $row['ocena'] . '</div>
     <div id="kawal_autor">' . $row['login'] . ' prawa </div>
   </div>
   </div>

    </div>
',

koreja

27.01.2009, 18:55:24

Myślę, że najprościej będzie umieścić te boxy w 2 mini-kontenerach z float:left/right ze stałą szerokością.

trzykas

27.01.2009, 18:58:16

hmm a mógłbys podać jakiś przykład ?
bo kawaly_box i kawaly_box2 maja odpowiednio float left i right a wszystko jest umieszczone w table

koreja

27.01.2009, 19:05:00

Spróbuj zrobić tak:

[HTML] pobierz, plaintext 
<div id="glowne">
<div id="lewa">
    <div id="mini">boks z 1 kawalem</div>
</div>
<div id="prawa">
   <div id="mini">boks z 2 kawalem</div>
</div>
</div>
[HTML] pobierz, plaintext

glowne - główny kontener, lewa - lewa kolumna, prawa - prawa kolumna, mini - boks z kawałami.

[HTML] pobierz, plaintext 
#glowne{width:600px;margin0 auto;}
#lewa{width:290px;float:left;overflow:hidden}
#prawa{width:290px;float:right;overflow:hidden}
#mini {width:280px;display:block}
[HTML] pobierz, plaintext

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.