Version complète: sur le forum Webmaster Hub : Un design extensible ?
Webmaster Hub > Création et exploitation de Sites Internet > Les fondations d'un site > Le Webdesign
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 wink.gif

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
CITATION(Dan @ samedi 05 novembre 2005, 15h22)
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 biggrin.gif)
Capitaine_Fracas
Ok merci pour les reponce qui m'aide a voir plus clair u_idea_bulb02.gif . 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 laugh.gif .
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 wink.gif .
Dan
CITATION(Dudu @ samedi 05 novembre 2005, 22h10)
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 smile.gif

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
CITATION(Camlann @ lundi 07 novembre 2005, 22h13)
Par contre, bien entendu, cela laisse le problème du référencement
*
... loin derrière l'accessibilité quand même sad.gif
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
CITATION(kimberlyclarko @ dimanche 06 novembre 2005, 19h21)
La home page d'AOL.com (us) est presque entièrement élastique, c'est assez bluffant :
http://www.aol.com/
==> ctrl+molette
*


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 !!! smile.gif
Raphael
Si je peux me permettre :
http://css.alsacreations.com/Tutoriels-et-...les-resolutions

smile.gif
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.
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.