Problème alignement icônes PV sur PA

[sweetheart29]

Bonjour à tous !

Voici mon souci : Je voulais modifier ma PA, plus précisément l'affichage des postes vacants dispo. J'ai ajouté un effet de rideau, je sais pas trop comment appeler cela, donc je vous laisse regarder par vous même sur mon forum test : http://falling-skies-rpg.lebonforum.com/
Comme vous le voyez, mes icônes s'alignent verticalement alors que je les voudrais alignés horizontalement. Je voudrais faire 2 lignes de 3 icônes.

Voici le code de ma PA en entier :

Code:

<br><br><div style="line-height: 95%;"><center><font style="font-family: TIMES NEW ROMAN; color:  #47433a; text-shadow: 0px 0px 1px #262A27;" size="7">REWRITE TRUE BLOOD</font><br><div style="text-align: center; font-family: arial;"><font style="text-transform: uppercase; font-size: 8px; letter-spacing: 2px;">▪ L'histoire est entre vos mains ▪</font></div></div></center><br><div style="border-bottom: solid 4px #e1e4d3;"><font size="1"> <a href="http://rewritetrueblood.purforum.com/t21-contexte?tt=1" class="navig">LE CONTEXTE ♦ </a><a href="http://rewritetrueblood.purforum.com/t1-les-lois?tt=1" class="navig">LE REGLEMENT ♦ </a><a href="http://rewritetrueblood.purforum.com/f4-intrigues?tt=1" class="navig">LES INTRIGUES ♦ </a><a href="http://rewritetrueblood.purforum.com/f3-annexes?tt=1" class="navig">LES ANNEXES ♦ </a><a href="http://rewritetrueblood.purforum.com/t32-listes-des-avatars?tt=1" class="navig">LE BOTTIN ♦ </a> <a href="http://rewritetrueblood.purforum.com/t20-les-groupes?tt=1" class="navig">LES GROUPES ♦ </a><a href="http://rewritetrueblood.purforum.com/f7-alors-vous-avez-choisis?tt=1" class="navig">POSTES VACANTS ♦ </a><a href="http://rewritetrueblood.purforum.com/f10-scenarios-des-membres?tt=1" class="navig">SCENARIOS</a></font></div>

<br><table>
<tbody><tr><td style="vertical-align: top;" width="50%"><div style="padding-right: 15px; padding-left: 15px; padding-bottom: 15px; text-align: justify;"><div style="border-bottom: solid 1px #e1e4d3;"><u><font face="Georgia">MISES A JOUR ;</font></u></div>
<br>
<span style="LINE-HEIGHT: normal; FONT-SIZE: 10px"><div class="cadre">
<b>22/07/2012 –</b> Debut du 1er event.  <a href="http://rewritetrueblood.purforum.com/t304-mise-en-place-premier-event">ICI</a><br>
<b>17/07/2012 –</b> Design n°2 : Animal Spirit <i>feat Jessica Lowndes</i><br>
<b>01/07/2012</b> <b>–</b> Mise en place du système des PNJs ! <a href="http://rewritetrueblood.purforum.com/t199-mise-en-place-de-pnj?tt=1">ICI</a> <br>
<b>18/06/2012 –</b> Lancement du tome 1 : Révélations mortelles. <a href="http://rewritetrueblood.purforum.com/t162-tome-1-revelations-mortelles">ICI</a> <br>
<b>10/06/2012 –</b>Ouverture du forum. Design n°1 : Summertime sadness <i>feat Deborah Ann Woll</i><br>

