28220 sujets

CSS et mise en forme, CSS3

Salut à tous,

Je reviens vers vous suite à au problème que je vous avez exposé ici.

Mais cette fois c'est du coté CSS que j'ai besoin de votre aide.

En effet, je crois avoir trouvé la réponse à mon problème. j'ai l'impression quez IE adapte la largeur d'un bloc à son contenu donc c'est normal que l'image apparaissent avec sa taille normale. Je savais qu'il le faisait pour la hauteur d'un bloc mais je ne savais pas pour la largeur (en même temps ca parait logique).

Or dans mon problème, je voudrais que ce soit le contenu qui s'adapte au bloc. Existe t-il un moyen de fixer la taille du bloc pour IE ?

Voila le CSS de mon conteneur :

#tableau {
 margin-left: 10px;
 margin-right: 10px;
}


Voila de code HTML :

<div id="tableau">
  <img src="./images/mon_image.jpg" alt="Nom de l'image" title="Voir les infos de l'image" />
</div>


Je vous remercie d'avance pour votre aide
Modifié par ymhotepa (12 Sep 2005 - 17:10)
Salut,

Je crois que t'as oublié de mettre le lien. Est-ce que c'est de ce sujet dont tu parles. celui la?
Modifié par ymhotepa (01 Sep 2005 - 12:27)
ymhotepa > Tu n'as pas fixé de largeur à ta div tableau.
ajoute :
 width: xx; (xx étant la valeur choisie de largeur)

La largeur sera fixe et imposera le dimensionnement voulu à ton image.
Macpom a écrit :
ymhotepa > Tu n'as pas fixé de largeur à ta div tableau.


C'est que j'avais fait au début. J'avais fixer une taille de 580px et mis les marges gauche et droite à auto pour le centrer. Comme ca :

#tableau {
 margin-left: auto;
 margin-right: auto;
 width: 580px;
}


Mais ca ne fonctionnais pas. C'est pour ca que j'avais enlever le width.

Merci quand meme pour ton aide.
Modifié par ymhotepa (01 Sep 2005 - 13:59)
Tu veux que le contenu (image/texte) s'adapte aux dimensions de ton conteneur...

Pour l'exemple de ton image : pourquoi créer une image-texte qui fait office de titre (?) trop grande par rapport aux dimensions qu'elle doit avoir sur la page...

Mais par exemple :


<div style="width: 50px; height: 25px;">

<img src="image_de_800x600px.jpg" />
</div>


n'affiche pas une boîte de dimension 50*25px chez FF, Opera et IE mais aux dimensions de l'image donc ici 800*600px.

Soit tu retailles l'image manuellement ou avec des attributs HTML ou des paramètres CSS équivalents...

Sinon autre possibilité la propriété CSS2 "clip" pour rogner la partie visible de l'image.

Sinon autre possibilité un background avec l'équivalent textuel masqué mais peut poser problèmes à certains outils tel que les navigateurs vocaux (lecteurs d'écran)

Smiley smile
Phil a écrit :
Pour l'exemple de ton image : pourquoi créer une image-texte qui fait office de titre (?) trop grande par rapport aux dimensions qu'elle doit avoir sur la page...


Je ne comprend pas très bien ce que tu entends par "image-texte" parce que dans mon exemple, il y a juste une image dans le bloc "tableau".
L'image a des dimensions plus grande que sur la page car le design etant du site étant en fluide, l'image a des dimensions différentes suivant les résolution. De plus son conteneur a des dimensions (width) fluides (en pourcentage).

Phil a écrit :

n'affiche pas une boîte de dimension 50*25px chez FF, Opera et IE mais aux dimensions de l'image donc ici 800*600px.


Justement je voudrais dans ton exemple que l'image est les dimensions de la boite (cad 50*25px)

J'éspère que mes explications ne sont pas trop confuses Smiley cligne
Il semble qu'imposer une largeur pour un bloc dans IE soit impossible. J'ai donc résolu le problème en le prenant à l'envers.

Au lieu de partire de la taille du bloc pour calulcer la taille des images qui sera présent à l'interieur de ce bloc, je calcul les dimensions de l'images grâce à une fonction php.
Modifié par ymhotepa (12 Sep 2005 - 17:19)