[Résolu] [xhtml/css] texte sur plusieurs colonnes

[njoyard]

Salut !

A la base, je désire mettre un texte sur 2 colonnes, séparées par une 3eme qui contiendra des images.

Le tout sera contenu dans un div de classe cadre :

.cadre {
border: 1px #aaaaaa solid;
background-color: #fff2e5;
margin-left: 20px;
margin-right: 20px;
padding-bottom: 2px;
}

je crée donc les classes suivantes :

.colonnetexte {
text-align: justify;
vertical-align: top;
width: 280px;
}
.colonneimages {
text-align:center;
width: 80px;
}

puis ma page:

<div class="cadre">
<span class="colonnetexte">long texte partie 1</span>
<span class="colonneimages">les images</span>
<span class="colonnetexte">long texte partie 2</span>
</div>

ce qui marche très bien.

Par contre dès que je l'englobe dans la structure globale du site à savoir :

<div id="centre"><div id="cadreglobal">
<div class="cadre">
 <span class="colonnetexte">long texte partie 1</span>
 <span class="colonneimages">les images</span>
 <span class="colonnetexte">long texte partie 2</span>
</div>
</div></div>

là, ça ne marche plus, les "colonnes" font toute la largeur du <div class="cadre"> qui les contient et sont les unes en dessous des autres.

pour info, le style des div de la structure globale est

#centre {
width: 100%;
text-align: center;
}

#cadreglobal {
width: 721px;
border: 2px #000000 solid;
}

et mon body n'a qu'une couleur de fond...

Savez-vous pourquoi ? Et comment résoudre le problème ? Je suppose que c'est un problème d'attribut hérité que je n'ai pas vu, mais lequel ? J'ai cherché un peu et essayé entre autres l'attribut white-space mais ça ne résout pas le problème...

NB: j'ai vérifié 15 fois, j'ai tout bien fermé les tags comme il faut...

[Nyro Xeo]

À vrai dire, je n'ai pas saisi tout à fait le problème. Pourrais-tu faire des schémas de ce que tu souhaiterais faire ? Et une page en ligne avec le code "qui fonctionne" et une autre avec celui "qui ne fonctionne pas" ?

Car en testant tes codes, cela me donne le bon résultat (nous avons certainement une interprétation différente d'une propriété ou d'une autre).

Merci.

[njoyard]

le code qui ne marche pas:

http://www.touche-a-ton-nez.com/future/groupe.php

