[CSS 2.1] Hauteur de page à 100% [Résolu]

somasimple · 07/07/2011, 11h58

Bonjour,

Dans cet exemple :
http://www.neurodynamique.fr/FindND/...ezidon%20Canon
comment faire pour que la deuxième rangée du tableau soit variable, c'est à dire qu'elle s'adapte à la fenêtre du navigateur ?
Je voudrai que la carte soit adaptée à la résolution du navigateur ?
Je voudrai que soient visibles : le header (titre), le content et le footer...

Merci de votre aide.

NoSmoking · 07/07/2011, 23h01

Bonjour,
le moins que l'on puisse dire c'est que la source est brouillon, plusieurs fois le même code javascript ?? du style inline et en fichier et surtout un usage abusif de TABLE in TABLE...mais bon...

Il te faut revoir la mise en page sur base de DIV

Je te mets un exemple de ce que cela pourrait donner à partir d'un squelette dispo sur mon disque, aménagé pour ton cas

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>[...]</title>
<style type="text/css">
html, body {
  height : 100%;
  margin : 0;
  padding :0;
  font-family : Verdana;
  font-size : 1em;
}
.larg {
  width : 1024px;
  margin : 0;
  margin-left : auto;
  margin-right : auto;
}
#main_page {
  top : 0px;
  height : 100%;
  background-color : #e0fee0;
  bottom : 30px; /* hauteur pied de page */
}
#tete_page{
  height : 70px;
  background-color : #e0e0fe;
}
#menu_page{
  padding : 10px;
  height : 50px;
  background-color : #f0e0ee;
}
#pied_page{
  margin-top : -30px; /* - hauteur pied de page */
  line-height : 30px;
  clear : both;
  background-color : #fee0e0;
  text-align : center;
}
#map_canvas{
  position : absolute;
/*  display : none; /* juste pour voir les emplacements */
  top : 120px; /* hauteur tete_page + menu_page */
  min-height : 500px;
  bottom : 30px;  /* hauteur pied de page */
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize(){
  // definition options map
  var mapOptions = {
    zoom : 6,
    center : new google.maps.LatLng( 46.9041736, 1.6352488),
    backgroundColor : "white",
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  // creation de la carte
  var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
  <div id="main_page" class="larg">
    <div id="tete_page">
      <b>Le TITRE</b>
    </div>
    <div id="menu_page">
      <b>le Menu</b>
    </div>
    <div id="map_canvas" class="larg">
      <b>Zone MAP</b>
    </div>
  </div>
  <!-- n'appartient pas a main_page -->
  <div id="pied_page" class="larg">
    copyright &copy; 2011
  </div>
</body>
</html>

je te laisse décortiquer, si tu as des questions n'hésite pas...

J'en profite pour un ou deux remarques
- l'API Google Map V2.x a été déclaré obsolète, autant passer à la V3.x
- le type de menu que tu utilises peut se réaliser entièrement en CSS
- penses à valider tes pages Markup Validation Service, cela aide parfois à supprimer des anomalies d'affichage

tiens finalement il y en à 3

somasimple · 08/07/2011, 06h10

Merci pour cette exemple :

Quelques questions/observations :

1/ Le charset "utf8" n'est pas franchement supporté sur le site car les appels SQL et l'affichage/renvois sont plus complexes (??).
2/ Je savais que l'usage des tables n'était pas très opportun.

3/ La carte est dynamique et fait appel à une BDD.

Je vais me mettre au travail pour rendre plus propre le code.

NoSmoking · 08/07/2011, 14h40

Citation:

1/ Le charset "utf8" n'est pas franchement supporté sur le site car les appels SQL et l'affichage/renvois sont plus complexes (??).

voir Passez à l'UTF-8 sans manquer une étape

Citation:

2/ Je savais que l'usage des tables n'était pas très opportun.

juste un problème de sémantique (X)HTML, une TABLE sert à contenir des données tabulaires justement mais pas à faire de la mise en page même si cela a beaucoup été utilisé.

Citation:

3/ La carte est dynamique et fait appel à une BDD.

qu'elle soit dynamique ou non ce qui compte c'est la DIV qui la reçoit, l'endroit ou GoogleMap mets les résultats.

somasimple · 08/07/2011, 15h59

Merci pour tous ces renseignements.
Je vais appliquer ces modifications dès que possible.

07/07/2011, 11h58	#1
somasimple Invité régulier Développeur Web Inscription : juin 2011 Messages : 21 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Développeur Web Secteur : Santé Informations forums : Inscription : juin 2011 Messages : 21 Points : 5 Points : 5	Hauteur de page à 100% Bonjour, Dans cet exemple : http://www.neurodynamique.fr/FindND/...ezidon%20Canon comment faire pour que la deuxième rangée du tableau soit variable, c'est à dire qu'elle s'adapte à la fenêtre du navigateur ? Je voudrai que la carte soit adaptée à la résolution du navigateur ? Je voudrai que soient visibles : le header (titre), le content et le footer... Merci de votre aide.
	00

08/07/2011, 06h10	#3
somasimple Invité régulier Développeur Web Inscription : juin 2011 Messages : 21 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Développeur Web Secteur : Santé Informations forums : Inscription : juin 2011 Messages : 21 Points : 5 Points : 5	Merci pour cette exemple : Quelques questions/observations : 1/ Le charset "utf8" n'est pas franchement supporté sur le site car les appels SQL et l'affichage/renvois sont plus complexes (??). 2/ Je savais que l'usage des tables n'était pas très opportun. 3/ La carte est dynamique et fait appel à une BDD. Je vais me mettre au travail pour rendre plus propre le code.
	00

08/07/2011, 15h59	#5
somasimple Invité régulier Développeur Web Inscription : juin 2011 Messages : 21 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Développeur Web Secteur : Santé Informations forums : Inscription : juin 2011 Messages : 21 Points : 5 Points : 5	Merci pour tous ces renseignements. Je vais appliquer ces modifications dès que possible.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email