css/html mosaique dans une liste non ordonnée

Le
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> <!-- représentation en mosaique des images -->
<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>
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
SAM
Le #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> <!-- représentation en mosaique des images -->
<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
Le #26313087
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 ;-)
Publicité
Poster une réponse
Anonyme