Centrer dans la page sans rognage

Bonjour,

est-il possible de centrer un div (qui contient l'intégralité du site) sur une page, cad horiz. et verti. sans que la partie haut et gauche ne soit rognée si l'écran est plus petit que le div ?

Si ce n'est pas très clair, allez là http://css.alsacreations.com/xmedia/exemples/centrer/csscentrer.htm et réduisez votre écran.

Merci.

Bonsoir,

A mon avis ce n'est pas possible.
Car l'exemple défini une largeur et hauteur fixe et donc pour moi la taille de ton navigateur ne devra pas être inférieur à ces valeurs

C'est ma logique mais peut-être que....

JP

Bonsoir,

L'exemple que tu cites utilises des marges négatives pour le centrage, donc ça coince forcément à un moment donné. Pour un centrage horizontal, il existe une autre technique (cf Tutos via la FAQ) qui éviterait ce "rognage', mais côté vertical, ça semble plus problématique, la seule propriété CSS le permettant (si on est pas trop puriste) n'étant pas supportée sous IE.

C'est bien ça mon problème.
Je crois que je vais donc passer par une feuille séparée pour IE avec 1 petite ligne JS. De toutes façons, je pense que chez les gens qui ont IE, le JS est assez systématiquement activé.
Merci.

Edit : finalement, même sous FF il faut passer par du JS puisque la feinte table-cell ne fonctionne pas sur un div. J'ai ajouté display:table-cell; vertical-align:middle; et j'ai même tenté un height:100% sur le body, non seulement ça n'aligne rien, mais en plus, ça supprime mon centrage horizontal !
Modifié par talvins (19 Sep 2005 - 10:51)

Bonjour,

Pourquoi centrer verticalement ? Pour l'utilisateur ? Pour le designer ?

Laurent Denis a écrit :
Bonjour,

Pourquoi centrer verticalement ? Pour l'utilisateur ? Pour le designer ?

Hihi la croisade de Laurent Denis contre le centrage vertical continue.

Le centrage vertical (à condition que le contenu soit moins haut que le viewport) permet d'aérer la page, et donc de la rendre plus agréable à consulter pour l'utilisateur moyen.

En fait pour faire vraiment bien, il ne faudrait pas véritablement le centrer mais le positionner selon le nombre d'or (soit approximativement au tiers de la hauteur disponible), là où l'oeil va le chercher en premier. (voir pour un bel exemple, les message d'erreur sous MacOS)
Modifié par Lanza (19 Sep 2005 - 12:27)

Lanza a écrit :


Hihi la croisade de Laurent Denis contre le centrage vertical continue.

Oui

Disons plus exactement une invitation à réfléchir sur ce choix, au cas par cas.

Lanza a écrit :

Le centrage vertical (à condition que le contenu soit moins haut que le viewport)

Voilà qui commence mal. Un simple agrandissement de la taille des caractères suffit à casser toute certitude à ce sujet.

Lanza a écrit :

permet d'aérer la page, et donc de la rendre plus agréable à consulter pour l'utilisateur moyen.

Ce qui peut s'exprimer en d'autres termes : conduit à réduire encore un peu plus la zone d'affichage déjà amoindrie par l'interface du navigateur.

D'autre part, l'utilisateur moyen n'existe pas. Ou plus, depuis longtemps déjà. Il est mort avec la première page web.

Lanza a écrit :

En fait pour faire vraiment bien, il ne faudrait pas véritablement le centrer mais le positionner selon le nombre d'or (soit approximativement au tiers de la surface disponible), là où l'oeil va le chercher en premier. (voir pour un bel exemple, les message d'erreur sous MacOS)

Cas-type de transposition brutale des règles de l'imprimé aux medias Web. Est-ce avisé ? Pertinent ?

D'une part, un site possédant des éléments de taille fixe (fond par exemple), réalisé pour pouvoir être vu en 800x600 (donc, on va dire dans les 750x450), va être laid positionné en 0,0.

D'autre part, je ne maitrise pas les éléments présents sur ce site (son apparence, la navigation, etc.) mais seulement la façon de le traduire sur le net.

Donc je n'ai pas trop le choix.

talvins a écrit :
D'autre part, je ne maitrise pas les éléments présents sur ce site (son apparence, la navigation, etc.) mais seulement la façon de le traduire sur le net.

Bah je dirais que c'est justement parce que tu ne maîtrises pas les éléments du site qu'il faudrait éviter ce genre de techniques qui rendent l'affichage encore plus hasardeux.
M'enfin bon, il semble que de toute façon les arguments fondés que Laurent a avancés ne vont pas te faire changer d'avis

Ce n'est pas moi qu'il aurait fallu convaincre mais les graphistes qui ont pondu la maquette.
Maintenance je cherche une solution à un problème pas des préconisations quant à l'ergonomie et aux "best pratices". Et le problème me semblait tellement trivial...

Malheureusement, je constate de plus en plus qu'en CSS, on est loin de pouvoir faire ce que l'on veut. Sans parler du temps qu'il faut pour s'adapter aux différents bugs de IE (85% du marché minimum).
Il ne faut donc pas s'étonner que les tables soient encore tant utilisées (et pour encore longtemps).

Merci d'avoir pris le temps de répondre.

talvins a écrit :

Malheureusement, je constate de plus en plus qu'en CSS, on est loin de pouvoir faire ce que l'on veut. Sans parler du temps qu'il faut pour s'adapter aux différents bugs de IE (85% du marché minimum).
Il ne faut donc pas s'étonner que les tables soient encore tant utilisées (et pour encore longtemps).

Eternel débat, dont voici les réponses :

- "en CSS, on est loin de pouvoir faire ce que l'on veut" >> Si si, les CSS permettent tout ce qu'on veut mais si les navigateurs ne les implémentent pas, ce n'est pas la faute des CSS mais du navigateur. Pour centrer verticalement, il existe une méthode simplissime et standards en CSS (display table-cell), mais voilà : IE ne reconnait pas cette méthode.

- "Sans parler du temps qu'il faut pour s'adapter aux différents bugs de IE (85% du marché minimum)" > Voilà. Tout est dit. Les moyens et les méthodes existent et fonctionnent très bien. Les navigateurs par contre ne sont pas encore à la page. Une fois de plus, l'erreur est de dire que les CSS sont déficients alors que les coupables sont les navigateurs qui ne se mettent pas aux standards.

- "Il ne faut donc pas s'étonner que les tables soient encore tant utilisées (et pour encore longtemps)." > Pas si sûr avec les lois sur l'accessibilité
Modifié par Raphael (19 Sep 2005 - 15:53)

Eternel débats dont voici mes réponses :

- "Si si, les CSS permettent tout ce qu'on veut mais si les navigateurs ne les implémentent pas" : la physique permet de voyager quasiment à la vitesse de la lumière, mais l'homme ne l'a pas encore implémenté ; d'ailleurs, "implémenter" peut être utilisé, tout comme broulifouguer -je viens de l'inventer-, mais le dico ne l'a pas encore implémenté
--> on se fout de ce que permettent les CSS tant que divers (tous à l'heure actuelle je pense) navigateurs utilisés (disons >0.1% de part de marché) ne le permettent pas !

- J'ai testé display table-cell, qui n'est autre qu'une feinte pour détourner le problème (mon div n'est pas une cellule de tableau !) mais ça ne fonctionne pas sur mon cas (j'ignore pourquoi).

- "Pas si sûr avec les lois sur l'accessibilité" : on voit que tu n'es pas un adepte du droit tel qu'il est appliqué mais, outre ceci, tu fais aussi un site pour une "cible". Si tu fais un site pour une boite de paintball (ce n'est pas mon cas), tu peux te permettre d'oublier les handicaps visuels.

Evidemment je me fais l'avocat du diable, mais même si j'admets tout à fait tes arguments, l'autre côté du miroir existe aussi.

C'est assez intéressant comme point de vue même si on retourne comme d'habitude dans un troll sans fin.

a écrit :
on se fout de ce que permettent les CSS tant que divers (tous à l'heure actuelle je pense) navigateurs utilisés (disons >0.1% de part de marché) ne le permettent pas !

Soit. C'est ton avis et tu le défends.
Comment se fait-il alors que de très grands sites mondiaux comme Macromedia, MSN, AOL, etc. (j'abrège) se permettent de passer à des sites full CSS sans tableaux ?
Ce sont de grosse sociétés commerciales. Sont-elles devenues folles ? N'ont-elles pas fait d'études de marché et de statistiques ?

J'ai ma réponse, mais tu as sans-doute la tienne.

- Display table-cell ne signifie pas que ton div est uine cellule de tableau, cela indique seulement comment ton div va se comporter.
C'est comme pour afficher un lien sous forme de bouton, il faut l'afficher en display block pour lui donner des dimensions.
C'est le même principe. Vertical-align est fait pour aligner les contenus verticalement dans un élément de type table-cell, tout bêtement.

- Pour l'accessibilité, je suis en partie d'accord avec ce que tu dis. La notion de public cible est importante.
Mais réduire l'accessibilité à des handicapés visuels est vraiment trop réducteur.
L'accessibilité facilite les choses pour tout le monde, pas seulement les handicapés d'ailleurs.
Modifié par Raphael (19 Sep 2005 - 17:11)

talvins a écrit :

- "Si si, les CSS permettent tout ce qu'on veut mais si les navigateurs ne les implémentent pas" : la physique permet de voyager quasiment à la vitesse de la lumière, mais l'homme ne l'a pas encore implémenté ; d'ailleurs, "implémenter" peut être utilisé, tout comme broulifouguer -je viens de l'inventer-, mais le dico ne l'a pas encore implémenté

Hors sujet. L'homme et ses moyens de locomotion ne sont soumis à aucune norme prévoyant ce qu'ils doivent implémenter. En revanche, les navigateurs modernes sont soumis à des normes qui ont, ces deux dernières années, déjà permis des implémentations qui ont considérablement convergées. Et Internet Explorer7 prend cette voie.

talvins a écrit :

--> on se fout de ce que permettent les CSS tant que divers (tous à l'heure actuelle je pense) navigateurs utilisés (disons >0.1% de part de marché) ne le permettent pas !

Non, pour la raison ci-dessus. Et parce que la mise en application de CSS n'est pas à faire sur le mode du tout ou rien : au fur et à mesure que les implémentations progressent dans certains navigateurs, d'autres se retrouvent en position de navigateurs "déclassés", dans lesquels un système de positionnement, ou plus généralement un design, peut se dégrader sans que ce soit obstructif.
Autrement-dit: utilisez ce que permettent les CSS2.1 telles qu'elles sont implémentées dans Firefox, Opera, Safari, etc. et prévoyez un design dégradé dans IE 6.0 Windows et IE5 Mac, tout comme vous le faites déjà pour les NS4 et IE4.

talvins a écrit :

- J'ai testé display table-cell, qui n'est autre qu'une feinte pour détourner le problème (mon div n'est pas une cellule de tableau !) mais ça ne fonctionne pas sur mon cas (j'ignore pourquoi).

Display:table et tableaux HTML n'ont aucun rapport. Le display n'agit pas sur l'élément, mais sur son mode de rendu. Il ne pose pas les problèmes d'accessibilité, d'interopérabilité et de réutilisabilité des tableaux de présentation.

Display:table n'est pas implémenté par IE. Pour Firefox et Opera, il est nécessaire de l'utiliser en reflètant la structure d'un tableau (un display:table-cell sur un élément placé dans un conteneur en display:table, avec si nécessaire un intermédiaire en display:table-row, etc)

talvins a écrit :

- "Pas si sûr avec les lois sur l'accessibilité" : on voit que tu n'es pas un adepte du droit tel qu'il est appliqué mais, outre ceci, tu fais aussi un site pour une "cible". Si tu fais un site pour une boite de paintball (ce n'est pas mon cas), tu peux te permettre d'oublier les handicaps visuels.

Ce sont deux approches différentes de la qualité et du marketing.
- l'une prendra le risque de délimiter une cible par exclusion
- l'autre prendra le risque d'un développement plus difficile en prenant comme cible le plus petit dénominateur commun à tous les publics potentiels. L'accessibilité est un bon PPDN.

talvins a écrit :

Evidemment je me fais l'avocat du diable, mais même si j'admets tout à fait tes arguments, l'autre côté du miroir existe aussi.

oui.

Du moment que personne ne sort d'argument stupide ou ne se dirige vers le point Goldwin, le troll n'a pas raison d'être. Je trouve d'ailleurs que l'on utilise bien trop vite cet argument de troll dans les forums.

Mais revenons à nos bestioles.
Je n'affirme en aucun cas qu'il faille rester à de la table ; j'ai moi-même était converti il y a peu après des années de sites full table.
Après avoir vu css garden, on ne peut que se la fermer si on vient du monde Table

Par contre, je persiste à dire que pour la plupart des mises en pages, l'utilisation de tables restent plus simple car on centre ce qu'on veut partout comme on veut et on utilise des % qui fonctionne partout (j'en ai fait des années). Certes, ce n'est pas fait pour ça et je n'en fais plus, mais je vois encore très souvent des sites pro, des cms, des sites de grosses boites de créations de sites, tout en table.

Et si IE 7 reste aussi pourri que IE 6, ça ne va pas bcp changer.

Le problème, c'est que pour dev un site parfait CSS, 508, AAA et je ne sais quoi d'autre, il faut du temps. Du temps que n'est pas forcément -jamais ?- prêt à mettre le client.
Quant, en plus, il veut -exige ?- un graphisme très particulier, ça limite*. Je peux lui dire d'aller voir ailleurs... mais je peux aussi avoir envie de manger
Mais je rêve du client parfait qui me paye grassement pour faire un site hyper accessible.

Par contre aurais-tu un exemple de site centrer avec display:table-cell ? Car je n'arrive pas à le faire fonctionner.

*ah et puis il veut un référencement parfait alors qu'il a 3 paragraphes de texte sur son site, une navigation en boutons-images, le tout sur un sujet banal

Laurent Denis a écrit :


Hors sujet. L'homme et ses moyens de locomotion ne sont soumis à aucune norme prévoyant ce qu'ils doivent implémenter. En revanche, les navigateurs modernes sont soumis à des normes qui ont, ces deux dernières années, déjà permis des implémentations qui ont considérablement convergées. Et Internet Explorer7 prend cette voie.

Bon,bon mais la langue française est normée par contre On peut peut-être garder mon exemple "implementer" alors

Concernant display:table-cell, ça semble donc bien complexe à mettre en place.

Pour le reste, voir post précédent.

talvins a écrit :
Par contre, je persiste à dire que pour la plupart des mises en pages, l'utilisation de tables restent plus simple car on centre ce qu'on veut partout comme on veut et on utilise des % qui fonctionne partout (j'en ai fait des années).

Pour faire plus simple, il y'a exactement deux cas de figures où une mise en page en CSS est rendue complexe à réaliser (à cause des navigateurs obsolètes et non des CSS, nous sommes bien d'accord) :
- les mises en page centrées verticalement
- les mises en pages avec "colonnes" de même hauteur.

A ma connaissance c'est tout... et vivement IE7 et toutes ses promesses envers les standards !

a écrit :
Le problème, c'est que pour dev un site parfait CSS, 508, AAA et je ne sais quoi d'autre, il faut du temps.

Oui, c'est pourquoi la conception web professionnelle devrait être faite par des professionnels.

a écrit :
Par contre aurais-tu un exemple de site centrer avec display:table-cell ? Car je n'arrive pas à le faire fonctionner.

Oui voilà un exemple simple :

div {
width: 300px;
height: 200px;
border: 1px solid black;
display: table-cell;
vertical-align: middle;
}

<div>
<p>bloc centré verticalement</p>
</div>

Fonctionne donc sur les navigateurs standards et non sur IE.
Modifié par Raphael (20 Sep 2005 - 09:32)

Raphael a écrit :

Pour faire plus simple, il y'a exactement deux cas de figures où une mise en page en CSS est rendue complexe à réaliser (à cause des navigateurs obsolètes et non des CSS, nous sommes bien d'accord) :
- les mises en page centrées verticalement
- les mises en pages avec "colonnes" de même hauteur.

Euh... oui si on oublie tous les hacks qu'il faut mettre partout pour :
- avoir les padding et margin comme il faut
- avoir tjr les mêmes %
- ne pas avoir de décalage magique de qq pixels
- ...
- ...
tout ça (et les autres), de façon identique sur les <> navigateurs.

Toujours à cause des navigateurs, certes, mais ceux-ci gérent malheureusement mieux les tables, et ce depuis longtemps.

a écrit :

A ma connaissance c'est tout... et vivement IE7 et toutes ses promesses envers les standards !

Moui... j'y crois pas trop. Je n'ai même pas lu ces fameuses promesses.
Alors CSS3 ? Ou même déjà les 2.1 ? png ? De toutes façons, il faudrait attendre quelques années avant que le taux de IE 6 passe en-dessous de 10% j'imagine (surtout s'ils mettent IE6 sur le programme genuine MS !)

a écrit :
Oui, c'est pourquoi la conception web professionnelle devrait être faite par des professionnels.

Bof, c'est une considération que j'ai dépassé depuis quelques temps déjà.
Je fais des sites, je suis pro et je n'ai aucune problème la-dessus qd je vois la production locale ou nationale de la plupart des boites spécialisées (moi ce n'est qu'une activité parmi d'autre) : sites tout en flash, sites hideux, sites en table...
Et donc le problème est le même, le professionalisme n'a rien à voir là-dedans ! Il faut apprendre à être un peu humble parfois.
Et lorsqu'un client veut qq chose de précis, ce serait mentir que de lui dire que c'est impossible. Donc on fait.

Et qd le site est composé de textes en image, de boutons en images, on fait en sorte de placer du texte en-dessous, sans même en parler au client -puisqu'il s'en fout- mais on ne va pas jusqu'à lui dire 'désolé non, il faudra faire avec du Times et du Helvetica mon pauvre'.
Et s'il veut un peu de flash, eh bien au fait un sitemap, tjr sans en parler au client. On le convainc juste qu'un site en 100%, c'est un peu lourd parfois (et ça l'a toujours été dans ce qu'on m'a montré).

a écrit :
Fonctionne donc sur les navigateurs standards et non sur IE.

Bon, je vais essayer de nouveau. Merci.

talvins a écrit :


Euh... oui si on oublie tous les hacks qu'il faut mettre partout pour :
- avoir les padding et margin comme il faut
- avoir tjr les mêmes %
- ne pas avoir de décalage magique de qq pixels
- ...
- ...
tout ça (et les autres), de façon identique sur les <> navigateurs.

Là on part dans des considérations qui n'ont plus de rapport avec les CSS :
- Oui chaque navigateur se comporte différemment, mais c'est une généralité et n'est pas spécifique à CSS. Par exemple chaque navigateur donne des marges par défaut différentes aux balises ou aux bords du document.
Cela a toujours été : ces différences existaient déjà du temps des mises en page en tableaux.
- Idem pour les problèmes de % : ce sont des bugs navigateurs qui n'ont pas de rapport avec les CSS.

Donc je parle bien de mises en page CSS globale et non de différences de navigateurs sans rapport avec CSS.
Modifié par Raphael (20 Sep 2005 - 11:23)

talvins a écrit :

Malheureusement, je constate de plus en plus qu'en CSS, on est loin de pouvoir faire ce que l'on veut.

Penser que la réalité nous accorde des circonstances où on peut faire tout ce que l'on veut est un pur fantasme.

Il y a toujours des contraintes et ce n'est pas en restant à l'extérieure d'un système à se plaindre ou à ironiser que l'on peut le comprendre, s'y adapter et finalement trouver des solutions voire faire preuve de créativité.

Les <table> non plus ne permettent pas de faire tout ce que l'on "veut". Il suffit de "vouloir" quelque chose d'infaisable.

A part ça, ceci répond-il à ta question?

++
Modifié par clb56 (20 Sep 2005 - 12:33)