Pb de centrage en fonction des résolutions

Bonjour,

Je dois faire un site entièrement centré (horizontalement ET verticalement) optimisé pour une résolution 1024 X 768. J'ai utilisé le code suivant pour centrer le contenu de mes pages. le codage que j'ai effectué marche nickel pour cette résolution. En revanche pour une résolution inférieur c'est la cata car le menu (situé en haut) disparait carrément. Bien que ce site n'est pas pour vocation a être vu dans une résolution inférieure à 1024, j'aimerais au moins que lorsque cela arrive, on voit toujours le menu (peu importe s'il faut utiliser des ascenceur).

Voici l'exemple : http://www.cyberformateur.com/pbcss/centrage.htm

Code :

<div id="container">
  <div id="menu">Mon menu (div id=&quot;menu&quot;)</div>
 
  <div id="contenu">&lt;div id=&quot;contenu&quot; </div>
</div>

CSS :

#container {
	position: absolute;
	height: 600px;
	width: 900px;
	left: 50%;
	top: 50%;
	margin-top: -300px;
	margin-left: -450px;
}
#menu {
	height: 100px;
	width: 900px;
	background-color: #CCCCCC;
}
#contenu {
	background-color: #FFCC00;
	height: 500px;
	width: 900px;
}

Merci pour votre aide

EmG
Modifié par emg (25 Sep 2005 - 09:03)

Règles du forum a écrit :
Merci de systématiquement baliser vos codes HTML ou CSS avec le bouton CODE approprié

merci

PS : tu peux éviter de poster un deuxième message en éditant le premier

Tout simplement car le code fait ce que tu lui demandes.
Or, dans les basses résolutions, la ou il doit être, c'est trop haut pour la résolution, et on ne le voit donc plus...
Je pense qu'il te faut:
-Ne pas centrer verticalement
-Essayer d'utiliser une autre technique que les marges négatives

