18073 sujets

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

Pb reduction fenetre sur container centré

Bonjour,

j'ai un soucis avec une construction du type modele9 des gabarits de mise en page en absolu avec un container comprenant : header, gauche, centre, droit, footer.
-> une largeur fixe 1000px du container, centré avec méthode une certains trouvent barbare du margin négatif fonctionne bien en 1024 et au-dela, mais en réduisant la fenêtre à 800 par ex, le menu gauche est tronqué puisque le container reste centré.

Quelqu'un peut-il m'aiguiller sur une solution qui permette de repasser en aligné left quand la fenetre est < à la largeur du container


#conteneur {
position: absolute;
width: 1000px;
left: 50%;
margin-left: -500px;
background-color:#60737B;
}

Merci d'avance Smiley smile
Modifié par alanpixel (05 Mar 2006 - 11:59)
Administrateur
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Bonjour !

Quelques petits éclaircissements, please :

- pourquoi imposer une largeur de 1000px au conteneur ? Quel est le but ?
- Quel est le comportement recherché pour le site ? largeur fluide jusqu'à un maximum de 1000px de large, ou site centré de 770px de large, ou autre ?

Si le but est de réaliser un site centré avec une largeur fixe, il vaut mieux limiter cette largeur à 770px (ou un petit peu plus, mais vraiment pas beaucoup Smiley murf ) pour que l'affichage ne nécessite pas de scroll horizontal en 800*600. Et dans ce cas, il est recommandé de réalisé le "centrage" du site en utilisant 
margin: 0 auto


Les marges négatives rendent une partie du site innaccessible quand la résolution est trop faible C'est pour ça qu'on les qualifie de "barbares", comme tu dis Smiley cligne . Elles "effacent" une partie du contenu de la fenêtre lorsque le redimensionnement ne leur plaît pas. Avec "margin: auto", au pire, le visiteur devra se servir de la barre de scroll horizontal (ça existe encore, les écrans avec une résolution de 640px de large, si si), mais il aura accès au contenu quand même.

D'autre part, si 770px n'est pas un espace suffisant pour la construction de ton site, rien n'interdit de passer à 1000px de large. C'est simplement une recommandation, afin que le site soit confortable sous toutes les résolutions à partir de 800*600px, qui est encore une des résolutions les plus courantes (la 2e derrière 1024*768, si je ne m'abuse).

Si tu passes à une largeur de 1000px, tous les visiteurs en 800*600px auront donc forcément une barre de scroll horizontale. A toi de penser la disposition des éléments du site pour que ça reste gérable. Par exemple, en évitant que la lecture du contenu de la page nécéssite une utilisation répétée du scroll horizontal (tu vois ce que je veux dire ? Lire le début de la ligne, déplacer la barre de scroll pour pouvoir lire la fin, puis revenir au début de la ligne suivante, et ainsi de suite, l'enfer Smiley fache ).

Voilà voilà .. désolé si j'ai un peu digressé Smiley smile
Modifié par Sopo (05 Mar 2006 - 12:33)
Oui, merci Sopo Smiley biggrin

l'idée est d'avoir un site de 1000px de largeur du conteneur, et qui soit centré (parce que ça me semble plus joli) pour les utilisateurs en 1024 ou plus,
et qui soit aligné gauche en dessous de 1000 pour que les utilisateurs 800x600 ou inférieur ne soit pas pénalisé,
avec comme tu l'indiques, j'aurais le menu gauche + contenu centre =780, ce qui fait que nos utilisateurs 800x600 n'ont pas à scroller pour l'info utile gauche+centre.

Un site comme boursorama obtient ce résultat(sans que j'ai compris comment), d'autres sont alignés gauche.
Si je supprime le centrage, et le remplace par un margin auto, cela fonctionne dans tous les cas mais reste aligné gauche

#conteneur {
position: absolute;
width: 1000px;
<!-- left: 50%;
margin-left: -500px;  -->
margin: 0 auto
background-color:#60737B;
}

... s'il était possible d'avoir les 2 : centrage >1000 et gauche en dessous Smiley cligne

On a effectivement 19% des utilisateurs en 800x600 ou inférieur, 57% en 1024, le reste est réparti au-dela de 1024
Smiley smile
Sujet clos
Aller à