| [RESOLU] Travail sur la PA de mon fow (Soucis image) | |
|
Akya
{ Membre }
Messages : 207
| Bonsoir tout le monde, Je viens chercher de l'aide auprès de vous, car je suis en train de commencer à coder ma PA. J'en suis qu'au premier élément, mais j'suis déjà très fière. J'ai deux petites questions... Ou pour la deuxième, plutôt grande. 1. J'arrive pas à mettre un contour à une image sur ma PA. J'ai mis ça dans mon CSS: - Code:
-
#avatarakyacontour { -moz-border-radius-bottomleft:10px; /*CADRE AUTOUR DE L'AVATAR PA*/ -moz-border-radius-bottomright:10px; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; border: 5px solid #FFFFFF; } Pourquoi ça fonctionne pas? 2. Je voulais savoir si il était possible de faire une sorte de tiroir sous l'image, où, en passant la souris sur une "languette", le tiroir se déroulerait vers le bas, dévoilant des informations. Et si oui, où suis-je censée pouvoir trouver un tutoriel? Je suis actuellement sur le codage de la partie Staff, pour l'instant. Merci infiniment pour vos prochaines réponses. <33 |
Dernière édition par Akya le Sam 12 Mai 2012, 05:23, édité 1 fois | |
|
| |
Hiro
Ninja Codeur
Messages : 1179
| Salut, pour le 1, ton code n'est fonctionnel qu'avec Mozilla Firefox; essaie plutôt celui-ci : - Code:
-
#avatarakyacontour { /*CADRE AUTOUR DE L'AVATAR PA*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border: 5px solid #FFFFFF; }
Et 2, oui c'est possible. Peut tu passer un lien vers la page ou se trouve ta PA ? | | |
|
| |
Akya
{ Membre }
Messages : 207
| Ca ne fonctionne pas... :/ Peut être parce qu'autour de l'image y'a une autre div? Il s'agit de celle ci: - Code:
-
#avatarAkya { position: absolute; top: 570px; left: 955px;} C'est pour que je puisse placer l'image où je veux sur la PA. Mais je comprends pas pourquoi ton code fonctionne pas. J'm'acharne dessus depuis déjà quinze minutes. x_X Oui voilà le lien: http://dreamcatgraph.conceptforum.net/ Merci en tout cas. | | |
|
| |
Nyo The Neko
{ Spécialiste }
Messages : 245
| Je te conseille même de mettre ceci:
- Code:
-
#avatarakyacontour { /*CADRE AUTOUR DE L'AVATAR PA*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius:10px; border-radius: 10px; border: 5px solid #FFFFFF; } Pour tous les utilisateurs d'opera | | |
|
| |
Hiro
Ninja Codeur
Messages : 1179
| Donc, Ajoute le code de Nyo comme ceci : - Code:
-
#avatarAkya img { /*CADRE AUTOUR DE L'AVATAR PA*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius:10px; border-radius: 10px; border: 5px solid #FFFFFF; }
Cela devrait fonctionner | | |
|
| |
Akya
{ Membre }
Messages : 207
| Bingo ça marche. On aura un peu galéjer quand même. Et donc, tu me disais que pour le 2, c'est possible? Avec un panneau latéral coulissant peut être? | | |
|
| |
Luffy ♣ King of Pirates
Messages : 4694
| Ciaossu, Ton problème (du moins le n°2 XD) est-il toujours d'actualité ?Si oui, il faudrait le préciser afin que les codeurs puissent voir ton problème et tenter de t'aider à le résoudre =D D'avance, merci | | |
|
| |
Akya
{ Membre }
Messages : 207
| Dans le règlement les ups ne sont pas autorisés, alors je ne me suis pas permis d'uper. ^^" Mais oui, mon soucis est toujours d'actualité. |
Dernière édition par Akya le Sam 12 Mai 2012, 03:31, édité 1 fois | |
|
| |
Psycho
Psychopathe
Messages : 3407
| Hello Akya ! Tu as raison, les "up" ne sont pas autorisés sur l'ensemble du forum, tu as bien fait de ne pas poster (: Ce que voulait dire Luffy, c'était de re-préciser à nouveau quel était ton problème afin que les codeurs puissent le comprendre direct et peut être t'aider (: Merci d'avance | | |
|
| |
Akya
{ Membre }
Messages : 207
| Ah! Je ré-explique donc. Merci. Je cherche à faire au final un panneau latéral coulissant vers le bas, qui serait positionné juste sous une image 100*100. La première partie de la question était de savoir si c'était possible, et la deuxième partie est, comment? Je dispose d'un code trouver sur le FDF, mais il coulisse soit vers la droite, soit vers la gauche... Merci d'avance. | | |
|
| |
Nyo The Neko
{ Spécialiste }
Messages : 245
| Je suis pas sûre de comprendre! ^^"
Est-ce que tu voudrais quelque chose comme ici: (je parle de tout en bas de la page, le panneau "Navigation, qui s'ouvre et se ferme au passage de la souris). | | |
|
| |
Akya
{ Membre }
Messages : 207
| Oui, c'est tout à fait ça, mais la largeur ferait 100 px. Suis-je autorisée à mettre le lien de mon forum pour que tu comprennes mieux où sera placé le panneau coulissant? | | |
|
| |
Nyo The Neko
{ Spécialiste }
Messages : 245
| Absolumnent
Et quand tu dis "ferait une largeur de 100px" ce serait tout le panneau, ou juste le bout avec écrit dessus "navigation" ? ^^ | | |
|
| |
Akya
{ Membre }
Messages : 207
| Vois-tu l'image sur la PA, tout à droite? Le panneau serait juste en dessous. La largeur serait en effet pour tout le panneau. | | |
|
| |
Nyo The Neko
{ Spécialiste }
Messages : 245
| D'accord, je vois! ^^ Alors je vais te donner le code que j'ai utilisé sur le forum que je t'ai montré précédemment,en enlevant les autres valeurs. Cependant, fais attention, ma position est absolute, tu devras faire beaucoup de mise en point (avec les margin) pour avoir le panneau à la bonne place! ^^ Ça prend du temps, mais y'a pas de remède miracle: j'ai fait pareil! ^^
Voici ce qu'il faut mettre dans le HTML: - Code:
-
<div class="nav_and_pagination"> <span class="nav_pag">CE_QUE_TU_VEUX_DANS_TON_TABLEAU</span> <span class="ouverture_nav_pag">INSCRYPTION_POUR_L'OUVERTURE</span></div> Et voici le CSS. Attention, c'est long! =P - Code:
-
/*Début du panneau ouvrant*/ .nav_pag { /*Ici tu positionnes le contenu du tableau. Remplace les XX dans les margin par ce que tu veux! ^^*/ position: absolute; margin-left: XXpx; margin-top: XXpx; /*Transition, pour qu'à la fermeture ET l'ouverture, le tout s'ouvre/ferme lentement. Il va falloir mettre ce code fréquemment!*/ -moz-transition: all 1s ease 0s; transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; /*Ici tu donnes toutes les valuers nécessaires. Ce sont des exemples, tu peux donner plus! ^^*/ background: ICI_LES_DONNÉES_DU_FOND; color: COULEUR_DE_L'ÉCRITURE; display: block; /*Ces lignes sont à garder! C'est ce qui fait que ton panneau ne s'affiche pas! ^^*/ height: 0px; width: 100px; overflow: hidden; z-index: 3; } .ouverture_nav_pag { /*Là tu positionnes l'ouverture! Elle est à positionner plus bas que ton tableau. Sa position changera au hover, mais ça se passe plus bas!*/ position: absolute; margin-left: XXpx; margin-top: XX5px; /*L'ouverture ne doit pas changer soudainement de position, mais lentement!*/ -moz-transition: all 1s ease 0s; transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; /*Les données que tu veux, pour la mise en forme de l'ouverture!*/ background: DONNÉES; border-radius: ICI_TU_FAIS_TES_BORDS_ARRONDIS; -moz-border-radius: ICI_TU_FAIS_TES_BORDS_ARRONDIS; -o-border-radius: ICI_TU_FAIS_TES_BORDS_ARRONDIS; -webkit-border-radius: ICI_TU_FAIS_TES_BORDS_ARRONDIS; color: #B5B5B5; font-size: XXpx; /*Largeur et hauteur de l'ouverture. Tu peux la rendre plus petite si nécessaire! Le reste est à garder!*/ height: 20px; width: 100px; display: block; float: right; z-index: 3; } .nav_and_pagination:hover .nav_pag { /*Transitions, encore et toujours des transitions @_@!*/ -moz-transition: all 1s ease 0s; transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; /*Nous sommes dans ton panneau, une fois ouvert. Donc, tu peux mettre u peu les donées que tu veux. tu peux remplacr le overflow: hidden par un scroll, par exemple, mais le height et les width doivent avoir une valeur plus grande que 0!!*/ background: DONNÉES; overflow: hidden; color: COULEUR_TEXTE; height: 100px; width:100px; padding: XXpx; }
.nav_and_pagination:hover .ouverture_nav_pag { /*La margin supérieure doit changer ici, car à l'ouverture, tu veux que ton texte d'ouverture coulisse avec le reste de ton panneau!!*/ position: absolute; margin-top: 100px; /*Et transition >< */ -moz-transition: all 1s ease 0s; transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; } /*Fin du panneau ouvrant*/ Voilà! Si tu as encore des question, n'hésite pas, et si ton problème est résolu, tu peux l'indiquer à la suite et le mettre dans le titre de ton sujet (je te conseille de le faire après avoir mit en place ton panneau! =P) | | |
|
| |
Akya
{ Membre }
Messages : 207
| Juste, je m'en sors très bien, mais pour positionner entièrement le tableau, et pas que le contenu, je fais comment? Merci beaucoup en tout cas. | | |
|
| |
Nyo The Neko
{ Spécialiste }
Messages : 245
| Le code que je t'ai donné positionne tout le tableau ^^" | | |
|
| |
Akya
{ Membre }
Messages : 207
| Ben j'ai fais ouais, mais après quand je passe ma souris pour l'ouvrir l'ouverture bug. :S | | |
|
| |
Nyo The Neko
{ Spécialiste }
Messages : 245
| Je l'ai mit dans le code: tu dois changer le margin de l'ouverture selon la hauteur de ton bloc. Donc, l'ouverture doit avoir un margin-top de la hauteur de ton bloc+quelques pixels! | | |
|
| |
Akya
{ Membre }
Messages : 207
| Ok c'est tout bon!!! ENFIN!! Ca a été une belle galère, mais ça en valait la peine. ^_^ Merci infiniment. Sujet résolu. | | |
|
| |
Nyo The Neko
{ Spécialiste }
Messages : 245
| Le gros problèmes des positionnement c'est ça: on galère à avoir ce qu'on veut! =P
De rien! ^^ | | |
|
| |
Luffy ♣ King of Pirates
Messages : 4694
| Dans ce cas, je classe Merci à toi Nyo d'avoir aidé =D | | |
|
| |
Contenu sponsorisé
| |
| |
| [RESOLU] Travail sur la PA de mon fow (Soucis image) | |
|