Forums Développement Développement Langage PHP

css/html mosaique dans une liste non ordonnée

Le dimanche 14 Septembre 2014 à 08:59

Une Bévue

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>

Partager ce contenu :

Vos réponses

Trier par : date / pertinence

SAM

Le 23/09/2014 à 13:10 #26311096

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

-1 Répondre en citant

Le 04/10/2014 à 00:20 #26313087

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

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

Poster une réponse