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! | | Nono
{ Membre }
Messages : 148
| Bonjour, J'ai un léger problème avec les infobulles qui sont "trop grande". C'est pour une fiche de "poste vacant". Si quelqu'un pourrait me donner un coup de main, ça serait super !!! Voici la fiche : - Code:
-
[center][img]http://i25.servimg.com/u/f25/11/25/40/17/stock210.png[/img] [img]http://i25.servimg.com/u/f25/11/25/40/17/stock210.png[/img] [img]http://i25.servimg.com/u/f25/11/25/40/17/stock210.png[/img] <div style="line-height: 18px;"><span style="font-size: 55px; font-family: Time New Roman; color: #5E5952; text-transform: uppercase; ">NOM Prénom</span> <span style="font-size: 20px; font-family: Monotype Corsiva; color: #C7C7C6 ; margin-left: 250px;">[b]feat. Nom Prénom[/b]</span></div>[/center]
<table><td><div style="border: 5px solid grey; padding: 0px; width: 200px; height: 320px; -moz-border-radius: 5px 35px 5px 35px;background-image: url('http://i25.servimg.com/u/f25/11/25/40/17/cursed10.jpg');"></div>[center][size=9](C) Copyright[/size][/center] </td> <td><div style="letter-spacing: -3px; font-size: 68px; text-align:center;">[font=Georgia][i]Identity Card[/i][/font] </div> <div style="padding:20px; background-color: grey; width: 400px; padding: 15px 15px; -moz-border-radius: 25px 6px 25px 6px; -moz-box-shadow: 4px 4px 4px black;"> [b][color=black]Nom[/color] :[/b] [i]blabla[/i] [b][color=black]Prénom[/color] :[/b] [i]bla bla[/i] [b][color=black]Date de naissance [/color]:[/b] [i]blabla[/i] [b][color=black]Lieu de Naissance[/color] :[/b] [i]blabla[/i] [b][color=black]Age[/color] :[/b] [i]blabla[/i] [b][color=black]Statut[/color] :[/b] [i]blabla[/i] [b][color=black]Métier [/color]:[/b] [i]blabla[/i]
[b][color=black]Signes Particuliers [/color]:[/b] [i]blabla[/i] [b][color=black]Trait de caractère[/color] :[/b] [i]blabla[/i]</div></td></table>
<center><div style="letter-spacing: -3px; font-size: 48px; text-align:center;">[font=Georgia][i]My life in the Darkside...[/i][/font] </div> <div style="padding:20px; background-color: grey; width: 500px; padding: 15px 15px; -moz-border-radius: 25px 6px 25px 6px; -moz-box-shadow: 4px 4px 4px black;"> [justify]écrire l'histoire du perso ici, blablabla blablablabla blablabla blablablabla blablabla blablablabla blablabla blablablablablablabla blablablabla blablabla blablablabla blablabla blablablabla blablabla blablablabla blablabla blablablablablablabla blablablabla blablabla blablablabla blablabla blablablabla blablabla blablablabla blablabla blablablablablablabla blablablabla blablabla blablablabla blablabla blablablabla blablabla blablablabla blablabla blablablablablablabla blablablabla blablabla blablablabla blablabla blablablabla blablabla blablablabla blablabla blablablablablablabla blablablabla blablabla blablablabla blablabla blablablabla blablabla blablablabla blablabla blablablablablablabla blablablabla [/justify]</div>
<div style="letter-spacing: -3px; font-size: 48px; text-align:center;">[font=Georgia][i]You and I[/i][/font] </div> <div style="padding:20px; background-color: grey; width:500px; padding: 15px 15px; -moz-border-radius: 25px 6px 25px 6px; -moz-box-shadow: 4px 4px 4px black;"> <a href="#" class="info"><img src="http://i25.servimg.com/u/f25/11/25/40/17/stock210.png "><span><center><br/><font color="grey"><b><u><font size ="1px">Nom prénom [size=9].feat Nom prénom[/size]</font></u></b></font><br/> <i><font style="width:160px">blablabla blablablablablablabla blablablabla blablabla blablablabla blablabla blablablabla blablabla blablablabla blablabla blablablablablablabla blablablabla</font></i><br/> </center></font></span></a> <a href="#" class="info"><img src="http://i25.servimg.com/u/f25/11/25/40/17/stock210.png "><span><center><br/><font color="grey"><b><u><font size ="1px">Nom prénom [size=9].feat Nom prénom[/size]</font></u></b></font><br/> <i>description du lien</i><br/> </center></font></span></a> <a href="#" class="info"><img src="http://i25.servimg.com/u/f25/11/25/40/17/stock210.png "><span><center><br/><font color="grey"><b><u><font size ="1px">Nom prénom [size=9].feat Nom prénom[/size]</font></u></b></font><br/> <i>description du lien</i><br/> </center></font></span></a></center></div> et la partie CSS qui va avec : - Code:
-
* { font-family: Tahoma, Verdana, Arial, serif; } a.info { position: relative; color: #423836; text-decoration: none; border-bottom: 1px gray none; /* on souligne le texte */
} a.info span { display: none; /* on masque l'infobulle */ } a.info:hover { background: black; /* correction d'un bug IE */ z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
cursor: help; /* on change le curseur par défaut en curseur d'aide */ } a.info:hover span { display: inline; /* on affiche l'infobulle */ position: absolute; width: 120px;
white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
top: -20px; /* on positionne notre infobulle */ left: 40px;
background: black; -moz-border-radius: 10px;
color: #423836; padding: 3px;
border: 2px solid #75583A;
} | | |
| | | Imari
{ Membre hyper-actif }
Messages : 1538
| Bonjour ^^ Dans ton css, recherche ceci : - Code:
-
width:120px; T'as juste à baisser 120 et je pense que ça sera bon ^^ | | |
| | | Nono
{ Membre }
Messages : 148
| Alors, j'ai changée ce que tu as dis mais en faite c'est pas ça ><. J'ai une partie du texte qui sort de l'infobulle. | | |
| | | Imari
{ Membre hyper-actif }
Messages : 1538
| Je peux avoir une capture s'il te plaît ? ^^ | | |
| | | Nono
{ Membre }
Messages : 148
| Voici le screen : - Spoiler:
| | |
| | | Imari
{ Membre hyper-actif }
Messages : 1538
| Essaie d'enfermer le texte de ton infobulle dans ce tableau : - Code:
-
<table width="120px"><tr><td>TON TEXTE</td></tr></table> Après, si un codeur a une autre solution, mon cerveau n'est pas optimisé aujourd'hui lol | | |
| | | Nono
{ Membre }
Messages : 148
| J'ai fais le test, mais ça n'a pas marché >< | | |
| | | Imari
{ Membre hyper-actif }
Messages : 1538
| Je suis désolée, je sèche complètement T_T
Un bon petit codeur va passer par là, ne t'inquiètes pas ^^
Encore désolée de ne pas avoir pu t'aider plus >< | | |
| | | Radimir
{ Membre actif }
Messages : 459
| Bonjour, Voici le css à mettre chez vous ^^ . ça devrait marcher - Code:
-
* { font-family: Tahoma, Verdana, Arial, serif; } a.info { position: relative; color: #423836; text-decoration: none; border-bottom: 1px gray none; /* on souligne le texte */
} a.info span { display: none; /* on masque l'infobulle */ } a.info:hover { background: black; /* correction d'un bug IE */ z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
cursor: help; /* on change le curseur par défaut en curseur d'aide */ } a.info:hover span { display: inline; /* on affiche l'infobulle */ position: absolute; width: 120px;
top: -20px; /* on positionne notre infobulle */ left: 40px;
background: black; -moz-border-radius: 10px;
color: #423836; padding: 3px;
border: 2px solid #75583A;
} | | |
| | | Nono
{ Membre }
Messages : 148
| Merci, cette fois ça marche ^^ Un grand merci pour votre aide ^^ | | |
| | | Imari
{ Membre hyper-actif }
Messages : 1538
| | | | Contenu sponsorisé
| | | | |
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|
|