Problème alignement icônes PV sur PA
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Problème alignement icônes PV sur PA
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 :
Mais voici la partie concernée :
Et la partie concernée dans la fiche de CSS, au cas où :
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.
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.
Dernière édition par sweetheart29 le Lun 1 Oct 2012 - 21:03, édité 1 fois
Re: Problème alignement icônes PV sur PA
Personne ne trouve de solution ?
Re: Problème alignement icônes PV sur PA
Un petit up svp, j'ai besoin de votre aide ..
Re: Problème alignement icônes PV sur PA
Pas d'idée ?
Re: Problème alignement icônes PV sur PA
Bonjour,
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 :
Cordialement.
- Code:
#slidespv { display:inline-block; }
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; }
Cordialement.
Ea- Aidactif
- Messages : 23583
Inscrit(e) le : 04/04/2008
Re: Problème alignement icônes PV sur PA
Merci beaucoup pour votre réponse très complète !
Néanmoins j'aurais besoin d'une petite précision :
Encore merci.
Néanmoins j'aurais besoin d'une petite précision :
- Code:
#slidespv { display:inline-block; }
Encore merci.
Re: Problème alignement icônes PV sur PA
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".
Cela mettra aux éléments de type <balise id="slidespv"> ( vous en avez 3 ) la propriété css "display" à la valeur "inline-block".
Ea- Aidactif
- Messages : 23583
Inscrit(e) le : 04/04/2008
Re: Problème alignement icônes PV sur PA
Ça marche, c'est parfait ! Merci beaucoup, bonne soirée !
Sujets similaires
» Problème d'alignement des icones
» Alignement îcones sujet et texte
» Un problème d'alignement
» Alignement texte & icônes dans les catégories forums
» Problème d'alignement PA
» Alignement îcones sujet et texte
» Un problème d'alignement
» Alignement texte & icônes dans les catégories forums
» Problème d'alignement PA
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum