[Résolu] Choisir le bon positionnement

Bonjour.

Je pense qu'il s'agit d'un sujet qui a dût être traité à de nombreuses reprises et je m'en excuse par avance. J'ai fait une recherche et n'ai pas trouvé de réponses satisfaisante à ce type de problème.

Tout d'abord voici mon problème.

Comme bcp, j'ai un problème de positionnement en fonction des navigateurs. Sous mozilla pas de problème, mais si je pass à IE, c'est la cata, comme vous pouvez le voir ici : www.meteobell.com

J'ai utilisé la méthode des flottants combiné avec margin.

En lisant quelques tutos d'alasacréations je me suis rendus compte que la méthode des margin-padding s'utilisaient plutôt pour l'intérieur des contenants. http://forum.alsacreations.com/faq/#item39

Mon problème n'est pas là et s'applique plutôt pour la disposition des contenants eux-mêmes entre eux. (en-tête, corps, menu, pied-page)

Que dois-je utiliser pour positionner mes contenants :

- garder mes floats et margin-padding en utilisant des underscore hack IE ?

Dans ce cas, un bug supplémentaire va apparaitre, si je réduis ma page, j'ai mon bloc à onglet placé en float:right; qui va partir en dessous et ça fait pas beau

- utiliser des position : absolute ;

Est-ce que cette méthode est compatible quelle que soit le navigateur, la résolution utilisé de l'utilisateur etc....

Qu'utilisez-vous, vous les pros, pour placer correctement vos blocs ?
Modifié par Damonya (26 Sep 2005 - 22:29)

Damonya a écrit :
En lisant quelques tutos d'alasacréations je me suis rendus compte que la méthode des margin-padding s'utilisaient plutôt pour l'intérieur des contenants.

Non non : les margin et les paddings y sont bien distingués et ne se comportent pas à l'identique. Ne pas les mettre dans le même sac.

Damonya a écrit :

Qu'utilisez-vous, vous les pros, pour placer correctement vos blocs ?

Hummm ?
http://forum.alsacreations.com/faq/#item59
Modifié par Raphael (26 Sep 2005 - 15:57)

Ah tiens, je ne l'avais pas vu celui-là. Merci merci et encore désolé car au vu du nombre de pages que la recherche m'a donné en tapant "absolute", j'imagine que cette question a été mainte et mainte fois posé dans le passé.

Donc il m'est conseillé pour placer mes contenants d'utiliser la méthode des position absolute si j'ai bien compris. Pour placer d'autres blocs dans ces contenants je n'utiliserais par contre pas cette méthode. Tu confirmes Raphaël ?

a écrit :
Le positionnement absolu (position : absolute), est lui, bien plus intéressant et pratique. Il est idéal pour placer tous les conteneurs généraux, les grandes zones de la page, les éléments uniques (en-tête, menu, pied de page, …).

Il faut cependant toujours éviter de placer les éléments internes et en-ligne à l'aide du positionnement absolu : dans ce cas, utilisez de préférence le positionnement à l'aide des marges.

Mais donc dans mon cas précis, (voir mon lien), ca sert à rien que je m'embête avec des floats, qui sont plus appropiré par exemple pour une liste de photos placés cotes à cotes ?

En fait c'est en faisant le site du zéro, que j'ai utilisé les floats, car c'est la méthode qu'ils préconisaient. Ils avaient tord si je comprend bien.
Modifié par Damonya (26 Sep 2005 - 16:07)

Damonya a écrit :
En fait c'est en faisant le site du zéro, que j'ai utilisé les floats, car c'est la méthode qu'ils préconisaient. Ils avaient tord si je comprend bien.

Non ils n'avaient pas tort et jtu n'auras pas tort en utilisant des positions absolues non-plus.
Il n'y a pas de vrai-faux sur les méthodes de positionnement.
Chacun a des spécificités (voir les détails sur Openweb et Alsa par exemple) et de ces spécificités découlent des conséquences différentes que tu dois connaître avant de choisir l'un ou l'autre positionnement.

En bref s'il y'avait un conseil à donner : essaye dans la mesure du possible de toujours provilégier le positionnement en flux. C'est le moins contraignant et le plus fluide pour un document.
Ensuite, selon le comportement voulu, faire le choix entre un positionnement absolu et un positionnement flottant.

Ouf....

Bon j'ai mis le temps, mais j'ai déjà résolu un premier bug. Celui de ma bannière qui laissait un espace vide sur les cotés de la bordure avec IE, grâce à ce petit code trouvé sur un lien (OpenWeb) d'un de vos tutos.
En effet ma bordure autour de ma bannière fait 3px. Avec IE, j'avais un espace vide de 3x2 = 6px.

	
..............(je met pas tous le code, juste la partie qui corrige le bug)

width:986px;
	height:166px;
  /*pour corriger bug d'IE*/
  voice-family: "\"}\"";
  voice-family:inherit;
	width: 980px;
	height:160px;
}
/*pour corriger bugd'Opéra*/
html>body #en_tete{
  width: 980px;
height:160px;
  }

J'ai corrigé un autre bug.
En effet les blocs-titres dans mon cadre à onglet se mettait tous à gauche avec IE, même en mettant margin:auto;
C'est parce que j'avais mis un weight:70% pour réduire les cotés. J'ai enlevé ça et mis à la place des margin-left et margin-right. Ca semble corriger ce type de bug.

Bon je vais passer maintenant à la question initial sur les positionnements. ca pas l'air simple compte tenu de ce que j'ai put lire.
Je sais toujours pas quoi utiliser. float ou absolute ? je vais essayer les 2, je verais bien.....
Modifié par Damonya (26 Sep 2005 - 18:14)

Et bien voilà, j'ai finallement gardé mes floats et ai résolu mes bugs de positionnement grâce à une combine qu'on m'a filé.

en rajoutant un _ devant certains atributs css genre _height pour ne citer que lui...... Apparemment seul IE prend en compte ceux-là.

Comment résoudre des bugs grâce à un bug

J'ai travaillé qu'avec IE et Mozilla. Pour les autres navigateur, je n'ai aucune idée de savoir si y'a encore d'autres bugs par contre.....

Bah ca été long en tout cas, mais j'ai enfin fini.....du moins je crois

Tiens au passage un petit tuto résumant l'ensemble des hak pour IE et Mac et en français s'il vous plait (suffisament rare pour être souligné)

http://www.ultra-fluide.com/ressources/css/css-hacks.htm
Modifié par Damonya (26 Sep 2005 - 20:30)