28173 sujets

CSS et mise en forme, CSS3

Bonjour!

J'imagine que cette question revient souvent mais je ne sais jamais quel mot recherché dans recherche.

J'ai 1 question bien simple par rappot à la page que vous pouvez voir à cette adresse:

http://www.faucontrouve.com/pages/index.html

"Comment se fait-il qu'elle n'est pas pareil en firefox?" J'aimerais vraiment que la page ait
les mêmes possibilités en Firefox. C'est à dire que le texte fasse étirer la section
centrale (ce qui fonctionne parfaitement en IE). J'aimerais aussi que le pied de page
(la section blanche) suive en dessous de tout ca(ce qui marche en IE aussi).

Merci et n'hésitez pas à me poser des questions si vous ne comprenez pas quelque chose
dans ma page!

Jaff
Internet Explorer 6.0 n'est pas vraiment le navigateur le plus respectueux des standards. Il possède par ailleurs un certain nombre de bugs et de comportements non standards qui font que si l'on base sa mise en page sur le rendu d'Internet Explorer, on aura ensuite des surprises avec Firefox, Opera, Safari, Konqueror, etc.

Je recommenderais donc plutôt de travailler :
- soit d'abord avec un navigateur présentant un rendu à peu près conforme aux standards (cf. les navigateurs cités ci-dessus) ;
- soit de tester systématiquement en parallèle avec IE et un de ces navigateurs... mais en faisant attention à utiliser, à la base, des solutions standard.

Pour tes problèmes de rendu, je diagnostique un abus massif du positionnement absolu. Pourquoi ne pas avoir simplement utilisé le positionnement statique (normal, quoi), et peut-être deux ou trois flottants ?
Rebonjour!

J'avais posté une réponse hier mais mon internet a planté et il semble que ça ne s'est jamais rendu.

Pour faire une histoire courte, j'utilise déja toujours les 2 navigateurs (IE et Firefox) les plus utilisé afin de tester mes pages, d'où ma question.

Que voulez vous dire par abus du positionnement absolu? Auriez vous une exemple dans mon code où je l'utilise et je ne devrais pas?

Et pour ce qui est du flottant, c'est ou je devrais utiliser ça dans ma page?

Je vous remerci infiniment! Smiley biggrin

Jaff
Jaff a écrit :
Que voulez vous dire par abus du positionnement absolu? Auriez vous une exemple dans mon code où je l'utilise et je ne devrais pas?

Et pour ce qui est du flottant, c'est ou je devrais utiliser ça dans ma page?


Le positionnement absolu est une méthode très « radicale » de positionner les éléments. Une de ses principales caractéristiques est qu'un élément positionné en absolu sort du flux de la page, et qu'il ne repousse plus les autres éléments de la page. Cela peut s'avérer très gênant.

En gros, je déconseillerais l'utilisation du positionnement absolu pour des blocs dont le contenu exact (et surtout son importance) n'est pas connu à l'avance.

On peut commencer par ne pas positionner le bloc conteneur en absolu, car cela pose de sérieux problèmes (en 800x600, la moitié du menu de gauche n'est pas lisible, et il n'est pas possible de scroller pour aller la lire : elle passe « en dehors » de la page).
#conteneur {	
	/* position: absolute;
	left: 50%;
	width: 948px;
	margin-left: -474px; */

	width: 948px;
	margin: 0 auto;
}

Sont commentées les lignes du code tel qu'il est actuellement. En dessous, un exemple d'utilisation de la technique des marges automatiques, qui permet de centrer le bloc ET d'avoir une barre de défilement horizontale pour les basses résolutions.

Autre problème du positionnement absolu : si tu agrandis le texte de la page, les menus deviennent inutilisables (ils ont des hauteurs fixes, et le texte dépasse, puis s'entremêle...). Là encore, il faudrait utiliser un positionnement statique (par défaut, donc). Pour avoir des « colonnes », on utilisera alors des flottants.
Cf. à ce sujet cet exemple sur trois colonnes (à adapter sur deux colonnes en virant une des deux colonnes extérieures).
Bonjour!

Comme j'étais énervé de voir qu'il y avait une solution a mon problème, je n'ai pas été capable d'attendre à demain pour tester. J'ai donc suivi vos conseil.

-J'ai éliminé tout positionnement absolu.
-Je me suis fié à l'exemple que vous m'Avez donner le lien pour le positionnement absolu.

Maintenant, si vous allez voir, j'ai un nouveau problème, ou plutôt, ca ne fonctionne pas comme dans l'exemple.

http://www.faucontrouve.com/pages/index.html

Étonnamment, le problème a changé de bord! Maintenant, c'est Internet Explorer qui n'affiche pas de la bonne facon (a ma grande surprise). Firefox semble afficher comme il faut.

Pourriez vous y jeter de nouveau un coup d'oeil et me dire ce qui cloche et qui fait que ma zone de texte se place en dessous du menu au lieu de a coté comme c'est supposé.

Aussi, avez vous une suggestion suivant au maximum les standards afin que mon menu je puisse placer les éléments au bon endroit (j'utilisais le positionnement absolu, maintenant que je l'ai enlevé, ils se place n'importe ou!)

Merci énormément. Croyez moi, j'ai beaucoup appris avec votre aide Smiley smile

Jaff
Bon, j'ai vaguement réussi à faire « marcher » ta page en modifiant par le code suivant :
#centre { float: right; width: 758px; }

Exit la largeur à 100% (très très mauvaise idée). Par contre, je pensais qu'en supprimant la largeur (on garderait alors juste une marge de 190px à gauche) ça passerait sans problème, mais ce n'est pas le cas. On a toujours un bug que je ne m'explique pas encore avec IE6.

Comme je suis crevé et après quelques tentatives infructueuses, j'ai utilisé la solution de repli : donner une largeur fixe et placer en flottant.

Je n'ai pas eu le courage de tout tester, mais je suppose que le fait de donner des largeurs fixes à tous les blocs enfants du bloc #centre n'est pas la meilleure chose à faire, quand on sait qu'un élément de type bloc prend naturellement toute la largeur disponible dans son élément parent.

Ah oui, si on utilise deux flottants pour les deux colonnes, il serait bien avisé de placer un clear: both; sur le pied de page.
Bonjour!

Merci beaucoup pour votre aide précieuse. Grâce à votre dernier message et quelques petits ajouts dans mon code, j'ai réussi à arranger ma page au complet.

Je sais que vous faites ça bénévolement pour la cause des normes et standard web et pour ça, je vous en félicite. Pour vous encourager (à défaut de vous payer), je peux vous dire que depuis que je fréquente cette communauté, j'ai commencé à amener le plus de standard possible dans la compagnie pour laquelle je travail (une grosse compagnie au Québec, la page que vous avez vu n'est qu'un petit travail que je fais à la maison) et que je fais mon possible pour en amener d'autres. Ce n'est pas facile surtout quand je rencontre des difficultés. Donc, grâce à votre aide, je continue de foncer.

Donc ne lâcher pas votre bon travail! et merci

Jaff