</div><br><div style="border-bottom: solid 1px #e1e4d3;"><u><font face="Georgia"><font size:="" 18px"="">PARTENAIRES ; </font></font></u></div>
<center><br>
<marquee onmouseover="this.stop();" onmouseout="this.start();" style="text-align:justify; color:#e1e4d3;"width: 80px; height="30px;" scrollamount="2" direction="up">
<center><a href="http://wildwide.forumgratuit.org/"><img src="http://i.imgur.com/pTQLu.gif"></a>
<a href="http://hungrylikethewolf.forumactif.com/"><img src="http://image.noelshack.com/fichiers/2012/25/1340562869-100x35.png"></a>
<a href="http://allure-of-the-seas.forum-gratuit.net/"><img src="http://img15.hostingpics.net/pics/184117partenariat1.png"></a>
<a href="http://hungergames-rpg.forumgratuit.org/"><img src="http://nsa21.casimages.com/img/2012/03/30//120330102432993437.png"></a>
<a href="ttp://spn-charmed-buffy.forumgratuit.be"><img src="http://img15.hostingpics.net/pics/930565Boutonspartenariat01.png"></a>
<a href="http://tempo-di-vampiri.forumgratuit.be/"><img src="http://img15.hostingpics.net/pics/564484671.png"></a>
<a href="http://saint-elmo.lebonforum.com/"><img src="http://img15.hostingpics.net/pics/419025bouton3.jpg"></a></center></marquee>
<br><br><a href="http://rewritetrueblood.purforum.com/t46-nos-partenaires">NOS PARTENAIRES</a> ♦ <a href="http://rewritetrueblood.purforum.com/t45-demandes-de-partenariat">DEMANDES</a></center><br>
<center><div class="journal"><span style="font-size: 9px; line-height: normal"> <strong>2012 © REWRITE TRUE BLOOD</strong> PA réalisée par Elodie de BIM. Header réalisé par Azazel. Merci de respecter leur travail et le notre. Optimisé pour Chrome et Mozilla Firefox.</span></div><br><center><u>les tops sites</u><br>
<i>votez toutes les deux heures!</i><br>
<a href="http://www.root-top.com/topsite/forumrpg/in.php?ID=6922"><font size="4px">♦</font></a>
<a href="http://en.root-top.com/toplist/velusia/in.php?ID=5137"><font size="4px">♦</font></a>
<a href="http://www.root-top.com/topsite/abysses/in.php?ID=6169"><font size="4px">♦</font></a>
<a href="http://en.root-top.com/toplist/obsession27/in.php?ID=19091"><font size="4px">♦</font></a>
<a href="http://en.root-top.com/toplist/cherry23/in.php?ID=6379"><font size="4px">♦</font></a>
</center>
<br><div style="border-bottom: solid 1px #e1e4d3;"><u><font face="Georgia">On a besoin d'eux ;</font></u></div><br>
 <div id="slidespv"><div><br><br>
<center><a href="http://rewritetrueblood.purforum.com/t23-creatures?tt=1"> <b>Claudine crane</b></a> <br>
<u>550 ans</u><br>
<u>Fée marraine</u><br>
   <img src="http://04.img.v4.skyrock.net/4372/68314372/pics/photo_68314372_avatar_1.png" />
</div></div><div id="slidespv"><div><br><br>
<center><a href="http://rewritetrueblood.purforum.com/t16-vampires?tt=1"> <b>Felipe De Castro</b></a> <br>
<u>750 ans</u><br>
<u>Roi vampire</u><br>
   <img src="http://www.actucine.com/wp-content/uploads/2012/01/Johnny+Deep-100x100.jpg" />
</div></div><div id="slidespv"><div>
<center><a href="http://rewritetrueblood.purforum.com/t23-creatures?tt=1"> <b>Frannie Quinn</b></a> <br>
<u>17 ans</u><br>
<u>Tigre-garou</u><br>
   <img src="http://images5.fanpop.com/image/photos/28300000/Phoebe-Tonkin-phoebe-tonkin-28309931-100-100.png" />
</div></div></div></td><td style="border-left: 1px solid #e1e4d3; vertical-align: top;" width="50%"><div style="padding-right: 15px; padding-left: 15px; padding-bottom: 15px; text-align: justify;"><font size="1">
<center><a class="imginfo"><font color="#8f8876"><img src="http://www.allo-image.net/stockimg/vignette/66057240150056bffb4389scarlettjohansson013d.png" class="pa"><span><table width="100px" border="0" cellpadding="1" cellspacing="1"><tbody><tr>
<br><a class="postlink" href="http://rewritetrueblood.purforum.com/u7?tt=1" target="_blank">PROFIL</a> ♦ <a class="postlink" href="http://rewritetrueblood.purforum.com/privmsg?mode=post&u=7&tt=1" target="_blank">MP</a>
<center><div style="font-size:10px;line-height: 95%;font-family: Georgia;letter-spacing:-1px;">ATHENAIS
<br> D'ISANTO</div><u>fondatrice</u><br>
<b>feat</b> Scarlett <br>Johansson</center></tr></tbody></table></span></font></a>  <font color="#8f8876"> 

<a class="imginfo"><font color="#8f8876"><img src=" http://www.images-host.fr/view.php?img=16071633jensenackles012.png" class="pa"><span><table width="100" border="0" cellpadding="1" cellspacing="1"><tbody><tr><br><a class="postlink" href="http://rewritetrueblood.purforum.com/u4?tt=1" target="_blank">PROFIL</a> ♦ <a class="postlink" href="http://rewritetrueblood.purforum.com/privmsg?mode=post&u=4&tt=1" target="_blank">MP</a>
<center><div style="font-size:10px;line-height: 95%;font-family: Georgia;letter-spacing:-1px;">KYLE
<br>
WADE</div><u>admin</u><br>
<b>Feat</b> Jensen <br> Ackles
</center></tr></tbody></table></span></font></a>
 

