.♥. Ayako .♥.
{ Membre }
Messages : 8
| Hoy Mina =D Donc voilà je m'explique. J'ai un groooos problème, car j'ai fait une groooosse bêtise sans le vouloir (encore heureux en même temps xD). Donc je m'explique, j'avais un tout beau forum, tout classe avec de magnifique infobulle et un belle encadrement à mon texte. Donc jusque là tous est parfait rien à redire. Sauf que voilà, comme une cruche j'ai effacer tout monde code CSS résultat plus de CSS code ou d'encadrement du texte. Et comme c'est pas moi qui les avait fait, bas voilà j'ai juste un gros problème. Donc serait-il possible d'avoir les codes pour l'encadrement du texte et également des infobulle, je vous montre déjà le code CSS que j'ai en ce moment ^^ - Spoiler:
- Code:
-
/* INFOBULLE */
.tstaff{font-size:1em;}
.thumbnail{position: relative;z-index: 0;}
.thumbnail:hover{background-color: transparent;z-index: 50;}
.thumbnail span{ position: absolute; background-color: #FFA34F; padding: 5px; left: -1000px; visibility: hidden; color: #000000;}
.thumbnail span img{border: 1px groove;padding: 2px;}
.thumbnail:hover span{ visibility: visible; top: 15px; left: 25px; width: 120px;}
/* OMBRE SUR LE TEXTE */
a { text-shadow: black 1px 1px 1px; }
/* CADRE POUR TEXTE */
div.background { width:500px; height:250px; border:2px solid black; } div.transbox { width:400px; height:180px; margin:30px 50px; background-color:#ffffff; border:1px solid black; filter:alpha(opacity=60); opacity:0.6; } div.transbox p { margin:30px 40px; font-weight:bold; color:#783C85; }
/* CADRE POUR AVATAR DU PROFIL */
.postdetails.poster-profile a img
{ border: 6px SOLID #783C85; /*La bordure*/ background-color: #CAB4CF; /*Le fond*/ -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 8px; -moz-border-radius-bottomleft: 8px; }
/* CATEGORIES EN ONGLETS */
.text { color:#FFFFFF; /*Couleur du texte de vos onglets*/ cursor:pointer; }
#cat_Bien commencer,#cat_Vie du forum,#cat_Paradis,#cat_Terre,#cat_Enfer,#cat_Hors Rp/*nomonglet... à remplacer par le nom des onglets*/ { padding-top:4px; }
.spoiler_content { display: block; } .hidden .spoiler_content { display: none; }
.cat_forum { background-color: #000000; margin: auto; margin-bottom:30px; width:90%; }
.onglet { display:inline-block; margin-top:30px; text-decoration:none; !important cursor:pointer; }
.onglet li { float:left; list-style-type:none; margin-bottom:-20px; text-decoration:none; !important cursor:pointer; }
.onglet li:hover { text-decoration:none; !important cursor:pointer; }
display:block; { text-decoration:none; !important list-style-type: none; cursor:pointer; }
.onglet li a: hover { text-decoration:none; list-style-type:none; cursor:pointer; }
/* CATEGORIES EN ONGLETS */ .onglet_actif { -border-radius: 15px; /* tous les côtés sont arrondis */ -moz-border-radius: 15px; /* tous les côtés sont arrondis */ -webkit-border-radius: 15px; /* tous les côtés sont arrondis */ width:120px; /*Largeur de l'onglet étant actif*/ height:23px; /*Hauteur de l'onglet étant actif*/ border:solid 1px white; /* l'encadrement est porté à 2 pixels */ border-bottom:solid 2px white; /* le trait inférieur est effacé */ cursor:pointer; }
.onglet_nactif { -border-radius: 15px; /* tous les côtés sont arrondis */ -moz-border-radius: 15px; /* tous les côtés sont arrondis */ -webkit-border-radius: 15px; /* tous les côtés sont arrondis */ width:120px; /*Largeur de l'onglet étant inactif*/ height:23px; /*Hauteur de l'onglet étant inactif*/ border:solid 1px white; /* l'encadrement est porté à 2 pixels */ border-bottom:solid 2px white; /* le trait inférieur est effacé */ cursor:pointer; }
/* Image de chatbox */ body.chatbox { background-image: url(http://upload.is.free.fr/upload/kuglgkoh.jpg); background-repeat: repeat; }
.bodyline{ -moz-border-radius: 10px;}
textarea, .textarea.post, input.post { -moz-border-radius:4px; }
a { font-variant: small-caps; text-decoration: none!important; }
a:hover { text-decoration: none!important; }
/* TITRES DES CATEGORIE */
a.forumlink:link, a.forumlink:visited { background-color: #ECE4F0; border-bottom: 5px double #6E4E82; color: #6E4E82; font-weight: bold; font-family: georgia; font-size: 14px; font-weight: lighter; letter-spacing: 2px; display: block; text-align: center; -moz-border-radius: 20px 20px 0px 0px; }
/* CADRE DU FORUM */
.bodyline { -moz-border-radius:6px; }
.forumline{ background-color: #6E4E82; -moz-border-radius: 6px ; border: 2px #6E4E82 solid; }
*/ OMBRE SUR TOUT LES LIENS */
a.forumlink { text-shadow: 2px 2px 2px #B593B4; }
/* BARRE DE NAVIGATION */
a.mainmenu { background-color: #CCB2DB; padding-right: 10px; font-weight: bold; -moz-border-radius-topright: 15px; -moz-border-radius-topleft: 15px; text-transform: uppercase; color : #BA6CB7; text-shadow: 2px 2px 2px #B593B4; font-size: 10px; } a.mainmenu:hover{ background-color: #D7C5E0; padding-right: 10px; font-weight: bold; -moz-border-radius-topright: 15px; -moz-border-radius-topleft: 15px; text-transform: uppercase; color : #6E4E82; font-size: 10px; }
/* SUPRIMER MARGE DU HAUT ET DU BAS */
.bodyline { border-width : 4px; border-style: simple; } body{ margin-top: -10px; margin-bottom: -10px; }
.bodyline { border-bottom: none; }
/*PA*/
/*PA*/
a.styletitrepa, a.styletitrepa:active, a.styletitrepa:visited { background-color: #ECE4F0; border-bottom: 5px double #6E4E82; color: #6E4E82; font-weight: bold; font-family: georgia; font-size: 14px; font-weight: lighter; letter-spacing: 2px; display: block; text-align: center; -moz-border-radius: 20px 20px 0px 0px; } a.styletitrepa:hover { font-style: italic; color: #dad6f0; text-decoration: none!important; } div.staff { height: 130px; font-size: 12px; margin-top: 10px; text-align: center; } div.staff img { background-color: #ECE4F0; border: 3px double #6E4E82; padding: 3px; -moz-border-radius: 10px; margin: 0px 3px 2px 3px; } div.navig { height: 130px; margin-top: 10px; text-align: center; overflow: hidden; } div.navig div { background: #6E4E82; -moz-border-radius: 20px; margin-top: 3px; border-width: 0px 3px 1px 3px; border-style: solid; border-color: #ECE4F0; color: #ECE4F0; font-size: 12px; text-align: center; text-transform: lowercase; font-variant: small-caps; height: 12px; } div.navig div:hover { background: #ECE4F0; -moz-border-radius: 20px; margin-top: 3px; border-width: 0px 3px 1px 3px; border-style: solid; border-color: #6E4E82; color: #6E4E82; font-size: 12px; text-align: center; text-transform: lowercase; font-variant: small-caps; height: 12px; } div.contexte { height: 130px; margin-top: 10px; text-align: justify; padding: 0px 10px 0px 5px; font-size: 11px; } div.pvs{ height: 210px; font-size: 12px; margin-top: 5px; text-align: center; overflow: hidden; } div.pvs img { width: 88px; height: 31px; background-color: #ECE4F0; border: 3px double #6E4E82; padding: 3px; -moz-border-radius: 10px; margin: 2px; } .friends { height: 86px; overflow: hidden; margin-top: 5px; font-size: 11px; text-align: center } .copyright { height: 96px; font-size: 9px; text-align: center; margin-top: 5px; } div.news{ height: 210px; font-size: 12px; margin-top: 5px; text-align: justify; overflow: auto; padding: 0px 10px 0px 0px; } .stylemenu { border: medium double ; background: #ECE4F0 none repeat scroll 0% 50%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; font-family: tahoma; color: #6E4E82; font-size: 10px; } .stylebutton { border: medium double ; background: #ECE4F0 none repeat scroll 0% 50%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; font-family: tahoma; color: #6E4E82; font-size: 10px; } span.infoadmins { position: relative; text-decoration: none; } span.infoadmins span.bulle { display: none; font-size: 12px; } span.infoadmins:hover { background: none; z-index: 999; cursor: help; } span.infoadmins:hover span.bulle { display: inline; position: absolute; left: -56px; width; 100px; top:20px; color: #5e7d92; background-color: #ECE4F0; border: 3px double #6E4E82; padding: 3px; -moz-border-radius: 10px; }
span.infoadmins span.bulles { display: none; font-size: 12px; }
span.infoadmins:hover span.bulles { display: inline; position: absolute; left: -56px; width; 100px; top:20px; color: #5e7d92; background-color: #ECE4F0; border: 3px double #6E4E82; padding: 3px; -moz-border-radius: 10px; }
Voilà ensuite mon code pour la PA - Spoiler:
- Code:
-
<table width="100%"><tbody> <tr> <td style="border-right: 1px dashed rgb(0, 0, 0); border-bottom: 1px dashed rgb(0, 0, 0); text-align: center;" width="25%"><img src="http://img5.hostingpics.net/pics/70228nav.png" border="0" alt="" /> <br><a href="http://war-trinity.forums-actifs.com/reglement-f1/reglement-du-forum-t4.htm" class="postlink">Règlement.</a> <br><a href="http://war-trinity.forums-actifs.com/reglement-f1/regles-pour-les-combats-t8.htm?sid=9b9c917c315e57c3e03331ab030eaa93?sid=9b9c917c315e57c3e03331ab030eaa93" class="postlink">Règles des combats.</a> <br><a href="http://war-trinity.forums-actifs.com/reglement-f1/notre-equipe-t7.htm?sid=9b9c917c315e57c3e03331ab030eaa93?sid=9b9c917c315e57c3e03331ab030eaa93" class="postlink">Présentation du Staff.</a> <br></td> <td style="border-right: 1px dashed rgb(0, 0, 0); border-bottom: 1px dashed rgb(0, 0, 0); text-align: center;" width="25%"><img src="http://img5.hostingpics.net/pics/508103news.png" border="0" alt="" /> <br> 15/10/10: Le forum est en construction! </tb> <td colspan=3 style="border-bottom: 1px dashed rgb(0, 0, 0);" width="75%">Message d'accueil <br>Bienvenue sur ... <br>... <br>... <br><div style="text-align: right;">Cordialement</div> </tr> <tr> <td style="border-right: 1px dashed rgb(0, 0, 0); text-align: center;" width="25%"><img src="http://img5.hostingpics.net/pics/625778top.png" border="0" alt="" /></td> <td style="border-right: 1px dashed rgb(0, 0, 0); text-align: center;" width="25%"><img src="http://img5.hostingpics.net/pics/908516part.png" border="0" alt="" /> <br>Nos partenaires <br>... <br>... <br>...</td> <td style="border-right: 1px dashed rgb(0, 0, 0); text-align: center;" width="25%"><img src="http://img5.hostingpics.net/pics/615185staff.png" border="0" alt="" /> <br><div style="margin:auto;text-align:center;width:100%"><a class="imginfo"><font color="Dimgrey"><img src="http://nsa20.casimages.com/img/2010/10/15/101015041334277731.png" border="0" alt="" /> </font><span><table width="125" cellspacing="1" cellpadding="1" border="0"><tr><td style="text-align: center;"><tr><td style="text-align: center;"><font size="1"><br ><img src="http://nsa19.casimages.com/img/2010/10/15/10101504142398955.png" border="0" alt="" /> <br>Luxuria <br><a href="http://war-trinity.forums-actifs.com/profile.forum?mode=viewprofile&u=4" class="postlink">Profil</a> / <a href="http://war-trinity.forums-actifs.com/msg.forum?mode=post&u=4?sid=1a49dab632cb74649fbb1ee3a5a315c4" class="postlink">Mp</a></font></td></tr><tr align="center"/></table></span></a></div> <br><div style="margin:auto;text-align:center;width:100%"><a class="imginfo"><font color="Dimgrey"><img src="http://nsa19.casimages.com/img/2010/10/15/101015043231210275.png" border="0" alt="" /> </font><span><table width="125" cellspacing="1" cellpadding="1" border="0"><tr><td style="text-align: center;"><tr><td style="text-align: center;"><font size="1"> <br ><img src="http://nsa20.casimages.com/img/2010/10/15/101015043334369814.png" border="0" alt="" /> <br>Sperare <br><a href="http://war-trinity.forums-actifs.com/profile.forum?mode=viewprofile&u=5" class="postlink">Profil</a> / <a href="http://war-trinity.forums-actifs.com/msg.forum?mode=post&u=5" class="postlink">Mp</a></font></td></tr><tr align="center"/></table></span></a></div> <br><div style="margin:auto;text-align:center;width:100%"><a class="imginfo"><font color="Dimgrey"><img src="http://nsa20.casimages.com/img/2010/10/15/101015045037819447.png" border="0" alt="" /> </font><span><table width="125" cellspacing="1" cellpadding="1" border="0"><tr><td style="text-align: center;"><tr><td style="text-align: center;"><font size="1"> <br ><img src="http://nsa19.casimages.com/img/2010/10/15/10101504495452845.png" border="0" alt="" /> <br>Invidia <br><a href="http://war-trinity.forums-actifs.com/profile.forum?mode=viewprofile&u=3">Profil</a> / <a href="http://war-trinity.forums-actifs.com/msg.forum?mode=post&u=3" class="postlink">Mp</a></font></td></tr><tr align="center"/></table></span></a></div> <br><td style="text-align: center;" width="25%"><img src="http://img5.hostingpics.net/pics/142210predef.png" border="0" alt="" /></td> </tr> </tbody></table></td></tr>
Et enfin l'un des codes pour l'encadrement du texte - Spoiler:
- Code:
-
<div class="contenu">Crédits du design:
Thème complet: A venir! Images utilisé pour les catégories: [url=http://www.google.com]Google[/url] Render utilisé: [url=http://www.renders-graphiques.fr/]Render Graphique[/url]</div>
<div class="contenu">Crédits des textes:
Textes des descriptions du Paradis: Sperare. Textes des descriptions de la Terre: Invidia. Textes des descriptions de l'Enfer: Luxuria. </div>
<div class="contenu">Crédits des règles, histoire, etc:
Texte et mise en page des règles: Luxuria Texte descriptif des anges et des démons: Sperare Mise en page du texte anges et démons: Luxuria </div>
<div class="contenu">Crédits des codes:
Codes de la mise en page:[url=http://themes-passion.forumactif.org/forum.htm]Night Neko de themes-passion.[/url] Codes de la fiche de présentation: [url=http://css-actif.forumactif.org/forum.htm]Liliana de CSSactif.[/url] Codes de la PA: A venir Codes des images des catégories et sous catégories: Invidia. </div>
<div class="contenu">[i]"Si vous êtes l'auteur de certaines images que vous voyez ici, n'hésitez pas à le faire savoir à l'administrateur de ce forum. Si vous êtes d'accord pour que nous puissions continuer d'exploiter vos créations, nous mettrons volontiers votre nom ainsi qu'un lien vers votre site/forum/blog dans les crédits. Si par contre, vous ne désirez pas que nous utilisions vos créations, nous les retirerons immédiatement du décor du forum."
"If you are the author of some images that you can see on this forum, please contact the administrator of this forum. If you agree with the fact that we continue to use your creations, we can write your name and put a link to your site/forum/blog in the credits. If on the other hand, you don't wish that we use your creations, we will delete them from the design of the forum."
[right][url=http://enaevolare.lostmindy.net/]De Paro d'Enae Volare![/url][/right][/i]</div>
Donc voilà merci d'avance =D | | |
|
#_Holigan
{ Membre }
Messages : 79
| Les infos bulles traînent partout sur le forum Le tuto est là. Pour encadrer une zone de texte, tu la places dans une div (ici elles semblent s'appeler - Code:
-
<div class="contenu"> , tu as plus qu'à leur appliquer les propriétés css suivantes : - Code:
-
.contenu{ border: 1px solid #FFFFFF; /* cadre de 1px simple blanc */ padding: 10px; /* pour éviter que le texte touche le calque */ } Mais là, c'est une commande que tu veux faire | | |
|
.♥. Ayako .♥.
{ Membre }
Messages : 8
| Bas pour le contour du texte il y a aucun problème. Et si je poste ici c'est justement que les tuto ont pas fonctionner.
Parce que j'arrête pas de justement copier le code et le modifié correctement pour que par exemple que cadre soit d'une certaine couleur, etc. Mais ce qu'il y avait en infobulle veux pas revenir en infobulle et je comprend vraiment pas pourquoi. | | |
|
#_Holigan
{ Membre }
Messages : 79
| Vas voir là bas, ça a marché pour moi Le code ne buguait que sous google chrome & safari. Il était pas très juste apparemment. http://www.css-actif.com/resolu-f18/infobulle-safari-t5400-15.htm | | |
|
.♥. Ayako .♥.
{ Membre }
Messages : 8
| Le truc c'est que j'ai essayer sur les Pc de mon école et sur tout les navigateur et sa fonctionne. Mais sur mon ordi à moi à la maison sur Fire Fox sa fonctionne pas. | | |
|
#_Holigan
{ Membre }
Messages : 79
| Le dernier code ? Chez moi pas de problème, je suis sous FF pourtant o.O Chez moi, avec ça, aucune problème : - Code:
-
<div class="infobulle"><img src="http://img403.imageshack.us/img403/7663/pulpemini.png"><span><center><font color="#36522f" size="1">Pulpe d'Orange</font><br><font color="#608756" size="1">Juge Ville<br><br> "Pikabi"</font><br /><a href="http://art-of-cats.forums-actifs.com/profile.forum?mode=viewprofile&u=20" target="_blank">Contacter</a></center></span></div> Et le css simplifié : - Code:
-
.infobulle { display: inline; }
div.infobulle { position: relative; }
div.infobulle span { display: none; } div.infobulle:hover { background: none; z-index: 999; } div.infobulle:hover span { display: inline; position: absolute; white-space: nowrap; top: 5px; left: 15px; } | | |
|
.♥. Ayako .♥.
{ Membre }
Messages : 8
| Bas justement. Sur les ordinateur de mon école il y a aucun problème les infobulle fonctionne parfaitement bien. Mais sur mon ordinateur portable à la maison justement sa fonctionne pas O.o | | |
|
#_Holigan
{ Membre }
Messages : 79
| Mets à jour firefox alors ...
Par rapport à ton css, pourquoi tu as ton infobulle dans des span ? Le css correspondant au code "qui marche" (le dernier donc), il s'agit de div et non de span.
Tu as bien tout modifié comme le dit VPeybernes ? CSS & Html ? | | |
|
.♥. Ayako .♥.
{ Membre }
Messages : 8
| Ha non c'est bon ^^' Le problème est régler merci >o< | | |
|
Kaiji
Blanche-Neige
Messages : 5578
| |