Monter le titre
zoro
-
zoro -
zoro -
Bonjour,
J'ai inséré sur mon site un effet seulement je n'arrive pas à cadrer correctement le titre et faire en sorte que l'ensemble de l'élément face 200px par 200px.
Merci de bien vouloir m'aider...
html:
css:
merci de votre aide
zoro!!
J'ai inséré sur mon site un effet seulement je n'arrive pas à cadrer correctement le titre et faire en sorte que l'ensemble de l'élément face 200px par 200px.
Merci de bien vouloir m'aider...
html:
<div class="grid"> <figure class="effect-ruby"> <figcaption> <h2><a >titre</a></h2> <p><a >description..</a></p> </figcaption> </figure> </div>
css:
figure.effect-ruby{background-color:#ffffff ; text-align: center;
font-family: 'Raleway', sans-serif;
width: 200px; height: 200px;
display: table-cell; /* comportement visuel de cellule */
vertical-align: middle;}
figure.effect-ruby img{opacity:.7;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:scale(1.15);transform:scale(1.15)}
figure.effect-ruby:hover img{opacity:.5;-webkit-transform:scale(1);transform:scale(1)text-align: center;}
figure.effect-ruby h2{margin-top:20%;-webkit-transition:-webkit-transform .35s;transition:transform .35s;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)text-align: center;}
figure.effect-ruby p{margin:1em 0 0;padding:3em;border:1px solid #000;text-align: center; opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:translate3d(0,20px,0) scale(1.1);transform:translate3d(0,20px,0) scale(1.1)}
figure.effect-ruby:hover h2{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)text-align: center;}
figure.effect-ruby:hover p{opacity:1;-webkit-transform:translate3d(0,0,0) scale(1);transform:translate3d(0,0,0) scale(1)text-align: center;}
merci de votre aide
zoro!!
A voir également:
- Monter le titre
- Trouver un film sans le titre - Télécharger - Divers TV & Vidéo
- Je cherche une chanson dont je ne connais pas le titre - Guide
- Appliquez à tous les paragraphes du document à télécharger, à l’exception des titres et des sous-titres, la mise en forme suivante : chaque paragraphe doit être espacé de 0,42 cm ou 12 pt du paragraphe qui suit les textes ne doivent pas être en retrait à droite et à gauche après ces modifications, sur quelle page se trouve le titre « la cheminée » dans le chapitre « informations diverses » ? - Guide
- Word numérotation titre 2 ne suit pas titre 1 ✓ - Forum Word
- Titre de l'adresse - Forum Réseaux sociaux
3 réponses
Salut,
Je n'ai pas compris ta demande :
- L'ensemble de l'élément fait bien 200px par 200px non ?
- Peux tu stp préciser "cadrer correctement" ? Tu veux qu'il soit verticalement centré dans le cadre de 200x200px ?
Bonne journée,
Je n'ai pas compris ta demande :
- L'ensemble de l'élément fait bien 200px par 200px non ?
- Peux tu stp préciser "cadrer correctement" ? Tu veux qu'il soit verticalement centré dans le cadre de 200x200px ?
Bonne journée,
MERCI de votre réponse. Alors j'ai tenté de vous montrer le problème via edit fiddle : https://jsfiddle.net/ahtmcx3o/
en espérant avoir réussi.
En fait le fait d'intégrer un texte augmente la taille du cadre donc je n'ai pas un 200 x 200px.
J'aimerai que le texte prenne plus de place dans le carré mais je ne sais pas où régler cet élément.
Merci de m'aider
zoro
en espérant avoir réussi.
En fait le fait d'intégrer un texte augmente la taille du cadre donc je n'ai pas un 200 x 200px.
J'aimerai que le texte prenne plus de place dans le carré mais je ne sais pas où régler cet élément.
Merci de m'aider
zoro
Salut,
Attention 200px par 200px s'affichera différemment selon la résolution de chaque utilisateur, sans oublier les appareils mobiles qui ont des résolutions faibles(et sojnt la majorité des utilisateurs du web).
Sinon pour garder une taille fixée il suffit en plus de donner des dimensions de lui attribuer un comportement(display) 'block'.
Pour le reste une simple recherche POSITIONNEMENT en CSS vous fournira plus de résultats qu'il ne vous en faut ;)
Par contre évitez les dimensions qui ne sont pas relatives(px ne l'est pas ni pt , par contre % et em le sont).
Ps pour le fiddle je suis pas allé voir, il y a trop de lignes de codes qui n'ont rien à voir, copiez simplement le CSS dont il s'agit ici si vous voulez montrer quelque chose(en mettant les balises de codes appropriées si possible).
Attention 200px par 200px s'affichera différemment selon la résolution de chaque utilisateur, sans oublier les appareils mobiles qui ont des résolutions faibles(et sojnt la majorité des utilisateurs du web).
Sinon pour garder une taille fixée il suffit en plus de donner des dimensions de lui attribuer un comportement(display) 'block'.
Pour le reste une simple recherche POSITIONNEMENT en CSS vous fournira plus de résultats qu'il ne vous en faut ;)
Par contre évitez les dimensions qui ne sont pas relatives(px ne l'est pas ni pt , par contre % et em le sont).
Ps pour le fiddle je suis pas allé voir, il y a trop de lignes de codes qui n'ont rien à voir, copiez simplement le CSS dont il s'agit ici si vous voulez montrer quelque chose(en mettant les balises de codes appropriées si possible).
Bonjour,
Alors j'ai effectué quelques modifications de code. Pour info je mets l'intégralité du code car étant novice, je ne sais pas encore tout à fait à quoi correspond certains éléments...
Du coup, j'ai réussi à redimensionner l'image mais je ne parviens pas à insérer la totalité du texte à l'intérieur. https://jsfiddle.net/ahtmcx3o/1/
J'ai lu quelques articles pour mettre les dimensions en % mais je n'ai pas encore bien compris comment cela fonctionnait donc de ce coté là, il faut que je travaille encore!
merci de votre aide
zoro
Alors j'ai effectué quelques modifications de code. Pour info je mets l'intégralité du code car étant novice, je ne sais pas encore tout à fait à quoi correspond certains éléments...
Du coup, j'ai réussi à redimensionner l'image mais je ne parviens pas à insérer la totalité du texte à l'intérieur. https://jsfiddle.net/ahtmcx3o/1/
J'ai lu quelques articles pour mettre les dimensions en % mais je n'ai pas encore bien compris comment cela fonctionnait donc de ce coté là, il faut que je travaille encore!
merci de votre aide
zoro