[div] flottant comme dans picasa web

Version imprimable

17/12/2007, 21h59
anthyme

[div] flottant comme dans picasa web

Bonjour,

j'aimerai en fait arriver a faire des bloc flotant comme les album de picasaweb.

en gros j'ai 7 albums j'arrive sur la page il me met 4 albums centré en haut et 3 centré en bas, si je redimentionne la page il m en met 3 en haut, 3 au milieu et un en bas toujours centrés...

exemple pratique surement plus compréhensible: http://picasaweb.google.com/Anthyme

J'aimerai faire cela mais je n y arrive pas les float aurai pu m aider mais ca les fait quitter le flux et je n'arrive plus a les centrer ...

est ce que vous pouvez me donner un coup de main ?

Merci :)
18/12/2007, 09h31
Furiuos

Tu peux nous donner ton code source ?

Code:

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
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html>
<head>
	<title>Django-Gallery</title>
	<link rel="stylesheet" href="site_media/css/base.css" />
<link />
</head>
<body>
	<div class="main">
		<div class="middle">
 
Albums :<br/>
 
<div class="albumscontainer">
 
 
<div class="album">
	<img src="http://pythonaddict.free.fr/albums/Mini/20071202-IMGP2475.jpg"/><br/>
	<a href="/gallery/1/">alallaal</a><br/>
	sdfdsfsddf
</div>
 
 
 
<div class="album">
	<img src=""/><br/>
 
	<a href="/gallery/2/">alallaal</a><br/>
	sdfdsfsddf
</div>
 
 
 
<div class="album">
	<img src=""/><br/>
	<a href="/gallery/3/">alallaal</a><br/>
	sdfdsfsddf
 
</div>
 
 
 
<div class="album">
	<img src=""/><br/>
	<a href="/gallery/4/">alallaal</a><br/>
	qdsdqsq
</div>
 
 
 
<div class="album">
 
	<img src="http://pythonaddict.free.fr/albums/Mini/20071202-IMGP2475.jpg"/><br/>
	<a href="/gallery/5/">alallaal</a><br/>
	sqqddqqd
</div>
 
 
</div>
 
		</div>
	</div>
</body>

Code:

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
body {
	background-image: url(/site_media/img/background.gif);
	margin: 0px;
}
 
div.main {
	margin-right: 20px;
	margin-left: 20px;
	margin-top: 20px;
	margin-bottom: 20px;
}
 
div.middle {
	background-color: black;
	color: white;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	float: left;
}
 
 
div.albumscontainer {
	margin-left: auto;
	margin-right: auto;
	position: relative;
}
 
 
 
div.album {
	border: 1px;
	border-color: white;
	border-style:solid;
	margin: 25px;
	line-height:normal;
	width: 200px;
	float:left;
	text-align: center;
}

Voila en gros apres 1000 bidouillage :?

19/12/2007, 12h27
webmatrix

La solution à ce que je te propose c'est d'utiliser des dhtml.
Va faire un ptit tour par ici :D

Fais nous savoir si c'est ce que tu veux? ou si çà a résout tes problèmes
19/12/2007, 13h17
anthyme

mince le lien que j ai passé ne fonctionne que si je suis connecté :aie:

voici le bon lien (ca sera beaucoup plus clair) :

http://picasaweb.google.com/Anthyme

sinon juste pour de l'affichage je suis pas super motiver a inserer du javascript ... :?
26/12/2007, 22h54
anthyme

bon bin snif :(
26/12/2007, 23h58
webmatrix

essai avec http://script.aculo.us :king: