Tutoriel création d'une page à trois colonnes!

Bonjour à tous,

J'ai beaucoup appris sur ce forum (et réglé pas mal de problèmes en regardant ceux des autres.) Ce post aujourd'hui n'est pas lié à un problème particulier, juste une idée qui me trottait dans le petit coin de ma tête réservé à cet effet.

Je me réfère souvent à ce tuturiel :
Création d'un design à deux colonnes

Il m'a énormément servi, j'en remercie l'auteur au passage (pas de noms affiché, ni dans la source mais un grand merci quand même). J'ai finis par me faire mon propre gabarit 2 colonnes.

Aujourd'hui, j me demande si il ne serait pas interéssat de développer un tutoriel 3 colonnes! Je me porte volontaire pour travailler dessus! Mais (oui il y un mais), je n'arrive pas à me décidé sur la méthode! (certains ont encore recours au tableaux pour intégrer trois colonnes, pour ma part j'en créé 2 et j'en redivise une en deux.)

Ma méthode aux ce qu'elle vaux mais elle n'est pas parfaite. Si quelqu'un a envie de me donner un coup de main pour ça! Ou me conseiller une autre méthode c'est avec grand plaisir!

Bonne journée!

Pavel


Dsl je navais pas vu mon erreur, trop habitué au "bbcode" dde certains autres forums! Modifié par pablo77 (27 Sep 2007 - 14:14)

Hello,

Ton URL ne fonctionne malheureusement pas, tu l'as rédigée sans tenir compte des explications données dans l'Aide du forum et dans la FAQ

Je te suggère vivement d'éditer ton message afin de corriger ce problème.

Erreur réparé!

Hello,

Pourquoi pas un tutoriel sur une mise en page complète sur trois colonnes. Cependant, je signale au passage ce tutoriel sur une mise en page à trois colonnes avec les flottants.

Niveau technique, s'agirait-il de proposer une des deux techniques décrites dans ce tutoriel, ou bien d'en utiliser une différente? Si c'est une méthode différente ou une variation, le mieux serait peut-être de la présenter ici (aspect technique uniquement), et on verra s'il faut l'amender, si ça vaut la peine de construire un tutoriel complet autour, etc.

Bonjour,

La technique que je propose est en fait un peu différente, il s'agit démuler trois colonnes en utilisant une mise en page deux colonnes. Finalement ça suffit largement pour la mode des mises en page 4 colonnes que l'on voit actuellement (menu et contenu dans les deux mremière, puis 2 colonnes de plugins divers et variés qui ne sont d'ailleurs pas très utiles.)

En clair :

<!-- Nous sommes dans une div #container-->
<div id="left">
  <div id="sidebar">
     <!-- Colonne de menu par exemple -->
  </div>
  <div id="content">
     <!-- Colonne de contenu comme son nom l'indique -->
  </div>
</div>
<div id="right"> 
   <!-- Colonne de "trucs" -->
</div>

En css, ça donne ça :

#left{
  float:left;
  width:500px;
}
#right{
  float:right;
  width:200px;
}
#sidebar{
  float:left;
  width:150px;
}
#content{
  float:right;
  width:350px;
}

C'est une méthode que j'ai bricolé un par défaut et par hasard. L'utilisation des trois colonnes n'est pas systématique non plus (faut bien y mettre quelque chose hein;).

Bon je pense que cette méthode en vaux une autre. Votre avis?

pablo77 a écrit :
Bon je pense que cette méthode en vaux une autre. Votre avis?

Elle a un avantage intéressant: elle permet de garder un ordre d'affichage qui correspond à l'ordre du flux (gauche, centre, droite) tandis qu'avec trois blocs au même niveau on est obligé de placer les colonnes latérales d'abord (gauche, droite, centre... ou droite, gauche, centre).

Elle a par contre un inconvénient: l'utilisation de la propriété float sur tous les éléments. On a ici quatre éléments, et on pourrait se contenter de deux flottants uniquement (et réutiliser soit une marge latérale, soit un contexte de formatage).

