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>
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>
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 ?
ne faudrait-il pas ajouter un
clear:both;
en fin de mosaique ?
ici ?
<hr style="clear:both;vidibility:hidden;">
Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
oui, merci, c'est ce que j'ai fait.
mais ça ne règle pas tout, un bon vieux <br /> a fait l'affaire ;-)