Zaloguj się

jakub82 · (Ten post był ostatnio modyfikowany: 29-02-2012, 06:33 przez jakub82.)

Mam taki problem, ze galeria nie wyswietla się poprawnie.
Nie pokazują się miniaturki na stronie

Powinno wygaldac to tak jak na screenie

[Obrazek: leon.jpg]

Może ma ktoś jakiś pomysł...

Link do strony: http://www.leonmotorserwis.pl/galeria.html

Kod:
@charset "utf-8";

/* CSS Document */

body.tlo {

    background:#f1f1f1;

    margin: auto;

    padding-bottom:30px;

    display:table;

}

#page { width:1032px;

        height:auto;

        float:left;

}

#gora { width:1032px;

        height:231px;}

.logo { background-image:url(images/1.png);

        width:1032px;

        height:231px;

        float:left; }

#menu {  

        width:100%;

        height:35px;

    }

.menu_baner {

    width:1024px;

    margin-left:auto;

    margin-right:auto;

    }

 ul {

    list-style:none;

    }

.menu_baner a{

    display:inline;

    float:left;

    text-decoration:none;

    font-weight:bold;

    color:#FFF;

    font-family:Verdana, Geneva, sans-serif;

    font-size:13px;

    padding-top:165px;

    padding-left:15px;

    padding-right:15px;

}

.menu_baner a:hover {

    text-decoration:none;

    font-weight:bold;

    color:#EE5911;

    font-family:Verdana, Geneva, sans-serif;

    font-size:13px;

}

#srodek { 

        float:left;

        width:1032px;

        height:auto;

        background-image:url(images/2.png);

        background-repeat:repeat-y;

        }

#pole_uslugi{

    float:left;

    width:350px;

    height:450px;

}

#pole_kontakt{

    float:left;

    width:350px;

    height:auto;

}

.uslugi {

    padding-left:50px;

    height:auto;

    width:300px;

    float:left;

    font-family: Verdana, Geneva, sans-serif;

    font-size: 12px;

    color: #000;

    line-height: 190%;

        }

.galeria {

    padding-left:50px;

    height:auto;

    width:auto;

    float:left;

    font-family: Verdana, Geneva, sans-serif;

    font-size: 12px;

    color: #000;

    line-height: 190%;

        }

.czcionka_lokalizacja {

    height:auto;

    width:300px;

    float:left;

    font-family: Verdana, Geneva, sans-serif;

    font-size: 12px;

    color: #000;

    line-height: 190%;

        }

#motor {

        width:auto;

        height:auto;

        float:right;

        padding-right:70px;

        padding-top:40px;

    }

#pole_mapa {

    width:425px;

    height:auto;

    float:right;

    padding-right:55px;

}

#pole_godziny {

    padding-top:20px;

    width:auto;

    height:auto;

    float:left;

}

#kontakt_mapa {width:1032px;

height:auto;

float:left;

}

#motor_dol {

        width:auto;

        height:auto;

        float:left;

        padding-left:60px;

        padding-top:90px;

    }

#pole_motor_doł{ 

        float:left;

        width:1032px;

        height:auto;

        background-image:url(images/2.png);

        }

#pole_galeria{ 

        float:left;

        width:auto;

        height:auto;

        }

#pole_miniaturki{ 

        float:left;

        padding-left:75px;

        width:auto;

        height:auto;

        }    

#dol { width:1032px;

       height:43px;

       float:left;

}

.belka_dol { background-image:url(images/3.png);

        width:1032px;

        height:43px;

        float:left; }

.czcionka_dol_belka {font-family:Verdana, Geneva, sans-serif;

                     font-size:10px;

                     color:#FFF;

                     text-align:center;

                     padding-top:4px;

}

Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta content="Leon Motor Serwis specjalizuje się w naprawach motocykli" name="description" />

<meta content="Leon, motocykle, serwis,ktm, przeglądy, części, łódź, lodz" name="keywords" />

