(résolu !) Info bulle... Bouton_active(résolu !) Info bulle... Bouton_hover(résolu !) Info bulle... Fb-hover(résolu !) Info bulle... Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Système d'onglets simple et personnalisable
(résolu !) Info bulle... EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
(résolu !) Info bulle... EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
(résolu !) Info bulle... EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
(résolu !) Info bulle... EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
(résolu !) Info bulle... EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
(résolu !) Info bulle... EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
(résolu !) Info bulle... EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
(résolu !) Info bulle... EmptySam 11 Fév 2023, 06:04 par Krager

Le Deal du moment :
Boutique Nike : -25% dès 50€ sur TOUT le ...
Voir le deal

Partagez
 

(résolu !) Info bulle...

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://tokyo-nights.forumactif.org/
aknot
aknot
{ Membre }
{ Membre }

Féminin Messages : 32



(résolu !) Info bulle... Empty
Bonsoir :DAlors, j'ai testé ce tuto, et j'ai le résultat voulu. SAUF QUE : (beh oui, si j'me plante pas c'est pas drôle XDDD)

Voici le résultat :

Les deux premières images étaient l'une à côté de l'autre, et les deux suivantes également... Je ne sais pas ce qui empêche ceci. (Ou alors je suis aveugle, ce qui ne serait pas du tout étonnant... XDDD)

Voici le HTML de ma PA :

Code:
<div style="text-align: center;"><br><font style="font-family: cambria; color: rgb(250, 241, 205); text-shadow: 0px 0px 2px rgb(250, 241, 205); line-height: 6px;" size="6" >【眠らない日本のダークサイド ★ TOKYO NIGHTS】</font><br><br>

<table><tbody><tr><td  width=50%><div class=arthur><br>Il y a ces gens, qui pensent que la vie au Japon est belle, sans soucis... Un vrai paradis, presque. Personne ne réalise.<br><br>La nuit venue, le Kabukicho s'éveille, laissant alors les yakuzas et les hôtes prendre leurs services. L'odeur du sexe et de la drogue est partout... Préférez-vous faire partie de ce monde dangereux, là où vous ne saurez pas avec qui vous vous réveillerez le matin même, ou être du côté des civils qui tentent de ne pas les croiser ?<br><br>Méfiez-vous, sachez qu'ils sont partout...<strong>  <a href= link>Voir le contexte.</a></strong><br><br>
</div></td><td  width=50%><div class=arthur><br><a href="http://tokyo-nights.forumactif.org/t8-reglement-du-forum">RÈGLEMENT</a> • <a href="http://tokyo-nights.forumactif.org/f7-les-predefinis">PRÉDÉFINIS</a> • <a href="http://tokyo-nights.forumactif.org/t11-les-differents-groupes">GROUPES</a> • <a href="http://tokyo-nights.forumactif.org/f8-scenarios-des-membres">SCÉNARIOS</a> • <a href="http://tokyo-nights.forumactif.org/t10-liste-des-avatars-pris">LES AVATARS</a> </br>
</br> • 19.08.2013 → Ouverture du forum
</br> • 23.09.2013 → Favorisez les hommes hétéros et les femmes !
</br>
</br> • <font color="#cc6633">PREMIER RECENSEMENT <a href="http://tokyo-nights.forumactif.org/t222-premier-recensement">ICI</a> ! OUVERT JUSQU'AU 31 OCTOBRE !</font>
</br> ✒️ Ceux qui n'aurons pas posté dans ce sujet seront supprimés.
</br>
</br></br>
</br></div></td></tr></tbody></table>

<table><tbody><tr> <td width=30% ><div class="arthur"><span style="text-align:center; width:100%"><table><center>LES MEMBRES DU STAFF</center><br><center><div class="infobulle">
    <img src="http://img11.hostingpics.net/pics/820042b6oLmnj.png" style="padding : 3px ; border : 1px solid #000000; margin : 2px; width : 80px ; height :40px;"> <div>TOKYO NIGHTS<br><a href="http://">Le contacter</a></div></div>  <div class="infobulle"> <img src="http://img11.hostingpics.net/pics/910157b6oLmnj.png" style="padding : 3px ; border : 1px solid #000000; margin : 2px; width : 80px ; height :40px;"> <div>HIIRAGI Haruto<br><a href="http://">Le contacter</a></div></div> </center>
