Bonjour à tous,
Je suis actuellement en train de réaliser une version d'un site web pour mobile (iPhone et iPad particulierement) avec l'API Google Maps mais je rencontre actuellement des problèmes sur la hauteur de certaines balises.
Je vous donnes mon code puis vous expliques mon problème.
Code HTML minimisé:
Code CSS minimisé
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 <div> <div id="map_canvas"></div> <div id="options"> <div id='head_menu'> <div id='title_menu'>Menu</div> <div id='close_menu'></div> </div> <div id='container_runners_table'> <table id='runners_table'> <tr class='table_header'><th><input type='checkbox' /></th><th><input type='checkbox' /></th><th>Nom</th><th>Icones</th></tr> <tr><td><input type='checkbox' /></td><td><input type='checkbox' /></td><td>Titi</td><td>#</td></tr> <tr><td><input type='checkbox' /></td><td><input type='checkbox' /></td><td>Toto</td><td>#</td></tr> <tr><td><input type='checkbox' /></td><td><input type='checkbox' /></td><td>Riri</td><td>#</td></tr> <tr><td><input type='checkbox' /></td><td><input type='checkbox' /></td><td>Fifi</td><td>#</td></tr> <tr><td><input type='checkbox' /></td><td><input type='checkbox' /></td><td>Joe</td><td>#</td></tr> </table> </div> </div> </div>
Avec ce code ma div #options vient se placer au centre de ma page avec 50% de largeur (pas de soucis).
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 #options{ position:absolute; top:35px; left:25%; background-color:#FFFFFF; width:50%; z-index:999; } #head_menu { background-color:#5380D4; height:30px; color:#FFFFFF; font-family:"Tahoma"; font-size:12px; text-align:center; font-weight:bolder; } #title_menu { float:left; height:20px; margin-top:5px; margin-left:30px; text-align:right; } #close_menu { height:20px; width:20px; float:right; background-image:url("../images/close_cross.png"); margin-right:5px; margin-top:5px; } #container_runners_table { border:none; } #runners_table { text-align:center; border-collapse:collapse; width:100%; font-size:10px; font-family:"Tahoma"; border:1px solid #3A3A3A; } #runners_table th { border: 1px solid #3A3A3A; padding-top : 2px; padding-bottom : 2px; } #runners_table td { padding-top:2px; padding-bottom:2px; }
Le probleme vient de la hauteur.
J'aimerai que ma fenêtre #options fasse 80% de haut (donc ne depasse pas du cadre qui est la carte Google Maps et que ce soit la div #container_runners_table qui prenne une scrollbar lorsque je commence a avoir beaucoup de ligne dans mon tableau.
Actuellement ma div dépasse de la carte ce qui n'est vraiment pas terrible
J'espere que c'est comprehensible ce que je raconte.
Merci d'avance pour vos réponses qui me seront vraiment très utile.
Partager