<script type="text/javascript" src="js/prototype.js"></script>

<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>

<script type="text/javascript" src="js/lightbox.js"></script>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Leon Motor Serwis</title>

<link href="style.css" rel="stylesheet" type="text/css" media="screen"/>

</head>

<body class="tlo">

<div id="page">

<div id="gora">

    <div class="logo">

           <div id="menu">

                <div class="menu_baner">

                    <ul>

                        <li> <a href="index.html"> Strona główna  </a> </li>

                        <li> <a href="galeria.html"> Galeria  </a> </li>

                    </ul>

                </div>

            </div>

  </div>

</div>

<div id="srodek">

    <div id="pole_galeria">

        <p class="galeria">

            <strong> Galeria </strong>

      </p>   

        <br/> <br/>  

    </div>   

        <div id="pole_miniaturki">

          <table  border="0"  cellpadding="8" cellspacing="0">

  <tr>

    <td><a href="images/galeria/1a.jpg" rel="lightbox [galeria]" title=""><img src="images/galeria/1am.jpg" border="0" alt="" /></a></td>

    <td><a href="images/galeria/2.jpg" rel="lightbox [galeria]" title="" ><img src="images/galeria/2m.jpg" border="0" alt="" /></a></td>

    <td><a href="images/galeria/3.jpg" rel="lightbox [galeria]" title="" ><img src="images/galeria/3m.jpg" border="0" alt="" /></a></td>

    <td><a href="images/galeria/4.jpg" rel="lightbox [galeria]" title="" ><img src="images/galeria/4m.jpg" border="0" alt="" /></a></td>

    <td><a href="images/galeria/5.jpg" rel="lightbox [galeria]" title="" ><img src="images/galeria/5m.jpg" border="0" alt="" /></a></td>

    <td><a href="images/galeria/1.jpg" rel="lightbox [galeria]" title="" ><img src="images/galeria/1m.jpg" border="0" alt="" /></a></td>

  </tr>

  <tr>

     <td><a href="images/galeria/6.jpg" rel="lightbox [galeria]" title="" ><img src="images/galeria/6m.jpg" border="0" alt="" /></a></td>

    <td><a href="images/galeria/7.jpg" rel="lightbox [galeria]" title="" ><img src="images/galeria/7m.jpg" border="0" alt="" /></a></td>

    <td><a href="images/galeria/10.jpg" rel="lightbox [galeria]" title="" ><img src="images/galeria/10m.jpg" border="0" alt="" /></a></td>

    <td><a href="images/galeria/11.jpg" rel="lightbox [galeria]" title="" ><img src="images/galeria/11m.jpg" border="0" alt="" /></a></td>

    <td><a href="images/galeria/12.jpg" rel="lightbox [galeria]" title="" ><img src="images/galeria/12m.jpg" border="0" alt="" /></a></td>

   </tr>

