+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: Galeria nie wyświetla się jak powinna (/thread-galeria-nie-wy%C5%9Bwietla-sie-jak-powinna)
Galeria nie wyświetla się jak powinna - jakub82 - 29-02-2012
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]](http://www.toya.net.pl/~jakub_82/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>RE: Galeria nie wyświetla się jak powinna - Ancik - 29-02-2012
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
.
RE: Galeria nie wyświetla się jak powinna - jakub82 - 29-02-2012
ok spróbuje Twoim sposobem, na Firebugu wygląda to tak jak by się miniaturki nie wczytywały....
RE: Galeria nie wyświetla się jak powinna - jakub82 - 29-02-2012
(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.
RE: Galeria nie wyświetla się jak powinna - Ancik - 29-02-2012
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.
RE: Galeria nie wyświetla się jak powinna - jakub82 - 29-02-2012
(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
RE: Galeria nie wyświetla się jak powinna - Ancik - 29-02-2012
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".
RE: Galeria nie wyświetla się jak powinna - jakub82 - 29-02-2012
Od tego zacząłem, ale nie wpadłem na pomysł żeby sprawdzić rozszeżenie .jpg pisane z wielkiej litery, teraz już gra
Przy okazji naumiałem się jak korzystać z <ul><li>
Dziekuje za pomoc.