styliser des li et ul

Par flo3376, il y a 11 ans

Les bases HTML/CSS

Bonsoir à tous,
voici la suite du sujet http://www.grafikart.fr/forum/topics/16559.
Aprés avoir eu du mal avec la récursivité (reussi mais pas comme je désirai), je me suis rabattut sur un script trouvé à cette adresse http://www.coinduwebmaster.com/menu-arborescent-fonction-recursive-php/89/ qui joue avec des ul et des li

et j'en ai sorti cette variante

<style> body {font-size: 14px;} .arbre li { list-style: none; //margin-left: 100px; } .arbre ul { list-style: none; margin-left: 100px; } </style> <body> <div class="container"> <div style="display: flex;"><div style="width:100px;">1</div><div style="width:100px;">2</div><div style="width:100px;">3</div><div style="width:100px;">4</div></div> <br> <?php $type=$_GET['type']; $db_tks = new Db_TKS('TKS'); function recursive_enfant($parent=NULL,$niveau=0,$array=NULL,$type,$db_tks) { $html = ""; $niveau_precedent = 0; if (!$niveau && !$niveau_precedent){$html .= "\n<ul class='arbre'>\n";} if ($array!=NULL) { foreach ($array AS $value) { if ($parent ==$value->parent) { if ($niveau_precedent < $niveau) {$html .= "\n<img src='/site/membre/images/autre.png' width='100px'><ul class='arbre'>\n";} $html .= "<li class='arbre'><img src='". $value->image_type_1."' width='100px'>"; $niveau_precedent = $niveau; $zero=$db_tks->query_list("SELECT * FROM ".PREFIX_TKS."_aircraft WHERE `parent` = '".$value->id_aircraft."' and `type`='".$type."'"); $html .= recursive_enfant($value->id_aircraft, ($niveau + 1), $zero,$type,$db_tks); } } } if (($niveau_precedent == $niveau) && ($niveau_precedent != 0)) {$html .= "</ul>\n</li>\n";} else if ($niveau_precedent == $niveau) {$html .= "</ul>\n";} else {$html .= "</li>\n";} return $html; } $zero=$db_tks->query_list("SELECT * FROM ".PREFIX_TKS."_aircraft WHERE `parent` = '0' and `type`='".$type."'"); echo recursive_enfant(0,0,$zero,$type,$db_tks); ?> </div> </body>

et voilà le résultat

maintenant je cherche juste comment rajouter les trait verts suivant


mais je coince

Pourriez vous m'aider.

merci d'avance

Flo

2 réponses

Julio Realkyo, il y a 11 ans

est ce que tu ne peux pas styliser le border-left de ton ul ?

FactureHero.com, il y a 11 ans

mmm si c'est pour relier les images sous forme d'arbre, je te conseille de regarder la structure visuelle des commentaires et des réponses aux commentaires sur Grafikart. c'est juste du CSS3 en jouant avec les pseudo Class :before et :after. Et ça fait son effet "arbre" visuellement. (si c'est ce que tu cherches c'est adapté)