</table>

 <table   border="0"  cellpadding="8" cellspacing="0">   

     <tr> 

    <td><a href="images/galeria/13.jpg" rel="lightbox [galeria]" title="" ><img src="images/galeria/13m.jpg" border="0" alt="" /></a></td>

    <td><a href="images/galeria/14.jpg" rel="lightbox [galeria]" title="" ><img src="images/galeria/14m.jpg" border="0" alt="" /></a></td>

    <td><a href="images/galeria/15.jpg" rel="lightbox [galeria]" title="" ><img src="images/galeria/15m.jpg" border="0" alt="" /></a></td>

    <td><a href="images/galeria/16.jpg" rel="lightbox [galeria]" title="" ><img src="images/galeria/16m.jpg" border="0" alt="" /></a></td>

    <td><a href="images/galeria/17.jpg" rel="lightbox [galeria]" title="" ><img src="images/galeria/17m.jpg" border="0" alt="" /></a></td>

  </tr>

  <tr>

    <td><a href="images/galeria/18.jpg" rel="lightbox [galeria]" title="" ><img src="images/galeria/18m.jpg" border="0" alt="" /></a></td>

    <td><a href="images/galeria/19.jpg" rel="lightbox [galeria]" title="" ><img src="images/galeria/19m.jpg" border="0" alt="" /></a></td>

    <td><a href="images/galeria/20.jpg" rel="lightbox [galeria]" title="" ><img src="images/galeria/20m.jpg" border="0" alt="" /></a></td>

    <td><a href="images/galeria/21.jpg" rel="lightbox [galeria]" title="" ><img src="images/galeria/21m.jpg" border="0" alt="" /></a></td>

    <td><a href="images/galeria/22.jpg" rel="lightbox [galeria]" title="" ><img src="images/galeria/22m.jpg" border="0" alt="" /></a></td>

   </tr>

   <tr>

    <td><a href="images/galeria/23.jpg" rel="lightbox [galeria]" title="" ><img src="images/galeria/23m.jpg" border="0" alt="" /></a></td>

    <td><a href="images/galeria/24.jpg" rel="lightbox [galeria]" title="" ><img src="images/galeria/24m.jpg" border="0" alt="" /></a></td>

    <td><a href="images/galeria/25.jpg" rel="lightbox [galeria]" title="" ><img src="images/galeria/25m.jpg" border="0" alt="" /></a></td>

      <td><a href="images/galeria/26.jpg" rel="lightbox [galeria]" title="" ><img src="images/galeria/26m.jpg" border="0" alt="" /></a></td>

    <td><a href="images/galeria/27.jpg" rel="lightbox [galeria]" title="" ><img src="images/galeria/27m.jpg" border="0" alt="" /></a></td>

    </tr>

  <tr> 

    <td><a href="images/galeria/28.jpg" rel="lightbox [galeria]" title="" ><img src="images/galeria/28m.jpg" border="0" alt="" /></a></td>

    <td>    <a href="images/galeria/29.jpg" rel="lightbox [galeria]" title="" ><img src="images/galeria/29m.jpg" border="0" alt="" /></a></td>

    </tr>

</table>

          </div>

</div>

 <div id="pole_motor_doł">   

    <div id="motor_dol">

    <img src="images/md.png" alt="" />

    </div>

 </div>     

                <div id="dol">

                    <div class="belka_dol">

                  <p class="czcionka_dol_belka"> ©Leon Motor Serwis - Naprawa Motocykli / All Rights Reserved. </p>

                  </div>

            </div>    

</div>

</body>

</html>

Ancik · (Ten post był ostatnio modyfikowany: 29-02-2012, 06:50 przez Ancik.)

Zainstaluj sobię FireBuga do FireFoxa i zobacz jak to wszystko wygląda. Zrobiłeś niezłą sieczkę.

Struktura powinna wyglądać mniej więcej tak:

Kod:
<div class="srodek">

   <h3>Galeria</h3>

   <ul>

      <li><a href="..."><img....... i tak dalej</li>

      <li><a href="..."><img....... i tak dalej</li>

   </ul>

</div>

W każdym elemencie listy powinno znajdować się zdjęcie. Ułóż to w taki sposób i pokaż co z tego wyszło. Na chwilę obecną radziłbym doprowadzić ten kod do porządku, a nie brać się za doprowadzanie go do funkcjonalności w takiej postaci. Potem mogłoby być jeszcze gorzej.

PS. Raz jeszcze - <br /> służy do łamania linii, nie do robienia odstępów między blokami Smile

.

jakub82 · 29-02-2012, 14:55

ok spróbuje Twoim sposobem, na Firebugu wygląda to tak jak by się miniaturki nie wczytywały....

jakub82 · 29-02-2012, 16:43

(29-02-2012, 06:47)Ancik napisał(a): Zainstaluj sobię FireBuga do FireFoxa i zobacz jak to wszystko wygląda. Zrobiłeś niezłą sieczkę.

Struktura powinna wyglądać mniej więcej tak:

