[html/css] Rétrecissement site extensibleFermé

Question

Bonjour à tous !

Alors, je vous présente un problème sur lequel je planche sans résultat depuis plusieurs jours. 

J'ai créé un site avec un design extensible. Le problème, lorsqu'on rétrécie la fenêtre de trop (horizontalement), les colonnes se chevauchent les unes sur les autres. Ca fait moche. 

Je voudrais pouvoir laisser la fenêtre se rétrécir jusqu'à un certain point puis au moment où les colonnes se chevauchent (par exemple 800px) que des scrollbars apparaissent et que le design ne bouge plus mais que ce soient les scrollbars horizontales qui se modifient.

Le meilleur exemple de ce que je veux faire, c'est le site du zéro. (non, je ne fais pas de plagiat, j'ai juste vu qu'ils avaient réussi après coup)

Mon code pour l'instant : 

body
{
   width: 100%; /*le design s'adapte à l'écran de l'utilisateur en largeur*/
   min-width: 800px; /*taille mini avant que les ascenseurs ne s'activent quand on réduit la taille de l'écran*/ 
   overflow:auto; /*insertion et gestion automatique des scrollbars horizontales*/

 }

Pour info, j'ai aussi essayé de mettre un min-width pour chacun des div qui me faisaient mes colonnes, ça n'a pas plus fonctionné. 

Avez-vous une idée ?

avion-f16 · Accepted Answer

Bases-toi sur ces gabarits.

Smoking bird · Answer

essai en déclarant le min-width avant le width^^.

Je serais toi, je mettrais pas mon contenu directement dans le body, j'utiliserais plutôt un div de contenu général, auquel j'appliquerais le min-width. Je me suis aussi essayé au design extensible et je n'ai pas eu ce problème de conteneur général qui foire^^

avion-f16 · Answer

Mets ton site dans un div avec un min-width de x pixels.

bidule doodle · Answer

En essayant le min-width juste avant le width, ça ne marche pas. 

C'est vrai que je n'ai pas mis l'intégralité de mon css (300 lignes, ça ne sert à rien) mais pour vous expliquer en quelques mots l'architecture de mon css : 

ma page est conceptuellement très classique. J'ai : 
-un en-tête 
-un menu de gauche 
-un pied de page 
-un corps de page. 

Ce corps de page contient lui-même deux sous divisions : colonne gauche et colonne droite.  Le texte se trouve là dedans. Le reste (en-tête, footer et menu) sont exportés dans des .php 

Mais bon, désespérée comme je le suis, j'ai quand même essayé de créer un div général juste avant et après les deux balises body et... ça n'a rien donné. >.<

Un autre idée surgiraient-elles de vos cerveaux pour aider la pauvre... (blonde, célibataire, développeuse ?) damoiselle que je suis.

bidule doodle · Answer

(tiens, je n'avais pas trouvé cette page dans ce site) 

Et du coup, vous me faites tellement douter de moi que j'ai recommencé votre solution sans les includes en php.  

Mais malheureusement non. Car la solution qui repose sur ces quelques lignes  

#global { 
 width: 90%; 
 max-width: 90em; 
 min-width: 850px; 
 margin-left: auto; 
 margin-right: auto; 
}

