Monter le titre

Fermé
zoro - 6 sept. 2017 à 13:19
 zoro - 7 sept. 2017 à 13:23
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:
<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!!

3 réponses

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 543
6 sept. 2017 à 16:43
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,
0
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
0
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).
0
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
0