Bonjour à tous.

Je voudrais que l'image ne s'affiche pas si la largeur du média est inférieur à 630 px dans le cas suivant.

<table class="advice">
	<td>
		<h3>
			Mon titre
		</h3>
		<p>
			Mon joli texte.
		</p>
	</td>
	<td>
		<img alt="mon image" title="ma belle image" src="img/image-220x220px.png">
	</td>
</table>

Comment faire avec le CSS ? Merci pour vos explications.

Bonjour,

première chose : pas de tableau pour de la mise en page

Ensuite : tu peux donner une classe à ton image, et dans le CSS, à l'intérieur d'une media query adapté, lui appliquer "display: none". La plupart des navigateurs ne chargeront même pas l'image (tant qu'on est en-deça de 630px de largeur).

Bonjour Lamercalate. Merci pour tes remarques.

La question est ici : quelle règle CSS utiliser dans ce contexte particulier où on a une image qui est dans un td qui est dans un tr qui est dans un table qui est dans un div avec classe .advice.

Sachant que cette règle ne doit agir que si le média a une largeur inférieur à 630 px.

-
Edité par Pyanepsion 12 novembre 2017 à 11:15:54

Tu n'as pas accès au HTML ?

Et sinon, créer un sélecteur qui dise "une image qui est dans un td qui est dans un tr qui est dans un table qui est dans un div avec classe .advice", ça se fait facilement. Si tu as quelques notions de CSS tu peux le faire sans souci.

Et pareil pour les media queries.

Je t'ai donné les pistes, à toi de tester

Bonjour, Lamercarlate.

En fait, je n’y arrivais pas, car l’environnement parent empêchait la chose. Je ne voulais pas non plus créer une nouvelle loi (une classe ou un identifiant), mais seulement modifier une règle existante pour ne pas alourdir la page HTML.

Tu dis par contre : pas de tableau pour de la mise en page

Attention. Un tableau doit au contraire être impérativement utilisé quand on veut représenter un panneau organisé en matrice. L’erreur consiste en fait à les utiliser en dehors de ce contexte. C’est par exemple, l’erreur réalisée par Roundcube.

La difficulté des tableaux, c’est que ce sont des conteneurs spécialisés qui contiennent des cellules organisées en lignes et en colonnes. Ces cellules ont un emplacement précis défini par leur ligne Ln et leur colonne Cn. Dit autrement, on ne peut pas les faire « glisser » sur une autre ligne ou sur une autre colonne. La conséquence est que ces cellules ne sont pas adaptées à des contenus de dimensions figées.

C’est ce que l’on faisait ici. On mettait une image ayant une largeur et une hauteur. La solution est donc ici de ne pas afficher la td, ce qui ne fonctionnait pas, car une autre règle déjà existante prenait le dessus.

Ce td doit normalement s'afficher partout ailleurs. On est dans un cas très particulier ou le tableau contient une colonne de td avec une image.

@media screen and (max-width:630px){
td:nth-child(2) img
{
display:none;
}
}