28172 sujets

CSS et mise en forme, CSS3

Cadre/bordure sur UL ou LI

Bonjour à tous,

J'ai une liste <ul> composé de <li> (nombre de li variable), jusqu'ici rien d'extraordinaire.
En revanche j'aimerais pouvoir mettre un cadre/bordure autour des 6 premiers élements, comme l'image ci-dessous (en rouge). Comment puis-je faire ?
upload/58065-Sanstitre.png

Merci à tous.
Modifié par KevinMoreau (11 Mar 2015 - 14:23)
Salut,

soit scinder ta liste avec deux <ul> et appliquer un contour a ta premiere liste de 6 éléments, mais sémantiquement parlant je ne sais pas si c'est approprié suivant le contenu de ta liste de la diviser en deux.

Sinon superposer un bloc transparent avec un contour sur les 6 premiers éléments de ta liste.
Bonjour,

si tes boites sont carrées tu peut toujours generé un cadre a partie de la 6eme boite.

http://codepen.io/gc-nomade/pen/vEVxdZ

à l'aide du duo relative /absolute et des specifité propre aux marges verticales internes et externes exprimées en pourcentage qui prennent les largeurs en references.

Le montage en lien fonctionne sur des valeurs en %.
Bonjour,
Merci pour vos réponses.
Pedrothelion a écrit :
Salut,

soit scinder ta liste avec deux &lt;ul&gt; et appliquer un contour a ta premiere liste de 6 éléments, mais sémantiquement parlant je ne sais pas si c'est approprié suivant le contenu de ta liste de la diviser en deux.

Sinon superposer un bloc transparent avec un contour sur les 6 premiers éléments de ta liste.


Effectivement Pedrothelion je ne peux pas scinder ma liste qui j'ai oublié de préciser, est une liste autorisant le drag & drop, j'ai donc besoin de tous mes éléments dans la même liste.

La solution de gc-nomade est fonctionnel, sauf dans mon cas du fait que ma liste est une liste drag & drop. Je m'explique :
La bordure appartient au 6eme élément de la liste, mais elle contient aussi les 5 premiers elements, le drag & drop n'est alors plus disponible.

Si vous avez d'autres solutions je prend, je garde dans un coin de ma tête l'idée de l'image à fond transparent.

Merci d'avance
KevinMoreau a écrit :
Bonjour,
Merci pour vos réponses.
La bordure appartient au 6eme élément de la liste, mais elle contient aussi les 5 premiers elements, le drag &amp; drop n'est alors plus disponible.

Dans ce cas il suffit d'appliquer le pseudo sur le parent : <ul> http://codepen.io/anon/pen/vEVpop
Un peu d'initiative , que diable! Smiley smile
Sujet clos
Aller à