ne fonctionne pas chez moi. Que le global soit directement le body ou bien un wrapper de tout le code de la page. (j'ai réessayé deux fois tellement vous me faites douter. ;) )Et je ne comprends pas pourquoi. C'est la deuxième chose comme ça qui marche chez les autres, qui devrait marcher chez moi et qui ne fonctionne pas.   

peut-être voulez vous un code plus imposant que les quelques lignes que j'ai mis, des copies d'écran des différentes étapes de rétrécissement ou carrément le code d'une des pages ? 

Plus je bute, plus j'ai envie de trouver. (faut-il que j'offre une récompense à celui/celle qui m'aidera à trouver la solution ? XD)

EDIT : Après cette histoire de vous fournir des copies d'écran, j'en ai fait. les voici :

https://i68.servimg.com/u/f68/11/28/68/56/pas_re10.jpg ==>plein écran,normal
https://i68.servimg.com/u/f68/11/28/68/56/retrec10.jpg ==> rétrécit un peu, tout convient parfaitement encore
https://i68.servimg.com/u/f68/11/28/68/56/retrec11.jpg ==> rétrécit beaucoup, et PAF ! (le chien) la colonne de droite vient encore chevaucher celle de gauche au lieu de rester à sa place passer une taille mini de fenêtre (min-width) et de mettre en place des scrollbars dignes de ce nom. 

...

A vrai dire, je viens de voir un truc que je n'avais pas vu.

https://i68.servimg.com/u/f68/11/28/68/56/retrec12.jpg ==> bien trop rétrécit. On voit que la colonne de droite chevauche celle de gauche et qu'une scrollbar est apparue.
https://i68.servimg.com/u/f68/11/28/68/56/retrec13.jpg ==> la même fenêtre mais scroball déplacée à droite. On voit que la colonne de droite s'est déplacé sur la gauche mais que la fenêtre garde quand même son emplacement dans la page. 

Du coup, le problème est double :

1) pourquoi cette colonne droite va t-elle sur sa consoeur de gauche ? (a ne pas mettre dans un contexte politique XD)

(je vous mets le css de la colonne de droite de gauche et du corps, peut-être comprendrez vous mieux.

#corps
{
   min-width:380px;
   margin-left:270px; /*corps a droite du menu*/
   margin-right:10px;
   min-height: 600px; /*permet de décaler le footer en bas de page quel que soit le contenu du corps*/
   margin-top:30px;/*60*/   
   
}

#corps .colonne-gauche
{
   width:60%;
   min-width:200px;
}

#corps .colonne-droite
{
   width:25%;
   float:right;
   min-width:160px;
   
   position:absolute;
   top:322px; /*!!!!!!!!!!!!avant 460!!!!!!*/
   right:2%;
   
}

et 2) pourquoi passée une largeur de fenêtre en dessous du min-width, la scrollbar ne s'active pas correctement et le design rétrécit encore alors qu'il devrait rester fixe ?

Franchement, je sèche. T_T

Fin de l'edit

Smoking bird · Answer

tu opères un reset css ou pas?

Smoking bird · Answer

ajoute float:left à tous tes trucs auxquels tu as spécifié des valeurs en width et min-width, normalement ça fonctionne^^ et rajoute un display block dessus en cas de doute^^

dis nous si ça arrange bien ton problème^^ ou quels changements tu constates, et télécharges web developper toolbar pour firefox^^ moins mal au crâne comme ça^^

avion-f16 · Answer

Sans ton code HTML ton CSS ne veut rien dire.

bidule doodle · Answer

smoking bird => qu'est-ce qu'un reset css ? Et quels sont les avantages de la web developer toolbar ? (je dois t'avouer que j'ai un 10 pouces et je me montre assez réticente à installer des toolbar à gogo qui me prive du peu de champ de vision que j'ai... :/)

Sinon, je te remercie pour la solution proposée mais elle ne marche pas davantage. Je vais donc laisser de côté la solution en finesse et opter pour l'armement lourd. Je vais faire une page d'entrée qui demandera la résolution du client et qui fera charger mon css en fonction. (beuh. J'avais pas envie d'apprendre le javascript tout de suite. T_T)

En tout cas, merci beaucoup pour ton aide. J'aurai vraiment voulu résoudre le problème qu'en faisant du css mais malheureusement, je passerai trop de temps sur ce problème. 

L'aviateur. Même sans mon code html, mon css veut dire quelque chose. (tu ne vois pas les largeurs de mes colonnes là ? XD) Par contre si par ta phrase, tu voulais signifier qu'il ne sera pas fonctionnel, je suis d'accord. ;)

[html/css] Rétrecissement site extensible

9 réponses

Discussions similaires

Newsletters