Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css]/[php] wyświetlanie zdjęć
Forum PHP.pl > Forum > Po stronie przeglądarki
Lejto
Mam kod który pobiera i wyświetla 4 ostatnio dodane zdjęcia
Najpierw to:
  1. <div style="width:590px;"> <!--otworzenie pódelka-->
  2. <div class="le"></div>
  3. <div class="sr" style="width:560px;"> <p class="naglowek">&raquo; Ostatnio dodane zdjecia przez uzytkowników </p></div>
  4. <div class="pr"></div>
  5. <div style="background:#f1f2ff;" id="xD"> <!--nadanie koloru-->
  6.  
  7. <? include("mods/galeria_user.php"); // dodanie galerii ?>
  8.  
  9. </div> <!--nadanie koloru end-->
  10. <div class="le_d"></div>
  11. <div class="sr_d" id="szer"></div>
  12. <div class="pr_d"></div>
  13.  
  14.  
  15.  
  16. </div> <!--zamkniecie pudelka-->

galeria_user.php:
  1. <?
  2.    $sql = mysql_query("SELECT * FROM `galeria_users` ORDER BY `galeria_users`.`id` DESC LIMIT 4");
  3.    $rows = mysql_num_rows($sql);
  4.    if($rows == 0)
  5.        {
  6.            echo '<font size="2px"><center>Brak zdjęć</center></font>';
  7.        }
  8.    
  9.     for($i=0; $i < $rows; $i++)
  10.    {  
  11.    $row = mysql_fetch_array($sql);
  12.      error_reporting(0);
  13. // zmiana rozmiaru itp
  14.  
  15.    $data = $row[data_dodania];
  16.    ?>
  17.  
  18.    
  19. <div id="gal" class="obraz">
  20.    <dl>
  21.    <dd class="img">
  22.    <a href="java script:displayWindow1('galeria_users/foto_zoom.php?foto=pokaz&id=<? echo $row[id]; ?>=osoba&nr=<? echo $numerek; ?>',1000,800)">
  23.     <img src="galeria_users/miniatury/<? echo $row[obraz];?>" width="<? echo $tn_width;?>"
  24.     height="<? echo $tn_height; ?>" onMouseOver="this.style.filter='alpha(opacity=50)'" onMouseOut="this.style.filter=''">
  25.    </a>
  26.     <?
  27.         if(!empty($wiersz[i_n]))
  28.            {
  29.                $zz = "($wiersz[i_n])";
  30.            }
  31.            else
  32.            {
  33.                $zz = " ";
  34.            }    
  35.    ?>            
  36.    <br>
  37.    <span id="obr">
  38.     <a href="?kto=pokaz_profil&id=<? echo $wiersz[id];?>"><? echo $wiersz[user]; echo  $zz;?></a>
  39.    </span>
  40.    <br>
  41.    &raquo; Dodano: <? echo $data; ?><br>
  42.    &raquo; Komentarzy: <? echo  '('.$rows_komm.')'; ?><br>    
  43.     </dd>
  44.    <dd>
  45.    <span class="zoom">
  46.        <a href="galeria_users/obrazy/<? echo $row[obraz]; ?>" rel="lightbox" border=0><img src="images/zoom.gif" align="right" border="0"></a>
  47.    </span>
  48.    </dd>
  49.    </dl>
  50.    </div>
  51.     <?
  52.    }
  53.    
  54. ?>

i css
  1. #gal{
  2. padding:0 0;
  3. border:1px solid #c8cdd2;
  4. min-height:183px;
  5. font-size:11px;
  6. width:160px;
  7. height:183px;
  8. font-family:arial;
  9. text-align:center;
  10. float: left;
  11.  
  12. }
  13. #gal dl{
  14. margin:2px 2px;
  15. padding:0;
  16. display:inline;
  17. text-align:center;
  18. }
  19. #gal dl dd.img{
  20. margin:0;
  21. text-align:center;
  22. }
  23. #gal dd.img img{
  24. padding: 4px;
  25. border:1px solid #D9E0E6;
  26. border-bottom-color:#C8CDD2;
  27. border-right-color:#C8CDD2;
  28. background:#fff;
  29. text-align:center;
  30. }
  31. #gal dd.info font{
  32. text-align:center;
  33. font-size:14px;
  34. float:left;
  35. }
  36. #gal dd.zoom{
  37. float:right;
  38. text-align:right;
  39. }
  40. .obraz{
  41. PADDING-RIGHT: 0px;
  42. PADDING-LEFT: 0px;
  43. PADDING-BOTTOM: 0px;
  44. PADDING-TOP: 15px;
  45. MARGIN: 0px 0px 0px;
  46. FONT: 10px Verdana, arial, Helvetica, sans-serif;
  47. COLOR: #000000;
  48. BACKGROUND-COLOR: #FAFAFA;
  49. background: url(/images/tlo_ramki.gif) repeat-x #FAFAFA;
  50. TEXT-ALIGN:center;
  51. }


w rezultacie otrzymuje coś takiego


jak widzicie źle to wygląda
usunę lub zmienię wartość dla float

jest dobrze tylko obrazki wyświetlają się 1 pod 2
problem powoduje float: left; ze stylu css jak zmienię left na coś innego to jest dobrze ale obrazki wyświetlają się jeden pod 2 zamiast obok siebie. Jest jakieś rozwiązanie?
koreja
Może display:inline-block pomoże?
Lejto
po dodaniu display:inline-block; coś zmieniło ale nadal jest rozwalone
Lion_87
Może za długie są te 4 obrazki łącznie?
erix
Cytat
Jest jakieś rozwiązanie?

Ustawiaj im szerokość "na sztywno"; ~Lion_87 ma rację - obiekty nie mieszczą się wewnątrz rodzica, stąd zawijanie.
Lejto
usunąłem float dodałem tylko display: inline-table; i działa ale w ie 6 wyświetla się 1 pod ...
ograniczyłem wyświetlanie obrazków do 2 wyświetlają się 2 ale 1 pod 2 a z boku jest jeszcze miejsce (ie6)
erix
A jak masz ustawiony doctype? Strict?
Lejto
tak
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="pl" lang="pl">
erix
Był jeszcze bug podwójnego marginesu przy float; zrób osobnego CSS-a dla IE i dołączaj przez komentarz warunkowy.
Lejto
osobny css dla samego float?
erix
Nie tyle, co float, a dla marginesów. Nie pamiętam, czy w IE 7 ten problem również występuje, ale możesz spróbować coś takiego:
Kod
margin: 10px !important; margin: 2px;

Ten drugi będzie dla IE, pierwszy zostanie zinterpretowany przez przeglądarki. Choć polecam osobny CSS dla IE, dlaczego niby to ich użytkownicy mieliby ponosić konsekwencje przeróbek dla programu do pobierania Opery/Fx? tongue.gif
Lejto
dałem do w stylu #gal nic nie dało chyba że to nie tam
erix
No bo to nie tam. winksmiley.jpg
Wstawiasz to tam, gdzie marginesy są nieprawidłowe (podejrzewam, że te małe bloczki) i dostosowujesz wartości. Podałem tylko orientacyjnie.

PS. Przeniosłem.
Lejto
ale tylko 1 styl wchodzi w grę #gal bo reszta nic nie zmienia przy pozycji tylko przy kolorach itp, sprawdziałem
Lion_87
hmmm a tak przy okazji skoro #gal ma width 160px, 160px razy 4 obrazki to 640px a Ty to obejmujesz w div o szerokości 590px...questionmark.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.