28173 sujets

CSS et mise en forme, CSS3

Masquer une image en fonction de la taille de l'ecran

Bonjour,
voilà ma page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />
	<title>www.paul-hoffmann.com</title>
	<script type="text/javascript" src="admin/_javascript/swfobject.js"></script>
	<link rel="stylesheet" type="text/css" href="general.css" />
</head>
<body>
<div id="swfdiv">
	<img src="fond_bois1.png" width="1656" height="962" />
</div>
</body>
</html>

Voila le css
body{
	height : 100%;
	width : 100%;
}
*{
	margin : 0;
	padding : 0;
}
#swfdiv{
	overflow : hidden;
}


Je cherche à masquer plus ou moins l'image en fonction de la taille de l'ecran.
Ce code permet de supprimer la scrollbar du bas mais pas celle de gauche.
En fait je voudrais supprimer les 2 barres de scroll et ainsi masquer le reste de l'image.
Merci de ta réponse mais ce n'est pas utilisable dans mon cas.
Maintenant si je positionne la hauteur du body à 100%, la hauteur de mon div à 100% et la propriété overflow de mon div à hidden pourquoi la barre de scroll droite apparait-elle? Normalement tous ce qui dépasse de la hauteur de la page ne devrait pas apparaître, non ?
Modifié par tom_42 (09 Oct 2007 - 16:02)
tom_42 a écrit :
Ce code permet de supprimer la scrollbar du bas mais pas celle de gauche.


Tu veux dire: celle de droite?
Désolé. Oui bien sûr je parle de la scrollbar verticale à droite.
Finalement comment fait-on pour la désactiver complétement sans redimensionner le contenu de la page?
Bha a priori en ajoutant un width et un height à #swfdiv, ça devrait fonctionner Smiley cligne

... à tester sur tes navigateurs Smiley ravi
Merci pour ta patience. J'ai ajouté 
#swfdiv{
	height : 100%;
	width : 100%;
	overflow : hidden;
}

et ça ne change rien, il y a toujours la barre de scroll verticale qui permet de voir toute la hauteur de l'image. A noter, par contre, que l'image dépasse en largeur mon ecran et que la barre de scroll horizontale n'apparait pas.
pourquoi ne pas faire simplement une image de fond plus petite à laquelle tu colles un repeat ?

ou alors, si c'est une image qui ne peut pas se répèter, pourquoi ne pas "compléter" le background avec une couleur de fond ?
A terme je ne veux pas metttre une image mais un objet flash. Je souhaite qu'en fonction de la taille et de la résolution de l'ecran on voit plus ou moins mon décor (tous mes élément seront centrés sur ce dernier) et le decor n'est pas une couleur unie, je ne peut donc pas compléter ce qui dépasse par un background-color.
Le but est de mettre un décor assez grand pour couvrir à peu près toutes les tailles d'écran.
speedlab a écrit :
Bha a priori en ajoutant un width et un height à #swfdiv, ça devrait fonctionner Smiley cligne

J'aurais dû te dire "en ajoutant un width et un height en pixel à #swfdiv, ça devrait fonctionner".
Mais ça risque de ne pas t'intéresser, puisque tu souhaites un ajustement selon la résolution de l'écran... Smiley rolleyes
Sujet clos
Aller à