Faire un menu fixe qui n'est pas sujet à la scrollbar

04 sept. 2009, 15:34

Bonjour,

Pour commencer, voila un exemple assez vulgaire de ce que je cherche à avoir : http://img32.imageshack.us/img32/5940/exempley.jpg

J'aimerais avoir un menu, lequel serait situé en haut de la page et qui serait fixe, indépendant du reste de la page qui lui sera du contenu, en gros quand l'utilisateur fera défilé la page le menu en haut restera fixe et le contenu défilera sans jamais interagir avec le menu du haut

Ma page contient 1 div principal, contenant deux div, le premier contenant le menu haut et le deuxième le contenu, il y'a un seul fichier css et je préférerais ne pas utiliser les frames

Je ne doute pas que d'autres sujet du style ont été traité, mais je n'arrive pas à trouver les bons thermes à mettre dans la recherche ...

04 sept. 2009, 16:30

Exactement ce que tu recherches:
http://openweb.eu.org/articles/initiation_absolue

N'oublie pas, Google est ton ami!

04 sept. 2009, 17:19

Merci, c'est effectivement ce que je cherchais,

Seul problème ça ne marche pas sous IE

04 sept. 2009, 23:38

En farfouillant un peu, et en regardant la source de l'exemple sur le site que tu m'as montré, j'ai vu qu'en ajoutant :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

En haut de la page html ça marchait, quelqu'un pourrait-il m'expliquer pourquoi

?

05 sept. 2009, 11:13

Comme son nom l'indique, le DocType permet de préciser au navigateur le type du document (ou plus précisément la DTD utilisée).

Voilà une liste des doctypes existants:
http://www.w3.org/QA/2002/04/valid-dtd-list.html

Selon le doctype spécifié, le navigateur n'interprétera pas le code de la même manière.

05 sept. 2009, 11:30

Sans oublier qu'en l'absence de doctype, IE bascule en mode dit Quirks, qui fait qu'IE 6, 7 et 8 se comportent comme IE 5.5 (notamment pour le modèle de boîte).

Bref, il faut toujours spécifier un doctype en bonne et due forme.

05 sept. 2009, 18:33

L'important c'est d'avoir un DOCTYPE valide à la première ligne de toutes tes pages HTML.
Je te conseille dans un premier temps d'éviter le Strict et donc d'utiliser le Transitional.
Tu as donc 2 choix:

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

et:

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

En général c'est le premier qui est utilisé, en gros pour simplifier:
Le premier est utilisé pour une page Html typique, avec des <br > et des balises qui se terminent par >.
Le deuxième est utilisé pour une page codée en XHTML, avec des <br /> et des balises qui se terminent par />.
Tu remarqueras donc le / supplémentaire pour le code XHTML.
Donc vérifie ton code, et suivant comment ta page est codée choisis l'un ou l'autre

08 sept. 2009, 21:52

Merci pour vos réponses !

En fait je reprends à zéro mon site, donc tant qu'à faire il me semble plus intéressant de prendre le

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

enfin j'imagine que chacun doit avoir aussi ses préférences sur ce sujet

08 sept. 2009, 23:03

Merci pour vos réponses !

En fait je reprends à zéro mon site, donc tant qu'à faire il me semble plus intéressant de prendre le
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
enfin j'imagine que chacun doit avoir aussi ses préférences sur ce sujet

Effectivement si tu reprends ton site à zéro autant apprendre tout de suite à écrire ton code avec les "dernières" recommandations.
Le validateur du w3c te permettra de contrôler ton code.

09 sept. 2009, 21:39

Effectivement si tu reprends ton site à zéro autant apprendre tout de suite à écrire ton code avec les "dernières" recommandations.

En fait, le mode transitionnel (Transitional), comme son nom le laisse à entendre, est surtout utile pour une transition d'un code HTML à l'ancienne (mêlant structure et présentation) à un code HTML plus conforme aux recommandations de séparation de la structure et de la présentation (ou, à la rigueur, si l'on a besoin d'utiliser des éléments ou des attributs qui ne sont pas autorisés en mode strict, comme l'élément iframe ou l'attribut target).

Donc, quand on part de zéro, autant utiliser le mode strict, qui permet d'être plus rigoureux dans sa manière de coder.

10 sept. 2009, 02:41

Effectivement si tu reprends ton site à zéro autant apprendre tout de suite à écrire ton code avec les "dernières" recommandations.
...
Donc, quand on part de zéro, autant utiliser le mode strict, qui permet d'être plus rigoureux dans sa manière de coder.

Ah bah voilà c'est le mot que je cherchais : "plus rigoureux"

... et plus conforme aux dernières recommandations.

Faire un menu fixe qui n'est pas sujet à la scrollbar

Qui est en ligne