<a class="imginfo"><font color="#8f8876"><img src=" http://www.images-host.fr/view.php?img=16071635tumblr-m4x1kscflk1rwlw20o1-250d.jpg" class="pa"> <span><table width="100" border="0" cellpadding="1" cellspacing="1"><tbody><tr><br>
<a class="postlink" href="http://rewritetrueblood.purforum.com/u8?tt=1" target="_blank">PROFIL</a> ♦ <a class="postlink" href="http://rewritetrueblood.purforum.com/privmsg?mode=post&u=8&tt=1" target="_blank">MP</a>
<center><div style="font-size:10px;line-height: 95%;font-family: Georgia;letter-spacing:-1px;">BATANYA
</div><br><u>modo</u><br>
<b>Feat</b> Kate <br>
Beckinsale
</center></tr></tbody></table></span></font></a>
<span style="LINE-HEIGHT: normal; FONT-SIZE: 10px"> <center><img src=""  class="tour"></img></center><br><div style="border-bottom: solid 1px #e1e4d3;"><strong>CONTEXTE</strong> ♦ <u>Bienvenue en Louisiane ...</u></div>
 <br> Deux ans se sont écoulés depuis la Grande Révélation des vampires, et le moins que l'on puisse dire, c'est que les choses ont changé. Aujourd'hui, les vampires sont partout, et ne se cachent plus. Ils revendiquent leurs droits et s'intègrent, tant bien que mal, parmi les humains. [...] Nous voici donc en Louisiane, Etat du Sud des Etats-Unis. Ici, allez savoir pourquoi, il y a une forte concentration de vampires et autres espèces surnaturelles. Autant vous dire que l'atmosphère y est parfois un peu angoissant.
[…]<br><br><div align="right"><a class="postlink" href="http://rewritetrueblood.purforum.com/t21-contexte" rel="nofollow" target="_blank">EN SAVOIR PLUS ?</a> ♦</div></span><div id="slides"><div><br><br><br>
<b> RÉVÉLATIONS MORTELLES</b>  « Chers concitoyens, nous ne sommes pas ceux que vous devriez craindre [...] Ils vivent parmi vous depuis aussi longtemps que nous, et ils sont bien mieux intégrés que nous dans la mesure où ils vous ressemblent plus que nous. Ils sont bien plus dangereux, et violents. Alors posez-vous la question. Qui est le plus dangereux ? Celui qui tente de s’intégrer et se révèle au grand jour, ou celui qui vit dans l’ombre et profite de sa nature pour obtenir ce qu’il souhaite ? » <i>Nan Flanagan, porte-parole des vampires d'Amérique.</i><br><br><center><a href="http://rewritetrueblood.purforum.com/t162-tome-1-revelations-mortelles"> TOME 1</a> ♦ <a href="http://rewritetrueblood.purforum.com/t252-premier-event?tt=1"> EVENT 1</a></center><br><br>
   <img src="http://img15.hostingpics.net/pics/920413Sanstitre1.png" />
</div></div></font></div></td></tr></tbody></table>
 

<br><br>

Mais voici la partie concernée :

Code:

<br><div style="border-bottom: solid 1px #e1e4d3;"><u><font face="Georgia">On a besoin d'eux ;</font></u></div><br>
 <div id="slidespv"><div><br><br>
<center><a href="http://rewritetrueblood.purforum.com/t23-creatures?tt=1"> <b>Claudine crane</b></a> <br>
<u>550 ans</u><br>
<u>Fée marraine</u><br>
   <img src="http://04.img.v4.skyrock.net/4372/68314372/pics/photo_68314372_avatar_1.png" />
</div></div><div id="slidespv"><div><br><br>
<center><a href="http://rewritetrueblood.purforum.com/t16-vampires?tt=1"> <b>Felipe De Castro</b></a> <br>
<u>750 ans</u><br>
<u>Roi vampire</u><br>
   <img src="http://www.actucine.com/wp-content/uploads/2012/01/Johnny+Deep-100x100.jpg" />
</div></div><div id="slidespv"><div>
<center><a href="http://rewritetrueblood.purforum.com/t23-creatures?tt=1"> <b>Frannie Quinn</b></a> <br>
<u>17 ans</u><br>
<u>Tigre-garou</u><br>
   <img src="http://images5.fanpop.com/image/photos/28300000/Phoebe-Tonkin-phoebe-tonkin-28309931-100-100.png" />
</div></div></div></td>

Et la partie concernée dans la fiche de CSS, au cas où :

Code:

#slidespv div {
  margin: 5px;