(prière de ne pas trop faire n'imp dans la partie /future/ du site car PHP non finalisé càd non totalement sécurisé ni meme totalement débuggé)

edit : en fait, ce que j'ai écrit dans le 1er post en disant que ça ne marchait pas fonctionne sous IE mais pas sous Firefox, la preuve: http://www.touche-a-ton-nez.com/future/test2.php

Alors comment faire quelque chose qui ressemble à ça dans la plupart des browsers :

(la description de chaque carré est a l'intérieur de celui-ci)

les carrés bleus représentent des images

Je pensais que ce que 'jai écrit dans le 1er post du topic suffisait... (je ne veux pas utiliser de tables, bien évidemment)

[zigomat]

C'est un des nombreux bugs de Firefox...

Pour le corriger, il suffit d'ajouter

margin: auto

dans .colonnetexte et dans .colonneimages

Perso je développe sous IE puis je me casse la tête pour que ça fonctionne aussi sous Firefox !

Firefox a une façon bizzare d'interpréter certaines propriétés des CSS !

Beaucoup rejettent l'utilisation des tableaux...Et pourtant ! C'est une technique très simple, qui fonctionne du premier coup avec tous les navigateurs et qui est très rapide à réaliser! T'aurais fait un tableau avec 3 colonnes (tu peux utiliser les propiétés des CSS dans le tableau pour le formatage) ... Tu aurais fini depuis longtemps !

[Nyro Xeo]

"Un des nombreux bugs de Firefox..."

C'est pas un bug, c'est un comportement tout à fait normal, tout à fait logique. On spécifie une largeur au bloc, et on mets les marges gauche et droite à automatique pour que le navigateur fasse le calcul afin d'aligner le bloc au centre.

k-o-x> Donc comme le disait zigomat, tu veux centrer le bloc ? Voici un article détaillé expliquant comment faire pour centrer un bloc : http://css.alsacreations.com/Faire-une-mis...site-web-en-CSS

[njoyard]

merci bcp les gars !

ça a l'air de marcher. Faudra que je me tape un cours complet de CSS 2.1 un de ces quatre

edit: orthographe

edit2 : en fait non ça marche pas... 'fin toujours pas sur Firefox, ça marche toujours sur IE.

la preuve:

http://www.touche-a-ton-nez.com/future/test2.php

j'ai essayé de remplacer margin: auto par margin-left:auto et margin-right:auto mais ça ne change rien...

zigomat > je sais bien que c'est hyper facile avec des tableaux, j'ai fait ça pendant des années (et encore aujourd'hui sur le lien 'groupe.php' ci-dessus, le logo+menu est fait avec des tableaux) cependant j'aime pas du tout, c'est relou à gérer avec CSS (les div et spans sont beaucoup plus simples) et ça donne un code 'achement lourd de mon point de vue... Puis c'est contraire au but des standards (séparer le contenu de la mise en forme), cf http://css.alsacreations.com/Faire-une-mis...raison-concrete (merci Nyro pour ce site, il est vraiment bien)

edit3 : j'ai essayé de remplacer les span par des div, a ce moment là ils prennent tous la bonne taille mais sont bien évidemment les uns en dessous des autres...

kox, le mec qui éditait toujours dix-huit mille six-cent cinquante-quatre fois ses posts

[njoyard]

J'ai réussi a résoudre le problème, en rajoutant des "loat:left;" et "float:right;" aux deux colonnes de textes, puis en plaçant celle de droite AVANT celle de gauche dans le code xhtml. Ca fonctionne alors avec Firefox, mais plus avec IE: les spans ne font plus qu'une ligne de hauteur et leur contenu dépasse en dessous.

J'ai donc caché les floats à IE de la manière suivante: créer deux ID #gauche et #droite avec les attributs float correspondants et attribuer ces id aux deux colonnes de texte.

Mon code devient alors :

XHTML :

<div class="cadre">
<span class="colonnetexte" id="droite">long texte partie 2</span>
<span class="colonnetexte" id="gauche">long texte partie 1</span>
<span class="colonneimages">les images</span>
</div>

CSS :

.colonnetexte {
text-align: justify;
vertical-align: top;
width: 280px;
margin-left: auto;
margin-right: auto;
}

#gauche {
float: left;
}

#droite {
float: right;
}

.colonneimages {
width: 97px;
text-align:center;
margin-left: auto;
margin-right: auto;
}

...et ça marche sous IE et Firefox ! (juste un petit pb d'alignement qui sera vite résolu) : http://www.touche-a-ton-nez.com/future/groupe.php

Merci a tous !

[Nyro Xeo]

(merci Nyro pour ce site, il est vraiment bien)

Ah tu ne connaissais pas ? Mais alors... Est-ce que tu connais ceci :

... ? C'est la référence francophone en matière des normes et standards du W3C :)

zigomat > je sais bien que c'est hyper facile avec des tableaux, j'ai fait ça pendant des années (et encore aujourd'hui sur le lien 'groupe.php' ci-dessus, le logo+menu est fait avec des tableaux) cependant j'aime pas du tout, c'est relou à gérer avec CSS (les div et spans sont beaucoup plus simples) et ça donne un code 'achement lourd de mon point de vue... Puis c'est contraire au but des standards (séparer le contenu de la mise en forme), cf http://css.alsacreations.com/Faire-une-mis...raison-concrete

Je rajouterais aussi ce lien : http://www.openweb.eu.org/articles/problemes_tableaux/ :)

[njoyard]

Ah tu ne connaissais pas ? Mais alors... Est-ce que tu connais ceci :

... ? C'est la référence francophone en matière des normes et standards du W3C :)