28172 sujets

CSS et mise en forme, CSS3

[Résolu] Problème de mise en page dans IE

Bonjour,
J'ai un petit soucis de mise en page sous ie, il me décale tout mon block corps de page.... pour voir ce que ca donne c'est ici: http://mayafleuretart.free.fr/acceuil.html
Alors comment faire, dans mozzila no problem... je vois pas d'ou ca peut venir Smiley confus
merci d'avance pour votre aide
Modifié par mars (17 Jun 2006 - 14:41)
Ton conteneur n'est pas assez large pour avoir ton menu et ton contenu cote à cote. Il faudrait que tu réduise la largeur de ton id #accueil_corps.

De plus, je vois que tu n'as pas utilisé de liste pour ton menu.
Il serait plus judicieux de structurer ton menu différemment.


<h3>Galleries</h3>
<ul>
<li><a href="mariage.html">Mariage</a></li>
<li><a href="bapteme.html">Baptême</a></li>
<li><a href="deuil.html">Deuil</a></li>
<li><a href="fetes.html">Fêtes</a></li>
</ul>
<h3>Autres</h3>
<ul>
<li><a href="contact.html">Contact</a></li>
<li><a href="plan.html">Accès</a></li>
etc...
</ul>

Modifié par Mikachu (08 Jun 2006 - 00:27)
Salut,


Augmente la largeur de #page. Je ne sais pas de combien exactement,
essaie 830px. Par contre, ton code est vraiment étrange !! Smiley biggrin

ton body est spécifié a 800px ta page a 820px pourtant elle est contenu dedans... Smiley biggol . Il y a pas que cela mais bon...


Bye
Modifié par Seb1952 (08 Jun 2006 - 00:36)
Pour que le site soit adapté pour la résolution 800x600 il ne faudrait pas dépasser les 775px-780px de large. (20% d'internautes surfent encore en 800x600...)
salut à tous bon juste revenu de vacances... merci pour toutes vos infos...ca y est je suis passé en 780 width, Smiley langue
mais j'ai tout testé vos astuces hum... tj un bug sous ie Smiley bawling
alors bon helpppp !!! Plz Smiley smile
bon j'ai upé la page d'acceuil modifié avec vos conseils....
merci encore à tous et merci d'avance pour la suite
et oui petite question... la taille des images est ok?? je sais po trop quelle taille utiliser alors bon... si quelqun savait me conseiller Smiley cligne
Modifié par mars (17 Jun 2006 - 10:56)
Salut mars,

C'est la conséquence d'un bug classique d'IE, le « Three pixel jog ». Tu peux voir deux exemples simples de ce bug http://www.test.blog-and-blues.org/haslayout/tests/float6.html

Comme ton élément est doté de layout (c'est à dire qu'il a une ou plusieurs propriétés conférant le layout, tel width ou height), cela correspond au deuxième cas, « Three pixel jog avec layout », et donc cet élément se trouve décalé de 3 pixels dans tout sa hauteur.

Le problème dans ton cas c'est qu'il n'y a plus les 3px d'espace horizontal qu'il faudrait à IE. Donc il y aurait plusieurs solutions : enlever 3 pixels de la largeur de cet élément ou ajouter 3px au conteneur #page, ou diminuer (voir supprimer) la marge de l'élément pour IE...

Mais la solution la plus simple est de supprimer la largeur de l'élément (enlever les 537px donc), puisque celui-ci étant de type block, il va s'étendre par défaut sur toute la largeur disponible.
Modifié par Alan (17 Jun 2006 - 12:48)
thx alan,... là je comprend bien mieux tout a coup !!
donc suivant ton conseil j'ai enlevé la propriété width 537px...et bien c'est génial ca marche les bas de page viens se positioner juste sous le corps... Smiley lol Smiley biggrin
Mais bon encore un pitit soucis, le "three pixel jog" me double mon espace entre les blocs, ...c'est pas joli joli, tu aurais une soluce pour ca??
J'ai lu quelque part que l'on pouvais créer des propriétés qui ne sont apliquées qu'avec certains navigateurs mais je sais plus ou et coment.... Smiley ohwell
m'enfin en tt cas j'ai apris quelque chose d'éssentiel avec cette histoire de haslayout ^^ THX Smiley biggrin
Pour corriger ce bug des 3px, on peut utiliser la {position:relative} qui va permettre de décaler le bloc vers la gauche de 3px. Ensuite il suffit d'ajouter trois pixels à droite en utilisant une marge négative.
Donc : 
	position: relative;
	left: -3px;
	margin-right: -3px;

Pour que ce code ne soit lu que par IE 5 et 6 (IE 7 n'étant pas touché), on peut utiliser un commentaire conditionnel (à placer dans la partie <head> de la page, après l'appel de la feuille de style normale), ou utiliser un hack.
Concrètement pour le commentaire conditionnel : 

<!--[if lte IE 6]>
<link href="ie5-6.css" rel="stylesheet" type="text/css" media="screen" />
<![endif ]-->

Et dans ce fichier « ie5-6.css » (ou le nom que tu veux..) tu ajoutes le code qu'il faut 
#acceuil_corps, #pied_de_page { 
	position: relative;
	left: -3px;
	margin-right: -3px;
}

Modifié par Alan (05 Jul 2006 - 11:12)
Alan tu me comble,... exactement les réponses que j'attendait et en plus avec une rapidité waow suis vraiment sans voix THX
hum j'ai un peu adapté.. Smiley langue si tu trouve que c'est po ok ben dis moi Smiley cligne a++++
mars a écrit :
hum j'ai un peu adapté.. Smiley langue si tu trouve que c'est po ok ben dis moi Smiley cligne a++++


Non non tu as raison. Je n'avais pas fait attention que tu voulais un écart de 3 px (le flottant faisant en tout 220px et la marge gauche des éléments 223px)
Donc dans ce cas pas besoin de décaler avec la position relative puisque c'est l'écart que crée le bug, il suffit juste de réduire la marge.
D'ailleurs tu peux essayer de mettre un margin-left:0 à la place de 220px, ça aura le même effet : les 3px du bug. C'est pour réduire ces trois pixels qu'il faut la position relative comme indiqué. Mais s'ils tombent bien, tant mieux Smiley smile
Modifié par Alan (17 Jun 2006 - 15:09)
Je tenais juste à me joindre aux remerciements de mars !!! Smiley biggrin

Ces explications viennent de résoudre un problème qui me tracassait depuis des lustres... Il etait temps que je m'inscrive sur alsa, plutot que de venir en visiteur... Smiley langue
Sujet clos
Aller à