Décalage div (Google Maps) dans un div

Version imprimable

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

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:

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:

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> 
..rien ne se produit, ce qui parait logique puisque le div est vide. :?

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

07/01/2009, 09h53
c_s_s
Bonjour,

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

1 2 3 #contenttext #map { margin-left: 0; }
A placer après les déclarations de #contenttext div
07/01/2009, 11h59
paradise

Merci pour ta réponse, mais ça ne marche pas.. :?
Pourtant ça devrait, je suis d'accord.
07/01/2009, 12h06
paradise
Même en inline ça ne fonctionne pas :
Code:

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 :?
07/01/2009, 12h09
c_s_s

Tu as une page en ligne pour y jeter un oeil ?
07/01/2009, 12h24
Bisûnûrs

Citation:

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.
08/01/2009, 10h06
paradise

@css : non, mais je te poste une capture
http://img214.imageshack.us/img214/8...5831gz6.th.jpg

@Bisûnûrs : oui tu as raison. Même sur le div #map en inline ça ne fait rien.
08/01/2009, 11h29
c_s_s

Si tu n'as pas de page en ligne, peux-tu mettre le code HTML/CSS complet ici ?
08/01/2009, 15h03
devyan

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:

#map div {margin:0;}

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

Voili :D
08/01/2009, 15h28
c_s_s

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. :aie:

OK je comprends :)
Voilà pour le html (simplifié) :

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
<!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:

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; }

08/01/2009, 16h00
c_s_s

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:

#map div {margin:0;}

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

;)
08/01/2009, 16h56
paradise

Ok.
Je ne peux plus tester, j'ai procédé autrement. ;)
Merci à vous
08/01/2009, 18h21
devyan

Citation:

Envoyé par paradise

Ok.
Je ne peux plus tester, j'ai procédé autrement. ;)
Merci à vous

8O Sympa :aie:

Quoi qu'il en soit n'oubliez pas ... :resolu:
14/01/2009, 12h09
paradise

Citation:

Envoyé par devyan

8O Sympa :aie:

Ne le prends pas mal :D
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.
14/01/2009, 14h54
devyan

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+