Flux html/css et javascript
Bonjour à tous,
J'utilise un javascript permettant d'avoir un système fluide de gestion de div sur ma page HTML (changez à la main la largeur de votre browser sur le lien de test, vous verrez l'effet).
Le problème est que ce script utilise des div ".box" qu'il positionne en absolu et que cela créée un peu le foutoir dans mon flux de la page HTML.
En effet, à cause de ce positionnement, je n'arrive pas à placer ma div "footer" (barre rouge dans l'exemple) en dessous de ma div "content".
Alors voilà, si quelqu'un pouvait me dire comment faire, ce serait super.
J'y ai passé ma journée d'aujourd'hui, sans succès.
J'ai essayé tous les "clearfix" du web, sans succès.
J'ai également essayé de changer dynamiquement (en javascript) la hauteur css de ma div content, ce qui devrait régler le problème de flux, sans succès (un offsetHeight sur la div content ne renvoie aucune valeur).
Voici le lien de test
Et ci-dessous le code complet...
Merci pour votre aide!
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
64
65
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style>
body
{
margin:0;padding:0;
}
html,body
{
height:100%;
}
#footer
{
clear:both;
width:100%;
height:120px;
background-color:red
}
</style>
<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
var myFluidGrid = {
COLNUMBER : 1,COLMARGIN : 10, COLWIDTH : 222,
doLayout : function() {
var self = this;var pointer = 0;var arr = [];
var columns = Math.max(this.COLNUMBER, parseInt($('body').innerWidth() / (this.COLWIDTH + this.COLMARGIN)));
$('.box').css('position', 'absolute').css('width', this.COLWIDTH + 'px');
$('.box').each(function() {
var tempLeft = (pointer * (self.COLWIDTH + self.COLMARGIN));
$(this).css('left', tempLeft + 'px');
var tempTop = 0;
if (arr[pointer]) { tempTop = arr[pointer]; }
$(this).css('top', tempTop + 'px');
arr[pointer] = tempTop + $(this).outerHeight() + self.COLMARGIN;
pointer++;
if (pointer === columns) { pointer = 0; }
});
}
};
$(window).ready(function() {myFluidGrid.doLayout();}).resize(function() {myFluidGrid.doLayout();});
</script>
</head>
<body>
<div id="content">
<div class="box"><img src="medias/images/other/000000001.jpg" height="410" width="224"></div>
<div class="box"><img src="medias/images/other/000000002.jpg" height="160" width="224"></div>
<div class="box"><img src="medias/images/other/000000003.jpg" height="310" width="224"></div>
<div class="box"><img src="medias/images/other/000000004.jpg" height="250" width="224"></div>
<div class="box"><img src="medias/images/other/000000005.jpg" height="170" width="224"></div>
<div class="box"><img src="medias/images/other/000000006.jpg" height="450" width="224"></div>
<div class="box"><img src="medias/images/other/000000007.jpg" height="330" width="224"></div>
<div class="box"><img src="medias/images/other/000000008.jpg" height="140" width="224"></div>
<div class="box"><img src="medias/images/other/000000009.jpg" height="390" width="224"></div>
</div>
<div id="footer"></div>
</body>
</html> |
