Problème de mise en page d'images

**Oberown** · 30/11/2006, 16h23

Bonjour,

J'ai un album photos où je voudrais peut importe la taille de l'écran les photos prennent toute la largeur.

J'ai réussi à le faire avec des ul et li

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
ul{
margin: 0px;
}
 
 
li{
display: inline;
list-style-type: none;
padding: 0.5em;
}
 
<ul>
<li><img src="1.jpg" alt="" 
height="100" /></li>
<li><img src="2.jpg" height="80"/></li>
<li><img src="3.jpg" height="20" /></li>
<li><img src="4.jpg" height="100" /></li>
<li><img src="5.jpg" /></li>
</ul>

Mais j'ai un problème je voudrais être capabale de mettre une légende en dessous de chaque image. Et le seul moyen que j'ai trouvé c'est d'utiliser un tableau. C'est crade je trouve. Il doit exister un autre moyen ?

Je voudrais faire en gros une présentation comme dans les albums de picasaweb http://picasaweb.google.com/home

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Test</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
 <style type="text/css">
/* <![CDATA[ */ 
   
ul{
margin: 0px;
}
 
 
 
li{
display: inline;
list-style-type: none;
padding: 0.5em;
}
 
table{
display:inline;
}
 
/* ]]> */
</style>
</head>
 
<body>
 
<ul>
<li><table><tr><td><img src="1.jpg" alt="" 
 
height="100"/></td></tr><tr><td>Description</td></tr></table></li>
<li><img src="2.jpg" height="80"/></li>
<li><img src="3.jpg" height="20" /></li>
<li><img src="4.jpg" height="100" /></li>
<li><img src="5.jpg" /></li>
<li><table><tr><td><img src="6.jpg" alt="" height="80"/></td></tr><tr><td>Description 
 
2</td></tr></table></li>
<li><img src="7.jpg" /></li>
<li><img src="8.jpg" /></li>
<li><img src="9.jpg" height="80" /></li>
<li><img src="10.jpg" height="20" /></li>
</ul>
 
</body>
</html>

merci beaucoup pour votre aide

**Oberown** · 30/11/2006, 17h11

Je veux faire comme ici

http://demo.phpwebgallery.net/index.php?/category/24

Mais le problème je n'arrive pas à trouver sur les css les class

thumbElmt
wrap1
wrap2
thumbnail
thumbLegend

**MasterOfChakhaL** · 30/11/2006, 18h18

une piste...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<div id="gallery">
  <ul id="photos" >
    <li><img src="..." /></li>
    <li><img src="..." /></li>
    <li><img src="..." /></li>
    <li><img src="..." /></li>
    <li><img src="..." /></li>
    <li><img src="..." /></li>
    <li><img src="..." /></li>
  </ul>
  <div id="nav" >
    <a href="#" >page précédente</a>
    <a href="#" >page suivante</a>
  </div>
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
* {
  margin: 0;
  padding: 0;
}
 
#gallery {
  width: 510px;
  border: 1px solid black;
  margin: 3px;
}
 
#photos li {
  display: inline;
  padding: 2px;
}
 
#photos li img {
  width: 80px;
}
 
#nav {
  clear: both;
}

Voilà, j'ai écris ca vite fait, si ça marche du premier coup c'est cool.
Les dimensions sont données de manière un peu arbitraire...

Si tu as besoin d'explication... n'hésite pas...

Problème de mise en page d'images

CSS

Discussions similaires

Partager

Partager