css/html mosaique dans une liste non ordonnée

Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Entraide Développement Développement Langage PHP css/html mosaique dans une liste non ordonnée

2 réponses

Une Bévue

14/09/2014 à 08:59

J'ai une liste représentant une arborescence de dossiers/fichiers photos.

Quand dans un répertoire j'ai des fichiers images, je souhaite
représenter ces images sous forme de mosaique :

Dossier 1
> sous-dossier 1
> sous-dossier 2
> sous-sous-dossier 1
> sous-sous-sous-dossier 1
> sous-sous-sous-dossier 2
[...]
> sous-sous-sous-dossier n
> sous-sous-dossier 2
> sous-dossier 3

la profondeur de l'arborescence dossier/sous-dossier est de trois, car
elle représente une date (yyyy/mm/jj), en réalité j'ai des trucs comme :

'Nikon Transfer 2'
> 1963
> 1974
[...]
> 2012
> 2013
> 02
> 09
> 15
> 22
> 2014

bien sûr dans 'Nikon Transfer 2/2013/09/22' j'ai n images que je
souhaite représenter en mosaique :

'Nikon Transfer 2'
> 1963
> 1974
[...]
> 2012
> 2013
> 02
> 09
> 15
> 22
[image 01] [image 02] [image 03] [image 04] [image 05]
[image 06] [image 07] [image 08] [image 09] [image 10]
> 2014

bon, côté html, j'ai qqc de cet ordre :
<body>
<div id='tree'>
Nikon Transfer 2
<ul>
<li>1963</li>
<li>1974</li>
[...]
<li>2012</li>
<li>2013
<ul>
<li>02</li>
<li>09
<ul>
<li>15</li>
<li>22
<ul> 
<li>
<div class='wrapper'>
<div class='box'>
<img src='image 1' />
<h3>Un titre 1</h3>
<p>Des commentaires 1</p>
</div>
[...]
<div class='box'>
<img src='image 2' />
<h3>Un titre 2</h3>
<p>Des commentaires 2</p>
</div>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>2014</li>
</ul>
</div>
</body>

ça marche "à peu près", si je poste évidemment, c'est qu'il y a un hic.
le hic est que la partie arborescence est déplacée graphiquement par les
images.

devant chaque nom de dossier j'ai l'image d'un dossier, là je n'utilise
pas des puces directement (j'ai mis list-style-type: none;) car trop
difficiles à centrer verticalement par rapport au texte de nom de dossier.

j'utilise :before par exemple :
.nikon_transfer_2 li.dir:before {
background: url("icons/folder.png") no-repeat scroll 50% 50%
transparent;
content: " ";
display: block;
height: 20px;
left: -20px;
position: absolute;
top: 0;
width: 20px;
}

bon le résultat *graphiquement* est ainsi :

[Img dossier] Nikon Transfer 2
[Img dossier] 1963
[Img dossier] 1974
[Img dossier] 02
[Img dossier] 15
|———————————|
[Img dossier] | | 2004
[Img dossier] | image | 2005
[Img dossier] | image | 2006
[Img dossier] | image | 2011
[Img dossier] | image | 2012
[Img dossier] | | 2013
[Img dossier] |———————————| 2014
[Img dossier] Orientation
[Img dossier] set-size-test

le nom du dossier est donc déplacé par le "flux image" par rapport à
l'icône de dossier, ça retrouve son cours normal, sous l'image.

Un exemple :
<http://cjoint.com/14sp/DIojbMwranC_ul-li-image.png>

2 réponses

SAM

23/09/2014 à 13:10

Le 14/09/14 08:59, Une Bévue a écrit :

j'utilise :before par exemple :
.nikon_transfer_2 li.dir:before {
background: url("icons/folder.png") no-repeat scroll 50% 50%
transparent;
content: " ";
display: block;
height: 20px;
left: -20px;
position: absolute;
top: 0;
width: 20px;
}

et, comme ça, au hasard :

.nikon_transfer_2 li.dir:before {
background: url("icons/folder.png") no-repeat scroll 50% 50%
transparent;
content: " ";
display: inline-block;
height: 20px;
left: -20px;
position: absolute;
top: 0;
width: 20px;
}

Non ?
Bon ...
et ce UL, c'est quoi son style ?

<ul> 
<li>
<div class='wrapper'>

ne faudrait-il pas ajouter un
clear:both;
en fin de mosaique ?

<p>Des commentaires 2</p>
</div>
</div>

ici ?
<hr style="clear:both;vidibility:hidden;">

</li>
</ul>

Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8

Une Bévue

04/10/2014 à 00:20

Le 23/09/14 13:10, SAM a écrit :

ne faudrait-il pas ajouter un
clear:both;
en fin de mosaique ?

oui, merci, c'est ce que j'ai fait.
mais ça ne règle pas tout, un bon vieux <br /> a fait l'affaire ;-)

css/html mosaique dans une liste non ordonnée

2 réponses

Veuillez sélectionner un problème