IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Publications (X)HTML et CSS Discussion :

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


Sujet :

Publications (X)HTML et CSS

  1. #1
    Rédacteur

    Avatar de Torgar
    Homme Profil pro
    Développeur Web
    Inscrit en
    août 2007
    Messages
    2 335
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : août 2007
    Messages : 2 335
    Points : 8 097
    Points
    8 097
    Par défaut Créer des colonnes de même hauteur en CSS
    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
    Je ne suis pas schizophrène, nous sommes unanime !!!

    ► Pensez à la balise code et au CODE HTML GENERE !!!!
    ► Au si c'est le cas et au à ceux qui vous ont aidé.
    Vous souhaitez participer aux rubriques CSS et (X)HTML ? Contactez-nous !

    Créer des colonnes de même hauteur en CSS
    Glossaire CSS
    Les bordures en CSS3
    Les transitions en CSS3

  2. #2
    Membre émérite
    Avatar de Candygirl
    Femme Profil pro
    Inscrit en
    juillet 2006
    Messages
    1 912
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 49
    Localisation : Suisse

    Informations forums :
    Inscription : juillet 2006
    Messages : 1 912
    Points : 2 907
    Points
    2 907
    Par défaut
    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.
    Les bons réflexes:
    • avant de poser une question:
      règles | faq | tutoriels | recherche
    • clarté, politesse, vocabulaire et orthographe soignés = efficacité
    • remercier ceux qui ont pris le temps d'aider et si c'est le cas

  3. #3
    Rédacteur

    Avatar de Torgar
    Homme Profil pro
    Développeur Web
    Inscrit en
    août 2007
    Messages
    2 335
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : août 2007
    Messages : 2 335
    Points : 8 097
    Points
    8 097
    Par défaut
    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.
    Je ne suis pas schizophrène, nous sommes unanime !!!

    ► Pensez à la balise code et au CODE HTML GENERE !!!!
    ► Au si c'est le cas et au à ceux qui vous ont aidé.
    Vous souhaitez participer aux rubriques CSS et (X)HTML ? Contactez-nous !

    Créer des colonnes de même hauteur en CSS
    Glossaire CSS
    Les bordures en CSS3
    Les transitions en CSS3

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 760
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 760
    Points : 40 037
    Points
    40 037
    Par défaut
    Bonjour,
    je mettais juré de lire cette article au plus tôt, c'est fait

    Citation Envoyé par Candygirl
    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.


    Citation Envoyé par Torgar
    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.

  5. #5
    Membre émérite Avatar de Erwan31
    Profil pro
    Inscrit en
    février 2008
    Messages
    2 177
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : février 2008
    Messages : 2 177
    Points : 2 395
    Points
    2 395
    Par défaut
    Bonjour,
    Citation Envoyé par Torgar Voir le message
    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).

  6. #6
    Membre émérite Avatar de Erwan31
    Profil pro
    Inscrit en
    février 2008
    Messages
    2 177
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : février 2008
    Messages : 2 177
    Points : 2 395
    Points
    2 395
    Par défaut
    Aucune réaction de l'auteur?

  7. #7
    Rédacteur

    Avatar de Torgar
    Homme Profil pro
    Développeur Web
    Inscrit en
    août 2007
    Messages
    2 335
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : août 2007
    Messages : 2 335
    Points : 8 097
    Points
    8 097
    Par défaut
    Citation Envoyé par Erwan31 Voir le message
    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.
    Je ne suis pas schizophrène, nous sommes unanime !!!

    ► Pensez à la balise code et au CODE HTML GENERE !!!!
    ► Au si c'est le cas et au à ceux qui vous ont aidé.
    Vous souhaitez participer aux rubriques CSS et (X)HTML ? Contactez-nous !

    Créer des colonnes de même hauteur en CSS
    Glossaire CSS
    Les bordures en CSS3
    Les transitions en CSS3

  8. #8
    Membre émérite Avatar de Erwan31
    Profil pro
    Inscrit en
    février 2008
    Messages
    2 177
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : février 2008
    Messages : 2 177
    Points : 2 395
    Points
    2 395
    Par défaut
    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

Discussions similaires

  1. Créer des colonnes de même hauteur en CSS
    Par Torgar dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 28/08/2012, 12h04
  2. Réponses: 4
    Dernier message: 18/12/2007, 11h56
  3. Colonnes de même hauteur avec bordures : possible sans tableau ?
    Par EnidGwa dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 17/10/2007, 16h18
  4. Réponses: 2
    Dernier message: 17/11/2006, 08h29
  5. Réponses: 1
    Dernier message: 22/12/2005, 10h03

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo