18043 sujets

Questions générales et questions de débutants

Centrage texte sur son data-text ...

Bonsoir,

En maquettant tout d'un coup je me demande comment je vais faire un truc, à savoir centrer certains de mes titres dupliqués :

parsimonhi m'a gentiment confirmé que passer par les data-attribut était une bonne idée pour ce type d'enjolivement :
<h1 data-text="Une maison blablabla">Une maison blablabla</h1>

mais je me demande comment je vais centrer tout ça puisque cela sera en fonction de la taille du data-text en fait...

http://img15.hostingpics.net/pics/541812titi.png

Z'auriez pas une idée msieur dames ...? Smiley eek
lol
En fait, je suis tellement fatigué que j'ai apporté une réponse idiote à une question idiote.
Il me faut juste un margin ou padding pour décaler mon texte dupliqué en absolu au lieu du left ce qui ne pose pas de problème si j'utilise un text-align center sur le titre.
Cf post d'origine :
http://forum.alsacreations.com/topic-1-77798-1-Rnpntitiondetexteviajsoudataattributes.html

Smiley smile
Mais comme j'suis encore mort, j'ai ptêtre écrit une grosse bêtise à l'instant.
A chaque jour sa peine ^^
Smiley biggrin Je suis sûr que je te décevrais si je te disais que ça ne m'a pas plus avancé Smiley lol Bon du coup je dis rien hein... Smiley langue
Modérateur
Bonjour,

Un peu au hasard :

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=yes">
<style>
header
{
	text-align:center;
}
h1
{
	display:inline-block;
	position:relative;
	font-style:italic;
}
h1:before
{
	content:attr(data-text);
	color:#ccc;
	position:absolute;
	font-size:1.75em;
	left:-37.5%;
	top:-37.5%;
	z-index:-1;
	white-space:nowrap;
}
</style>
</head>
<body>
<header>
<h1 data-text="Centrage d'une répétition">Centrage d'une répétition</h1>
</header>
<p>Soit x la valeur du font size du :before en em.</p>
<p>La valeur y en % du left et du top du :before est alors donnée par la formule
y=-100*(x-1)/2</p>
</body>
</html>
Amicalement,
Modifié par parsimonhi (13 Jan 2016 - 03:16)
Merci mais non en fait, car cela centre les 2 textes or ce que je voulais je l'obtiens avec au final ma première réponse instinctive d'hier soir ("le data-text en noir..;") je voulais dire inverser les 2 éléments pour que le centrage se fasse sur le plus grand des 2.
A votre décharge, quand on a le nez dans le guidon, on explique très mal ce que l'on souhaite Smiley smile

Et ça donne ceci :
https://jsfiddle.net/ta7cyfzb/

Smiley smile
Je ne vois pas vraiment l'effet que tu recherches mais j'ai l'impression que le code est incohérent non ? Si tu mets un white-space nowarp sur l'un, pourquoi ne pas le mettre sur l'autre ?
Et que donnerait cet effet avec un simple text-shadow ?
Pour le white-space nowarp, c'est juste que j'ai recopié à l'arrache le code de parsimonhi (vu que jsuis à l'arrache sur mes projets actuels ^^) donc j'ai fait du pas propre j'en conviens.
Et pour le text-shadow, lol, c'est un peu la même chose : je vais avoir 2 enjolivements différents, pour les h1 seule la première lettre sera répétée, agrandie, opacifiée, décalée, colorée et pour les h2 c'est tout le titre qui sera répété comme sur l'image que j'ai mise dans ce post. Et donc encore une fois à l'arrache, je suis parti sur le même code pour les 2. Et la dernière question au final c'était de conserver ce décalage entre le titre et sa répétition mais en pouvant centrer ou aligner à droite ou à gauche l'ensemble sans que le décalage ne change. Mais il va falloir en effet que je teste un simple text-shadow.
C'est un peu le problème quand on est débordé, on réfléchit moins bien... Smiley murf

P.S. Il faut que le titre dupliqué soit agrandi, un text-shadow, ça n'agrandit pas ou jsuis encore dans l'potage ?
Modifié par Manhattan (14 Jan 2016 - 08:30)
Bonjour,

Manhattan a écrit :
P.S. Il faut que le titre dupliqué soit agrandi, un text-shadow, ça n'agrandit pas ou jsuis encore dans l'potage ?

Non, effectivement, je ne crois pas que tu puisses le faire avec un text-shadow.

Sinon, j'ai réussi à faire un truc (ne me demander pas pourquoi ces valeurs, c'est totalement empirique)
http://codepen.io/anon/pen/zrdJMN
En modifiant le margin-left à -49% j'obtiens en effet exactement ce que je veux Smiley smile
Et bien si avec tout ce que vous m'avez tous donné je n'y arrive pas ^^
Merci à tous, jvais bientôt attaquer le code, j'espère que ça va être chouette Smiley smile
Modérateur
Bonjour,

SolidSnake a écrit :
... ne me demander pas pourquoi ces valeurs, c'est totalement empirique...

Manhattan a écrit :
En modifiant le margin-left à -49% j'obtiens en effet exactement ce que je veux Smiley smile


Je vous avais pourtant donné la formule pour faire le calcul dans le code de ma réponse précédente :

Soit x la valeur du font size du :before en em.
La valeur y en % du left (ou du margin-left si vous le préférez au left) et du top du :before est alors donnée par la formule
y=-100*(x-1)/2.

EDIT : dans l'exemple de SolidSnake, x=0.8, y=10%. On peut donc mettre left:0; et margin-left:10%; ou bien left:10%; et margin-left:0;

Amicalement,
Modifié par parsimonhi (14 Jan 2016 - 11:22)
Oh mais promis, dès que je me lance dans le code, j'étudierai attentivement tous les codes publiés dans l'article, c'est juste que là, je suis davantage dans la chaîne de conception graphique Smiley cligne
Modifié par Manhattan (14 Jan 2016 - 12:07)
Sujet clos
Aller à