Je possède une arborescence réalisée à l'aide de balises "ul" et "li" représentée de cette façon :
J'ai ensuite ajouté deux boutons qui sont des balises "li" (ce choix m'est imposé et je ne peux pas changer :/) qui me permettront l'édition et la suppression de chaque élément. Ce qui donne le résultat suivant :
Ces 2 balises possèdent toutes les 2 une classe que je ne peux modifier :
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Cette classe permet à ces 2 balises d'être côte à côte, ce qui me va. Le problème est que j'aimerais maintenant pouvoir aligner ces 2 "li" avec le 3ème qui peut contenir des enfants. Pour cela j'ai donc tenter de mettre un "inline-block" sur tous les "li" mais le problème est que dans mon arborescence je peux avoir plusieurs enfants pour un même parent et donc tous les "li" se retrouvent collés.
Avez-vous une solution pour faire en sorte que les "li" qui me serviront de boutons soient alignés avec le "li" qui les suit mais sans que les "li" suivants ne soient impactés par cet alignement ? (Le résultat ressemblerait au 1er screenshot mais avec les 2 boutons devant le texte)
Ma requête n'est peut-être pas très clair mais j'ai tenté d'expliquer au mieux ma situation.
Je ne connaissais pas les descriptive list mais, je pense qu'il y a erreur.
Je ne cherche pas à rendre cliquable quoique se soit, je cherche à regrouper par groupe de 3 des balises "li" sur la même ligne tout en sachant que les 2 premières sont déjà sur la même ligne car les class prédéfinies le permettent.
De ce fait lon problème est que je n'arrive pas à relier les 2 premières avec la 3ème car si j'ai 6 balises "li" je me retrouve avec les 6 sur la même ligne alors que je cherche à faire 2 groupes de 3.
PS : les images présentent sur les screens ne sont pas obtenues via une balise "img" mais par le css dû à Font Awesome
rhooManu a écrit:
Salut,
Donne ton html, et ton css.
Salut,
Voici l'HTML (réduit) :
<ul>
<li id="pro" style="list-style-type: none;">
Votre projet
<ul>
<li class="fa fa-trash" style="cursor: pointer; font-size: 15px; color: rgb(255, 87, 34); margin: auto auto auto 5px;"></li>
<li class="fa fa-pencil-square-o" style="cursor: pointer; font-size: 15px; color: rgb(255, 87, 34); margin: 2px auto auto 5px;"></li>
<li id="blo822">
Portail web
<ul>
<li class="fa fa-trash" style="cursor: pointer; font-size: 15px; color: rgb(255, 87, 34); margin: auto auto auto 5px;"></li>
<li class="fa fa-pencil-square-o" style="cursor: pointer; font-size: 15px; color: rgb(255, 87, 34); margin: 2px auto auto 5px;"></li>
<li id="ele1112">
FIL PROJET
<ul>
<li class="fa fa-trash" style="cursor: pointer; font-size: 15px; color: rgb(255, 87, 34); margin: auto auto auto 5px;"></li>
<li class="fa fa-pencil-square-o" style="cursor: pointer; font-size: 15px; color: rgb(255, 87, 34); margin: 2px auto auto 5px;"></li>
<li id="zon1263">
Projet
<ul>
<li class="fa fa-trash" style="cursor: pointer; font-size: 15px; color: rgb(255, 87, 34); margin: auto auto auto 5px;"></li>
<li class="fa fa-pencil-square-o" style="cursor: pointer; font-size: 15px; color: rgb(255, 87, 34); margin: 2px auto auto 5px;"></li>
<li id="loc2246">Gestionnaires</li>
<li class="fa fa-trash" style="cursor: pointer; font-size: 15px; color: rgb(255, 87, 34); margin: auto auto auto 5px;"></li>
<li class="fa fa-pencil-square-o" style="cursor: pointer; font-size: 15px; color: rgb(255, 87, 34); margin: 2px auto auto 5px;"></li>
<li id="loc2247">Spécialités</li>
<li class="fa fa-trash" style="cursor: pointer; font-size: 15px; color: rgb(255, 87, 34); margin: auto auto auto 5px;"></li>
<li class="fa fa-pencil-square-o" style="cursor: pointer; font-size: 15px; color: rgb(255, 87, 34); margin: 2px auto auto 5px;"></li>
<li id="loc2248">Evènements</li>
</ul>
</li>
<li class="fa fa-trash" style="cursor: pointer; font-size: 15px; color: rgb(255, 87, 34); margin: auto auto auto 5px;"></li>
<li class="fa fa-pencil-square-o" style="cursor: pointer; font-size: 15px; color: rgb(255, 87, 34); margin: 2px auto auto 5px;"></li>
<li id="zon1264">
Clients
<ul>
<li class="fa fa-trash" style="cursor: pointer; font-size: 15px; color: rgb(255, 87, 34); margin: auto auto auto 5px;"></li>
<li class="fa fa-pencil-square-o" style="cursor: pointer; font-size: 15px; color: rgb(255, 87, 34); margin: 2px auto auto 5px;"></li>
<li id="loc2249">Accés web</li>
<li class="fa fa-trash" style="cursor: pointer; font-size: 15px; color: rgb(255, 87, 34); margin: auto auto auto 5px;"></li>
<li class="fa fa-pencil-square-o" style="cursor: pointer; font-size: 15px; color: rgb(255, 87, 34); margin: 2px auto auto 5px;"></li>
<li id="loc2250">Accés appli</li>
<li class="fa fa-trash" style="cursor: pointer; font-size: 15px; color: rgb(255, 87, 34); margin: auto auto auto 5px;"></li>
<li class="fa fa-pencil-square-o" style="cursor: pointer; font-size: 15px; color: rgb(255, 87, 34); margin: 2px auto auto 5px;"></li>
<li id="loc2251">Ventes</li>
</ul>
</li>
<li class="fa fa-trash" style="cursor: pointer; font-size: 15px; color: rgb(255, 87, 34); margin: auto auto auto 5px;"></li>
<li class="fa fa-pencil-square-o" style="cursor: pointer; font-size: 15px; color: rgb(255, 87, 34); margin: 2px auto auto 5px;"></li>
<li id="zon1265">Notes (détail)</li>
</ul>
</li>
<li class="fa fa-trash" style="cursor: pointer; font-size: 15px; color: rgb(255, 87, 34); margin: auto auto auto 5px;"></li>
<li class="fa fa-pencil-square-o" style="cursor: pointer; font-size: 15px; color: rgb(255, 87, 34); margin: 2px auto auto 5px;"></li>
<li id="ele1113">
FIL ACTU
<ul>
<li class="fa fa-trash" style="cursor: pointer; font-size: 15px; color: rgb(255, 87, 34); margin: auto auto auto 5px;"></li>
<li class="fa fa-pencil-square-o" style="cursor: pointer; font-size: 15px; color: rgb(255, 87, 34); margin: 2px auto auto 5px;"></li>
<li id="zon1266">Création note</li>
</ul>
</li>
</ul>
</li>
<li class="fa fa-trash" style="cursor: pointer; font-size: 15px; color: rgb(255, 87, 34); margin: auto auto auto 5px;"></li>
<li class="fa fa-pencil-square-o" style="cursor: pointer; font-size: 15px; color: rgb(255, 87, 34); margin: 2px auto auto 5px;"></li>
<li id="blo1161">
Bâtiment AA
<ul>
<li class="fa fa-trash" style="cursor: pointer; font-size: 15px; color: rgb(255, 87, 34); margin: auto auto auto 5px;"></li>
<li class="fa fa-pencil-square-o" style="cursor: pointer; font-size: 15px; color: rgb(255, 87, 34); margin: 2px auto auto 5px;"></li>
<li id="ele2225">
Etage AA
<ul>
<li class="fa fa-trash" style="cursor: pointer; font-size: 15px; color: rgb(255, 87, 34); margin: auto auto auto 5px;"></li>
<li class="fa fa-pencil-square-o" style="cursor: pointer; font-size: 15px; color: rgb(255, 87, 34); margin: 2px auto auto 5px;"></li>
<li id="zon4908">
Appartement AA
<ul>
<li class="fa fa-trash" style="cursor: pointer; font-size: 15px; color: rgb(255, 87, 34); margin: auto auto auto 5px;"></li>
<li class="fa fa-pencil-square-o" style="cursor: pointer; font-size: 15px; color: rgb(255, 87, 34); margin: 2px auto auto 5px;"></li>
<li id="loc12503">Chambre AA</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="fa fa-trash" style="cursor: pointer; font-size: 15px; color: rgb(255, 87, 34); margin: auto auto auto 5px;"></li>
<li class="fa fa-pencil-square-o" style="cursor: pointer; font-size: 15px; color: rgb(255, 87, 34); margin: 2px auto auto 5px;"></li>
<li id="blo1164">
Bâtiment AB
<ul>
<li class="fa fa-trash" style="cursor: pointer; font-size: 15px; color: rgb(255, 87, 34); margin: auto auto auto 5px;"></li>
<li class="fa fa-pencil-square-o" style="cursor: pointer; font-size: 15px; color: rgb(255, 87, 34); margin: 2px auto auto 5px;"></li>
<li id="ele2236">Etage AA</li>
<li class="fa fa-trash" style="cursor: pointer; font-size: 15px; color: rgb(255, 87, 34); margin: auto auto auto 5px;"></li>
<li class="fa fa-pencil-square-o" style="cursor: pointer; font-size: 15px; color: rgb(255, 87, 34); margin: 2px auto auto 5px;"></li>
<li id="ele2237">Etage AB</li>
<li class="fa fa-trash" style="cursor: pointer; font-size: 15px; color: rgb(255, 87, 34); margin: auto auto auto 5px;"></li>
<li class="fa fa-pencil-square-o" style="cursor: pointer; font-size: 15px; color: rgb(255, 87, 34); margin: 2px auto auto 5px;"></li>
<li id="ele2238">Etage AC</li>
</ul>
</li>
</ul>
</li>
</ul>
Pour le css :
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fa-trash {
cursor: pointer;
font-size: 15px;
color: rgb(255, 87, 34);
margin: auto auto auto 5px;
}
.fa-pencil-square-o {
cursor: pointer;
font-size: 15px;
color: rgb(255, 87, 34);
margin: 2px auto auto 5px;
}
Comme je travaille par dessus un code existant et que je ne peux pas modifier, j'ai récupéré ces propriétés actives sur les balises "li" :
Il faut absolument arrêter d'utiliser l'attribut style. Le CSS sert à éviter de répéter ça. Ensuite, tu mets la classe de l'icone directement sur chaque balise d'élément de liste, ce qui sert juste à afficher l'image. Si tu veux pouvoir faire quelque chose, il faut mettre un lien dans ta liste, et sur ce lien mettre ton icône.
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Oui je sais très bien qu'utiliser l'attribut style est une mauvaise pratique. Sans rentrer dans les détails, ce que je réalise est pour le père d'un ami et comme il n'est pas très au point niveau niveau norme et bonnes pratiques, il souhaite absolument que je mette le style sur les attributs...
Dans tout les cas même si je changeais ça je ne pense pas que cela puisse résoudre mon problème qui est juste de vouloir aligner par groupe de 3 des balises "li" ^^.
Le fait d'utiliser un lien dans ma liste ne changera pas le problème ni sa solution selon moi.
EDIT :
Comme j'ai déjà reformuler plusieurs fois ma demande, cela m'a aidé à trouver la bonne manière de faire des recherches et j'ai finalement trouvé ce que je cherchais :
Et les liens, c'est présumément parce que tes icones doivent servir à quelque chose, et donc qu'elles doivent être cliquables. Là tu fais des listes vides pour rien, qui sont donc inutilisables et qui rendent la page incompréhensible pour un malvoyant qui utiliserai un lecteur d'écran.
Le HTML doit être utilisé dans les règles, et la règle principale c'est le respect du principe de sémantique. Pour faire une action au clic, on utilise un bouton ou un lien, pas un élément de liste vide qui n'a rien à faire là…
Et les liens, c'est présumément parce que tes icones doivent servir à quelque chose, et donc qu'elles doivent être cliquables. Là tu fais des listes vides pour rien, qui sont donc inutilisables et qui rendent la page incompréhensible pour un malvoyant qui utiliserai un lecteur d'écran.
Le HTML doit être utilisé dans les règles, et la règle principale c'est le respect du principe de sémantique. Pour faire une action au clic, on utilise un bouton ou un lien, pas un élément de liste vide qui n'a rien à faire là…
Merci pour tes indications, d'un point de vue personnel j'essaye autant que possible de respecter la sémantique. Mais malheureusement il faut parfois passer outre pour avoir le résultat voulu.
Cependant, je me suis rendu compte que j'avais mal copié collé le code et donc mes balises "li" transformées en image cliquable sont maintenant des balises "i" ;), j'arrive donc à ce résultat là :
Je pense donc être bon d'un point de vue sémantique. Je suis proche du résultat final mais il me reste cependant un problème :
Mon résultat actuel est celui-ci :
Le problème est qu'à cause d'un code déjà écrit par une tierce personne et que je ne peux modifier (code générique appelé sur chaque page du site), je me retrouve avec un padding de 0. En décochant la case sur l'outil développeur de Chrome cela règle le problème mais comment je peux faire via le css ?
Ce que tu peux faire c'est mettre un padding-left sur .projet ul, et cela sera répercuté sur tous les ul descendants de .projet
Oui c'est devenu un peu le bazar sur le topic mais c'est plus clair maintenant ^^. Ta solution fonctionne parfaitement, un grand merci
Aligner des "li" d'une certaine manière
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Pas d'aide concernant le code par MP, le forum est là pour ça :)