5545 sujets

Sémantique web et HTML

HTML pour Faire disparaitre une image sur smartphone et tablette

Bonjour,
je ne connaît pas grand chose au HTML ni au CSS..au moin c'est clair. Mais j'ai vraiment besoin d'aide.

j'ai afficher une image sur ma page web et je souhaiterais la faire disparaitre sur tablette et smartphone:
Voici mon script de départ:
<HTML>
<BODY>
<div style="position: absolute; top: 670px; right: 5px;width: 140px; height: 140px">
<img src="/img/monimage.jpg" border="0" alt=""/>
</div>
</BODY>
</HTML>


pour avez-vous m'aider , l'idéal serait de compléter mon script pour faire disparaitre cette image sur Smartphone te tablette 'j'ai essayé d'utiliser hidden-xs mais ça ne marche pas, enfin c'est moi qui ne comprend pas comment l'utiliser.

merci de votre aide précieuse.
Salut,

Alors je ne sais pas si ma solution est la meilleure, mais ça doit fonctionner.

Premièrement, tu dois rajouter un id à ton img comme ceci :

<img id="hiddenImg" src="/img/monimage.jpg" border="0" alt=""/>


Ensuite, dans ton CSS tu dois mettre ce code :

@media screen and (max-width: 1024px) {
  #hiddenImg {
    display: none;
  }
}


Le mieux serait que tu crées une page main.css par exemple, soit à la racine de ton site, soit dans un dossier css dédié.
Et ensuite dans ton html tu appelles ta page css de cette manière :

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<div style="position: absolute; top: 670px; right: 5px;width: 140px; height: 140px">
<img id="hiddenImg" src="/img/monimage.jpg" border="0" alt=""/>
</div>
</body>
</html>

Modifié par taspeur (30 Jun 2017 - 20:56)
De plus, je te conseille d’utiliser une feuille CSS externe plutôt que l’attribut style. Ça permet de garder tout ton code au même endroit et d’éviter les problèmes d’héritage.
Sujet clos
Aller à