Décalage div (Google Maps) dans un div

**paradise** · 06/01/2009, 17h32

Salut
Le bloc div "principal" de mon site est très simplement défini comme suit :

Code :

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

1
2
3
4
5
6
#contenttext {
	padding: 0 10px 0 0; 	
	float: right;		
	width: 580px;	 
	text-align: justify;
	overflow: auto; }

Il contient principalement des paragraphes de texte, etc. mais aussi quelques autres blocs div pour lesquels je mets un décalage par souci de présentation :

Code :

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

1
2
3
#contenttext div {
	margin-left: 15px;	 
	margin-bottom: 10px; }

Cela fonctionne parfaitement avec les images ou autres, mais je ne sais pourquoi un bloc div contenant une carte Google Maps l'accepte mal : seul le "graphique" de la carte est décalé, son conteneur ne tient pas compte du décalage ce qui donne à gauche une bande grise (très moche) de 15 pixels.
Comment annuler le décalage uniquement pour cette carte (et tant pis si elle reste à gauche) ? En modifiant le style (margin ou padding) de la carte que voici :

Code :

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

1
2
3
4
5
6
7
<div id="contenttext"> 					
      (...)
      <h3>Map</h3>		 
      <p>You can click on the mark to view adress:</p>	
 
      <div id="map" style="width: 520px; height: 400px;"></div>
</div>   <!-- /contenttext -->

..rien ne se produit, ce qui parait logique puisque le div est vide.

Des idées ? Je suis un peu paumé là...
Merci !

**c_s_s** · 07/01/2009, 09h53

Bonjour,

Pour annuler le décalage à gauche sur le bloc de la carte, tu peux faire :

Code css :

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

1
2
3
#contenttext #map {
	margin-left: 0;	 
}

A placer après les déclarations de #contenttext div

**paradise** · 07/01/2009, 11h59

Merci pour ta réponse, mais ça ne marche pas..

Pourtant ça devrait, je suis d'accord.

**paradise** · 07/01/2009, 12h06

Même en inline ça ne fonctionne pas :

Code :

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

1
2
3
4
5
6
<div style="margin: 0;">		 
 
    <div id="map" style="width: 520px; height: 400px;"></div>	
 
    <p>un texte pour voir</p>
</div>

La seule solution qui fonctionne est de supprimer les margin de #contenttext div. A remettre ensuite individuellement pour tous les div concernés

**c_s_s** · 07/01/2009, 12h09

Tu as une page en ligne pour y jeter un oeil ?

**Bisûnûrs** · 07/01/2009, 12h24

Envoyé par paradise

Même en inline ça ne fonctionne pas

Le margin:0 doit être sur le div map et non pas sur le div parent.

**paradise** · 08/01/2009, 10h06

@css : non, mais je te poste une capture

@Bisûnûrs : oui tu as raison. Même sur le div #map en inline ça ne fait rien.

**c_s_s** · 08/01/2009, 11h29

Si tu n'as pas de page en ligne, peux-tu mettre le code HTML/CSS complet ici ?

**devyan** · 08/01/2009, 15h03

Bonjour,

d'après le fonctionnement décrit il manque une information (qui chagrine c_s_s

)

Dans #map tu dois certainement avoir un autre DIV et c'est celui-ci qui a une marge à cause de #contenttext div.

Il faudrait ajouter une déclaration du type

Code :

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

#map div {margin:0;}

pour annuler la marge positionnée sur les DIV "déscendants" (et pas seulement enfants directs) de #contenttext

Voili

**c_s_s** · 08/01/2009, 15h28

T'as vu juste deyan, j'ai bien l'impression que le problème vient de ce qu'il y a dans le bloc #map, et pas du bloc #map lui-même.

Seul paradise pourra nous éclairer sur ce point.

**paradise** · 08/01/2009, 15h46

OK je comprends

Voilà pour le html (simplifié) :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>			
  <style type="text/css">@import url(../css/xylo.css);</style>	
 
  <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQ..." type="text/javascript"></script>
  <script type="text/javascript">
		//<![CDATA[
    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
         map.setCenter(new GLatLng(43.647, 3.870), 16, G_HYBRID_MAP);                                           
                                
        map.addControl(new GLargeMapControl());                                 
        map.addControl(new GMapTypeControl());                           
        map.addControl(new GOverviewMapControl());      
      }
    }           //]]>
  </script>	
</head>											 
 
<body onload="load()" onunload="GUnload()"	
<div id="container">
 
  <!-- Contenu -->
  <div id="content"> 	
 
    <!-- Navigation gauche -->
    <div id="leftbar"> 			
	<h3>Navigation</h3>
	<ul class="menu">
	<li><a href="index.html"><span>Accueil</span></a></li>
         <li><a href="membres.html"><span>Membres de l''équipe</span></a></li>
	<li><a href="contact.html"><span>Nous contacter</span></a></li>
	</ul>
    </div>	
 
    <!-- Texte -->			
    <div id="contenttext"> 	
 
	<h3>Map</h3>	
 
	<div id="map" style="width: 520px; height: 400px; margin: 0;"></div>	
 
	</div>   <!-- /contenttext --> 						
 
  </div>   <!-- /content -->		
 
</div> 	<!-- container -->
</body>
</html>

Comme vous le voyez, il n'y a rien dans le #map ! C'est la syntaxe Google :
http://code.google.com/intl/fr/apis/...GettingStarted

Tout se passe dans le body.onload

et voilà le CSS, abrégé aussi :

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
#container {
	width: 780px;
	margin: 20px auto;
	text-align: left;
       background-color: transparent; }
/*** Contenu principal ***/	
#content {
	width: 100%;	
	overflow: auto;			
	border: 3px solid #1D3E2D;	 
	background: #FFF;	}			
/*** Menu de gauche ***/
#leftbar {
       float: left;
       width: 180px;	
       margin: 0 0 100px; 
	padding-top: 8px; }
/*** Contenu ***/
#contenttext {
	padding: 0 10px 0 0;
	float: right;		
	width: 580px;	 
	text-align: justify;
	overflow: auto; }

**c_s_s** · 08/01/2009, 16h00

Le bloc est vide au départ mais le script en haut de page vient ajouter des blocs (des divs) dans ton bloc #map.

La solution proposée par devyan est donc la bonne pour corriger ton problème.

Code css :

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

#map div {margin:0;}

J'ai testé, tout est ok après correction.

**paradise** · 08/01/2009, 16h56

Ok.
Je ne peux plus tester, j'ai procédé autrement.

Merci à vous

**devyan** · 08/01/2009, 18h21

Envoyé par paradise

Ok.
Je ne peux plus tester, j'ai procédé autrement.

Merci à vous

Sympa

Quoi qu'il en soit n'oubliez pas ...

**paradise** · 14/01/2009, 12h09

Envoyé par devyan

Sympa

Ne le prends pas mal

Après vérif les margin dans mon div #contenttext ne s'appliquaient qu'à peu d'éléments (très peu de "sous-div" dans #contenttext, seulement du texte <p>) donc j'ai appliqué les margin directement aux éléments concernés.
C'est du bricolage certes, mais c'est rapide et ça fonctionne.

**devyan** · 14/01/2009, 14h54

Salut,

Je ne le prends pas mal simplement il est intéressant pour tout le monde de savoir si les solutions proposées sont correctes (surtout lorsque l'on fait une recherche sur le forum)
Après, effectivement chacun fait comme il veut

A+

Décalage div (Google Maps) dans un div

CSS

Discussions similaires

Partager

Partager