Discussion :

[Aloukar]

Bonjours à tous,

Je suis débutant en développement web et je rencontre un problème au niveau d'une syntaxe css que j'ai lu sur http://css.developpez.com/tutoriels/pseudo-frames/ sa peut paraitre bête mais sa me pose un problème au niveau de la structure.

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
css
 
html, body 
{
  margin:0;
  padding:0;
  height:100%; /* 100 % en hauteur */
}
 
html>body #wrap {height:100%;} /* 100 % en hauteur */
 
#header 
{
   width:100%;
   height:5em;
}
 
html>body #header 
{
  position:fixed;
  z-index:10; /* empêche certains problèmes avec les élements de formulaire */
}
 
html>body #content-wrap {height:100%;} /* 100 % en hauteur */
 
html>body #content {padding:6em 1em;} /* 6em = hauteur de #header et #footer + 1em, 1em = donne au contenu un peu d'espace par rapport aux bords */
 
#footer 
{
   width:100%;
   height:5em;
}
 
html>body #footer 
{
  position:fixed;
  bottom:0;
  z-index:10; /* empêche certains problèmes avec les élements de formulaire */
}

Le code ci-dessus commence par "html, body".
Est ce que je peux mettre que body?

Dans la suite du code, il utilise " html>body #wrap"
C'est à dire que le body est déjà a 100% mais il crée une div#wrap dans laquelle il re-justifie height a 100%?

Puis il définit l'ID #header et il le redéfini par la suite (j'ai pas compris) dans l'id html>body#header avec 2 nouvelles valeur ajoutées.
Pourquoi ne pas mettre tous les attributs #header dans un seul id ?

Et est ce que html>body #id défini l'id au sein de la classe body?

[Macmillenium]

Bonjour,

Le code ci-dessus commence par "html, body".
Est ce que je peux mettre que body?

Si tu es en mode standard et si tu veut que ton bloc conteneur prend une hauteur de 100% du viewport (zone d'affichage) alors non.

Dans la suite du code, il utilise " html>body #wrap"
C'est à dire que le body est déjà a 100% mais il crée une div#wrap dans laquelle il re-justifie height a 100%?

Puis il définit l'ID #header et il le redéfini par la suite (j'ai pas compris) dans l'id html>body#header avec 2 nouvelles valeur ajoutées.
Pourquoi ne pas mettre tous les attributs #header dans un seul id ?

Dans les navigateurs ne supportant pas position:fixed (à l'exception de IE5-6), la page entière défilera, ce qui est un défaut tout à fait acceptable. J'utilise un "sélecteur enfant" afin de permettre uniquement aux navigateurs le supportant de voir les déclarations position:fixed. Vouloir laisser les navigateurs ne supportant pas le positionnement fixe (à l'exception de IE5-6 sous Windows) voir l'ensemble des propriétés CSS constitue un autre problème.

La technique fonctionne sur tous les navigateurs modernes qui sont passés entre mes mains, à une exception. L'astuce utilisée pour ajuster la zone de contenu sur l'intégralité de la hauteur de la fenêtre provoque un comportement étrange avec les navigateurs ICab et Internet Explorer pour Mac. Ce sont des problèmes esthétiques d'une gravité assez faible, je pense donc qu'il est possible d'y survivre.

À part cela, je ne suis pas conscient d'autres problèmes. Cependant cela ne signifie pas qu'il n'y en ait pas, donc je vous remercie de m'avertir si vous trouvez des bugs, ou si vous souhaitez proposer quelques améliorations supplémentaires.