background: #FAFAF5;
font-size: 10pt;
text-align: justify;
line-height: 100%;
border-left: 1px solid #F3EFE4;
border-right: 1px solid #F3EFE4;
border-top: 1px solid #F3EFE4;
border-bottom: 1px solid #F3EFE4;
  height: 100px; /* Égal à la hauteur de l'image */
  overflow: hidden;
  position: relative;
  width: 100px; /* Égal à la largeur de l'image */
}
 
#slidespv div img {
  left: 0;
  position: absolute;
  top: 0;
  transition: transform 0.5s ease-in-out;
  -moz-transition: -moz-transform 0.5s ease-in-out;
  -o-transition: -o-transform 0.5s ease-in-out;
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
}
#slidespv div:hover img {
  transform: translateY(-100px); /* Valeur négative égale à la hauteur de l'image */
  -moz-transform: translateY(-100px);
  -o-transform: translateY(-100px);
  -webkit-transform: translateY(-100px);}

J'ai essayé pas mal de truc, comme enlevé les <br>, mais ça n'a rien fait ...
Merci d'avance pour votre précieuse aide.

[sweetheart29]

Personne ne trouve de solution ?

[sweetheart29]

Un petit up svp, j'ai besoin de votre aide ..

[sweetheart29]

Pas d'idée ?

[Ea]

Bonjour,

Code:

#slidespv { display:inline-block;  }

Semble environ fonctionner.

Vous avez le type de contenu "inline" ( les balises html de gras, italique, images, ... ) qui s'applique sur juste une partie de texte. Et vous avez les contenu de type block qui s'applique sur un "bloc" de contenu ( balise <div> par exemple ).

Si vous voulez mettre plusieurs contenu de type inline l'un à côté de l'autre, il suffit de les mettre l'un à la suite des autres ( et du fait qu'il sont inline, ils se mettent l'un à côté de l'autre ).

Pour les éléments de type block, c'est différent si on les mets l'un à côté de l'autre ils se mettent l'un en dessous des autres ( car un bloc prend toute la largeur possible.

Alors il y a plusieurs solutions :

• Utiliser un tableau, dans chaque case du tableau on peut mettre un bloc et en mettant des blocs sur la même lignes du tableau ( dans des cases différentes ) ils seront sur la même ligne.
  
  Donc on pourrait faire :
  
  

  Code:

  <table><tr><td>BLOC</td><td>BLOC</td></tr></table>

  
  
• Utiliser le flottement. On peut faire "flotter" un contenu à gauche ou à droite, pour donner une image courte, c'est comme mettre dans un article de presse où on a un texte, et la photo qui flotte à gauche ou à droite et est entourée par le texte. Pour plus d'info :
  
  - http://openweb.eu.org/articles/initiation_float
  - http://www.alsacreations.com/tuto/lire/608-initiation-au-positionnement-css-partie-2.html#flottants
  
  Donc on aurait du faire flotter les blocs à gauche où à droite, et à mon avis faire un calcul savant pour le centrer ( en connaissant la largeur de ce qu'on veut centrer et en mettant la bonne marge ).
  
  
• Il y aurait moyen de mettre une position absolue et positionner par rapport au parent ( pour plus d'info, voir les liens que j'ai mis avant, dans les suites de ces tutoriels on en parle ).
  
  
• Puis dernière solution, on peut modifier le type d'un élément, donc on peut faire devenir une image un bloc, ou un <div> une balise inline.
  
  Dans notre cas ( vu qu'on veut utiliser le fait qu'on met du contenu dans un bloc sur plusieurs lignes ) on ne veut pas un inline, mais il existe un type entre les deux appelé "inline-block", cela partage des propriétés des deux, en gros c'est un bloc qui se place comme des éléments inline ( l'un à côté de l'autre comme du texte normal ).
  
  Donc c'est ça que j'ai fait avec le :
  
  

  Code:

  #slidespv { display:inline-block;  }

  J'ai changé leur type d'affichage en inline-block.

Cordialement.

[sweetheart29]

Merci beaucoup pour votre réponse très complète !

Néanmoins j'aurais besoin d'une petite précision :

Code:

#slidespv { display:inline-block;  }

Ceci est à ajouter parmi les caractéristiques de mes 3 div différentes ? Ou bien dois-je remplacer quelque chose ?

Encore merci.

[Ea]

C'est à ajouter dans le CSS ( PA > Affichage > Couleurs > Feuille de style ).

Cela mettra aux éléments de type <balise id="slidespv"> ( vous en avez 3 ) la propriété css "display" à la valeur "inline-block".

[sweetheart29]

Ça marche, c'est parfait ! Merci beaucoup, bonne soirée !