18041 sujets

Questions générales et questions de débutants

Réduction de la fenêtre

Edit : voir fin de page


a écrit :

Salut,

J'ai réalisé un ptit site tout simple en html css php en suivant la plupart des tutos trouvé sur ce superbe site Smiley smile

Je viens de m'apercevoir que j'avais quand même un ptit soucis.

La structure c'est : une banniere haute un centre une banniere en bas et dans le centre un menu à gauche et le contenu sur le reste de la page ( en utilisant float : left)

J'ai fait mon site de façon qu'il s'adapte aux différentes résolutions. J'ai par contre oublié de tester ce que ça faisait si on ne l'ouvrait pas en plein écran et misère ça ne marche pas très bien Smiley bawling

Le problème est que lorsque je réduit la largeur de la fenetre mon contenu vient se mettre sous le menu! pas terrible n'est ce pas Smiley fache

Je pensais mon code relativement propre, je n'ai quasiment aucune définition de la hauteur tout se fait en fonction du contenu, pour cela j'ai utilisé l'attribut overflow : auto pour que l'éléement centre prenne la hauteur de ses éléments fils mais j'ai l'impression que du coup il me supprime mes barre de défilement

Ce que j'aimerai c'est qu'une barre de défilement apparaisse lorsque je réduit trop la fenêtre en largeur.

Et autre petite question j'ai plus ou moins le même soucis pour mes photos comme elles sont de tailles fixes lorsqu'on réduit la fenetre ça fait plus ou moins n'importe quoi. Y'a t'il une solution sans pour autant donner des attributs height et width à la balise <img> ?

Merci Smiley smile

Modifié par guiguivts (17 Aug 2007 - 14:35)
je viens de tester un truc mettre une largeur fixe sur mes bloc, ça marche pas trop mal. J'ai vu ça sur le forum qu'il fallait partir d'une résolution de 800*600 et mettre des largeurs fixes c'est une bonne solution ?
guiguivts a écrit :
Ce que j'aimerai c'est qu'une barre de défilement apparaisse lorsque je réduit trop la fenêtre en largeur.

Tu as probablement besoin de la propriété min-width. Smiley smile 
[b]HTML :[/b]
<body>
<div id="page">
...
</div>
</body>

[b]CSS :[/b]
div#page {
min-width: 750px;
}
Oui j'étais tombé la dessus aussi ça marchait bien mais sous IE 6 ça ne marchait pas vraiment donc pour pas m'embéter j'ai fait des largeurs fixes mais j'aimerai savoir si c'est "correct" ou plutôt "propre" de passer par une largeur fixe ?
guiguivts a écrit :
si c'est "correct"

« Correct », je ne sais pas trop ce que ça veut dire. Par contre, ça ne rend pas le code HTML ou CSS invalide.

guiguivts a écrit :
ou plutôt "propre" de passer par une largeur fixe ?

« Propre » ne veut pas dire grand chose non plus. On peut parler de pertinence d'une solution, de problèmes liés à une solution, etc.

En l'occurrence :
- faire un site de largeur fixe qui passera bien en 800x600 (pour cela, on tâchera de ne pas dépasser les 760px de large), ça n'est pas particulièrement problématique ;
- par contre, sur les grands et très grands écrans (1280px de large et au delà), ça sera sans doute très étroit.

C'est le deuxième point qui fait que, sauf contrainte de design forte, on préfèrera passer par un site en largeur fluide.

Est-ce que tu as lu cet article :
http://css.alsacreations.com/Tutoriels-et-articles-divers/Faire-un-site-pour-toutes-les-resolutions ?
Oui j'ai tout lu Smiley smile

J'ai commencé par faire un site "fluide" je n'avais pas de limite de taille sur mes blocs mais comme je l'ai dit dans mon premier message j'avais un problème quand je réduisais ma fenêtre le bloc "contenu" passait sous le bloc "menu" sans que je comprenne pourquoi

Est ce qu'il existe un article détaillant l'utilisation de la propriété overflow ?

bye
guiguivts a écrit :
mais comme je l'ai dit dans mon premier message j'avais un problème quand je réduisais ma fenêtre le bloc "contenu" passait sous le bloc "menu" sans que je comprenne pourquoi

Et comme je l'ai dit dans mon précédent message, un min-width permet de régler ça.

min-width ne fonctionne pas avec IE6 (par contre ça marche avec IE7). Pour ce navigateur, et via un commentaire conditionnel, on pourra :
1. le laisser tranquille et compter sur l'utilisateur pour ne pas trop réduire la largeur de sa page (si ça passe en 800x600, ça va) ;
2. utiliser un peu de Javascript, pourquoi pas via la propriété expression, pour simuler un min-width ;
3. basculer sur une largeur fixe, par exemple 760px.

Le deuxième cas est détaillé dans le tutoriel que tu as lu avec attention. Smiley cligne

guiguivts a écrit :
Est ce qu'il existe un article détaillant l'utilisation de la propriété overflow ?

Il y a toujours ceci :
http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow (en anglais)
Et un lien sur overflow et les contextes de formatage dans le tutoriel suivant : Un design fluide avec trois «colonnes», grâce au positionnement flottant.
Une ptite question toujours dans le même style : existe t-il une proriété qui oblige à ce que tous les éléments frère aient la même largeur (ou hauteur)

par exemple en utilisant la propriété float cela me permettrait d'avoir deux blocs cote à cote de la même hauteur mais sans juste spécifié de hauteur. C'est possible ?
guiguivts a écrit :
Une ptite question toujours dans le même style : existe t-il une proriété qui oblige à ce que tous les éléments frère aient la même largeur

Pour la largeur il suffit de donner une même classe aux blocs, et de spécifier une largeur donnée. Même chose pour la hauteur.

Maintenant...
- si la largeur n'est pas connue à l'avance : on pourra probablement travailler avec des largeurs en pourcentages ;
- si la hauteur n'est pas connue à l'avance : là, c'est plus compliqué.

Ce dernier point un peu plus compliqué, c'est la problématique des colonnes de même hauteur. Et des colonnes, ça se trouve où ? Dans un tableau. Voilà déjà une première réponse : utiliser un tableau de mise en forme.

Ensuite, si on ne veut pas utiliser de tableau, on pourra utiliser la technique des colonnes factices. Faire une recherche à ce sujet. Smiley smile
Salut,

Je viens de voir un ptit bug dans mon code, du à priori à la différence d'interprétation des bordure entre IE et mozilla, J'ai l'impression que IE prend les bordures comme faisant partie de la boite tandis que mozilla non vrai ou faux ? et si c'est le cas y'a une solution pour uniformiser tout ça ?

merci Smiley smile
Sujet clos
Aller à