Question de mise en page
tempccm
-
mpmp93 Messages postés 6648 Date d'inscription Statut Membre Dernière intervention -
mpmp93 Messages postés 6648 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'ai une page constituée en gros de 3 colonnes, et pour cela j'utilise simplement trois <div style="width:33%; float:left;>
La colonne de gauche contient beaucoup de texte, en conséquence ça descend assez bas dans la page.
Je cherche maintenant à pouvoir écrire du texte dans les autres colonnes, et certaines parties de texte se mettront au même niveau que des paragraphes de la première colonne. En résumé je cherche à aligner des phrases avec celles des autres colonnes. Un peu comme si je pouvais mettre une ancre dans une colonne, et aligner du texte d'une autre colonne à cette ancre.
Je souhaite éviter d'utiliser des tableaux et des colspan/rowspan, l'idéal serait vraiment de pouvoir aligner UN mot d'une colonne selon UN mot d'une autre colonne (où même une lettre)
Des idées ? merci !
J'ai une page constituée en gros de 3 colonnes, et pour cela j'utilise simplement trois <div style="width:33%; float:left;>
La colonne de gauche contient beaucoup de texte, en conséquence ça descend assez bas dans la page.
Je cherche maintenant à pouvoir écrire du texte dans les autres colonnes, et certaines parties de texte se mettront au même niveau que des paragraphes de la première colonne. En résumé je cherche à aligner des phrases avec celles des autres colonnes. Un peu comme si je pouvais mettre une ancre dans une colonne, et aligner du texte d'une autre colonne à cette ancre.
Je souhaite éviter d'utiliser des tableaux et des colspan/rowspan, l'idéal serait vraiment de pouvoir aligner UN mot d'une colonne selon UN mot d'une autre colonne (où même une lettre)
Des idées ? merci !
A voir également:
- Question de mise en page
- Mise en forme conditionnelle excel - Guide
- Impossible de supprimer une page word - Guide
- Mise a jour chrome - Accueil - Applications & Logiciels
- Mise a jour windows 10 - Accueil - Mise à jour
- Mettre google en page d'accueil - Guide
2 réponses
Est ce que ton texte va changer ? ou sera t'il toujours le même ?
Tu peut par exemple englobé les textes à alignés dans des div avec la même class (donc normalement jusqu'à 3 class une par colonne)
Et tu leur met une hauteur minimale
résultat les div que tu rajoutera en dessous seront aligné à la même hauteur
Après je ne suis pas sur mais il me semble que javascript est capable de mesuré la hauteur d'une balise (par exemple si la div fait 150px elle le mesurera) il te suffirait de mesurer la première div dans la première colonne (si c'est la plus longue) et d'appliquer cette même hauteur dans les 2 autres.
C'est ma façon de faire CSS 3 a surement d'autre outils plus adaptés.
Tu peut par exemple englobé les textes à alignés dans des div avec la même class (donc normalement jusqu'à 3 class une par colonne)
Et tu leur met une hauteur minimale
résultat les div que tu rajoutera en dessous seront aligné à la même hauteur
Après je ne suis pas sur mais il me semble que javascript est capable de mesuré la hauteur d'une balise (par exemple si la div fait 150px elle le mesurera) il te suffirait de mesurer la première div dans la première colonne (si c'est la plus longue) et d'appliquer cette même hauteur dans les 2 autres.
C'est ma façon de faire CSS 3 a surement d'autre outils plus adaptés.
Bonjour,
Je vous conseille de passer en HTML5 avec du CSS3.
Exemple:
Le css pour trois colonnes:
et votre texte:
marche avec tous les navigateurs sauf les vieilles merdes - euh pardon, les vieilles rougnes - genre IE6 et IE7 et IE8 en voie de disparition définitive sauf dans certains pays archi sous-développés
et avec mon code, plus besoin de faire une table avec 3 colonnes ou 3 divs côte à côte. le texte "coule" tout seul.
Exemple:
https://www.immo-scope.com/article/consommation/page/eCarteBleue
où le texte est en deux colonnes.
A+
Je vous conseille de passer en HTML5 avec du CSS3.
Exemple:
Le css pour trois colonnes:
.threeCols {
-moz-column-count: 3;
-moz-column-gap: 16px;
-moz-column-rule-color: #B0B0B0;
-moz-column-rule-style: dotted;
-moz-column-rule-width: 1px;
border-bottom-color: #7F7F7F;
border-bottom-style: dotted;
border-bottom-width: 1px;
margin-bottom: 12px;
margin-top: 6px;
padding-bottom: 6px;
}
et votre texte:
<div class='threeCols'> .....bla bla bla sur 100 lignes.... </div>
marche avec tous les navigateurs sauf les vieilles merdes - euh pardon, les vieilles rougnes - genre IE6 et IE7 et IE8 en voie de disparition définitive sauf dans certains pays archi sous-développés
et avec mon code, plus besoin de faire une table avec 3 colonnes ou 3 divs côte à côte. le texte "coule" tout seul.
Exemple:
https://www.immo-scope.com/article/consommation/page/eCarteBleue
où le texte est en deux colonnes.
A+