Incontournables XHTML / CSS :
| Auteur | |
|---|---|
| Vinc26 | # 20 Feb 2006 - 01:14:02  |
 22 Posts |
Bonjour tout le monde  Alors je suis face à un défi que je n'arrive pas à résoudre. Bon, je suis assez neuf dans le monde des CSS, et j'apprends en lisant bien à fond les faqs, et autres articles. Mais là, je bloque : Voici donc la page de mise en évidence de mon problème : http://vincent.zorzi.2.free.fr/site/index.html Ce que je cherche à obtenir : je voudrai que mon site soit élastic vers l'infini lorsque l'on élagrie la fenêtre (ça, ça marche). En revanche, quand on rétrécit la fenête, je voudrait qu'il arrête d'être élastic en dessous d'une certaine valeur de largeur de fenêtre, de manière à ce que mes trois zones A, B, et C ne passent pas à la ligne, mais au contraire s'arrêtent l'une sur l'autre, et disparaissent à droite de la fenêtre (avec apparaition d'un ascensseur en bas de fenêtre bien entendu). L'idéal, aurait été que ma zone B soit élastic elle aussi, et remplisse automatiquement l'espace laissé libre entre la zone A et la zone C. Vous trouverez un lien sur la page en question pour télécharger l'archive zip de cette page et de son fichier css. Grand merci d'avance !  Modifié par Vinc26 (20 Feb 2006 - 01:14) Pré-tests sur Safari (Mac) et tests finaux sous Firefox (Mac/PC), et sous IE6 IE7 XP et Vista. |
  |
|
| papyjo | # 20 Feb 2006 - 07:58:43 |
Je ne dors pas, je rêve !  941 Posts |
Salut, Pour les navigateurs du type FF : #conteneur {Mais pas pour IE Ne te demande pas comment ça marche ! Demande toi à quoi ça sert ! |
| |
|
| Vinc26 | # 20 Feb 2006 - 10:55:42 |
| 22 Posts |
Merci pour ta réponse, mais désolé  je crois que ça ne fonctionne pas : ni sous FireFox (mac ou pc), ni sous Safari, et bien sur pas sous IE...Voici une version 2 avec la correction que tu me proposes : http://vincent.zorzi.2.free.fr/site_v2/index.html Et même si ça fonctionnait, ça veux dire qu'il est impossible d'obtenir ça sous IE ? Même avec une astuce détournée ? (Parce que là, c'est pas grand chose, mais c'est quand même quelque chose qu'on pouvait faire avant avec des tableaux, et que l'on ne peut plus faire... non ?) Pré-tests sur Safari (Mac) et tests finaux sous Firefox (Mac/PC), et sous IE6 IE7 XP et Vista. |
| |
|
| Christian Le Bouler | # 20 Feb 2006 - 11:14:48 |
| 3135 Posts |
Salut je ne comprend pas vraiment ton problème, si tu ne veux pas le comportement normal et attendu de la propriété float alors n'utilise pas cette propriété pour positionner tes éléments. |
|
|
| Vinc26 | # 20 Feb 2006 - 11:38:36 |
| 22 Posts |
Oui, j'ai effectivement tenté sans les float left mais avec des absolute... reste que le probleme de ma zone C qui doit rester à droite est toujours là : je dois forcement la mettre en float right. et donc, quand la fenêtre est trop petite, elle vient se supperposer à la zone B ; alors que je cherche qu'en dessous d'une certaine taille de fenêtre, l'élesticité du tout s'arrête. Z'en dites quoi  ?Pré-tests sur Safari (Mac) et tests finaux sous Firefox (Mac/PC), et sous IE6 IE7 XP et Vista. |
| |
|
| tyx | # 20 Feb 2006 - 12:19:07 |
Qui cherche, trouve! 361 Posts |
Plop, Moi j'en dit qu'en écrivant:
ca devrait aller mieux  Pour IE, faudrait voir s'il reproduit pas le même phénomène que pour le min-height |
| |
|
| Vinc26 | # 20 Feb 2006 - 13:54:04 |
| 22 Posts |
Oui ! Effectivement ça marche (ah... ce copier/coller sans regarder... ça m'apprendra). Mais comme prévu, sous IE, ça marche pas. Je suis donc allé voir du coté du lien que tu me proposais et en me basant sur ça : http://www.ultra-fluide.com/ressources/css/css-hacks.htm#min-height que j'ai testé et qui fonctionne très bien, j'ai pondu ça : <html> Qui malheureusement ne fonctionne que sous Safari et FireFox. Je suis allé étudier l'autre solution en anglais... mais ça a l'air d'être la même méthode... Z'auriez pas eu idée Pré-tests sur Safari (Mac) et tests finaux sous Firefox (Mac/PC), et sous IE6 IE7 XP et Vista. |
| |
|
| tyx | # 20 Feb 2006 - 17:01:40 |
Qui cherche, trouve! 361 Posts |
Après un rapide check sur google, j'ai trouvé ça: http://www.webreference.com/programming/min-width/ Et sur alsa: Ceci Je te laisse tester : > Modifié par tyx (20 Feb 2006 - 17:03) |
| |
|
| Vinc26 | # 20 Feb 2006 - 22:51:21 |
| 22 Posts |
Cool !!! Effectivement, grace à la page que tu as trouvée : http://www.webreference.com/programming/min-width/ j'ai réussi à adapter leur solution à ma page de test : http://vincent.zorzi.2.free.fr/site_v4/index.html Vous y trouverez un lien avec un .zip qui contient la page et le css (avec commentaire pour s'y retrouver et l'adapter) Et maintenant, ça fonctionne partout !!! BRAVO et MERCI !!! Bon, un dernier truc, comment faire pour que la zone B s'étire automatiquement jusqu'à la zone C ?  Pré-tests sur Safari (Mac) et tests finaux sous Firefox (Mac/PC), et sous IE6 IE7 XP et Vista. |
| |
|
| Vinc26 | # 20 Feb 2006 - 23:00:38 |
| 22 Posts |
Bon, comme un jour, je risque d'enlever ces pages de test de mon serveur, je poste ici le code qui fonctionne : Le XHTML : <div class="conteneur"> et le CSS : .conteneur { /* Conteneur du site */ Pré-tests sur Safari (Mac) et tests finaux sous Firefox (Mac/PC), et sous IE6 IE7 XP et Vista. |
| |
|
Les références web : openweb.eu.org - opquast.com - webmaster-hub.com - webrankinfo.com - salemioche.net - web-pour-tous.org - webonorme.org
Nos partenaires : Editions Eyrolles
Nikozen : Hébergement - Réalisation : Alsacreations.fr