Discussion :

[Torgar]

Bonjour,

Je vous propose un article sur les colonnes factices en CSS : Créer des colonnes de même hauteur en CSS

N'hésitez pas à faire part de vos remarques, commentaires ou propositions d'améliorations !

Créer des colonnes de même hauteur en CSS

[Candygirl]

Hello,

Quelques remarques après survol:

1. Il reste quelques traces des relectures dans le texte il me semble.
   
   
2. Je ne trouve pas le titre de l'article "colonnes factices" adéquat. Pour moi, les colonnes factices désignent la technique de l'image de fond, qui donne l'illusion d'une colonne se poursuivant jusqu'en bas, sur un conteneur principal.
   Là, les "colonnes" existent bel et bien (je veux dire par là que les conteneur respectifs descendent effectivement jusqu'au footer) ce qui permet justement de jouer avec les couleurs de fond.
   
   
3. Une petite erreur s'est glissée dans ton code. Tu donnes comme nom d'id "slidebar" mais dans le css tu fais appel à sidebar.
   
   
4. le lien http://css.britoweb.info/post/Creer-...hauteur-en-CSS au bas me semble mort ?
   
   

5. Le but ici est de déclarer nos trois <div> comme étant les cellules d'un tableau. En effet, vous avez déjà pu remarquer que lorsque l'on utilise un tableau HTML, les cellules de chaque ligne prennent la hauteur de la cellule la plus grande.
   
   Les <div>, elles, ne fonctionnent pas de la même manière, puisque leurs dimensions s'adaptent aussi bien en largeur, qu'en hauteur, suivant le contenu qu'elles encadrent.

   Je trouve cette explication assez maladroite. Le comportement par défaut d'un élément div, en display:block, n'adapte pas son width en fonction du contenu mais occupe tout l'espace à disposition du parent.
   
   De même, plus loin, tu parles de "transformer" un div en élément flottant. Mais un div reste un div, soit un élément html. On lui attribue une propriété qui modifie le rendu visuel, mais il ne se "transforme" pas.
   
   
6. Concernant l'astuce pour IE, je ne suis pas convaincue de l'explication concernant le overflow:hidden. Son réel intérêt est de masquer le dépassement (la fonction principale de cette propriété). Toute la dynamique entre les flottants et le contexte de formatage n'est pas la raison première de sa présence ici.
   
   Plutôt que de faire un css spécial IE6, j'attribuerais un width de 100% au #container pour lui donner le layout, si cela est vraiment nécessaire ?
   
   A noter que, avec cette méthode, vu la gestion des arrondis avec les % sur IE6 et IE7, on se retrouve avec la dernière colonne en bas selon la largeur de la fenêtre de visualisation.

Edit:

* On applique une marge interne positive et une marge externe négative égales sur les blocs de façon à ce qu'ils aient la même hauteur.

Les blocs n'auront pas la même hauteur simplement on les allonge au maximum pour être sûr qu'il aient au moins la hauteur du contenu du plus haut. Ensuite le margin négatif de la hauteur du padding, associé à l'overflow.hidden , permet de cacher tout ce qui dépasse la hauteur du plus grand.

[Torgar]

Salut,

1 - Corrigé.
2 - Je me renseignerai si la possibilité pour changer le titre de cet article. Peut-être que : "Créer des colonnes de même hauteur avec CSS" serait plus approprié ?
3 - Corrigé.
4 - En effet, il ne l'était pas hier soir... je mets en lien cassé en attendant de voir si ça revient.
5 - Explications revues et corrigées.
6 - Je reverrai cette partie de l'explication. Je t'invite à me contacter par MP ou dans le forum adéquat pour en parler si tu le souhaites.

Merci pour ta relecture.

[NoSmoking]

Bonjour,
je mettais juré de lire cette article au plus tôt, c'est fait

Je ne trouve pas le titre de l'article "colonnes factices" adéquat. Pour moi, les colonnes factices désignent la technique de l'image de fond, qui donne l'illusion d'une colonne se poursuivant jusqu'en bas, sur un conteneur principal.

...je partage cet avis, je parlerais plutôt de mise en page multicolore de même hauteur.

Les <div>, elles, ne fonctionnent pas de la même manière quand elles sont de type block, valeur par défaut, puisque leurs dimensions s'adaptent aussi bien en largeur, qu'en hauteur, suivant le contenu qu'elles encadrent. En revanche, lorsque les <div> sont de type inline, la largeur occupe tout l'espace donné par l'élément parent.

...il semblerait qu'il y ait eu inversion dans le rendu de l'affichage entre block et inline.


J'aurais plutôt mis un doctype du type <!doctype html>, c'est plus dans l'air du temps.

pour cet article.

[Erwan31]

Bonjour,

Salut,
1 - Corrigé.
Peut-être que : "Créer des colonnes de même hauteur avec CSS" serait plus approprié ?

Oui clairement. Je suis d'accord avec toutes les remarques de CandyGirl, il y a des erreurs qu'il faudrait corriger assez rapidement, surtout sur le comportement par défaut d'une div (il y a inversion dans la définition du comportement).

Autre erreur :

Pour IE 7 il faut jongler un petit peu car il ne comprend table-cell que pour les éléments de type inline.

les valeurs table-x ne sont PAS comprise par IE7- tout court !
Ne pas confondre avec les éléments inline qui dotés du haslayout, se comportent comme des éléments de display: inline-block (et peuvent donc être dimensionnés)

Pour la prise en compte des éléments flottants par le parent, mieux vaut éviter quand on le peut de passer par un overflow:hidden pour d'éventuels problèmes d'accessibilité (contenu débordant le div masqué en cas de zoom texte dans certains cas de figure).

Mieux vaut passer par cette méthode : http://nicolasgallagher.com/micro-clearfix-hack/

Pour info il existe un fichier HTC qui permet d'obtenir le même comportement sur IE7- : http://webcache.googleusercontent.co...=imvns&strip=1
même si ce n'est pas idéal (activation du JS nécessaire, lourdeur).


Autres remarques :

Display permet d'indiquer le mode de rendu d'un élément HTML. Les valeurs les plus couramment utilisées sont :

Mieux vaut parler de type de rendu, le mode de rendu faisant plutôt référence aux différents modes (Quirks, standard et almost-standard) selon le doctype déclaré ou sa présence.

none : pour masquer l'élément ;
block : placé sur la même ligne verticale ;
inline : placé sur la même ligne horizontale.

Ça manque un peu de précision:

> none masque l'élément mais retire également l'élément de la structure de formatage contrairement à visibility:hidden qui ne fait que masquer l'élément.

> la valeur block génère une boite de bloc (avec un saut de ligne avec te après l'élément)

> la valeur inline génère une boîte en ligne (sans sauts de ligne)


Pour forcer la largeur de la "cellule" à se référer à celle déclarée et non pas son contenu (comportement normal d'une cellule), mieux vaut décaler
table-layout: fixed sur l'élément parent (dont la valeur calculée du display passe à table de manière transparente si ses enfants sont de type table-cell).

[Erwan31]

Aucune réaction de l'auteur?

[Torgar]

Aucune réaction de l'auteur?

Si si ! La grande partie des modifications proposées ont été acceptées et mises en place.

Mon manque de réponse dans ce fil n'est pas preuve d'une inaction

J'attendais juste d'avoir fini de mettre en place les remarques pour répondre.

[Erwan31]

Ok je vois, merci d'avoir repris certaines de mes remarques.
Ceci dit ce n'était peut-être pas nécessaire de reprendre texto la définition que je donne des type de rendu (sauf les 2 derniers peut-être).
(le contrairement à visibility: hidden qui ne fait que masquer l'élément) c'était juste pour info