[html/css] Rétrecissement site extensible
bidule doodle
Messages postés
34
Date d'inscription
Statut
Membre
Dernière intervention
-
Smoking bird Messages postés 870 Date d'inscription Statut Membre Dernière intervention -
Smoking bird Messages postés 870 Date d'inscription Statut Membre Dernière intervention -
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 :
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 ?
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 ?
A voir également:
- [html/css] Rétrecissement site extensible
- Site de telechargement - Accueil - Outils
- Site comme coco - Accueil - Réseaux sociaux
- Quel site remplace coco - Accueil - Réseaux sociaux
- Site x - Guide
- Site pour vendre des objets d'occasion - Guide
9 réponses
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^^
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^^
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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.
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.
(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
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.
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
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
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^^
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^^
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. ;)
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. ;)
un reset css est une technique css qui permet de rétablir tous les css de tous les éléments à des valeurs par défaut clairement définies par l'auteur de la page, avant qu'il ne fasse ses 'vrais css' à côté :). En gros, c'est comme un peintre qui vérifie que ses pinceaux n'ont pas de poils qui dépassent, et qui coupe ceux qui débordent^^.
* {
float:left;
display:block;
width:auto;
min-width:120px;
height:auto;
min-height:inherit;
list-style-type:none;
border:1px solid #502020;
}
C'est un exemple très grossier, mettre ça tout en haut de ta première page de css t'assure que tous les éléments que tu bidouilleras auront de base:
-un flottement à gauche,
-un affichage type block
-une largeur automatique, avec un minimum de 120px
-une hauteur automatique avec un minimum égal à l'élément parent
-pas de style de puce
-un bord solide de 1px de large tirant plus sur le rouge^^.
Evidemment, ce reset là n'est qu'un exemple et n'est pas propre, il n'a pas beaucoup de sens puisqu'il s'adresse à tous les éléments, et que tous les éléments n'ont pas forcément ces propriétés, ou besoin de ces propriétés. Le reset css est une technique pour s'assurer de la "pureté" des css qu'on écrit, et qui protège également des éventuels styles survenus de nulle part (navigateur ou utilisateur par exemple^^). Très pratique^^.
Pas de bol pour le dix pouces :D (ni pour le windows xp encore installé d'ailleurs^^). La web developper toolbar pour firefox te permettra d'éditer en direct tes css, le résultat s'affichant sans rechargement de page ni upload de fichier sur le serveur ou quoi que ce soit. Pouvoir éditer des css en live est très confortable quand on est confronté à un problème inextricable^^ on perd beaucoup moins de temps et on prend plus de libertés :p :), franchement, essais la, et si elle ne bouffe pas trop ta lisibilité, tu peux l'adopter :D
Pour ton armement 'lourd', je t'invite à laisser tomber: il existe pas mal de résolutions différentes, et proposer un css pour chacune d'entre elles est bien plus lourd à mettre en place comparé à la résolution via de bons css de ton problème^^. Si ton site est online, donne moi l'adresse que j'y jette un oeil^^. De plus, en tant qu'utilisateur je trouverais ça rebutant de me prendre un panneau de demande de résolution à chaque accès au site :)
* {
float:left;
display:block;
width:auto;
min-width:120px;
height:auto;
min-height:inherit;
list-style-type:none;
border:1px solid #502020;
}
C'est un exemple très grossier, mettre ça tout en haut de ta première page de css t'assure que tous les éléments que tu bidouilleras auront de base:
-un flottement à gauche,
-un affichage type block
-une largeur automatique, avec un minimum de 120px
-une hauteur automatique avec un minimum égal à l'élément parent
-pas de style de puce
-un bord solide de 1px de large tirant plus sur le rouge^^.
Evidemment, ce reset là n'est qu'un exemple et n'est pas propre, il n'a pas beaucoup de sens puisqu'il s'adresse à tous les éléments, et que tous les éléments n'ont pas forcément ces propriétés, ou besoin de ces propriétés. Le reset css est une technique pour s'assurer de la "pureté" des css qu'on écrit, et qui protège également des éventuels styles survenus de nulle part (navigateur ou utilisateur par exemple^^). Très pratique^^.
Pas de bol pour le dix pouces :D (ni pour le windows xp encore installé d'ailleurs^^). La web developper toolbar pour firefox te permettra d'éditer en direct tes css, le résultat s'affichant sans rechargement de page ni upload de fichier sur le serveur ou quoi que ce soit. Pouvoir éditer des css en live est très confortable quand on est confronté à un problème inextricable^^ on perd beaucoup moins de temps et on prend plus de libertés :p :), franchement, essais la, et si elle ne bouffe pas trop ta lisibilité, tu peux l'adopter :D
Pour ton armement 'lourd', je t'invite à laisser tomber: il existe pas mal de résolutions différentes, et proposer un css pour chacune d'entre elles est bien plus lourd à mettre en place comparé à la résolution via de bons css de ton problème^^. Si ton site est online, donne moi l'adresse que j'y jette un oeil^^. De plus, en tant qu'utilisateur je trouverais ça rebutant de me prendre un panneau de demande de résolution à chaque accès au site :)