Théoriquement, utiliser N flottants pour placer pile poile N blocs côte-à-côte ne devrait pas être un problème. Dans la pratique, c'est source de problèmes d'affichage (blocs qui «passent à la ligne»), notamment avec IE6.

Je garderais donc l'avantage en supprimant l'inconvénient.
On pourrait même faire un tutoriel sur un design «dynamique», avec par exemple une colonne de droite ou de gauche qui ne serait pas systématiquement présente à l'écran... et un bloc central qui s'adapterait en fonction. À coup de contexte de formatage, bien sûr.

En fait, ce qui m'embête c'est que je n'ai vraiment eu l'occasion d'utiliser l'autre méthode.

En ce qui concerne celle ci, l'idée que j'appréciais c'est de pouvoir diviser à l'infini mes blocs. Par exemple #right, cette colonne elle même est divisible encore.. en deux par exemple, ce qui nous donne 4 colonnes..

En ce qui concerne la compatiblité avec ce *!:$% de Internet Explorer (pardonnez ma grossierté),il y a toujours un moyen d'y palier.

En réalité pour les div en float dans le hack pour ie, chaque div positionnée grace à la propriété float prends les propriétés de conteneur et de contenu (display:inline, et overflow:auto, height:100%).

Mais finalement le rendu est le même. Le client, lui, ne travaille plus sur sa page en dur, il ne se rends pas vraiment compte de ça:)

Pavel
Modifié par pablo77 (27 Sep 2007 - 19:00)

pablo77 a écrit :
En ce qui concerne celle ci, l'idée que j'appréciais c'est de pouvoir diviser à l'infini mes blocs. Par exemple #right, cette colonne elle même est divisible encore.. en deux par exemple, ce qui nous donne 4 colonnes..

Ben... tu peux faire la même chose en n'utilisant qu'un seul flottant au lieux de deux pour chaque couple de blocs. Ça n'empêche pas...

pablo77 a écrit :
En ce qui concerne la compatiblité avec ce *!:$% de Internet Explorer (pardonnez ma grossierté),il y a toujours un moyen d'y palier.

Autant limiter le nombre de soucis potentiels dès le départ, non? Surtout dans un tutoriel qui servira à créer un modèle, modèle qui sera réutilisé par des débutants pas toujours au fait des bugs d'IE et des palliatifs disponibles.

pablo77 a écrit :
En réalité pour les div en float dans le hack pour ie, chaque div positionnée grace à la propriété float prends les propriétés de conteneur et de contenu (display:inline, et overflow:auto, height:100%).

Rien compris à cette phrase, désolé

Houla oui. moi même je cale à la releture de la phrase.. désolé..

En clair, ce que je voulais dire était:

Chaque div en se divisant doit assumer le rôle de contanier,
cad sous ie:

#right{
  overflow:auto;
  height:100%;
}

Mais également contenu

#right{
  overflow:auto;
  height:100%;
  display:inline;
}

Bref ceci est une méthode comme une autre. Et puis ça fonctionne. Mais le souci que j'ai avec les div en float, ce sont les sites redimenssionables.

Merci

Pavel

pablo77 a écrit :
Chaque div en se divisant doit assumer le rôle de contanier

Ce qui signifie, concrètement?
Le code que tu donnes ne m'éclaire pas trop. Il me semble même potentiellement problématique (notamment pour IE5, et potentiellement pour IE6-7 si le height: 100% est pris en compte en fonction du contexte du bloc).

pablo77 a écrit :
Mais également contenu

Ce qui signifie? Là encore, le code ne m'éclaire pas.

