[CSS] Centrare questa galleria delle immagini

D4rkAng3l · 22-01-2008, 13:11

Se andate a questo indirizzo:
http://www.siatec.net/andrea/archivi...ze/natura.html

vedete che c'è una galleria delle immagini che usa il lightbox, le miniature vorrei fossero correttamente centrate all'interno della sezione content del mio sito ma non ci riesco, come mai?

Il codice HTML della pagina è:

Codice:

<!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="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="_your description goes here_" />
<meta name="keywords" content="_your,keywords,goes,here_" />
<meta name="author" content="Andrea Nobili http://www.siatec.net/andrea/fotografia/" />
<link rel="stylesheet" type="text/css" href="default.css" media="screen" title="Esempio Sito Case Vacanze" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
<!--[if IE]><link rel="stylesheet" href="ie.css" type="text/css" /><![endif]-->
<title>Esempio Sito Case Vacanze</title>

<script type="text/javascript" src="lightbox/js/prototype.js"></script>
<script type="text/javascript" src="lightbox/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lightbox/js/lightbox.js"></script>
</head>

<body><div id="wrap">

<div id="header"></div>

<div id="avmenu">
<h2 class="hide">Menu:</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">I luoghi e la natura</a></li>
<li><a href="#">Sciacca Terme</a></li>
<li><a href="#">Come Raggiungerci</a></li>
<li><a href="#">I nostri Trilocali</a></li>
<li><a href="#">Affitto Villetta</a></li>
<li><a href="#">Contatti</a></li>
</ul>

<div class="announce">
  <p><span class="bold">Città:</span> Sciacca Terme</p>
  <p><span class="bold">Stato:</span> Italia</p>
  <p><span class="bold">Regione:</span> Sicilia</p>
  <p><span class="bold">Nome abitanti:</span> Saccensi</p>
  <p><span class="bold">Santo patrono:</span> Maria SS. del Soccorso</p>
  <p><span class="bold">Giorno festivo:</span> 2 Febbraio</p>
  <p><span class="bold">Prodotti tipici:</span> Olio, Vino, Prodotti ittici conservieri, Ceramica artistica</p>
</div>

<div class="announce">
<h3>Ultime Notizie:</h3>
<p><strong>Gennaio 15, 2007:</strong><br />
NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS.</p>
<p class="textright"><a href="index.html">Leggi il resto...</a></p>
</div>

</div>

<div id="extras">
<h3>Altre info:</h3>
<p>Potete contattarci telefonicamente al seguente numero: 000111222333</p>

<h3>Links utili:</h3>
<p>- <a href="http://it.wikipedia.org/wiki/Sciacca">Wiki Sciacca</a><br />
- <a href="http://ristoranti.saperviaggiare.it/sciacca-ristoranti.html">Ristoranti</a><br />
- <a href="http://www.yeaah.com/disco/DiscoDetails.asp?IDDisco=357">Discoteche</a><br />
- <a href="http://diving-centers.saperviaggiare.it/sciacca-diving-centers.html">Diving Center</a><br />
</p>

  <p>
    <a href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10-blue"
        alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
  </p>

</div>

<div id="content">
<h2 class="testo">Sciacca e la sua natura:</h2>
<p class="testo">In questa sezione del sito potete vedere le bellezze della natura della zona intorno a Sciacca dove effettuare gite ed escursioni, mi raccomando n on scordate a casa maschera e boccaglio ;-)</p>

<div id="gal">

<p class="galleria_light">
  <a href="img/fotosciacca/sciaccamare1.jpg" rel="lightbox[roadtrip]" title="Mare a Sciacca 1">  <img class="orizzontali" src="img/fotosciacca/sciaccamare1.jpg" /></a>

  <a href="img/fotosciacca/marelumia.jpg" rel="lightbox[roadtrip]" title="Mare Lumia"><img class=  "orizzontali" src="img/fotosciacca/marelumia.jpg" /></a>
</p>

<p class="galleria_light">
  <a href="img/fotosciacca/marelumia2.jpg" rel="lightbox[roadtrip]" title="Tramonto a Mare Lumia">  <img class="orizzontali" src="img/fotosciacca/marelumia2.jpg" /></a>
  
  <a href="img/fotosciacca/borgobonsignore.jpg" rel="lightbox[roadtrip]" title="Lo splendido bare di Borgo Bonsignore">  <img class="orizzontali" src="img/fotosciacca/borgobonsignore.jpg" 7 /></a>
</p>

<p class="galleria_light">
  
  <a href="img/fotosciacca/borgobonsignore2.jpg" rel="lightbox[roadtrip]" title="Lo splendido bare di Borgo Bonsignore">  <img class="orizzontali" src="img/fotosciacca/borgobonsignore2.jpg" 7 /></a>
  
  <a href="img/fotosciacca/lacastella.jpg" rel="lightbox[roadtrip]" title="La Castella">  <img class="orizzontali" src="img/fotosciacca/lacastella.jpg" 7 /></a>
</p>

</div>

</div>

