Discussion :

[julien.63]

salut,
J'essai de décrocher de la mise en page tableau mais je ne maitrise pas encore vraiment le css.
je voudrais placer un calque(1) qui contient en contient deux autres (2 et 3) l'une à coté de l'autre.
Le contenu de 2 et de 3 peut varier c'est pourquoi j'utilise position:relative pour 2 et 3 (avec absolute, ils peuvent dépasser en bas).
Mon souci c'est que j'ai du mal à placer le 3.
Ma question est : est ce que le positionnement relatif se fait toujours à partir de calque précédent ou est ce qu'on peut spécifier le calque de référence?
merci pour vos conseils
Julien

[psychoBob]

Ce sont les propriétés float: left et float:right qu'il faut utiliser respectivement pour tes blocs à gauche et à droite à l'intérieur de l'élément parent.

Et si ça tiens pas, peut être en rajouter un troisième en dessous des deux, avec les propriétés width:100% et

la propriété c'est clear:both

[julien.63]

oui ça fonctionne bien , mes deux div (2 et 3) sont bien placés.
mais le souci c'est que le div 1 qui n'englobe pas les deux autres.

[psychoBob]

files ton code css et html.

[<romain/>]

tu mes les 2 et 3 en float left et tu en rajoute un 4eme en float left egalement mais avec un clear:both en plus...

Les 3 sont mis dans le bloc 1 et voila

[julien.63]

code html (j'ai éclaircit pour que cela soit plus clair) :
j'ai un div principal qui contient tous les autres id=content
* ensuite deux div: un à gauche (box_left) et un à droite (box_right)
* et div id="ref_map" qui se situe à l'angle supérieur gauche de box_left
* et enfin div class="map_loading" qui se situe au centre de box_left

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
 
	<div id="content">
	<? php ?>
<div class="map_loading" id="loading" style="display:none"><br>Please wait<br><img src="images/loadingbar.gif"><br></div>
	<div id="ref_map" class="map_ref_map" <? echo $ref_map_display; ?>><img src="/tmp/<? echo $ref_name; ?>" border="1"></div>
	<div class="map_ref_map_cross"><a href="#" onclick="hideShowRefMap()"><img name="cross" <? echo $cross_src; ?> width="10"  ></a></div>
 
 
	<div id="box_left">
	<!--<div id="map_main">-->
	<input type="image" class="map" border="0"  name="img" id="img" src="/tmp/<? echo $image_name; ?>" usemap="#bird">
 
	<p id="map_footer">
	<strong>Map Extent:</strong> <?php echo $new_extent; ?> - <strong>Map scale:</strong> 
	</p> <!--end of map_footer-->
	<p id="map_footer">
	scale
	</p> <!--end of map_footer-->
	</div> <!-- end of box_left -->
 
 
	<div id="box_right">
	 <p><input type=submit name="refresh" value="Draw"></p><hr>
	<p><strong><a href="#" onclick="hideShow('tools',0)">Tools</a></strong></p>
	<hr>
	<p><strong><a href="#" onclick="hideShow('layers',0)">Layers</a></strong></p>
	<hr>
	<p id="p_menu1"  style="display: block"></p>
	<p id="p_menu2" style="display: none"></p>
	<p id="p_menu3"  style="display: none"></p>
	</div> <!--end of right_box-->
</div><!--end of content-->

le code css :

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
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
66
67
68
69
70
71
72
#content {
 background-color:blue;
 margin: 0;
 padding: 10px 10px 100px 10px;
 height:100%;
}
 
#box_left{
	float: left;
	width: 590px;
	z-index:0;
}
 
#box_right{
	background-color: white ;
	float:right;
	width:180px;
	border:solid 1px black;
	text-align: center;
	font-size: 12px;
	font-family: arial;
}
 
#map_main {
	background-color: #E7E4E4 ;
	position: relative;
	width: 590px;
	height: 400px;
	z-index:0;
}
 
#map_menu {
	background-color: white;
	position: relative;
	width: 180px;
	border:solid 1px black;
	text-align: center;
	font-size: 12px;
	font-family: arial;}
 
#map_footer {
	top:8px;
	width: 590px;
	border:solid 1px black;
	text-align: center;
	font-size: 10px;
	font-family: arial;
}
 
.map_loading {
	text-align:center;
	position: absolute;
	background-image:url("../images/green_square.png");
	top: 160px;
	left:195px;
	width: 200px;
	height: 80px;
	border:solid 2px black;
}
 
.map_ref_map{
	float: left;
	top:5px;
	left:5px;
}
 
.map_ref_map_cross{
	z-index:10;
	position: absolute;
	top:5px;
	left:5px;
}

merci d'avance de votre aide car c'est vraiment la pagaille...
Julien

[Thomus38]

tu mes les 2 et 3 en float left et tu en rajoute un 4eme en float left egalement mais avec un clear:both en plus...

Les 3 sont mis dans le bloc 1 et voila

Ok, ça marche quand tu n'a que du texte! Car moi la j'ai une photo dans le 2 et du texte dans le 3 et le 4 qui à juste clear:both en plus comme tu as dit (le tout englobé dans 1).
Résultat, ma photo dépasse du cadre 1... Comment faire pour que 1 s'adapte en fonction de ce qu'il y a dans 2 et 3 (même si c'est des images!!!)

Merci !

[julien.63]

moi aussi j'ai une image dans la boite 2, ça fonctionne.
est ce que tu as precisé width et height dans ta feuille de style? Si oui essaye sans.

[Thomus38]

ben écoute, j'ai fait ça ouais regarde :

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
 
 
#contenu .cadre1 {
	/*width: 100%;*/
	margin-bottom: 20px;
	border: 2px solid black;
	font-family:arial;
	color:black;
}
 
#contenu .cadre1 .2 {
	float:left;
	text-align:left;
	padding:4px;
	}
 
#contenu .cadre1 .3 {
	text-align:justify;
	font-size:12px;
	padding:5px;
}
#contenu .cadre1 .4{
 
	float:left;
	clear:both;
	}

Sous IE, pas de problème mais sous FF, l'image dépasse du cadre 1 (alors que l'image est dans le cadre2 qui est censé etre dans le cadre1 !!)

[Thomus38]

Pour une fois que IE est gentil et FF est méchant