28172 sujets

CSS et mise en forme, CSS3

Bonjour,
un personne (un professionnel) justifie sa mise en page sous forme de tableau car il prétend qu'il est impossible de, je cite :
faire des "colonnes" de même hauteur
effectuer le positionnement et/ou le centrage vertical des éléments
faire une mise en page de 100% de hauteur avec des parties fixes
Celà me paraît surprenant.
Est-ce exact ?
Bonjour chrisllers,

Il n'est pas aisé de répondre à ta question sans voir la page en ligne.
Les points que tu évoques semblent, a priori, réalisables sans tableaux, je t'invites à parcourir les tutoriels et les articles mis à disposition sur le site d'Alsacreations pour t'en convaincre Smiley cligne
Ceci étant dit, la mise en page en tableaux peut se justifier et n'est absolument pas à proscrire sans autre forme de procès.

Cdt,
Sylvain
Modifié par 6l20 (08 Jan 2009 - 11:53)
pourtant il me semblait évident qu'on puisse créer des colonnes de même hauteur, de centrer verticalement des éléments et de faire une page de 100% de hauteur avec des parties fixes.
J'ai peut-être faux.
chrisllers a écrit :
pourtant il me semblait évident qu'on puisse créer des colonnes de même hauteur, de centrer verticalement des éléments et de faire une page de 100% de hauteur avec des parties fixes.
J'ai peut-être faux.

Oui, c'est ce que j'ai écrit plus haut il me semble...
Cependant, rien n'est "évident", ni absolument irréfutable...it depend on...

@+
Bonjour chrisllers,

a écrit :
faire des "colonnes" de même hauteur
Il n'est pas possible actuellement (à cause d'Internet Explorer 6 et 7) d'obtenir des colonnes de même hauteur...

Plus tard, les navigateurs respectueux des standards domineront le monde... mais en attendant, il est possible de contourner le problème :
- passer par un javascript (qui va calculer la hauteur de la plus grande colonne puis affecter cette valeur aux autres),
- si le design le permet, utiliser la méthode des colonnes factices (simulation des différentes colonnes à travers une unique image),
- faire une mise en page qui prend toute la hauteur de la fenêtre, et jouer avec les backgrounds des conteneurs pour simuler les colonnes (plusieurs exemples ici ou ),
- utiliser un tableau de mise en page sur lequel le height:100% fonctionnera.

Plus d'infos dans la FAQ :

Comment faire des "colonnes" de même hauteur ?
Hauteur 100% à un élément


a écrit :
effectuer le positionnement et/ou le centrage vertical des éléments
Il faudrait être plus précis. Il y a des cas simples et d'autres... moins, même impossibles à implémenter proprement. Il faut alors passer par du bricolage.

La FAQ est blindée de ce côté là (en fait elle est blindée tout court). Voir les rubriques dans "Positionnement, alignement, centrage".


a écrit :
faire une mise en page de 100% de hauteur avec des parties fixes
Une mise en page qui prend toute la hauteur de la fenêtre, c'est possible (selon le design, voir tutos Page sur toute la hauteur de la fenêtre ou Design XHTML/CSS complet avec 2 colonnes de même hauteur, entre autres). Reste à savoir ce que tu entends par "parties fixes"...

Sur ce, bon ap' Smiley smile
Modifié par BeliG (08 Jan 2009 - 14:47)
BeliG a écrit :
faire des "colonnes" de même hauteur
Il n'est pas possible actuellement (avec CSS 2.x) d'obtenir des colonnes de même hauteur...
Correction: il n'est pas possible avec l'implémentation de CSS2 par Internet Explorer 6 et 7 de faire des colonnes de même hauteur.
Avec Firefox, Opera, Safari ou encore IE8, c'est parfaitement possible.

Pour rappel, display: table-cell fait partie de CSS 2 et CSS 2.1, donc ce n'est pas de l'ordre du «en attendant CSS 3». Smiley cligne
Florent V. a écrit :
Pour rappel, display: table-cell fait partie de CSS 2 et CSS 2.1, donc ce n'est pas de l'ordre du «en attendant CSS 3». Smiley cligne
Non, je t'avoue que je pensais bien à une propriété de CSS3.

A mon avis, le jour où IE6 et IE7 auront disparu de nos ordinateurs il y aura d'autres solutions que le table-cell (mais peut-être grâce à display) pour les mises en page à plusieurs colonnes.

Je me base par rapport à ça (CSS3 Advanced Layout) et ça (CSS3 Multi-column), mais peut-être suis-je à côté de la plaque Smiley sweatdrop


Florent V. a écrit :
Avec Firefox, Opera, Safari ou encore IE8, c'est parfaitement possible.
Je suis d'accord, j'ai corrigé l'erreur. Merci Smiley smile
Modifié par BeliG (08 Jan 2009 - 14:50)
BeliG a écrit :
A mon avis, le jour où IE6 et IE7 auront disparu de nos ordinateurs il y aura d'autres solutions que le table-cell (mais peut-être grâce à display) pour les mises en page à plusieurs colonnes.

Sauf qu'on aura encore dans nos tuyaux les navigateurs IE8, IE9, Firefox 5, Opera 12, Chrome 3, etc., qui ne supporteront pas encore Advanced Layout, ou pas tous, ou de manière partielle. Le multi-column arrivera sans doute avant (stabilisé dans FF4, Safari 4, Opera 11 et peut-être IE9?).

Les valeurs «avancées» de display (notamment inline-block et table/table-cell) auront donc largement leur utilité. Sans remplacer tout à fait (ni même massivement les flottants, le positionnement absolu, etc.).