Discussion :

[georgie2]

Bonjour

Je n'arrive pas à gérer le positionnement d'une div par rapport à une autre div dans une page, je ne sais pas pourquoi mais l'une semble "bloquée" au-dessus.

J'ai essayé les float, les position, les z-index... Elle semble réellement bloquée par quelque chose (ou alors je m'y prend mal !) ...

Je peux modifier sa taille, pour faire cohabiter mes deux div (mais ce que je veux, c'est mettre celle qui bloque en fond, sur toute la page, et celle plus petite par-dessus), mais quand j'essais de la passer en fond elle préfère descendre en bas !

La page est ici :
http://cartoperso.fr/nucleaire/nucleaire_france/
avec son CSS là :
http://cartoperso.fr/design/css/style_webmaps2.css

Il s'agit d'une carte. Je voudrais que la carte (div id=map) soit au fond en permanence, et la légende (div id=panel) par dessus sur la gauche.
Ces deux div sont contenues dans la div id=webmap.

[Torgar]

Salut,

Il faut utiliser le positionnement et l'ordre d'affichage (z-index), voici un exemple rapide :

Code html :

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

1
2
3
4
<div id="webmap" style="position: relative;">
	<div id="map" style="position: absolute; z-index: 1;"></div>
	<div id="panel" style="position: absolute; z-index: 2;"></div>
</div>

[georgie2]

En fait j'ai déjà testé cette solution, mais les div ne réagissent pas comme attendu...
Il y a vraiment quelque chose qui semble agir sur elle, je ne sais pas ...

[Torgar]

Poste nous le code généré s'il te plait. Je ne peux pas installer le plugin Google Earth.

[georgie2]

Ok, alors dans mon body, il n'y a que ça :

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<div id="webmap">       
    <div id="panel">
            <fieldset id="titre">                
                <h1>Nucléaire
                </h1>              
                <div align="center"><img src="../../design/img/webmaps/logo_nucleaire80x50.png">
                </div>               
                <h2>Le parc nucléaire français, les réacteurs, les centres de stockage et les projets en cours
                </h2>                         
            </fieldset>
 
            <div id="couches3">
            <img src="http://cartoperso.fr/nucleaire/img/legende.png" width="160" height="90" style="border:#000000 0px solid; padding-bottom:5px">
            </div>
 
            <fieldset id="couches2">
            <div style="color:#000000; font-size:17px; font-family:perpetua">
            <label><href="#" onclick="flamanville()" />>>> Aller à  l'EPR de Flamanville</label>
            <br>
            <label><href="#" onclick="gravelines()" />>>> Aller à  la centrale de Gravelines</label>
            <br>
            <label><href="#" onclick="fessenheim()" />>>> Aller à  la centrale de Fessenheim</label>
            </fieldset>
 
            <div id="couches3">
            <label><input type="checkbox" id="communes_densite.kmz" onclick="toggleFile(this.id)"/>
            <img src="http://cartoperso.fr/nucleaire/img/legende_densite.png" width="150" height="85" title="L'affichage de cette couche peut prendre un certain temps... Patientez !">
            </label>
            </div>
 
            <fieldset id="couches2">
           <div style="float:left">
                    <label><input type="checkbox" id="BUILDINGS" onclick="toggleLayer(this.id)"  />3D</label>
                    <br>
                    <label><input type="checkbox" id="BORDERS" onclick="toggleLayer(this.id)" />Labels</label>
                    <br>
                    <label><input type="checkbox" id="ROADS" onclick="toggleLayer(this.id)" />Routes</label>
                    <br>
                    </div>
 
                <div style="float:right">
                    <label><input type="checkbox" id="StatusBar" onclick="toggleOption(this.id)" />Position</label>
                    <br>
                    <label><input type="checkbox" id="ScaleLegend" onclick="toggleOption(this.id)" />Échelle</label>
                    <br>
                    <label><input type="checkbox" id="OverviewMap" onclick="toggleOption(this.id)" />Emprise</label>
                <br>
                </div>
            </fieldset>
 
            <!--Lien CartoPerso et Facebook-->
            <div style="float:left; padding-top:15px; padding-left:10px">
                <a href="http://cartoperso.fr/" title="Retourner au site CartoPerso !">www.CartoPerso.fr
                </a>
            </div>
 
            <DIV align="right" style="padding-top:15px">
                <a href="http://www.facebook.com/cartopersoweb" target="_blank">
                <img src="../../design/img/icones/facebook_logo_25x25.png" border="0" hspace="10">
                </a>
            </DIV>
	</div>
 
   	<div id="map"></div>
 
</div>

Et dans mon CSS, j'ai ça maintenant :

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
body {
	background-color:#2CBFF2;
}
 
#webmap {
	position:relative;
}
 
#map {
	position: absolute; 
	z-index: 1;
}
 
#panel {
	position: absolute; 
	z-index: 2;
}

Le tout me cale les deux div en haut à gauche, et me réduit la largeur de la div id=map (??!!)

(PS: Normalement l'intégralité de mon code est disponible, la carte est appelé via une fonction JavaScript, peut-être que c'est elle qui pose problème? Je sais que j'ai utilisé des balises fieldset inutilement, mais elles n'ont jamais posé problème.)

[rodolphebrd]

Je ne vois pas où vous voulez en venir avec votre balise #map. C'est une balise vide sans propriétés....

[georgie2]

En fait l'id de cette balise est lié à un JavaScript (celui-là : http://cartoperso.fr/nucleaire/js/ge.js), c'est elle qui contient la carte Google Map de ma page.

Ce qui me fait dire que c'est peut-être ça qui pose problème et rentre en conflit avec le CSS...