Addapter la taille du site à la résolution ou au naviguateur

Tu vois le premier topic pinné en gras et en tête de liste et dedans tu as des liens vers d'excellents tutos qui répondront à ta question (Site du zér0, AlsaCréations et OpenWeb)  ..

PS.: on peut très bien se passer de JavaScript : on utilise les feuilles de style (CSS) associées à l'XHTML.. C'est expliqué dans les tutos..

 

J'ai déja vu ces liens précédement cités, mes pages fonctionnents nickels sous mozilla et j'ai suivi la démarche appropriée, mais quelques pixels de décalages apparaissent parfois sous IE sur certain blocks, cela m'ennuie.
je pensais que cela peut être résolu avec du JS, mais si tu connais une méthode pour que IE "lise" certaines lignes de code plutôt que d'autres je suis tout ouïe.

KangOl à précisé l'utilisation de hacks dans ce sens là, j'aimerais en savoir plus... http://www.presence-pc.com/forum/ppc/Programmation/IE-F...

Concernant les décalages, ceux que tu constate ne sont que sous Windows... Si tu testes ton site sur Mac ou sur Linux, tu constateras des décalages bien pires  ... C'est surtout lié à l'emploi des polices qui sont gérées différemment sur ces systèmes, voire des polices complètement différentes (Exemple : Arial et Times New Roman ne sont pas forcément sur les distributions Linux et seront remplacées par d'autres)..

Mais à propos des "hacks", dans le TU de tête de liste, j'indique une page qui décrit quelques bidouilles spéciales pour IE >> http://www.ultra-fluide.com/ressources/css/css-hacks.htm, dont une très connue " * html " à utiliser après la règle standard :

.maclasse { }

* html .maclasse { } // complément et/ou variation pour IE

 
#monid { }

* html #monid { }

Cela dit, comme toutes les bidouilles, celle-ci provoquera une non-conformité du document CSS en cas de vérification dans un moteur de validation (donc, tu ne pourras pas placer un petit logo "CSS Valide !").. Cela dit, la "norme" W3C précise que toute règle CSS non valide doit normalement ignorée par le navigateur.. il existe des bidouilles pour tous les navigateurs, mais bien moins connues car toutes plus ou moins inutiles, puisqu'on fait un site conforme W3C (ce que Firefox, Opera, Konqueror et Safari comprennent plutôt bien) et qu'ensuite seulement on l'adapte à IE  ..


Une méthode plus radicale et qui permet de générer des CSS valides est de passer par le PHP et, sur les objets litigieux, faire que les noms d'objets soient dépendant du navigateur (détecté par PHP), donc des règles CSS spécifiques et/ou complémentaires pour ces objets.. J'utilise ça sur nombre d'éléments de mon site, mais je n'ai pas fini de "faire le ménage" dans mes CSS de ce côté là..

Exemple :

.MonObjet { margin: 3px; width: 50px, height: 30px; } // objet "normal" ; cas général, donc

.MonObjet_IE { margin: 5px; width: 50px, height: 30px; } // objet "spécial IE", avec une "extension" qu'on ajoute au nom d'objet

qu'on peut raccourcir comme ça :

.MonObjet, .MonObjet_IE { width: 50px, height: 30px; } // "tronc commun"

    .MonObjet { margin: 3px; }

    .MonObjet_IE { margin: 5px; }

Ceci équivaut au code suivant (si on utilise la bidouille CSS) :

.MonObjet { margin: 3px; width: 50px, height: 30px; } // règle "tronc commun"

    * html .MonObjet { margin: 5px; } // ajout "spécial IE" à la règle, mais non valide en cas de vérification

La variable PHP qui permet de récupérer l'identifiant du navigateur est "$_SERVER['HTTP_USER_AGENT']" et peut s'employer simplement comme ça, pour définir des "extensions" aux noms des objets CSS (ces "extensions" ne sont que des artifices de nommage que chacun voit à sa façon, ce n'est en rien un truc défini de manière standard  ) :

$ie = ""; $ffox = ""; $opera = ""; // mise à null des variables utilisées (il existe bien d'autres façons de faire)

$navigator = $_SERVER['HTTP_USER_AGENT'];

	if (eregi('MSIE', $navigator) && !eregi('Opera', $navigator)) { $ie = "_IE"; } // détecte IE mais pas Opera quand ce dernier s'identifie en tant qu'IE

	if (eregi('firefox', $navigator)) { $ffox = "_FF"; }

	if (eregi('Opera', $navigator)) { $opera = "_OP"; }

Ceci vaut pour une CSS "statique", qui peut vite devenir lourde si on a beaucoup d'objets qui varient d'un navigateur à l'autre..

C'est pourquoi, il faut toujours "penser simple" et toujours utiliser une DOCTYPE conforme ! Exemples en XHTML :

/!\ Internet Explorer ne supporte aucun code avant la DOCTYPE !
/!\ Sans usage de DOCTYPE conforme, IE bascule en mode "Quirks" et ne respecte plus les standards W3C de dimensionnement des objets : dimensions, bordures, décalages, marges, etc... Le site OpenWeb parle du sujet (article sur les modèles de boîtes "Microsoft")..


Une autre manière est carrément de générer dynamiquement et totalement la CSS par PHP... Je n'ai pas encore expérimenté le truc..

Voili..

 

je completerai juste que pour les "hacks" c'est pas tiptop puisque ca polue la feuille css...

le mieux c'est d'utiliser les commentaires conditionnel pour inclure une seconde feuille de style spécifique a IE ...

Merci de vos réponses, vous m'avez bien débloqués. Effectivement générer une page css dyamiquement serait vraiment génial, ca ne doit pas etre trop dur non plus à mettre en place, mais j'ai la flême ^^.

Moi aussi  ..