Calcul de la hauteur d'une page

Version imprimable

09/06/2006, 09h02
gailup

Calcul de la hauteur d'une page

Bonjour,

Voici ce que je veux faire :
J'ai mon site web développé avec PHP et du CSS pour les cadres. J'ai un cadre à gauche qui sert de menu et le contenu de ma page sur tout le reste et je veux calculer la taille en pixels de la page qui sera afficher dans le contenu, comme ça si la hauteur de ma page de contenu est inférieur à la hauteur de mon menu je rajoute des espaces après mon contenu pour avoir la meme hauteur sur toute ma page.

Voici ma question :
Est-il possible de faire ceci ? Si, avec quel language, comment faire, etc ?

Merci d'avance.

Gailup
09/06/2006, 09h05
Eusebius

Bonjour
Pour les mesures en pixels, si ton CSS est bien fait tu devrais pouvoir faire le compte.

Pour les ajustements, tu peux rajouter des "blocs" css blancs par exemple, mais comme il faut le faire sur des conditions il faut utiliser un langage de script. Tu peux modifier ton source HTML avec PHP, ASP, ou même peut-être Javascript chez le client. JS pourrait même te donner des indications plus précises sur la manière dont le client affiche ta page, mais je garantis rien.
09/06/2006, 09h11
gailup

En fait, voila mon site web : http://jnfontaine.free.fr
Avec IE, mes cadres sont alignés
Par contre si tu utilise Mozilla Firefox tu va voir mon erreur.

Et c'est à cause de Mozilla que je doit calculer la hauteur pour aligné mes pages en fonctions de la hauteur.

Gailup
09/06/2006, 09h23
Eusebius

Si tu respectes les standards W3C, tu n'auras pas de souci avec Mozilla et compagnie.

