28114 sujets

CSS et mise en forme, CSS3

Elasticité controlée

Bonjour tout le monde Smiley smile

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 ! Smiley cligne
Modifié par Vinc26 (20 Feb 2006 - 01:14)
Salut,

Pour les navigateurs du type FF :
#conteneur {
background: #808080;
padding: 5px;
min-with:770px;	
}

Mais pas pour IE
Merci pour ta réponse, mais désolé Smiley confused 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 ?)
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.
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 Smiley confus ?
Plop,

Moi j'en dit qu'en écrivant:

min-width: 770px;


ca devrait aller mieux Smiley langue

Pour IE, faudrait voir s'il reproduit pas le même phénomène que pour le min-height
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>
<head>
<style type="text/css">
  #out-min-width {
	padding-left:600px;    /* voici le min-width (600px) */
	min-width: 1px;     /* pour Opéra */
	background-color: #99CC33;
  }
  #in-min-width {  
  margin-left: -600px         /* pour compenser le padding-left */ 
  }
</style>
</head>

<body>
      <div id="out-min-width">
          <div id="in-min-widht">
             Votre contenu ici, long ou court à votre guise.Votre contenu ici,
             long ou court à votre guise.Votre contenu ici, long ou court à votre
             guise.Votre contenu ici, long ou court à votre guise.Votre contenu
             ici.Votre contenu
             ici, long ou court à votre guise.Votre contenu ici, long ou court à votre
             guise.Votre contenu ici, long ou court à votre guise.Votre contenu
             ici, long ou court à votre guise.Votre contenu ici, long ou court à votre
             guise.Votre contenu ici, long ou court à votre guise.Votre contenu
             ici, long ou court à votre guise.Votre contenu ici, long ou court à votre
             guise.Votre contenu ici, long ou court à votre guise.Votre contenu
             ici, long ou court à votre guise.Votre contenu ici, long ou court à votre
             guise.Votre contenu ici, long ou court à votre guise.Votre contenu
             ici, long ou court à votre guise.Votre contenu ici, long ou court à votre
             guise.Votre contenu ici, long ou court à votre guise.Votre contenu
             ici, long ou court à votre guise.Votre contenu ici, long ou court à votre
             guise.Votre contenu ici, long ou court à votre guise.Votre contenu
             ici, long ou court à votre guise.Votre contenu ici, long ou court à votre
             guise.Votre contenu ici, long ou court à votre guise.</div>
      </div>
</body></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
Smiley confus
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 ? Smiley biggol
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">
<div class="conteneur_minwidth_IE">
<div class="conteneur_layout_IE">
<div class="conteneur_container_IE">

tout votre contenu ici

</div>
</div>
</div>
</div>


et le CSS :
.conteneur {  /* Conteneur du site */
	min-width: 700px;  /* largeur mini du site (sauf IE) */
	width: auto;  /* auto ou % */
}

* html .conteneur_minwidth_IE {  /* largeur mini du site pour IE */
	padding-left: 700px;  /* valeur largeur mini pour IE */
}

* html .conteneur_container_IE {  /* complément à .minwidth pour IE */
	margin-left: -700px;  /* négatif valeur largeur mini pour IE */
	position: relative;
}

* html .conteneur_minwidth_IE, * html .conteneur_container_IE, * html .conteneur_layout_IE  { /* complément à .minwidth pour IE */
	height: 1px;
}


Smiley smile
Sujet clos
Aller à