Première expérimentation de mise en page dynamique
27 avril 2005,
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).
Mots-clés : standards web |
Strass a dit:
Pas mal fluide en plus! Et particulièrement adapté aux sites devant être lisibles par les mobiles (si le support javascript suit…).
Warning: parse_url(http://) [function.parse-url]: Unable to parse url in /home/users/fredcavazza/wp/wp-content/plugins/mbla.php on line 462
Red a dit:
Ne fonctionne pas avec Firefox
Strass a dit:
Red<
ici Firefox 1.0.2 sous Ubuntu Linux, ça marche impec’
Raoul Mengis a dit:
Il existe d’autres sites:
Ce n’est plus de l’expérimentation c’est du solide
Sans java, ni de Java-Script !
Fred C. a dit:
Désolé Raoul, mais je ne vois pas en quoi la mise en page des 4 sites donnés en exemple est dynamique…
/Fred
Raoul Mengis a dit:
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
jeje_13009 a dit:
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)
jeje_13009 a dit:
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
jhkjhkj a dit:
dsereree