(au fait, un petit conseil d'ami pour bien débuter sur le forum. Pour éviter un Raphaël, clique sur le gros bandeaux "nouveau sur le forum", en haut, et lit le. Pour éviter un Laurent Denis, il vaut mieux ne pas faire trop de design vigés verticalement.)

Une question à ce sujet:
ton design peut-il s'agrandir verticalement en cas de trop de contenu, ou pas ?
Modifié par Sylvain (25 Sep 2005 - 09:14)

Bonjour emg, et bienvenue sur ce forum,

emg a écrit :

Je dois faire un site entièrement centré (horizontalement ET verticalement) optimisé pour une résolution 1024 X 768.

Je suppose qu'il s'agit d'une contrainte imposée et non d'un choix volontaire ?
Dans ce second cas, la lecture de cette discussion serait une urgence pour prendre la mesure des diverses erreurs à la base de cette approche : http://forum.alsacreations.com/topic.php?fid=14&tid=7267

Sinon :

emg a écrit :

J'ai utilisé le code suivant pour centrer le contenu de mes pages. le codage que j'ai effectué marche nickel pour cette résolution. En revanche pour une résolution inférieur c'est la cata car le menu (situé en haut) disparait carrément.

Pas seulement le menu, mais également la partie gauche de tout le contenu. Et pas seulement en dessous d'une résolution de 1024 x 768. En 1140 x 900, par exemple, le navigateur est généralement fenêtré, avec les mêmes résultats. Et le rognage vertical demeure lorsque le navigateur occupe tout l'espace d'affichage, pour peu que l'utilisateur ait logé en haut de celui-ci des barres d'outils un peu abondantes...

emg a écrit :

Bien que ce site n'est pas pour vocation a être vu dans une résolution inférieure à 1024, j'aimerais au moins que lorsque cela arrive, on voit toujours le menu (peu importe s'il faut utiliser des ascenceur).

Le rognage vient de l'utilisation des marges négatives pour les centrages verticaux et horizontaux. cette technique est à proscrire :
- Utiliser un centrage horizontal par des marges automatiques,
- Laisser tomber le centrage vertical forcé, anti-ergonomique au possible, et se contenter de laisser faire le flux qui centrera quand la page est affichée dans les conditions prévues de hauteur et de largeur, tout en ne posant pas de problème dans les autres cas. Le résultat sera identique dans les conditions d'optimisation du site (qui seront rarement réunies, pour tout dire).
Modifié par Laurent Denis (25 Sep 2005 - 09:18)

Sylvain a écrit :
Pour éviter un Laurent Denis, il vaut mieux ne pas faire trop de design vigés horizontalement.

Trop tard

Sylvain a écrit :

-Ne pas centrer verticalement
-Essayer d'utiliser une autre technique que les marges négatives

Pour le centrage vertical je n'ai pas le pouvoir de décisions. Après s'il n'y pas d'autres solutions, je l'expliquerais au commanditaire. Et ce sera à lui d'opter !
Pour le second point je vais essayer.

Sylvain a écrit :

(au fait, un petit conseil d'ami pour bien débuter sur le forum. Pour éviter un Raphaël, clique sur le gros bandeaux "nouveau sur le forum", en haut, et lit le. Pour éviter un Laurent Denis, il vaut mieux ne pas faire trop de design vigés horizontalement.)

Je me suis déjà fait remonter les bretelles (dur dur pour un dimanche matin ).

Sylvain a écrit :

ton design peut-il s'agrandir verticalement en cas de trop de contenu, ou pas ?

Non le contenu et le design seront toujours à la même taille en terme de hauteur.

EmG

L'avantage de l'intervention de Laurent dans un topic, c'est qu'il dit généralement ce que tout le monde à la flemme de taper (tout le monde = moi), qu'il trouve pleins de remarques très pertinentes et que ca ne peut-être que bénéfique à l'interressé comme aux autres. Qui m'a appris à écrire brocolis

a écrit :

Pas seulement le menu, mais également la partie gauche de tout le contenu. Et pas seulement en dessous d'une résolution de 1024 x 768. En 1140 x 900, par exemple, le navigateur est généralement fenêtré, avec les mêmes résultats.

Ca, c'est une remarque que je me dis souvent.
Il ne faut pas réver, sur une résolution 800x600 par exemple et une page en premier plan, en hauteur, tout est bouffé par les boutons précédents, suivants, barre d'adresse...
En bas, le menu démarré, la barre des taches... (ou autre chose suivant le système d'exploitation).
Ton design s'adressera donc surtout à des 1280x800 ...
Enfin, mes fenetres sont rarement en plein écran...
Modifié par Sylvain (25 Sep 2005 - 09:22)

Je me suis fait doublé de quelques secondes sur le message au dessus on dirait...
Modifié par Sylvain (25 Sep 2005 - 09:23)

Bonjour Laurent

Laurent Denis a écrit :

Je suppose qu'il s'agit d'une contrainte imposée et non d'un choix volontaire ?

Oui il s'agit d'une contrainte imposée mais que je trouve assez légitime en terme purement graphique (du moins pour le centrage horizontal et vertical), d'autant que le site a un volume de contenu fixe. Pour ce qui est de la résolution j'aurais personnellement opté pour une résolution 800 x 600. (d'après le journal du Net il y a encore 20 % des internautes qui sont dans cette résolution !). Mais encore une fois je ne suis pas décideur sur la question.

Maintenant d'il n'y a pas de solution j'expliquerais au commanditaire qu'on ne peut pas avoir le beurre, l'argent du beurre et en plus la crémière.

EmG

La seule solution que je verrais ne marche pas pour internet explorer...

Sylvain a écrit :
La seule solution que je verrais ne marche pas pour internet explorer...

Merci quand même !!!

Ce qui est un peu énervant c'est qu'avec la bonne vieille méthode des tableaux, ca marche nikel :
http://www.cyberformateur.com/pbcss/centrage_tableau.htm

C'est évidemment mauvais en terme de standards mais terriblement efficace et simple à mettre en oeuvre.

Ca fatigue comme même un peu parfois de vouloir faire du full css et du html standard.



EmG

quand css ne peut pas faire quelque chose, et si un petit tableau de rien du tout (sans aucune propriété, je vois des cellpadding et tout, tout doit etre dans le css ) vaut mieux que 27 hacks, bidouilles, des commentaires conditionnels...
Je pense qu'il faut se sentir obligé de prendre un tableau

emg a écrit :


C'est évidemment mauvais en terme de standards mais terriblement efficace et simple à mettre en oeuvre.

Ba s'il y a un quelconque rapport entre standards, qualité, accessibilité et tout ce genre de chose, et bien à partir du moment où on envisage un site comme complètement figé dans la fenêtre du navigateur alors le mal est déjà fait. Donc un peu plus un peu moins ...

clb56 a écrit :

Ba s'il y a un quelconque rapport entre standards, qualité, accessibilité et tout ce genre de chose, et bien à partir du moment où on envisage un site comme complètement figé dans la fenêtre du navigateur alors le mal est déjà fait. Donc un peu plus un peu moins ...

Merci pour ta réponse mais elle ne m'aide pas beaucoup à résoudre mon problème technique.


EmG

Bonjour,

En 1024, il y aura rognage vertical selon que certaines barres d'outils seront ou non présentes.

C'est pour moi le cas sur FF avec la barre d'outils perso et Webdeveloper.

Tu dois expliquer qu'il n'est PAS POSSIBLE de faire autre chose qu'une "vignette" (du genre 750 x 350px à peu près) en centrage horizontal ET Vertical, car autrement il POURRA TOUJOURS y avoir rognage, c'est a dire impossibilité à tout afficher.

De plus que dire du rognage horizontal pour ceux qui ont pour habitude de surfer avec l'historique ouvert (j'en connais qui font ainsi en 800 x 600, quelle gym....).

Avec un site "vignette" il ne sera souvent pas possible d'agrandir les caractères, ce qui implique ou bien de choisir une police assez grande dès le départ pour avoir la chance que la plupart des internautes puissent lire, ou bien de décider d'emblée que 10 à 30 % (incertitude sur ce pourcentage) des internautes ne pourront rien lire, ou bien de prévoir tous les conteneurs de texte avec un overflow auto, ce qui est d'un lourdingue moche sur lequel je ne ferai pas plus de commentaires.

Si tes clients n'ont pas compris qu'un écran d'ordi n'est pas un bout de papier, qu'ils essayent de... se moucher avec !

Alors il reste une solution : un designe auto adaptatif : fluide.

emg a écrit :


Merci pour ta réponse mais elle ne m'aide pas beaucoup à résoudre mon problème technique.

Mais si justement, je viens de te dire que tu n'as aucune raison de ne pas utiliser un tableau d'une cellule pour résoudre la question. Et surtout pas en terme de "c'est mauvais par rapport aux standards". Le respect des standards participe d'une démarche de qualité, cette histoire de centrage vertical fait de toute façon sortir de cette démarche. Il n'est donc pas vraiment utile de vouloir à toute force se maintenir dans le cadre d'une utilisation stricte des css.

Celle ci reprendront toute leur pertinence quand tes clients seront plus raisonnables.
Modifié par clb56 (25 Sep 2005 - 15:59)