Discussion :

[Gizmil]

Salut à tous,

J'ai décidé d'apprendre à utiliser les div pour designer plus facilement mes pages web. J'ai des problèmes avec le positionnement que je trouve un peu obscur à comprendre...

Imaginons une succession de blocs placés de cette manière:



Voici comment je code ça:

Code :

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

1
2
3
4
5
6
7
<div id="contener">
     <div id="1"></div>
     <div id="2"></div>
     <div id="3"></div>
     <div id="4"></div>
     <div id="5"></div>
</div>

Code :

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
#1{
     float:left;
     width:qqch px;
     height:qqch px;
}
#2{
     float:left;
     width:qqch px;
     height:qqch px;
}
#3{
     float:left;
     width:qqch px;
     height:qqch px;
}
#4{
     float:left;
     width:qqch px;
     height:qqch px;
}
#5{
     float:left;
     width:qqch px;
     height:qqch px;
}

Disons qu'ensuite, je veuille combler le trou situé entre les blocs 1 et 5 et sous les blocs 2, 3, 4, comment m'y prendre?



J'essaye ceci mais le bloc n°6 reste sous les autres:

Code :

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

1
2
3
4
5
6
7
8
<div id="contener">
     <div id="1"></div>
     <div id="2"></div>
     <div id="3"></div>
     <div id="4"></div>
     <div id="5"></div>
     <div id="6"></div>
</div>

Code :

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
#1{
     float:left;
     width:qqch px;
     height:qqch px;
}
#2{
     float:left;
     width:qqch px;
     height:qqch px;
}
#3{
     float:left;
     width:qqch px;
     height:qqch px;
}
#4{
     float:left;
     width:qqch px;
     height:qqch px;
}
#5{
     float:left;
     width:qqch px;
     height:qqch px;
}
#6{
     clear:both;
     width:qqch px;
     height:qqch px;
}

[BlindeKinder]

Salut,
Normal, il se met logiquement à la suite, comme indiqué dans le flux html, donc sous tout ce qui "flotte" au dessus...

Code :

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

1
2
3
4
5
div#6 {
height:  a px ; width: b px ; /*où a= hauteur div1 - hauteur div2 et b= largeur div2 + div3 + div4*/
position: absolute ;
top: x px ; left: y px ; /*où x= hauteur de 2 (ou 3, 4) et y largeur de 1 en pixels*/
}

Le positionnement absolute place l'élément (block) indifféremment du flux de la page, soit x=0px et y=0px: le coin en haut à gauche...
C'est une solution mais il y en a d'autre... tout dépend de la souplesse et le dynamisme que tu as besoin pour chaque div (doivent-ils s'allonger en fonction du contenu? doivent-ils se réduire avec la réduction du navigateur etc...)

[Gizmil]

Ok, merci pour cette solution qui m'éclaire sur les possibilités envisageables! Je me demandais justement si je pouvais utiliser une position absolue...

Sur un autre forum, on m'a aussi proposé une autre solution: placer les blocs 2, 3, 4 et 6 dans un bloc contener et placer ce bloc contener à côté du bloc 1. C'est pas idiot mais comme tu dis, tout dépend de ce que je veux faire...

[Gizmil]

J'ai encore une question par rapport à cette méthode de position absolue qui, en fait, ne fonctionne qu'à moitié!

La méthode que tu me proposes ne marche pas car le bloc 6 se met en position absolue en prenant pour référence d'origine x=0,y=0 le coin supérieur gauche de mon body, ce qui fait que si j'affiche mon site sur un écran dont la taille est différente que l'écran où je l'ai placé, le bloc n'est plus au bon endroit!
Mes blocs 1,2,3,4,5,6 sont pourtant placés dans un bloc contener! Ce qu'il faudrait, c'est que le bloc 6 se mette en position absolue en prenant pour référence d'origine le x=0,y=0 du bloc contener dans lequel il se trouve avec les autres blocs. Ca doit être possible de faire ça, non?
J'ai essayé en position relative mais quand j'essaye ça, il demeure sous mes blocs 1,2,3,4,5 un espace vide de la hauteur de mon bloc 6.

[BlindeKinder]

La solution la plus simple mais la plus statique: si l'ensemble 123456 reste fixe, je positionnerais tout en absolute... n'oublie pas de dimensionner tous les block positionnés! Pas besoin dans ce cas de mettre tes divs dans un block conteneur...
Ou alors 2 3 4 et 6 dans un conteneur, positionné lui même en relatif (avec margin left-right auto pour le centrer par exemple)...
Mais il faudrait qu'on sache ce que tu veux faire exactement avec tes block pour pouvoir t'aider mieux...

[Johnbob]

Ce qu'il faudrait, c'est que le bloc 6 se mette en position absolue en prenant pour référence d'origine le x=0,y=0 du bloc contener dans lequel il se trouve avec les autres blocs. Ca doit être possible de faire ça, non?

Il me semble que oui si ton bloc 6 est en "position:relative;" et si ton bloc conteneur est en "position:absolute;"

Sinon j'ai essayé de coder la solution alternative:

Code :

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
<html>
<head>
	<style type="text/css">
	.div1, .div2, .div3, .div4, .div5, .div6 {
		float:left;
		border:solid 1px #CCC;
	}
	.div2, .div3, .div4 { 
		width:50px;
		height:50px;
	}
	.div6 {
		 width:154px;
		 height:48px;
	}
	.div1, .div5 {
		width:50px;
		height:100px;
	}
	.divConteneur {
		float:left;
		width:156px;
	}
	</style>
</head>
<body>
	<div class="div1">1</div>
 
	<div class="divConteneur">
		<div class="div2">2</div>
		<div class="div3">3</div>
		<div class="div4">4</div>
		<div class="div6">6</div>
	</div>
 
	<div class="div5">5</div>
</body>

Mais ce n'est pas terrible

Une table pourrait faire l'affaire (même si c'est un usage détourné)

[Gizmil]

Merci pour votre aide! Finalement, je m'en suis sortis en mettant mes bloc 2,3,4,6 dans un bloc contener, ça a marché à mon deuxième essai! Désolé! Je n'ai pas compris pourquoi ça n'avait pas marché la première fois!

En tous cas, ça marche et c'est le principal!