[CSS] 3 colonnes de hauteurs égales

[fissunix]

Salut à tous,

Comment allez-vous ?

J'écris dans ce forum car je sais que certains d'entre vous sont des experts "web design" / CSS / XHTML. J'ai trouvé des éléments sur le web (alsacreation, etc...), mais aucun d'entre eux ne correspondait exactement à ce que je voulais faire.

Je cherche à réaliser un design 3 colonnes. Les colonnes de gauche et droite sont "liquid" (pas de taille). La colonne du milieu fait une taille fixe (766px). Les trois colonnes doivent faire la même hauteur et le 100% de la hauteur.

Mon problème arrive lorsque le contenu du centre est plus grand que la hauteur du navigateur, les colonnes de gauche et droite ne s'agrandissent pas (elles restent à 100%).

Ouvrez le fichier zip attaché, vous comprendrez tout de suite... Redimmensionnez la fenêtre du navigateur et scrollez vers le bas.

Si quelqu'un à une solution, je suis preneur. Merci d'avance à ceux qui jetterons un oeil.

 

[momo-fr]

Aurais-tu un site à donner en exemple de ce que tu veux faire ?

 

[Niconemo]

C'est normal :

height:100%

C'est 100% de la hauteur de l'écran, pas de la page.

La vraie question, c'est à quoi tu veux que ça ressemble à l'arrivée et est-tu certain que ça te pose un problème cette histoire ? Je suppose que tu ne veux pas garder ces couleurs. On peut donner l'impression que les colonnes à droite et à gauche font toute la hauteur simplement en jouant sur les couleurs et les images de fond(enlève le vert et tu verra).

De plus je ne comprends pas la façon don tu as organisé tout ça.
Cette CSS extrêmement complexe semble destinée à une mise en page avec :

1. Une colonne à gauche de largeur variable et contenant du texte
2. Une colonne centrale centrée et de largeur fixe et contenant du texte
3. Une colonne à droite de largeur variable et contenant du texte

