Première expérimentation de mise en page dynamique

Voici un exemple très intéressant de mise en page dynamique : Resolution dependent layout. Dans cet exemple, trois blocs sont positionnés les uns à côté des autres (Secondary title), si vous redimensionnez la fenêtre de vote navigateur, la largeur de ces blocs va s’adapter jusqu’à une certaine limite où ils vont venir s’empiler les uns au dessus des autres. Une solution élégante de mise en page adaptée à la taille de la fenêtre mais qui ne pénalise pas la lisibilité.

Cet exemple a été bien évidemment réalisé avec du javascript, mais on peut se prendre à rêver de ce que pourront nous apporter les nouvelles propriétés des CSS 3 (et notamment les propriétés Display, Fit ou même Crop).

Un commentaire sur “Première expérimentation de mise en page dynamique

  1. …Une solution élégante de mise en page adaptée à la taille de la fenêtre mais qui ne pénalise pas la lisibilité. … Essaye tous simplement de réduire la taille de la fenêtre 200×300 et tu peux constater que c’est toujours entièrement visible. Pour plus d’infos: 1Work_demo

  2. Ca fait quelque temps que je me questionnais sur le sujet… jusqu’à présent, je fonctionne avec un page index.html qui définit la largeur de l’écran et qui en fonction du résultat renvoit sur l’une des 4 pages index.php (cad que j’ai calculé la même mise en page mais pour 4 résolutions différentes…) En fouinant, j’ai entendu parler du « Resolution dependent layout », hors impossible de trouver des explications clairs sur la mise en place de ce dernier (et c’est bien dommage !) ; donc j’ai encore trifouillé, et je suis parvenu à quelque chose qui me parait intéressant (je ne prétends pas que c’est une découverte – LOL) en PHP… le seul hic, c’est que ca ne marche pas sous Firefox… voici l’adresse : http://jeromevillemagne.free.fr/larche (si quelqu’un peut me venir en aide…thx)

  3. Nouveau message de ma part simplement pour dire que je m’en étais sorti… cela dit si quelqu’un à des explications sur le Resolution Dependent Layout : ça m’intéresse toujours… Merci

Laisser un commentaire