28172 sujets

CSS et mise en forme, CSS3

Div.toto * n'affecte pas le texte dans la div ?

hello,

Comment faire disparaitre les textes pour ne conserver que les input de ma div?

<style>
#toto *
{
display:none;
}

#toto input
{
display:inline-block;
}

</style>


<div id="toto">
debut<input />
fin<input />
</div>


Merci
jb_gfx a écrit :
&lt;label&gt;debut&lt;/label&gt;&lt;input /&gt;

#toto label { display: none }


Effectivement ce serait plus propre comme cela.
Mais si je ne peux modifier que la css ?

Comment agir sur le texte directement sous une div ? (= non décoré par un span ou un label ou...)
6l20 a écrit :

Demander au crétin qui a pondu le code de faire des choses qui ont un sens.

Il ne s'agit pas de décoration !
Utilisez l’élément label dans les formulaires


Si on doit courir après tous les crétins on a pas fini.
Par "décoré" je voulais dire identifiable parce qu'à l'intérieur d'une balise = pas directement à la racine du div, quoi.


jb_gfx a écrit :
text-indent: -10000px;


Y a pas mieux ?
Et puis qu'est-ce qui se passera quand les écrans feront 10000px de large ?
vince29 a écrit :

Y a pas mieux ?
Et puis qu'est-ce qui se passera quand les écrans feront 10000px de large ?


Technique utilisée par des centaines de millier de sites depuis des années pour masquer du texte, y'a peut être mieux mais ça fonctionne bien.

Aucun rapport avec la taille de l'écran. Si tu mets -500px ça fonctionne aussi. Essai de comprendre ce que ça fait et à quoi correspond la valeur.
jb_gfx a écrit :


Technique utilisée par des centaines de millier de sites depuis des années pour masquer du texte, y'a peut être mieux mais ça fonctionne bien.

Aucun rapport avec la taille de l'écran. Si tu mets -500px ça fonctionne aussi. Essai de comprendre ce que ça fait et à quoi correspond la valeur.


Ca fonctionne tant que ton texte fait moins de 500px de large.
Soit environ 50 caractères pour un écran "normal" (1280), 14 pour un 4k, 7 pour un 8k.
(en supposant que tu privilégies la définition (= on affiche autant de caractères par unité de surface mais dessinés plus précisément) sur la résolution (=on utilise autant de pixels pour dessiner un caractère, mais comme les pixels sont plus petits on peut dessiner plus de caractères))

Donc -10000px = 1000 caractères masqués ou 330 ou 160.
Donc tu es marron dès à présent si tu as plus de 1000 caractères à masquer et pareil dans 4 ans si tu avais plus de 160 caractères.

A nombre de caractères égal je pense qu'il vaut mieux faire:
-99999em plutôt que -10000px

<html>
<body>
<div style="width:400px;text-indent:-400px;background-color:red">
Du texte masqué parce qu'il est suffisament court
</div>
<div style="width:400px;text-indent:-400px;background-color:blue"">
Du texte INCORRECTEMENT masqué parce que le text-indent est &lt; à la largeur du text
</div>
<div style="width:400px;text-indent:-200em;background-color:green">
Tant que ce texte ne dépasse pas 200 caractères il devrait être correctement masqué
</div>
</body>
</html>
pfff j'ai l'impression d'entendre mon plombier me parler d'informatique...

Si un caractère fait 12 pixels de haut, il fait 12 pixels sur un écran 1024, 1680 ou 4k, la définition ne change rien.

Google -> définition écran, résolution écran, parce que là tu confonds les 2.
jb_gfx a écrit :
Google -&gt; définition écran, résolution écran, parce que là tu confonds les 2.


Ouais enfin avec Apple qui utilise définition et résolution de manière interchangeable ça aide pas.

jb_gfx a écrit :
pfff j'ai l'impression d'entendre mon plombier me parler d'informatique...

Si un caractère fait 12 pixels de haut, il fait 12 pixels sur un écran 1024, 1680 ou 4k, la définition ne change rien.


Si tu as 2 moniteurs de 27 pouces un en 1920*1080 et un autre en 3840*2160 et que tu affiches la même page web, est-ce que tu veux que la page web soit 4 fois plus petite sur le second moniteur ?
Plus probablement, tu voudras voir autant de caractères mais mieux définis (avec 4 pixels là ou tu n'en avais qu'un auparavant) donc tu vas appliquer un facteur de 2 à la taille de la police en pixels.
Donc ton caractère ne fera plus 12 pixels de haut mais 24.

Disons qu'il faisait aussi 10 pixels de large. Désormais il en fait 20.
Si ton text-indent est de 1000 tu masques 100 caractères d'une largeur de 10 mais seulement 50 d'une largeur de 20.
(A moins que la directive text-indent utilise le device-pixel-ratio quand l'unité est en px ?)
Sujet clos
Aller à