j'ai une image dans un header / h1 :
<header>
<h1><img ... /><span>...</span></h1>
</header>
l'image fait 48px de haur ainsi que header et h1 :
header
grid-column: 1
grid-row: 1
color: $head_color
background-color: $head_foot_color
height: 48px
display: grid
grid-template-columns: 50% 50%
grid-template-rows: 100%
h1
grid-column: 1
grid-row: 1
height: 48px
line-height: 48px
img
margin: 0 16px 0 8px
vertical-align: middle
span
font-size: 32px
height: 48px
line-height: 48px
le span qui suit l'image est bien centré verticalement, mais l'image
déborde de quelques pixels **sous** le header / h1, comment remédier à
ça (c'est moche) ?
de mes essais, l'image se positionne centrée / aux minuscules (et ça fait moche avec les majuscules) css : img { vertical-align:middle; height: 60px; border:1px red solid; } div { border:1px solid; font-size: 60px; } html : <div>mon petit<img class="haut" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" />gentil texte</div> cf : https://mdn.mozillademos.org/fr/docs/Web/CSS/vertical-align$samples/Exemple?revision52984
je pense que ce qui change, dans mon cas, c'est que j'ai : <h1><img ... /><span ...>Le texte</span></h1> le texte est dans un span, généré automatiquement...
Le 14/12/2016 à 18:22, SAM a écrit :
de mes essais, l'image se positionne centrée / aux minuscules
(et ça fait moche avec les majuscules)
css :
img { vertical-align:middle; height: 60px; border:1px red solid; }
div { border:1px solid; font-size: 60px; }
de mes essais, l'image se positionne centrée / aux minuscules (et ça fait moche avec les majuscules) css : img { vertical-align:middle; height: 60px; border:1px red solid; } div { border:1px solid; font-size: 60px; } html : <div>mon petit<img class="haut" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" />gentil texte</div> cf : https://mdn.mozillademos.org/fr/docs/Web/CSS/vertical-align$samples/Exemple?revision52984
je pense que ce qui change, dans mon cas, c'est que j'ai : <h1><img ... /><span ...>Le texte</span></h1> le texte est dans un span, généré automatiquement...
Une Bévue
Le 14/12/2016 à 18:24, SAM a écrit :
essaie de sortir le texte du span (se passer de cette balise) voir à voir ?
je ne peux pas, c'est pas moi qui met le span, c'est ReactJS... que mon code soit : <h1><img className={iconClass} src="icons/maison.svg" />Villes de France</h1> ou : <h1><img className={iconClass} src="icons/maison.svg" /><span>Villes de France</span></h1> dans le browser, ce qui apparaît, c'est : <h1 data-reactid=".0.0.0"><img class="s_48 icon_green" src="icons/maison.svg" data-reactid=".0.0.0.0"><span data-reactid=".0.0.0.1">Villes de France</span></h1> donc, je préfère le mettre dans mon code, du coup je dois y penser question css.
Le 14/12/2016 à 18:24, SAM a écrit :
essaie de sortir le texte du span (se passer de cette balise)
voir à voir ?
je ne peux pas, c'est pas moi qui met le span, c'est ReactJS...
que mon code soit :
<h1><img className={iconClass} src="icons/maison.svg" />Villes de
France</h1>
ou :
<h1><img className={iconClass} src="icons/maison.svg" /><span>Villes de
France</span></h1>
dans le browser, ce qui apparaît, c'est :
<h1 data-reactid=".0.0.0"><img class="s_48 icon_green"
src="icons/maison.svg" data-reactid=".0.0.0.0"><span
data-reactid=".0.0.0.1">Villes de France</span></h1>
donc, je préfère le mettre dans mon code, du coup je dois y penser
question css.
essaie de sortir le texte du span (se passer de cette balise) voir à voir ?
je ne peux pas, c'est pas moi qui met le span, c'est ReactJS... que mon code soit : <h1><img className={iconClass} src="icons/maison.svg" />Villes de France</h1> ou : <h1><img className={iconClass} src="icons/maison.svg" /><span>Villes de France</span></h1> dans le browser, ce qui apparaît, c'est : <h1 data-reactid=".0.0.0"><img class="s_48 icon_green" src="icons/maison.svg" data-reactid=".0.0.0.0"><span data-reactid=".0.0.0.1">Villes de France</span></h1> donc, je préfère le mettre dans mon code, du coup je dois y penser question css.
SAM
Le 14/12/16 à 18:35, Une Bévue a écrit :
Le 14/12/2016 à 18:24, SAM a écrit :
essaie de sortir le texte du span (se passer de cette balise) voir à voir ?
je ne peux pas, c'est pas moi qui met le span, c'est ReactJS...
connais pas non plus :-( tu n'as donc toujours que des excentricités ? ;-)
donc, je préfère le mettre dans mon code, du coup je dois y penser question css.
Oui, OK Cordialement, -- Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Le 14/12/16 à 18:35, Une Bévue a écrit :
Le 14/12/2016 à 18:24, SAM a écrit :
essaie de sortir le texte du span (se passer de cette balise)
voir à voir ?
je ne peux pas, c'est pas moi qui met le span, c'est ReactJS...
connais pas non plus :-(
tu n'as donc toujours que des excentricités ? ;-)
donc, je préfère le mettre dans mon code, du coup je dois y penser
question css.
Oui, OK
Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
essaie de sortir le texte du span (se passer de cette balise) voir à voir ?
je ne peux pas, c'est pas moi qui met le span, c'est ReactJS...
connais pas non plus :-( tu n'as donc toujours que des excentricités ? ;-)
donc, je préfère le mettre dans mon code, du coup je dois y penser question css.
Oui, OK Cordialement, -- Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
SAM
Le 14/12/16 à 22:37, SAM a écrit :
Le 14/12/16 à 18:35, Une Bévue a écrit :
je ne peux pas, c'est pas moi qui met le span, c'est ReactJS...
tu n'as donc toujours que des excentricités ? ;-)
J'ai tenté d'aller voir ce que c'était ... à ce que j'ai compris c'est un agitateur de code html déjà envoyé et affiché. Je comprends mieux pourquoi de + en + de sites sont impraticables, l'affichage n'y est jamais fini, ça saute tout le temps, pas moyen d'arriver à y lire une phrase entière ! faut y désactiver le JS histoire d'avoir un peu la paix (et le remettre si on veut continuer la visite) En fait ... on se contente de fuir ! Cordialement, -- Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Le 14/12/16 à 22:37, SAM a écrit :
Le 14/12/16 à 18:35, Une Bévue a écrit :
je ne peux pas, c'est pas moi qui met le span, c'est ReactJS...
tu n'as donc toujours que des excentricités ? ;-)
J'ai tenté d'aller voir ce que c'était ... à ce que j'ai compris c'est
un agitateur de code html déjà envoyé et affiché.
Je comprends mieux pourquoi de + en + de sites sont impraticables,
l'affichage n'y est jamais fini, ça saute tout le temps, pas moyen
d'arriver à y lire une phrase entière !
faut y désactiver le JS histoire d'avoir un peu la paix (et le remettre
si on veut continuer la visite)
En fait ... on se contente de fuir !
Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
je ne peux pas, c'est pas moi qui met le span, c'est ReactJS...
tu n'as donc toujours que des excentricités ? ;-)
J'ai tenté d'aller voir ce que c'était ... à ce que j'ai compris c'est un agitateur de code html déjà envoyé et affiché. Je comprends mieux pourquoi de + en + de sites sont impraticables, l'affichage n'y est jamais fini, ça saute tout le temps, pas moyen d'arriver à y lire une phrase entière ! faut y désactiver le JS histoire d'avoir un peu la paix (et le remettre si on veut continuer la visite) En fait ... on se contente de fuir ! Cordialement, -- Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
SAM
Le 14/12/16 à 23:08, SAM a écrit :
Le 14/12/16 à 22:37, SAM a écrit :
Le 14/12/16 à 18:35, Une Bévue a écrit :
ReactJS...
J'ai tenté d'aller voir ce que c'était ...
<http://putaindecode.io/fr/articles/js/react/#comment-2373012288> Cordialement, -- Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
ouais, j'ai lu, en diagonale, article pas mal. je suis passé à ReactJS depuis 2/3 ans, maintenant, j'utilise Brunch pour transpiler. je suis, de loin, Svelte, qui me semble être une autre approche intéressante où le code css fait partie des widgets. avec ReactJS, le css est à part, sauf si on utilise du "functional CSS".
ouais, j'ai lu, en diagonale, article pas mal. je suis passé à ReactJS depuis 2/3 ans, maintenant, j'utilise Brunch pour transpiler. je suis, de loin, Svelte, qui me semble être une autre approche intéressante où le code css fait partie des widgets. avec ReactJS, le css est à part, sauf si on utilise du "functional CSS".