<center><div class="infobulle"> <img src="http://img11.hostingpics.net/pics/942407b6oLmnj.png" style="padding : 3px ; border : 1px solid #000000; margin : 2px; width : 80px ; height :40px;"> <div>ONIMURA Kentaro<br><a href="http://">Le contacter</a></div></div>  <div class="infobulle"> <img src="http://img11.hostingpics.net/pics/339420b6oLmnj.png" style="padding : 3px ; border : 1px solid #000000; margin : 2px; width : 80px ; height :40px;"> <div>IEICHI Hiro<br><a href="http://">Le contacter</a></div></div> </br>
</br></br></center>

</table></span></div>
</td>
<td width=40%> <div class="arthur"><br><div style="height:120px;overflow:auto;">Trouver un truc à foutre ici '-' Code à la con (résolu !) Info bulle... 3333627970</div></div>
</td><td width=30%> <div class="arthur"><center>LES MEMBRES DU MOIS DERNIER</center><br><center><img src="http://img15.hostingpics.net/pics/887223b6oLmnj.png" style="padding : 3px ; border : 1px solid #000000; margin : 2px; width : 80px ; height :40px;"> <img src="http://img15.hostingpics.net/pics/887223b6oLmnj.png" style="padding : 3px ; border : 1px solid #000000; margin : 2px; width : 80px ; height :40px;"> NOM Prénom • NOM Prénom</br>Félicitations à vous !
</br></br>
<center>TOP SITES → <a href="http://www.root-top.com/topsite/asiansound/in.php?ID=273">❤️</a> <a href="http://www.root-top.com/topsite/miinachan05/in.php?ID=123">❤️</a> <a href="http://www.root-top.com/topsite/blueye/in.php?ID=2696">❤️</a> <a href="http://www.root-top.com/topsite/sukhee/in.php?ID=175">❤️</a> <a href="http://www.root-top.com/topsite/farfriendstop/in.php?ID=290">❤️</a></center></center>
</div></td></tr></tbody></table>


<br>
<center>

<a href="LIEN"><img src="http://img11.hostingpics.net/pics/873400652346serap.png"></img></a>
<a href="LIEN"><img src="http://img11.hostingpics.net/pics/873400652346serap.png"></img></a>
<a href="LIEN"><img src="http://img11.hostingpics.net/pics/873400652346serap.png"></img></a>
<a href="LIEN"><img src="http://img11.hostingpics.net/pics/873400652346serap.png"></img></a>
<a href="LIEN"><img src="http://img11.hostingpics.net/pics/873400652346serap.png"></img></a>
<a href="LIEN"><img src="http://img11.hostingpics.net/pics/873400652346serap.png"></img></a>
<a href="LIEN"><img src="http://img11.hostingpics.net/pics/873400652346serap.png"></img></a>
<a href="LIEN"><img src="http://img11.hostingpics.net/pics/873400652346serap.png"></img></a>
<a href="LIEN"><img src="http://img11.hostingpics.net/pics/873400652346serap.png"></img></a>
<a href="LIEN"><img src="http://img11.hostingpics.net/pics/873400652346serap.png"></img></a>
<a href="LIEN"><img src="http://img11.hostingpics.net/pics/873400652346serap.png"></img></a>
<a href="LIEN"><img src="http://img11.hostingpics.net/pics/873400652346serap.png"></img></a>
<a href="LIEN"><img src="http://img11.hostingpics.net/pics/873400652346serap.png"></img></a>
<a href="LIEN"><img src="http://img11.hostingpics.net/pics/873400652346serap.png"></img></a>
<br><br>  </center>

<a href="http://tokyo-nights.forumactif.org/t35-tous-nos-partenaires">TOUS NOS PARTENAIRES</a> • <a href="http://tokyo-nights.forumactif.org/t31-modele-pour-demande-de-partenariats">DEVENIR PARTENAIRE</a> • <a href="http://tokyo-nights.forumactif.org/t36-nos-logos-fiches#55">NOS LOGOS</a> • <a href="http://tokyo-nights.forumactif.org/t12-les-credit">LES CRÉDITS DU FORUM</a> • Forum optimisé pour CHROME & FIREFOX<br><br>
Et le CSS :

