align center di tabella con immagini con prettyphoto jquery

**pati** · 21-01-2014, 16:29

Ciao a tutti, sto usando prettyphoto/jquery per una galleria di immagini. Funziona tutto benissimo ma non riesco a allineare al centro pagina la tabella nella quale ho inserito le immagini della galleria. Dovrei agire sul css, suppongo ma non sono riuscita a capire dove. Il codice è questo:

<body>
<h1 style="text-align: center; margin-top: 5px;"> </h1>
<h1 style="text-align: center; margin-top: 5px;">galleria</h1>
<ul class="gallery clearfix">
<table width="800" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<a rel='prettyPhoto[galleria]' title="" href='immagini/cappuccino/cappuccino1.jpg' >
<img src='immagini/cappuccino/thumbs/cappuccino1th.jpg' width='100' class='thumb' border='0' />
</a>
</td>
<td>
<a rel='prettyPhoto[galleria]' title="" href='immagini/cappuccino/cappuccino2.jpg' >
<img src='immagini/cappuccino/thumbs/cappuccino2th.jpg' width='100' class='thumb' border='0' />
</a>
</td>
</tr>
</table>
</ul>

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$(".gallery a[rel^='prettyPhoto']").prettyPhoto({theme:'facebook'});
});
</script>
</body>
</html>

Grazie!

**KillerWorm** · 21-01-2014, 20:07

Ciao, se supponi si tratti di css allora hai sbagliato sezione.
Nel caso, prova ad applicare questa regola all'elemento table:

codice:

table { margin: 0 auto; }

Ad ogni modo noto qualche errore nel markup html.
Hai usato un elemento <ul> che dovrebbe contenere degli elementi <li> per funzionare correttamente.
In altre parole non è consentito mettere un elemento <table> (o un qualsiasi altro elemento che non sia <li>) direttamente dentro un elemento <ul>.

**pati** · 21-01-2014, 23:13

Originariamente inviata da KillerWorm

Ciao, se supponi si tratti di css allora hai sbagliato sezione.
Nel caso, prova ad applicare questa regola all'elemento table:

codice:

table { margin: 0 auto; }

Ad ogni modo noto qualche errore nel markup html.
Hai usato un elemento <ul> che dovrebbe contenere degli elementi <li> per funzionare correttamente.
In altre parole non è consentito mettere un elemento <table> (o un qualsiasi altro elemento che non sia <li>) direttamente dentro un elemento <ul>.

Hai ragione, eventualmente avrei dovuto postare in altra sezione!
Ho cambiato il codice e ora riesco a centrare tutto! Ora è così:

<body>
<div id="main" align="center">
<h1>galleria</h1>
<p> </p>
<ul class="gallery clearfix">
<table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><li><a href="immagini/cappuccino/cappuccino1.jpg" rel="prettyPhoto[galleria]"><img src="immagini/cappuccino/thumbs/cappuccino1th.jpg" width="100" alt="" /></a></li></td>
<td><li><a href="immagini/cappuccino/cappuccino2.jpg" rel="prettyPhoto[galleria]"><img src="immagini/cappuccino/thumbs/cappuccino2th.jpg" width="100" height="60" alt="" /></a></li></td>
<td><li><a href="immagini/cappuccino/cappuccino3.jpg" rel="prettyPhoto[galleria]"><img src="immagini/cappuccino/thumbs/cappuccino3th.jpg" width="60" height="60" alt="" /></a></li></td>
<td><li><a href="immagini/cappuccino/cappuccino4.jpg" rel="prettyPhoto[galleria]"><img src="immagini/cappuccino/thumbs/cappuccino4th.jpg" width="60" height="60" alt="" /></a></li></td>
</tr>
</table>
</ul>

<br class="cboth" />
</br>

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$(".gallery a[rel^='prettyPhoto']").prettyPhoto({theme:'light_rounded'});
});
</script>
</div>
</div>
</body>
</html>

Ho lavorato sulla base del codice di un esempio di demo di prettyphoto e non capisco perchè, pur usando lo stesso codice dell'esempio, quando la mia galleria di immagini si apre in modalità jquery presenta delle diversità rispetto a quella dell'esempio.

**KillerWorm** · 21-01-2014, 23:39

Non conosco prettyphoto e non ho idea di come debba essere impostato ma, ripeto, il tuo codice html è sbagliato. Stesso errore di prima: l'elemento <table> non può essere figlio diretto di <ul>.

Discussione: align center di tabella con immagini con prettyphoto jquery

Strumenti discussione

Ricerca discussione

Visualizza

align center di tabella con immagini con prettyphoto jquery

align center di tabella con immagini con prettyphoto jque

Permessi di invio