<div id="footer">
Copyright &copy; 2007 Andrea Nobili WebMaster. Design by <a href="http://www.siatec.net/andrea/fotografia/">Andrea Nobili</a>.
</div>

</div>
</body>
</html>

Mentre il codice CSS (in larga parte sovrabbondante credo che dovete vedere solo le ultime righe ma lo metto cmq tutto non si sa mai) è:

Codice:

/* andreas01 - an open source xhtml/css website layout by Andreas Viklund (http://andreasviklund.com). Made for OSWD.org, free to use as-is for any purpose as long as the proper credits are given for the original design work. For design assistance and support, contact me through my website or through http://oswd.org/email.phtml?user=Andreas

Version: 1.0
(July 25, 2005)

Screen layout: */

body {
margin: 0 auto;
padding: 0;
font: 76% Verdana,Tahoma,Arial,sans-serif;
background: #f4f4f4 url(bg.gif) top center repeat-y;
}

#wrap {
background: #ffffff;
color: #303030;
margin: 0 auto;
width: 760px;
}

#header {
    clear: both;
	width: 760px;
	height: 294px;
	background-image: url(img/sciacca.jpg);
	margin-top: 0;
	margin-bottom: 10px;
    padding: 0;
   
}

#avmenu {
clear: left;
float: left;
width: 150px;
margin: 0 0 10px 0;
font-size: 0.9em;
}

#avmenu ul {	
list-style: none;
width: 150px;
margin: 0 0 20px 0;
padding: 0;
font-size: 1.1em;
}	

#avmenu li {
margin-bottom: 4px;
}

#avmenu li a {
font-weight: bold;
height: 20px;
text-decoration: none;
color: #505050;
display: block;
padding: 6px 0 0 10px;
background: #f4f4f4;
border-left: 4px solid #cccccc;
}	
	
#avmenu li a:hover {
background: #eaeaea;
color: #286ea0;
border-left: 4px solid #286ea0;
}

.announce {
margin: 10px 0 10px 0;
padding: 10px;
width: 130px;
color: #505050;
background-color: #f4f4f4;
line-height: 1.3em;
}

.bold{
   font-weight:700;
}

#extras {
float: right;
width: 100px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
line-height: 1.5em;
}

#extras p {
margin: 0 0 1.5em 0;
}

#content {
margin: 0 110px 20px 160px;
border-left: 1px solid #f0f0f0;
border-right: 1px solid #f0f0f0;
padding: 0 10px 0 10px;
line-height: 1.6em;
text-align: left;
}

#content h2 {
font-size: 1.5em;
margin: 0 0 0.5em 0;
}

img#immagine {
padding: 1px;
display:inline;
background: #cccccc;
border: 4px solid #f0f0f0;
}

h3 {
font-size: 1.3em;
margin: 0 0 10px 0;
}

a {
text-decoration: none;
color: #286ea0;
}

a:hover {
text-decoration: underline;
color: #286ea0;
}

a img {
border: 0;
}

#footer {
clear: both;
margin: 0 auto;
padding: 10px 0 20px 0;
border-top: 4px solid #f0f0f0;
width: 760px;
text-align: center;
color: #808080;
font-size: 0.9em;
}

#footer a {
color: #808080;
text-decoration: none;
}

#footer a:hover {
text-decoration: underline;
}

.left {
margin: 10px 10px 5px 0;
float: left;
}

.right {
margin: 10px 0 5px 10px;
float: right;
}

.textright {
text-align: right;
}

.center {
text-align: center;
}

.small {
font-size: 0.8em;
}

.bold {
font-weight: bold;
}

.hide {
display: none;
}

p.testo{
   text-align: justify;
   padding-left: 5px;
   padding-right: 5px;

}

h2.testo{
   text-align: justify;
   padding-left: 5px;
   padding-right: 5px;
   padding-top: 3px;

}

/* The containing box for the gallery. */
#galleria{
    position:relative; 
    width:450px; 
    height:430px; 
    margin:20px auto 0 auto; 
    border:1px solid #e8e7e7; 
}

/* Removing the list bullets and indentation */
#galleria ul {
    padding:0; 
    margin:0; 
    list-style-type:none; 
}

/* Remove the images and text from sight */
#galleria a.gallery span {
    position:absolute; 
    width:1px; 
    height:1px; 
    top:5px; 
    left:5px; 
    overflow:hidden; 
    background:#fff;
}

/* Adding the thumbnail images */
#galleria a.gallery, #galleria a.gallery:visited {
    display:block; 
    color:#000; 
    text-decoration:none; 
    border:1px solid #000; 
    margin:1px 2px 1px 2px; 
    text-align:left; 
    cursor:default;
    }

#galleria a.slidea {
    background:url(img/villette/1t.jpg); 
    height:56px; 
    width:75px;
    }
#galleria a.slideb {
    background:url(img/villette/2t.jpg); 
    height:56px; 
    width:75px;
    }
#galleria a.slidec {
    background:url(img/villette/3t.jpg); 
    height:56px; 
    width:75px;
    }
#galleria a.slided {
    background:url(img/villette/4t.jpg); 
    height:56px; 
    width:75px;
    }
* html #galleria a.slided {
    width:91px; 
    w\idth:93px;
    }
#galleria a.slidee {
    background:url(img/villette/5t.jpg); 
    height:56px; 
    width:75px;
    }
#galleria a.slidef {
    background:url(img/villette/6t.jpg); 
    height:56px; 
    width:75px;
    }
* html #galleria a.slidef {
    width:56px; 
    w\idth:75px;
    }
#galleria a.slideg {
    background:url(img/villette/7t.jpg); 
    height:56px; 
    width:75px;
    }
#galleria a.slideh {
    background:url(img/villette/8t.jpg); 
    height:56px; 
    width:75px;
    }
#galleria a.slidei {
    background:url(img/villette/9t.jpg); 
    height:56px; 
    width:75px;
    }

#galleria a.slidel {
    background:url(img/villette/10t.jpg); 
    height:56px; 
    width:75px;
    }
#galleria a.slidem {
    background:url(img/villette/11t.jpg); 
    height:56px; 
    width:75px;
    }
#galleria a.sliden {
    background:url(img/villette/12t.jpg); 
    height:56px; 
    width:75px;
    }
#galleria a.slideo {
    background:url(img/villette/13t.jpg); 
    height:56px; 
    width:75px;
    }
#galleria a.slidep {
    background:url(img/villette/14t.jpg); 
    height:56px; 
    width:75px;
    }

/* set the size of the unordered list to neatly house the thumbnails */
#galleria ul {
    width:162px; 
    height:386px;
    }
#galleria li {
    float:left;
    }

/* move the thumbnails into the correct position */
#galleria ul {
    margin:5px; 
    float:right;
    }
	
/* change the thumbnail border color */
#galleria a.gallery:hover {
    border:1px solid #fff; 
}

/* styling the :hover span */
#galleria a.gallery:hover span {
    position:absolute; 
    width:275px; 
    height:206px; 
    top:5px; 
    left:5px; 
    color:#000; 
    background:#fff;
    }

#galleria {
    background:#fff url(img/villette/gallery.jpg) 5px 5px no-repeat;
    }

/* Stile per le mappe di Google */
#map{
   width: 400px;
   height: 400px;
   margin: 0 auto;
}

#fumeraclea{
   width: 300px; 
   height: 150px;
   font-size:10px;
}

#fumtempli{
   width: 360px; 
   height: 255px;
   font-size:10px;
}

#fumselinunte{
   width: 300px; 
   height: 150px;
   font-size:10px;
}

#fumsegesta{
   width: 300px; 
   height: 100px;
   font-size:10px;
}

#fumcaltabellotta{
   width: 300px; 
   height: 160px;
   font-size:10px;
}

#fumlagoarancio{
   width: 300px; 
   height: 160px;
   font-size:10px;
}

#fumboscorosinata{
   width: 250px; 
   height: 80px;
   font-size:10px;
}

/* Stile del form dei contatti */

.form{
    font: bold 12px Arial, Helvetica, sans-serif;
    color: #000000;
	background: #CCCCCC;
	border: 1px solid #000000;
}
.pulsante{
    font: bold 12px Arial, Helvetica, sans-serif;
    color: #000000;
    background: #CCCCCC;
    text-align: center;
	border: 1px solid #000000;
}

.datiform{
   width: 150px;
   float: left;
}

/* Stile per il light box */

#lightbox{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	}

#imageContainer{
	padding: 10px;
	}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
	}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(lightbox/images/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(lightbox/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(lightbox/images/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%	
	}

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	}
	
/* Stile della galleia natura che usa il light box */

/*
p.galleria_light{
    margin: 30px;
} */

div#gal{
margin: 0 auto;
padding: 0;
}
    

img.orizzontali{
     width: 200px;
	 height: 133px;
}

Grazie
Andrea

MEMon · 22-01-2008, 13:27

io direi di inserire nel div gal text-align=center

D4rkAng3l · 22-01-2008, 14:11

Quote:

Originariamente inviato da MEMon

io direi di inserire nel div gal text-align=center

eggià hai detto bene....un'altra domanda...praticamente come puoi vedere io inserisco due immagini in ogni paragrafo per mandare a capo, sai se è possibile ridurre lo spazio tra un paragrafo e l'altro?

Grazie
Andrea

MEMon · 22-01-2008, 14:17

Potresti provare con line-height http://www.w3schools.com/css/pr_dim_line-height.asp

22-01-2008, 13:27	#2
MEMon Senior Member Iscritto dal: Dec 2002 Messaggi: 3359	io direi di inserire nel div gal text-align=center

22-01-2008, 14:17	#4
MEMon Senior Member Iscritto dal: Dec 2002 Messaggi: 3359	Potresti provare con line-height http://www.w3schools.com/css/pr_dim_line-height.asp

Strumenti
Mostra una versione stampabile Invia questa pagina per email