Texte et image sur 3 cols, [résolu] (et merci !)

Bonjour,
Je fais une zone sur 3 colonnes...
1ère : une image, 2è : un texte, 3è : un autre texte...
J'ai écrit : (html5)

<div id="text-3c">  
<div id="img-3c"><img src=/images/livres.png" alt="image-livres"></div>
<div id="revue">Les&nbsp;dossiers&nbsp;d'</div>
<div id="titre">HISTOIRE des DOSSIERS</div>
</div>

avec

#text-3c {
-moz-columns: 3;
column-gap: 0;
#img-3c {
    margin-left: 10px;
#revue {
    font-family: Papyrus;
    font-size: 3vw;
    color: #EF930C;
    font-weight: 900;
#titre {
    font-family: Lato;
    color: #182827;
    text-align: left;
    font-size: 2.5vw;
    font-weight: 900;
    font-variant-caps: titling-caps;/* inutile*/

Le soucis c'est que je n'arrive pas à faire passer "HISTOIRE des DOSSIERS" dans la 3è colonne...
J'ai essayé de chercher dans les "break-qq-chose", sans succès...

J'aurais loupé quoi ?

Bonne fin d'après-midi et merci,
Y
Modifié par y-forums (25 May 2016 - 15:35)

Bonjour, je pense qu'en remplaçant simplement ton

-moz-columns: 3; 

par

column-count: 3;

ça devrait marcher

Sinon, dans ton code html je vois qu'il manque un guillemet après le " src= " et dans ton css il manque les " } "

Xan a écrit :
Bonjour, je pense qu'en remplaçant simplement ton

-moz-columns: 3; 

par

column-count: 3;

ça devrait marcher

Ok, merci je vais tester ça de suite

Xan a écrit :

Sinon, dans ton code html je vois qu'il manque un guillemet après le " src= " et dans ton css il manque les " } "

Les }, c'est "normal", j'ai copié-collé des bouts de css, un guillemet manquant, ça c'est moins normal !
Bonne journée à toi et merci,
Y

En fait, pour n'avoir aucun soucis sous chaque navigateur l'idéal serait d'écrire ceci:

-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;

6l20 a écrit :
Bonjour,

Un peu de lecture :
Les multicolonnes en CSS3

Bonjour,
Je me suis déjà imprégné de la substantifique moelle de cet article passionnant sur le site hors du commun auquel tu fais référence.
Ça marche - du feu de dieu - avec un pavé de texte, là ça coince et que contrairement à ce qu'on pourrait s'attendre c'est dans les "grands" affichages que ça merdoie le plus.

6l20 a écrit :

CSS3 Flexbox Layout module
...et liens associés, bonne lecture

Hier j'ai trouvé ça aussi dans la deuxième url...
.container { display: flex etc...
Pas encore testé... C'est ma porte de sortie... Après me restera plus que la Légion ou l'exil
Bonne journée,
Y
PS je peux te passer l'url, si tu veux voir le désastre, en plus mon image a pris le maquis.

Bonjour,

Tu peux poster l'url ici même ou te servir d'un outil en ligne pour nous montrer où tu en es
JsFiddle
Codepen
Dabblet

Hello,

Je viens un peu après la bataille et, surtout je risque de tout casser l'ambiance mais... quel est vraiment l'intérêt d'utiliser du multicolonnes ici ?

Tout ce que tu veux c'est aligner 3 éléments, non ?
Le but de multicolonnes est de faire écouler du contenu d'une colonne à la suivante quand elle est remplie. Et je ne crois pas que c'est ce que tu souhaites.

Du coup, des positionnement tels que flexbox, inline-block ou table-cell devraient faire le boulot, non ?
Dans ton lien, je virerais toutes les "columns" et je mettrais un display: flex sur le parent c'est à dire l'id "text-hel-3c". J'enlèverais aussi le width:100% sur "dossiers_hel".

Bonne chance.
Modifié par Raphael (19 May 2016 - 15:43)

Raphael a écrit :
Hello,
Je viens un peu après la bataille ...

C'est pas faux
Sans le contexte difficile d'évaluer le besoin réel

@y-forums : Ne sois pas si dur avec toi, ce n'est pas si mal, même s'il reste un peu de travail

Hello je reviens de we... Un peu tard certes, mais j'ai dû pousser la bagnole pour économiser le mazout

Raphael a écrit :
Hello,

Je viens un peu après la bataille et, surtout je risque de tout casser l'ambiance mais... quel est vraiment l'intérêt d'utiliser du multicolonnes ici ?

Ce que je trouve "sympa" dans le multi-colonage, c'est le passage de 3 à 1 ou de 2 à 1 colonnes que j'ai obtenu sur un truc de test lorsque la taille de l'affichage diminue fortement, du coup j'ai retenté ça, alors que sur mon test c'était du lorem-ipsum, en une seule police et taille... Et là ça ne marche qu'en petite et moyenne taille d'écran.

Raphael a écrit :

Tout ce que tu veux c'est aligner 3 éléments, non ?
Le but de multicolonnes est de faire écouler du contenu d'une colonne à la suivante quand elle est remplie. Et je ne crois pas que c'est ce que tu souhaites.

- Exact !

Raphael a écrit :

Du coup, des positionnement tels que flexbox, inline-block ou table-cell devraient faire le boulot, non ?
Dans ton lien, je virerais toutes les "columns" et je mettrais un display: flex sur le parent c'est à dire l'id "text-hel-3c". J'enlèverais aussi le width:100% sur "dossiers_hel".
Bonne chance.

On y va...
Merci et à bientôt pour le [résolu] dans le sujet !
Y
PS : Manque ici le smiley avec la fumée qui lui sort des oreilles

6l20 a écrit :
C'est pas faux
Sans le contexte difficile d'évaluer le besoin réel

Lao tseu ?

6l20 a écrit :

@y-forums : Ne sois pas si dur avec toi, ce n'est pas si mal, même s'il reste un peu de travail

Moi j'ai vu un tech se faire hara kiri suite un un copier coller loupé dans un bout de js... On s'ramoli...
Bonne journée...
Y

Effectivement avec flex-box et ses potes, ça marche bôcoup mieux !!
Presque fini ! (faut bien qu'il y ait encore un pti peu à faire)
Merci à tous et bonne soirée,
Y

Merci, bonne soirée à toi aussi.

Et si quand tu ferme les yeux tu vois dans ton esprit des signes "inférieur à" qui s'ouvrent, des paires de guillemets, des parenthèses et autres marques propres à la syntaxes des langages, c'est normal, t'es mordu !