Hors tu ne pourra jamais mettre du texte à droite et à gauche car ta colonne centrale est trop large (tout le monde n'as pas un écran de plus de 1200 px de large).

S'il s'agit simplement de centrer une colonne de largeur fixe de 766px, 4 ou 5 lignes de CSS auraient suffit en tout et pour tout.

As tu fait une maquette graphique de ce que tu veux faire au final ?

 

[fissunix]

Bonjour,

Tout d'abord merci pour vos réponses. Il manque peut-être un élément à la description que j'avais fait; le background n'est pas le même à gauche et à droite. J'annexe le rendu, ça sera effectivement plus facile à comprendre. Avec les salissures des 2 côtés, les repeat-x et le reste, je ne sais pas comment simplifier la CSS.

Merci d'avance.

 

[Niconemo]

OK.

On a bien fait de te demander ça.

Tu résonnes en te disant que les parties beiges seront dans les <div> de droite et de gauche et la partie noire dans la div du centre. Dans ce cas, tu as un problème : comment faire pour que le beige aille jusqu'en bas ?

Maintenant on va voir comment un autre résonne ment va considérablement simplifier le problème en arrivant au même résultat.

Imagine qu'on fasse rentrer ces ombres non pas dans les colonnes des côtés mais dans celle du centre&#8230; Hop : plus de problème !

Dans ton cas (avec la maquette) tout l'art de la chose se résume à un habile découpage des éléments du fond.

Edit: attend&#8230; je bricole un exemple rapide pour te montrer&#8230;

 

[Niconemo]

Voilà : je te laisse analyser la chose.

Comme tu peux voir, c'est on ne peut plus simple et léger.

Il m'a fallu faire quand même 4 images à partir de ton modèle à cause du grand dégradé vertical. Mais les images sont légères et je n'ai rajouté aucun élément par rapport à ta page (en fait j'en ai même enlevé).

J'ai taillé les images un peu à la hache et vite fait (d'où l'effet de rayures verticales). Tu feras mieux avec ton montage original qui devrait te permettre en outre de gagner quelques ko en optimisant bien les exports.

NB. Même si tu avais du texte à placer à droite et à gauche tu y arriverais sans problème avec ce type de mise en page jouant sur les fonds.

 

[fissunix]

Merci Niconemo !

C'est effectivement plus simple ! Cependant, les rayures ne sont pas les mêmes à gauche et à droite, d'où ma solution un peu complexe. Les rayures de gauche vont de bas en haut en partant de la droite, l'inverse pour celles de droites. Penses-tu qu'il possible d'avoir une solution si simple ?

Merci encore, et encore...

 

[Niconemo]

Ah, je n'avais pas vu que c'était des rayures : je voyais plutôt une texture genre papier Canson toilé. MAintenant que tu me le dis&#8230;

Il y aurait une solution simple voire même plus simple (sans ajouts de divs et avec moins d'images) mais pas très optimisée au niveau poids des images, qui consisterait à faire de très grands fonds centrés horizontalement qui prendraient toute la largeur quelle que soit la largeur de l'écran (plusieurs milliers de pixels).

Sinon il faudra obligatoirement ajouter des divs imbriquées&#8230;

 

[Niconemo]

Voilà l'idée.

Un peu plus lourd au niveau images (encore que ça reste acceptable).
Encore plus léger niveau CSS et HTML.
(il y a un léger décroché sous le dégradé car je ne savais pas trop jusqu'où il allait quand j'ai coupé)

J'ai ajouté :

background-attachment:fixed

qui fixe l'image de fond quand on scroll.

Ce n'est pas obligatoire du tout mais c'est pour te donner des idées

&#8230; et ça aurait peut-être pu aussi être une solution pour résoudre ton problème de hauteur à 100% dans ton exemple de départ.

 

[fissunix]

Niconemo, je me souviendrai de ton nom; un grand chef !

Je vais tester ta dernière solution, je te tiendrai au courant. Je posterai l'adresse du site une fois en ligne (samedi ou dimanche).

Encore mille merci pour tes réponses.

 

[fissunix]

Salut Niconemo,

J'ai terminé la première partie du site. Je sais qu'il y a encore beaucoup de soucis au niveau graphique, je m'occuperai de cela un peu plus tard... j'ai pas mal à faire ces temps. Je te laisse aller jeter un oeil: www.memphis-knights.ch. Merci encore pour ton coup de main.

A+

 

[Anonyme]

Salut,

Joli design. En attendant l'avis de Niconemo, j'ai modifié un peu ton code html (à toi d'adapter les css) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Chris Aaron &amp; The Memphis Knights</title>
    <link rel="stylesheet" type="text/css" href="/css/screen.css" />    <link rel="stylesheet" type="text/css" href="/css/form.css" />    <!--[if IE]>
    <script type="text/javascript" src="/js/flash.js"></script>
    <![endif]-->
    </head>

<body>

    <div id="container">
        <div id="header">
            <!--[if !IE]> -->
            <object type="application/x-shockwave-flash"
              data="/swf/mk/header_news.swf" width="766" height="280">
            <!-- <![endif]-->
            
            <!--[if IE]>
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
              codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
              width="766" height="280">
              <param name="movie" value="/swf/mk/header_news.swf" />
            <!--><!--dgx-->
              <param name="loop" value="true" />
              <param name="menu" value="false" />

              <h1 lang="en" xml:lang="en"><img src="/img/mk/entete_pas_flash.png" alt="Memphis Knights" /></h1>
              <ul class="menugauche" xml:lang="en" lang="en">
                  <li>News</li>
                <li>Events</li>
              </ul>
              <ul class="menudroite" xml:lang="en" lang="en">
                  <li>Fan zone</li>
                <li>Producer zone</li>
                <li>Media zone</li>
              </ul>
            </object>
            <!-- <![endif]-->        
        </div>
        <div id="title">
        <h2 lang="en" xml:lang="en"><img src="/img/mk/titre_news.png" alt="News"/></h2>
    </div>        
    <div id="content">
            
            <h3>Nouveau site <span class="date">3 mars 2008</span></h3>

<p>Découvrez notre &laquo; brand new &raquo; site web pour cette
nouvelle année qui s'annonce merveilleuse.</p>
<p>N'oubliez pas de nous laisser un petit message dans notre livre d'or...</p>
<p>Vous aurez la possibilité de commander des t-shirts où encore
profiter d'extraits video et audio du groupe &laquo; Chris Aaron &amp;
The Memphis Knights &raquo; d'ici quelques semaines.        </div>
        <div id="footer">

            <p>Chris Aaron &amp; <span lang="en" xml:lang="en">The Memphis Knights 2008</span></p>
        </div>
    </div>
    
</body>
</html>

Ce qui a changé :

• Indication de la langue principale du document (français) sur l'élément html. Les changements en anglais sont répercutés dans le document sur les éléments en question.
• Prévoir le contenu alternatif au cas où l'agent utilisateur n'aurait pas flash installé (iphone, ipod touch, gsm divers, consoles de jeux, pda, etc). Donc prévoir la même entête avec une image fixe et les liens du menu sous formes de deux listes. La phrase «vous devez installer le flash player pour naviguer sur ce site» est frustrante quand c'est impossible à faire.
• Meilleure utilisation de l'attribut alt des img. Le contenu de alt doit être significatif quand l'image apporte une information, sinon ce sera un alt vide (alt="").
• La hiérarchie des titres doit être continue, le plus haut niveau d'un titre est h1, le fils d'un h1 est h2, etc. Il ne peut y avoir discontinuité : c'est important pour que les moteurs de recherche puisse bien analyser tes pages et aussi pour les personnes naviguant avec une synthèse vocale (accessibilité). En effet, ces personnes disposent d'une fonction pour présenter un sommaire d'une page en lisant la hiérarchie des titres et peuvent ainsi se rendre par exemple à la fin d'un article sans parcourir tout le texte précédent.

Voilà, à toi de jouer avec les css pour l'image fixe du header et les listes pour les menus.

 

[Anonyme]

Je n'ai pas recréé les liens sur les listes, tu le feras bien toi-même.

 

[Niconemo]

Graphiquement c'est sympa.

Je suis OK pour les propositions de GloupGloup

Prévoir le contenu alternatif au cas où l'agent utilisateur n'aurait pas flash installé (iphone, ipod touch, gsm divers, consoles de jeux, pda, etc).

&#8230; Et aussi pour les non-voyants et le référencement des moteurs de recherche. On peur avoir tout le menu présent dans la page en le masquant par une méthode utilisant les CSS. L'autre solution étant d'avoir ce menu en liens html en tout petit et en pied de page.