Diagramme de flux en html/css

Question

Y a-t-il un bon moyen de créer un diagramme de flux/swimline sans recourir à des scripts ou des tables? Je parle de montrer différents hôtes envoyant des paquets (donc des hôtes sur l'axe X, du temps sur le Y et des flèches vers l'hôte de destination). Il semble qu'il y ait trop d'éléments pour les tables (en particulier les flèches couvrant plusieurs colonnes de toute façon), mais d'un autre côté, les divs seraient difficiles à positionner horizontalement (ils devraient être alignés dans une colonne spécifiée) ").

Y a-t-il un bon moyen de s'en sortir? Des cadres d'aide? (Je ne veux pas faire des trucs de toile à moins que ce ne soit vraiment nécessaire)

Editer: J'ai oublié d'ajouter pourquoi je n'ai pas mentionné d'images du tout - certains éléments du diagramme devraient avoir: des actions de survol et devraient être cliquables à l'avenir .

Answer 1

Je suggère d'utiliser des fichiers PNG avec une couche alpha transparente (pour les chevauchements), et de les positionner absolument avec CSS. Je n'ai pas vu votre disposition générale, donc je ne peux pas dire que c'est la meilleure approche pour votre situation particulière cependant.

code CSS Exemple pour un cercle comme celui-ci: <a class="circle" id="myCircle" href="foo">Foo</a>

a.circle { 
    display:block; 
    height:100px; 
    width:100px; 
    background-image:url(/path/to/circle.png); 
    background-repeat:no-repeat; 
    position:absolute; 
    line-height:100px; 
    text-align:center; 
    } 

Code

pour un élément de cercle individuel:

a#myCircle { 
    top:234px; 
    left:357px; 
} 

La définition de classe crée un ensemble d'attributs pour tous les éléments d'ancrage qui partagent la classe "cercle". L'ancre avec l'ID de "myCircle" serait alors positionné avec les coordonnées de 234,357 en pixels à partir du coin supérieur gauche de l'élément parent avec position:relative; ensemble.