Code:
div.infobulle {
  position: relative; /* on définit le bloc comme élément de référence */
  cursor:pointer; /*donne au curseur la forme de petite main, comme sur un lien*/
}

div.infobulle > div{
  display: none; /* ceci masque l'infobulle */
}

div.infobulle:hover {
  background: none; /* correction d'un bug IE */
  z-index: 500; /* on s'arrange pour que notre bloc soit au dessus des autres en cas de conflit */
}

/* Lorsqu'on survole le contenu du bloc */
div.infobulle:hover > div{
   display: block; /* ceci affiche l'infobulle (on peut aussi utiliser inline au lieu de block) */

   /* on positionne notre infobulle par rapport au bloc conteneur */
   position: absolute;
   top: 10px; /* 5px par rapport au haut du bloc .infobulle */
   : 15px; /* 15 px par rapport à la gauche du bloc .infobulle */

   /* Et puis on rajoute tous les éléments de mise en forme de l'infobulle */
   background: #000000; /* arrière-plan de l'infobulle */
   color: white; /* texte dans l'infobulle */
   padding: 3px; /* marges internes par rapport aux bords */
   /* bordures de votre infobulle*/
   border: 2px solide black;
}
S'il n'y a rien à changer (j'entends par ceci juste UN truc) je suis désolée d'avance, mais je suis dessus depuis le début de l'après-midi, et j'ai peur de toucher à tout... T.T

Merci d'avance ♥️


Dernière édition par Mazohyst le Lun 28 Oct 2013, 14:52, édité 1 fois
MessageSujet: (résolu !) Info bulle...   (résolu !) Info bulle... EmptyJeu 24 Oct 2013, 18:10
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



(résolu !) Info bulle... Empty
Si je comprends bien, tu veux que les images du staff soit les unes à côté des autres 2 par 2 ?

Dans ton CSS, pour la div.infobulle, il faut rajouter " display: inline-block;":
Code:
div.infobulle {
  position: relative; /* on définit le bloc comme élément de référence */
  cursor:pointer; /*donne au curseur la forme de petite main, comme sur un lien*/
  display: inline-block; /* pour que les autres infobulles se mettent à la suite */
}
Comme tes infobulles sont dans des div, et que les div sont de type "block", elles vont automatiquement à la ligne. Contrairement à un élément de type "inline" (par exemple les span, ou les images, ou les liens, qui eux se mettent à la suite)

En mettant display: inline-block; tes div.infobulle vont prendre une partie des caractéristiques des éléments inline, et vont bien se mettre sagement les uns à côtés des autres.

N'hésite pas à poster le lien du forum en question pour ta prochaine question, en général ça permet de régler le problème plus rapidement ^^
MessageSujet: Re: (résolu !) Info bulle...   (résolu !) Info bulle... EmptyJeu 24 Oct 2013, 18:25
Revenir en haut Aller en bas
http://tokyo-nights.forumactif.org/
aknot
aknot
{ Membre }
{ Membre }

Féminin Messages : 32



(résolu !) Info bulle... Empty
Merci beaucoup Nihil ♥️ Promis, la prochaine fois, c'est ce que je fais Razz
MessageSujet: Re: (résolu !) Info bulle...   (résolu !) Info bulle... EmptyJeu 24 Oct 2013, 18:36
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



(résolu !) Info bulle... Empty
Contente d'avoir pu t'aider, pense à éditer le titre de ton message pour mettre la mention "Résolu" (:
MessageSujet: Re: (résolu !) Info bulle...   (résolu !) Info bulle... EmptyVen 25 Oct 2013, 13:15
Revenir en haut Aller en bas
Contenu sponsorisé




(résolu !) Info bulle... Empty
MessageSujet: Re: (résolu !) Info bulle...   (résolu !) Info bulle... Empty
Revenir en haut Aller en bas
 

(résolu !) Info bulle...

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Info bulle
» Info bulle
» Problème Info-bulle :3
» [aide] info bulle sur la navbar
» Fusion de deux templates ( Info bulle )

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Cookies | Forum gratuit