taille des images / taille de l'écran

[gratonet]

Lorsqu'on fait un site web on le construit en premier de manière fluide avec le minimum de code pourqu'il s'affiche chez tout le monde.
ensuite on utilise les feuilles de style et javascript pour l'adapter à tel ou tel écran. C'est ma technique et je travaille sur le net depuis plus de 12 ans maintenant.

Donc :
1. Fais un site avec des tableaux entrelacés sans utiliser les nouvelles propriétés.
2. utilise javascript pour insérer une feuille de style selon la taille de l'écran et du navigateur.
a/ n'utilise pas comme font bcp les anciennes techniques de document.all , document.layers ou appversion dans l'entete HEAD mais un script intelligent pour detecter les navigateurs immédiatement après la balise BODY. En effet par exemple document.all renvera true pour ie, firefox, netscape > 5, opera, etc.
voici un petit script intelligent qui ne se trompe jamais à installer après la balise body :

/**** script protégé par http://www.azwin.com
this script is protected from http://www.azwin.com
Infos Editor : infos@azwin.com

Copyright AZWIN.COM BY CHERIF YAHIAOUI
**/
var gnavigator = 0;
var bodynav = eval("document.body")?true:false;
var allnav = eval("document.all")?true:false;
var nav4event = eval("window.captureEvents")?true:false;
var nav6later = eval("document.addEventListener")?true:false;
var supportgetid = eval("document.getElementById")?true:false;
var supportStyle = (bodynav)? (eval("document.body.style")?true:false):false;
var supportimage = eval("Image")?true:false;
var supportcreateelement = eval("document.createElement")?true:false;
var supportwrite = eval("document.write")?true:false;
var supportcookie = eval("document.cookie='mekookie'")?true:false;
if (supportcookie){document.cookie="";}
var nav45 = (eval("document.layers") && nav4event && supportwrite && nav4event && supportcookie && supportimage)?true:false;
var w3cnav6 = (supportgetid && supportStyle && supportimage && supportcreateelement && supportwrite && supportcookie && nav6later)?true:false;
var ie = (bodynav)? ((eval("document.body.insertAdjacentHTML") && allnav && supportwrite && supportcookie && supportStyle && supportimage)?true:false):false;
if (nav45){gnavigator = 1;}else if(w3cnav6){gnavigator = 2;}else if(ie){gnavigator = 3;}

voila :
gnavigator te renvoi 1 si netscape 45, 2 si firefox, netscape7, etc., 3 pour ie.

en focntion de ses valeurs vous pouvez redimensionner vos éléments ou insérer vos feuilles de styles. A savoir que pour netscape 4 < 6 la police minimale doit être de 10 pixels, pas d'indication des bordures pour les boutons et les champs, etc.

if (gnavigator == 1){
document.write (ma feuille de style pour netscape 4)
-----
blabla
}else{
ma feuille pour ceux que je n'ai pas reconnu. }
<noscript>
ma feuille pour ceux qui acceptent pas le js
</noscript>

Function pour redimensionner la fenêtre (tjrs dans body)

iouter = eval("window.outerWidth");
ibody = eval("document.body");
icw = false;
if (ibody){ icw = eval("document.body.clientWidth"); }
var iw = 450;
var ih = 500;
if(iouter){
self.moveTo (0, 0); self.outerWidth = iw; self.outerHeight = ih;}
if (ibody && icw && !iouter){
self.moveTo (0, 0);
self.resizeTo(iw, ih);}

Pour ceux qui utilisent mes scripts, merci de laisser juste mes coordonnées plus haut.

[HawkEye]

Tu peux aussi construire ton site en pourcentages et non en pixels...

[bzctoons]

Personnellement j'utilise une méthode certes critiquable mais qui est simple et fonctionne pas mal.

<link rel="stylesheet" href="style.css" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" href="style_ie.css" type="text/css" />
<![endif]-->


Pour l'expliquation :
- on charge une css de base
- si on est sous IE (c'est le seul qui supporte la syntaxe "<!--[if IE]>...") il va charger une autre CSS. Dans la deuxième on peut redefinir certaines propriétés afin d'ajuster les différences d'affichage.

Cette astuce ne fait la difference que entre IE et le reste, toutefois on peut activer une CSS pour diverses versions d'IE (5.0, 5.5, 6.0).
Pour ma part Firefox/Mozilla et IE couvrent ~ 98% des internautes.
J'avoue faire l'impasse sur Opéra mais il était payant jusqu'a présent.