Organigramme sur une page web : facile !
Par Laurentj le lundi, février 24 2003, 15:15 - Technologies Web - Lien permanent
Quelqu'un demandait comment réaliser un organigramme en HTML. Oubliez les tables (beurk, je n'ose imaginer ce que cela doit donner...) ou des images générées à la volée, ou PDF. Utilisez plutôt les DIV + CSS.
Mettez les élements de votre organigramme dans des divs. Positionnez-les avec les styles css position, top, left etc. Pour relier ces élements avec des traits, utilisez, là encore, des divs dont vous spécifierez des bordures, et que vous positionnerez. Pour faire plus propre, n'oubliez pas d'indiquer un z-index pour mettre les divs des élements au dessus des divs des traits.
Et voici ce que cela donne. Faites pas attention au design, c'est juste un exemple. Cela peut être beaucoup plus joli ;-)
Par contre, vous pouvez admirer le code HTML, qui est ce qu'il y a de plus simple à écrire (et donc à générer si il s'agit de page PHP...).
Commentaires
merci pour l'organigramme c super cool, mais il me reste encore un probleme... en fait je dois relier les tables par des fleches soit simples soit doubles, et si possible obliques... croyez vous que cela est simple a ecrire, ou mme faisable en html avec des css??? merci de me repondre je suis en galeeeeeere
georges
passe pas bien sous IE6...
yo! : c'est normal, la feuille CSS ne tient pas compte des bugs CSS de IE 6 ;-)
en supprimant
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
cela fonctionne correctement sur IE6 et mozilla
Le lien "demandait" est dead.