Un design extensible ?

[Capitaine_Fracas]

Bonjour

Je voudrais savoir comment fait on pour faire un design extensible.

Que la bannière s'élargisse quand un visiteur vient sur le site.

Que toute la page s'élargisse.

Voilà je remercie déja les personnes qui m'apporteront de l'aide .

A plus .

[Dan]

Pour faire un design extensible, il suffit d'utiliser des valeurs en pourcentage plutôt que des valeurs en pixels, comme par exemple sur le Hub

Par contre, les images ne pourront pas s'agrandir. Il faudra mettre des images à la taille maximale et éventuellement les réduire ou les recentrer si elles sont utilisées comme fond d'éléments.

Dan

[Capitaine_Fracas]

Merci pour ce message notre bienfaiteur a tous.

[Dudu]

Par contre, les images ne pourront pas s'agrandir.

Que si, elles pourront !!

Il suffit de leur définir des dimensions en valeur relative, et çà marche tout seul.

Un petit lien très sympathique à ce propos: CSS Scale Image HTML Tutorial (bien que leurs images d'exemple soient vraiment hideuses )

[Capitaine_Fracas]

Ok merci pour les reponce qui m'aide a voir plus clair . Voila je vais comencer a faire mon site en html css et php.

Je voules savoir avents se qu'est t'est le XML.

Est si pour pour savoir, si je fait un design (avec une belle bannier,ect) si sur mon écrant sa safiche bien ces beau est que quand sa va étre sur un ecrant plus petite comment je ces si ces pas deformer .

Alors je voudrais savoir comments on ces si sa bannier va étre belle pour tout les resolution d'écrant.

Voila merci encore pour se qui porte de l'intérer a m'écrire des reponce pour faire avencer un novice qui voudrais devenir un master .

[Dan]

Que si, elles pourront !!

Au temps pour moi ! Je me suis mal exprimé en voulant dire que leur résolution ne changerait pas.

Il faut qu'elles soient stockées dans la résolution convenant à la plus grande dimension de page

Dan

[Kimberlyclarko]

La home page d'AOL.com (us) est presque entièrement élastique, c'est assez bluffant :

http://www.aol.com/

==> ctrl+molette

[Camlann]

Une autre solution à ce "problème" de design extensible (au risque de me faire huer) est d'opter pour une interface 100% Flash avec width="100%" et height="100%".

Par contre, bien entendu, cela laisse le problème du référencement, donc c'est une solution à envisager en toute connaissance de cause...

[Dudu]

Par contre, bien entendu, cela laisse le problème du référencement

... loin derrière l'accessibilité quand même

[AlphaDesign]

Un example pour un header extensible,

h1 est inclus dans un div container, image.jpg haute de 100px est assez large pour couvrir l'extension de la page recherchée:

h1{

width: 100%;

height: 100px;

background: url(path_to_image/image.jpg) center;

text-indent: -9000px;

}

résultat: une image toujours centrée sur la page, elle s'allonge lorsque la page augmente mais ne se déforme pas en hauteur, le text du h1 n'est pas visible mais disponible pour les screenreader, moteur de recherche ou lorsque css est disable..

[Urban]

La home page d'AOL.com (us) est presque entièrement élastique, c'est assez bluffant :

http://www.aol.com/

==> ctrl+molette

<{POST_SNAPBACK}>

Sous linux / firefox c'est pleins de bugs, ça se chevauche dans tous les coins.

[Beatnykk]

bien que résolvant pas mal de soucis, tout cela ne résout pas les problèmes d'élèments de fond (tableaux, images, calques) avec lesquels il faut parfois composer.

par contre pas mal le coup de convertir les px en em !!!

[Raphael]

Si je peux me permettre :

http://css.alsacreations.com/Tutoriels-et-...les-resolutions

[Kalt]

Le problème du redimensionnement d'une image à une taille qui n'est pas la sienne au départ, c'est qu'on se retrouve avec des effets de crénelage forts disgracieux (voyez la page d'accueil de Wanadoo par exemple, la photo sous l'onglet "Ajourd'hui" se réduit si l'on rétrécie la fenêtre). Mieux vaut donc prévoir de pouvoir tout retailler, sauf les images, en utilisant astucieusement les backround.

Imaginons un header avec une photo de 800px de large. Sur un écran en 1024x768, vous voulez que cette image prenne toute la place en largeur : vous l'alignez à gauche, et dans un logiciel d'image vous isolez la dernière colonne de pixels à droite de la photo, vous le sauvegardez et l'utilisez comme fond, répété sur l'axe X.

[sedboy]

Est-ce qu'il est possible détecter la résolution avec php? Si oui, on peut faire différents styles et afficher au visiteur le style qui convient à sa résolution.