Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [css]/[php] wyświetlanie zdjęć, problem z float
Lejto
post
Post #1





Grupa: Zarejestrowani
Postów: 1 385
Pomógł: 48
Dołączył: 23.05.2007

Ostrzeżenie: (0%)
-----


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?


--------------------
Go to the top of the page
+Quote Post
koreja
post
Post #2





Grupa: Zarejestrowani
Postów: 120
Pomógł: 22
Dołączył: 15.07.2008
Skąd: Raniżów/Rzeszów

Ostrzeżenie: (0%)
-----


Może display:inline-block pomoże?
Go to the top of the page
+Quote Post
Lejto
post
Post #3





Grupa: Zarejestrowani
Postów: 1 385
Pomógł: 48
Dołączył: 23.05.2007

Ostrzeżenie: (0%)
-----


po dodaniu display:inline-block; coś zmieniło ale nadal jest rozwalone


--------------------
Go to the top of the page
+Quote Post
Lion_87
post
Post #4





Grupa: Zarejestrowani
Postów: 850
Pomógł: 120
Dołączył: 15.02.2007
Skąd: Łódź

Ostrzeżenie: (10%)
X----


Może za długie są te 4 obrazki łącznie?
Go to the top of the page
+Quote Post
erix
post
Post #5





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów




Cytat
Jest jakieś rozwiązanie?

Ustawiaj im szerokość "na sztywno"; ~Lion_87 ma rację - obiekty nie mieszczą się wewnątrz rodzica, stąd zawijanie.


--------------------

ZCE :: Pisząc PW załączaj LINK DO TEMATU i TYLKO w sprawach moderacji :: jakiś błąd - a TREŚĆ BŁĘDU? :: nie ponaglaj z odpowiedzią via PW!
Go to the top of the page
+Quote Post
Lejto
post
Post #6





Grupa: Zarejestrowani
Postów: 1 385
Pomógł: 48
Dołączył: 23.05.2007

Ostrzeżenie: (0%)
-----


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)

Ten post edytował Lejto 17.01.2009, 21:43:00


--------------------
Go to the top of the page
+Quote Post
erix
post
Post #7





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów




A jak masz ustawiony doctype? Strict?


--------------------

ZCE :: Pisząc PW załączaj LINK DO TEMATU i TYLKO w sprawach moderacji :: jakiś błąd - a TREŚĆ BŁĘDU? :: nie ponaglaj z odpowiedzią via PW!
Go to the top of the page
+Quote Post
Lejto
post
Post #8





Grupa: Zarejestrowani
Postów: 1 385
Pomógł: 48
Dołączył: 23.05.2007

Ostrzeżenie: (0%)
-----


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">


--------------------
Go to the top of the page
+Quote Post
erix
post
Post #9





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów




Był jeszcze bug podwójnego marginesu przy float; zrób osobnego CSS-a dla IE i dołączaj przez komentarz warunkowy.


--------------------

ZCE :: Pisząc PW załączaj LINK DO TEMATU i TYLKO w sprawach moderacji :: jakiś błąd - a TREŚĆ BŁĘDU? :: nie ponaglaj z odpowiedzią via PW!
Go to the top of the page
+Quote Post
Lejto
post
Post #10





Grupa: Zarejestrowani
Postów: 1 385
Pomógł: 48
Dołączył: 23.05.2007

Ostrzeżenie: (0%)
-----


osobny css dla samego float?


--------------------
Go to the top of the page
+Quote Post
erix
post
Post #11





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów




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


--------------------

ZCE :: Pisząc PW załączaj LINK DO TEMATU i TYLKO w sprawach moderacji :: jakiś błąd - a TREŚĆ BŁĘDU? :: nie ponaglaj z odpowiedzią via PW!
Go to the top of the page
+Quote Post
Lejto
post
Post #12





Grupa: Zarejestrowani
Postów: 1 385
Pomógł: 48
Dołączył: 23.05.2007

Ostrzeżenie: (0%)
-----


dałem do w stylu #gal nic nie dało chyba że to nie tam


--------------------
Go to the top of the page
+Quote Post
erix
post
Post #13





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów




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.


--------------------

ZCE :: Pisząc PW załączaj LINK DO TEMATU i TYLKO w sprawach moderacji :: jakiś błąd - a TREŚĆ BŁĘDU? :: nie ponaglaj z odpowiedzią via PW!
Go to the top of the page
+Quote Post
Lejto
post
Post #14





Grupa: Zarejestrowani
Postów: 1 385
Pomógł: 48
Dołączył: 23.05.2007

Ostrzeżenie: (0%)
-----


ale tylko 1 styl wchodzi w grę #gal bo reszta nic nie zmienia przy pozycji tylko przy kolorach itp, sprawdziałem


--------------------
Go to the top of the page
+Quote Post
Lion_87
post
Post #15





Grupa: Zarejestrowani
Postów: 850
Pomógł: 120
Dołączył: 15.02.2007
Skąd: Łódź

Ostrzeżenie: (10%)
X----


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
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 20.08.2025 - 06:30