Kod:
<div class="srodek"> <h3>Galeria</h3> <ul> <li><a href="..."><img....... i tak dalej</li> <li><a href="..."><img....... i tak dalej</li> </ul> </div>

W każdym elemencie listy powinno znajdować się zdjęcie. Ułóż to w taki sposób i pokaż co z tego wyszło. Na chwilę obecną radziłbym doprowadzić ten kod do porządku, a nie brać się za doprowadzanie go do funkcjonalności w takiej postaci. Potem mogłoby być jeszcze gorzej.

PS. Raz jeszcze - <br /> służy do łamania linii, nie do robienia odstępów między blokami .

Nie działa, dopisałem Twoim sposobem rządek miniaturek i wyświetla się tylko jedna miniaturka i to ta sama, z tego wynika że nie ma wpływu jak jest napisane czy w tabelkach czy w <ul> <li>
Może ten lightbox nie działa na serwerze gdzie leży strona... bo u mnie na dysku wszystko chodzi.

Ancik · (Ten post był ostatnio modyfikowany: 29-02-2012, 16:56 przez Ancik.)

W zmianie struktury nie chodziło o to, że błąd nagle przestanie występować, tylko łatwiej będzie go wypatrzeć. Z tego co widzę, ty dalej masz tam jakieś tabele.

Napis galeria umieść w znaczniku np. h3 i odpowiednio sobie ostyluj. Pod nim, w liście <li> powklejaj zdjęcią z implementacją skryptu, tak jak napisałem powyżej. Dla znacznika <ul> ustaw szerokość maksymalną, czyli taką jak ma .srodek i overflow:hidden.

Elementom <li> daj opływanie do lewej strony (float:left) i ustaw odpowiednie rozmiary. W każdym <li> umieść jeden link. Wtedy elementy będą się wyświetlały w jednym bloku w linii.

PS. Z tego ci widać, na chwilę obecną skrypt działa w 100%, bo u mnie otwiera zdjęcia dobrze. Problem tkwi tylko w tym, że zdjęcia są źle ustawione.

jakub82 · 29-02-2012, 18:28

(29-02-2012, 16:53)Ancik napisał(a): W zmianie struktury nie chodziło o to, że błąd nagle przestanie występować, tylko łatwiej będzie go wypatrzeć. Z tego co widzę, ty dalej masz tam jakieś tabele.

Napis galeria umieść w znaczniku np. h3 i odpowiednio sobie ostyluj. Pod nim, w liście <li> powklejaj zdjęcią z implementacją skryptu, tak jak napisałem powyżej. Dla znacznika <ul> ustaw szerokość maksymalną, czyli taką jak ma .srodek i overflow:hidden.

Elementom <li> daj opływanie do lewej strony (float:left) i ustaw odpowiednie rozmiary. W każdym <li> umieść jeden link. Wtedy elementy będą się wyświetlały w jednym bloku w linii.

PS. Z tego ci widać, na chwilę obecną skrypt działa w 100%, bo u mnie otwiera zdjęcia dobrze. Problem tkwi tylko w tym, że zdjęcia są źle ustawione.

Zrobiłem jak radziłeś, u mnie bez zmian.

http://www.leonmotorserwis.pl/galeria.html

Ancik · (Ten post był ostatnio modyfikowany: 29-02-2012, 18:35 przez Ancik.)

Teraz przynajmniej wygląda to poprawnie. Upewnij się, czy wszystkie pliki graficzne znajdują się na serwerze, czy mają taką samą nazwę (duże litery i małe) i czy sama ścieżka jest poprawna. Po najechaniu na ścieżkę zdjęcia wyskakuje "failed to load given url".

jakub82 · 29-02-2012, 18:52

Od tego zacząłem, ale nie wpadłem na pomysł żeby sprawdzić rozszeżenie .jpg pisane z wielkiej litery, teraz już gra Smile

Przy okazji naumiałem się jak korzystać z <ul><li>

Dziekuje za pomoc.

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie