28112 sujets

CSS et mise en forme, CSS3

Tables d'index

Bonjour à tous

Le fichier de test est http://paralletes.free.fr/tests/tables-index.html

Ce que je cherche à faire:
1) une table de "zones de pointage"
2) une zone de pointage comporte une image, un titre et un texte
3) les zone de pointage doivent avoir la même taille
4) ne pas devoir tout modifier à chaque changement/ajout/déplacement de zone de pointage

Le mieux que je sois arrivé à faire est dans la page de tests, c'est très loin d'être satisfaisant.

Avant de me rabattre sur des <table>, <tr> et tout le tintouin, qui ne satisferaient pas le point 4, je préfère demander l'aide des experts.

Merci de votre aide!
Salut,
Une solution avec flexbox ça t'irait ? Dans ce cas tu peux simplement faire ça : http://codepen.io/korell/pen/RWNxmB?editors=110
Il faut que tu entoures tes <figure> d'un container <div class="figures"> et que tu appliques ce code uniquement sur ce dernier :
.figures{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

C'est tout !
Info compatibilité navigateurs : Can I Use : 95,77% pour la France si tu préfixes ces propriétés.
Modifié par MatthieuR (04 Sep 2015 - 14:32)
Merci du conseil

Hélas j'ai beaucoup de visiteurs âgés et qui vivent dans des pays lointains.
Il y a beaucoup de choses que je ne peux pas utiliser, et malheureusement pas flexbox....
Euh sinon, pour les pays lointains, ça reste à 94,82%...c'est pas mal, mais effectivement si tu veux être compatible IE 8 et IE 9, pas de flex.
Modifié par MatthieuR (04 Sep 2015 - 15:23)
MatthieuR a écrit :
Euh sinon, pour les pays lointains, ça reste à 94,82%...c'est pas mal, mais effectivement si tu veux être compatible IE 8 et IE 9, pas de flex.

C'est effectivement un problème
Pas plus tard qu'hier j'ai reçu un coup de fil d'un utilisateur qui avait acheté son PC il y a 10 ans et n'avait jamais changé son navigateur par défaut; IE pour ne pas le nommer.
Quand je lui ai dit que personnellement je n'utilisait IE que pour faire des tests de compatibilité, il semblait tomber des nues.
Pour le site que je contribue à rénover, notre objectif est de permettre la navigation sur tablette sans décourager les habitués qui habitent parfois en Australie ou en Égypte. Qui dit "vieux utilisateurs" veut souvent dire "vieille machine".
Quand mon PC récent (4 ans) est tombé en passe suite à un essai malheureux de passe sur Windows 10, jai sorti de mon armoire mon ancien PC, qui aura 11 ans en janvier et tourne sous XP. Bien entendu j'ai immédiatement téléchargé la dernière version de Firefox, qui tourne assez bien (mais lentement, sans toute par manque de mémoire) sur cette vieille bécane, mais je suis sûr que la plupart des gens ont peur de faire ce genre de manip.
Modifié par PapyJP (04 Sep 2015 - 16:02)
Faute de mieux, j'ai fait le truc suivant;

<section class="indexTable" id="machin">
	<h2>Autres thèmes traités</h2>
	<figure>
		...............
	</figure>
	<figure>
		...............
	</figure>
	<figure>
		...............
	</figure>
</section>
<script type="text/javascript">makeIndexList('other');</script>

avec:

function makeIndexList(listName) {
	var list = document.getElementById(listName);
	var titles = list.getElementsByTagName('h2'), titleTexts = [];
	for(var i = 0; i < titles.length; i++) titleTexts[ i] = titles[ i].outerHTML;
	var items = list.getElementsByTagName('figure'), itemTexts = [];
	for(var i = 0; i < items.length; i++) {
		itemTexts[ i] = (items[ i].innerHTML == '' ? '' : items[ i].outerHTML);
	}
	var table = document.createElement('table');
	table.style = 'width:100%;margin:auto;';
	var caption = document.createElement('caption');
	caption.innerHTML = titleTexts.join("\n");
	var tbody = document.createElement('tbody');
	for(var i = 0; i < itemTexts.length; i += 2) {
		var tr = document.createElement('tr');
		var cell1 = document.createElement('td'), cell2 = document.createElement('td');
		cell1.setAttribute('style', 'width:50%;vertical-align:top;');
		cell2.setAttribute('style', 'width:50%;vertical-align:top;');
		cell1.innerHTML = itemTexts[ i];
		if(i + 1 < itemTexts.length) cell2.innerHTML = itemTexts[ i + 1];
		tr.appendChild(cell1);
		tr.appendChild(cell2);
		tbody.appendChild(tr);
	}
	table.appendChild(caption);
	table.appendChild(tbody);
	list.innerHTML = table.outerHTML;					
}

Le code js ne fait pas appel aux fonctions querySelector[All] qui ne sont pas supportées pas les vieilles versions d'IE
En résumé: lire le contenu de la section, fabriquer une table, mettre le titre dans une balise <caption>, regrouper les <figure> par deux, en faire des <td>, mettre les <td> dans un <tr>, les <tr> dans un <tbody>, le tout dans la table, et remplacer le contenu de la section par la table.
Smiley sweatdrop Smiley sweatdrop Smiley sweatdrop
A propos:
J'ai découvert un comportement intéressant:
dans le script, je génère des balises <table>, <td>, etc.

J'ai essayé de définir des styles dans la feuille de style de la page pour styler ces éléments.
Peine perdue, d'après FireBug, FireFox (et je suppose aussi les autres navigateurs) ne prend pas en compte la feuille de style pour ces balises créées dynamiquement, d'où la nécessité de mettre des attributs "style" dans les balises lors de leur génération.

Un commentaire de la part d'experts?
Sujet clos
Aller à