J'ai beau relire la spécification CSS 2.1, je ne vois pas de notion technique de «conteneur» et de «contenu». Ce que je comprends de ces mots, c'est que:
- si le div a des éléments enfants, c'est un conteneur;
- dans tous les cas, le div est un contenu (de body, d'un autre div peut-être...).
Et bien sûr combiner les deux ne me semble pas problématique.

Bonsoir (ou bonne nuit),
je me permet de soumettre un problème dans ce topic afin d'éviter de créer un nouveau sujet traitant du même tutoriel.
Mon problème est simple. J'ai suivis le tutoriel à la lettre puis ai effectué quelques adaptations spécifiques à mon site. Sur Firefox, cela fonctionne à merveille. Sur Internet Explorer (encore lui !), les 3 colonnes sont à leur place horizontalement mais la colonne centrale démarre sous la colonne de droite verticalement parlant. Comme je ne suis pas sur d'être très clair et qu'un exemple vaut mieux qu'un long discours, je vous invite à constater par vous même sur www.guilde-pandaren.com .
J'ai vérifié de long en large ma feuille CSS ainsi que les commentaires conditionnels pour IE, j'ai effectué toute sorte de tests mais rien n'y fait... La colonne centrale ne veut pas aller se mettre entre ses deux copines.

Je m'en remets aux plus expérimentés d'entre vous pour savoir si quelque chose m'aurait échappé

Merci

Bonsoir, avant tou merci d'avoir jeter un oeil à mon idée! mais il s'agissait d'une idée de tuto.. et pas encore un uto vérifié.

As tu créé une feuille de style propre à IE? Essais peutêtre de reduite la largeur de ton bloc de quelque pixels sous IE. On sait jamais. (C'est de la bidouille mais là...)

Je me permets de souligner, que ton code est caché et que par conséquent je n'ai pas pu vérifier de quoi il retournait.

Si je puis me permettre un conseil qui me ssauve assez souvent ajoutes ça dans ta css

div{
  border:1px solid red;
}

N'oublis pas de compter l'épaisseur des border dans ton accul, nécéssairement certaines div passent à la lignes.

Mais au moins tu peux suivre l'imbrication de tes blocs! Et tu verras d'uo vient le souci.

J'ai le sentiment, si tu as utilisé la méthode décrite di dessus, que le problème vient de la div qui contient le contenu, peutêtre devrait elle avoir la propriété

display:inline;

J'espère ne pas avoir été trop confus. Bonne nuit

Pavel
Modifié par pablo77 (29 Sep 2007 - 01:11)

Hansmi a écrit :
je me permet de soumettre un problème dans ce topic afin d'éviter de créer un nouveau sujet traitant du même tutoriel.

Mauvaise pioche. Chaque problème d'intégration HTML/CSS est spécifique, et même si parfois des situations sont proches ou du même type, mieux vaut traiter chaque cas séparément.

Merci donc de créer un nouveau sujet, d'autant plus que le sujet en cours ne traite pas d'un tutoriel existant mais d'une possible création de tutoriel.

Certes... mais on.. maintenant qu'on y est on peux donner un coup de main.

Ceci dit tu as raison, cette méthode est plus qu'expérimentale!! Il va falloir fouiller dans les tréfonds du cortex de celui qui a pondu ce truc là!!! Ha ben c'est moi!

Bref.. Je pense qu'on peux déjà essayer de trouvr une solution, mais tu auras remarqué qu'on a pas accès au html/css alors pour truover le bug ça va être coton!
Modifié par pablo77 (29 Sep 2007 - 01:31)

Bonjour
Je m'excuse déjà si je n'ai pas posté au bon endroit. Je pensais que le sujet traitait de ce tutoriel qui m'a inspiré.
A vrai dire, le code n'est pas caché mais pour avoir une persistance du nom de domaine dans la barre d'adresse, une sombre combine de frame invisible a été utilisée. Je ne pourrais pas vous en dire plus, ce n'est pas moi qui l'ait mis en place.
La véritable adresse est http://www.mudjai.com/guilde/, là le code sera accessible
Je vais déjà commencé par regarder et tester avec les indices que tu m'as laissé pablo77 et si vraiment je ne trouve pas, promis, je ferais un nouveau sujet

Bon et bien, voilà qui est corrigé. La largeur d'une image insérée dans une actualité était trop grande de 10 px ce qui faisait déborder mon div.
Merci encore pour ces indices Pablo77 qui m'ont permis de savoir où chercher.

Bon, et bien ej suis content d'avoir pu aider!