[Résolu] Quand la (les) scrollbar(s) s'en mêle(nt)...

Bonjouuuuur

J'ai un petit bug, au fond pas très dérangeant mais il est hors de question qu'il survive...

La largeur de mon design est fixée à 1024px au moyen d'une balise "content" qui englobe tout le contenu du site :

#content {
width:1024px; }

Le problème survient lors de l'apparition de la scrollbar verticale : celle-ci entraine automatiquement l'apparition de la scrollbar horizontale pour pouvoir afficher les quelques pixels restant, cachés par la scrollbar verticale !

Je ne veux pas fixer une largeur en % (sinon c'est l'orgie chez les onglets)...

Une solution trouvée mais assez moche :

#content {
max-width:1024px;
min-width:1008px; }

+ commentaire conditionnel pour les versions d'IE <= 6

Est-ce qu'il y a plus simple ? (un display: ? un position: ? une propriété de la scrollbar ?)

Merci
Modifié par BeliG (12 Apr 2007 - 09:04)

Le plus simple? Diminuer la taille de ton conteneur.

Ce n'est pas possible non plus : l'image d'entête doit être proprement collée aux bords du site, de même pour le menu à gauche et un bouton à droite

En fixant une taille, ça ne sera jamais possible (enfin, sauf width:100% naturellement)...

Tu pourrais peut-être nous montrer un exemple de ce que tu veux faire. Il est sûrement possible de faire en sorte que certains contenus soient collés à gauche, d'autres à droite, tandis que le site reste extensible.

#content {
width:1024px; }

Ça, c'est une bêtise sans nom.

Non seulement il y a le problème de l'apparition de la scrollbar, mais aussi :
- les utilisateurs en 800x600 ;
- les utilisateurs en 1024x768 mais qui n'ont pas maximisé la fenêtre du navigateur ;
- les utilisateurs dont le système ou les réglages font qu'ils ont des bordures de plusieurs pixels pour leurs fenêtres ;
- les utilisateurs dont le système ou les réglages font qu'ils ont une barre de défilement plus large que la « moyenne » (par ailleurs difficile à déterminer) ;
- les utilisateurs en 1280x... et plus.

Et encore, là on ne parle que d'écran d'ordinateur.

Donc c'est simple :
- soit tu fais de la largeur fixe, et dans ce cas les largeurs « canoniques » sont 760px et 980px (on peut faire moins, mais mieux vaut éviter de faire plus) ;
- soit tu fais un design fluide.

Rappel pour un design fluide : mieux vaut ne pas utiliser de width: 100% potentiellement problématique. Par défaut, tout élément de type bloc (par exemple : div, h1, p, etc.) prendra toute la largeur disponible.

Une piste :

body {
	margin: 0;
	padding: 0;
}
div#content {
	margin: 0;
	max-width: 1100px;
}

(Hop, un petit max-width pour éviter que le design ne s'étende trop sur les grands/très grands écrans.)
Modifié par Florent V. (11 Apr 2007 - 12:39)

Désolé pour le retard

Donc, voici le site (intranet) en question :



Il y a en fait 3 images dans le bandeau d'entête (fixe - repeat - fixe, pour une plus grande souplesse d'affichage selon les résolutions). Mais j'viens de constater que 3 images ne servent absolument à rien si je fixe la taille du design à 1024px.

Un peu plus bas le menu "père", puis le menu "fils", et en dessous 2 blocs : le bloc "menu" à gauche et le bloc "contenu" à droite (plus d'infos => ici).

Vu le nombre d'onglets et de catégories des menus "pere" et "fils", j'vous laisse imaginer le b***** quand l'utilisateur n'est pas en 1024 sans redimensionnement...

Donc un design fluide, oui, mais non...
Modifié par BeliG (11 Apr 2007 - 16:02)

Voilà la solution que j'ai adopté :

- Une nouvelle balise "entete" de largeur minimum 950px et qui contient le bandeau d'images, le menu "pere" et le menu "fils" :

#entete{
min-width:950px; }

- Le reste du site en fluide dans la balise "content" :

#content {
margin:0;
padding:0; }

- Un commentaire conditionnel pour fixer la largeur de l'entete sous IE6 et < :

<!--[if lte IE 6]>
	
<style type="text/css">

#entete {
width: expression(document.body.clientWidth < 960? "950px" : "auto"); }

</style>	
		
<![endif]-->

Modifié par BeliG (12 Apr 2007 - 09:07)

Je place ma question dans la bonne section !
Modifié par Chum (16 Apr 2007 - 15:55)