Un site internet doit être plutot vu comme un flux d'infos cadré en largeur (variable) et en hauteur indéfinie. Donc, on ne doit pas se poser la question "combien de pixel fait ma page", et, à mon humble avis, les site dont la hauteur est fixe, ne respect pas les principes d'accessibilité, les types de navigateurs extrémement différents (texte brut, vocal, IE, ...) . Les références dans ce domaine sont Firefox et Opéra.
Donc, si ca marche sous IE et pas sous Opéra/Firefox, c'est que ce n'est pas bon. Faut revoir sa copie. (à l'inverse, il faut malheureusement bidouiller)

Enfin, pour ton cas, je pense qu'il faut expliciter (dans le css) les margin et les padding de tes balises div.

Autre remarque: au vu du source généré, il y a un petit problème: une page avec plusieurs balise head et body, ce n'est pas très valide ...

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<HTML>
  <HEAD>
<!--Insertion des fichiers CSS pour les liens, boutons-->
    <link rel='stylesheet' type='text/css' href='struct/link.css'>
<!--Insertion des fichiers CSS pour les frames par rapport à la résolution décran du client-->
    <script type = 'text/javascript' language = 'Javascript'>
      var largeur = screen.width ;
      if(largeur < 1000){
        document.write("<link rel='stylesheet' type='text/css' href='struct/frame2.css'>") ;
        document.write("Attention ce site est pour du 1024 par 800") ;
      } else{
        if(largeur > 1100){
          document.write("<link rel='stylesheet' type='text/css' href='struct/frame2.css'>") ;
        } else{
          document.write("<link rel='stylesheet' type='text/css' href='struct/frame.css'>") ;
        }
      }
    </script>
  </HEAD>
  <BODY bgcolor = "#777777">
    <div id = "bandeau" border = 3>
<!-- BANDEAU -->
 
      blablablablablabla
    </div>
    <div id = "contenu">
<!-- PARTIE DE GAUCHE -->
      <div id = "gauche">
        <a href="index.php?page=accueil">ACCUEIL</a><br>
        <a href="index.php?page=calendar">CALENDRIER</a><br>
        <a href="index.php?page=folder">DOSSIER</a><br>
 
        <a href="index.php?page=news">NEWS</a><br>
        <a href="index.php?page=picture">PHOTOS</a><br>
        <a href="index.php?page=result">RESULTATS</a><br>
        <a href="index.php?page=schedule">HORAIRES</a><br>
        <a href="index.php?page=video">VIDEOS</a><br>
        <a href="index.php?page=P4">P4.COM</a><br>
 
        <br><br><br><br><br><br><br><br><br><br><br>fdkvkdfkv<br><br><br><br><br>dfndlgvnlndfl
      </div>
<!-- PARTIE DE DROITE -->
      <div id = "droite">
        Sondage, Pub<br><br><br>vldlcck
        <table border = 5 width = "140px" align = "center"><tr><td>PDFFDXXX  DSDSDSDSD</td></tr></table>
        <br><br><br><br><br><br><br><br><br><br><br>fdkvkdfkv<br><br><br><br><br>dfndlgvnlndfl
      </div>
 
<!-- PARTIE CENTRALE -->
        <HTML>
  <HEAD>
  </HEAD>
  <BODY>
    <center><h1>ACCUEIL, TOP 15 NEWS</h1></center>
    <br><br>
<!-- TABLEAU DE 700 PIXELS POUR L'ALIGNEMENT DES INFOS -->
    <table border=3 width=650 align=center><tr><td>
 
<!-- TABLEAU POUR LES 15 DERNIERES NEWS -->
      <!--<table border="" ></table>-->
          </td></tr></table>
<!-- Fin du tableau d'alignement des infos -->
  </BODY>
</HTML><br><br>
<center><b>Copyright 2006 - GAILUP</b></center>
    </div>
  </BODY>
</HEAD>

09/06/2006, 09h31
Eusebius

Un outil qui t'aidera à faire le ménage dans ton code :
http://validator.w3.org/
09/06/2006, 11h28
Maxoo

En effet, le code est tellement, disons : non standard que le validateur, ne peut meme pas continuer !!

J'ai aussi chercher à faire ça un moment, à partir de plusieurs recherche un peu partout j'ai réussi à établie un code qui marche bien sous tous les navigateurs :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
function getSize() {
var windowSize = new Array();
if (typeof(window.innerHeight && window.innerWidth) == "number") { // Navigateurs autres que IE
	windowSize["h"] = window.innerHeight;
	windowSize["w"] = window.innerWidth;
} else {
	if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) { // IE6+
		windowSize["h"] = document.documentElement.clientHeight;
		windowSize["w"] = document.documentElement.clientWidth;
	} else {
		if (document.body && document.body.clientHeight && document.body.clientWidth) { // IE4
			windowSize["h"] = document.body.clientHeight;
			windowSize["w"] = document.body.clientWidth;
		}
	}
}
 
return windowSize;
}

09/06/2006, 14h50
gailup

[CITATION]
Un site internet doit être plutot vu comme un flux d'infos cadré en largeur (variable) et en hauteur indéfinie. Donc, on ne doit pas se poser la question "combien de pixel fait ma page", et, à mon humble avis, les site dont la hauteur est fixe, ne respect pas les principes d'accessibilité, les types de navigateurs extrémement différents (texte brut, vocal, IE, ...) . Les références dans ce domaine sont Firefox et Opéra.
Donc, si ca marche sous IE et pas sous Opéra/Firefox, c'est que ce n'est pas bon. Faut revoir sa copie. (à l'inverse, il faut malheureusement bidouiller)

Enfin, pour ton cas, je pense qu'il faut expliciter (dans le css) les margin et les padding de tes balises div.

Autre remarque: au vu du source généré, il y a un petit problème: une page avec plusieurs balise head et body, ce n'est pas très valide ...

[/CITATION]

Je ne veux pas avoir une hauteur définie pour mon site mais avoir une hauteur minimum pour que mon contenu soit au minimum aussi haut que mon menu.

Et j'ai enlerver les <HTML><HEAD><BODY> des pages que j'inclus, mais toujours pareil mon contenu ne se règle pas par rapport à mon menu alors que sur IE, mon contenu est aussi haut que mon menu (c avec firefox que ca ne marche pas)

http://jnfontaine.free.fr

Merci.

Gailup.
09/06/2006, 14h53
Maxoo

ecris du code propre on te dit, apres tu verras que ca marchera beaucoup mieux !!