question HTML
- Auteur de la discussion lyzzy
- Date de début
ascompris;Cybervince
Best Member
Tu as un site exemple où ca apparait ?
Si c'est bien ce que je pense, c'est faisable en xHTML avec la bonne propriété CSS qui va bien.
Si c'est bien ce que je pense, c'est faisable en xHTML avec la bonne propriété CSS qui va bien.
Cybervince
Best Member
Non, pas avec du HTML 4.0.lyzzy link=topic=9483.msg85226#msg85226 date=1134328413 a dit:
Par contre en xHTML Strict 1.0 c'est pas bien compliqué.
multiformat
New Member
Pour commencer :
Mets l'élément que tu veux voir figé dans une balise de bloc (div, p ou ul, le meilleur pour un menu) et en CSS, tu mets cette boite avec une position: absolute et un z-index: 100;
HTML
<ul id="menu">
<li>menu 1</li>
<li>menu 2</li>
<ul>
CSS
ul#menu {position: absolute; top:0;left:0; width:100%; z-index: 100}
p {z-index: 1;}
Ainsi, ton menu sera calé en haut à gauche, occupera toute la largeur de son parent et passera par dessus les paragraphes.
Ensuite : si tu veux que l'élément "descende", tu peux essayer avec position: fixed; valeur d'attribut qu'IE6 ignore...
Fais les 2 test et dis-moi !
A voir si ça marche avec du HTML 4.01, normallement ça devrait... c'est plutôt le navigateur qui risque de pas suivre si'il n'a pas implémenter CSS2.
Mets l'élément que tu veux voir figé dans une balise de bloc (div, p ou ul, le meilleur pour un menu) et en CSS, tu mets cette boite avec une position: absolute et un z-index: 100;
HTML
<ul id="menu">
<li>menu 1</li>
<li>menu 2</li>
<ul>
CSS
ul#menu {position: absolute; top:0;left:0; width:100%; z-index: 100}
p {z-index: 1;}
Ainsi, ton menu sera calé en haut à gauche, occupera toute la largeur de son parent et passera par dessus les paragraphes.
Ensuite : si tu veux que l'élément "descende", tu peux essayer avec position: fixed; valeur d'attribut qu'IE6 ignore...
Fais les 2 test et dis-moi !
A voir si ça marche avec du HTML 4.01, normallement ça devrait... c'est plutôt le navigateur qui risque de pas suivre si'il n'a pas implémenter CSS2.
multiformat
New Member
Je donne un identifiant unique à ma liste <ul> : unique parce que je n'aurais qu'un seul "menu", et je l'identifie avec l'attribut id="menu".
Puis en CSS, je déclare le sélecteur ul#menu (le # renvoie à l'ID) : la liste dont l'identifiant unique = menu sera présentée de la manière suivante...
Ensuite, je déclare que cet élément (ul#menu) sera positionné de manière absolu, c-a-d qu'il ne va pas s'inscrire et réagir de la même manière que les autres éléments de la page web : chaque élément d'une page web se disposant d'abord l'un en-dessous de l'autre (balises de bloc comme p, ul, ou div, que j'appelle des boites) puis l'un à côté de l'autre (balises en ligne comme a ou span).
C'est ce qu'on appelle le flux : j'ai sorti ul#menu du flux !
ul#menu est positionné en absolu : il se moque des boites adjacentes et se met là où on lui dit : ici en haut à gauche.
Ainsi, toutes les autres boites (les <p>
se positionneront de manière normale, n°2 en dessous de n°1, sauf notre menu.
Enfin, j'accorde à notre menu un indice z-index=100 : comme dans un jeu de cartes, le menu restera toujours au-dessus de la pioche, alors que les <p> iront toujours en-dessous.. (z-index=1). Ainsi, ils vont disparaitre au scroll sous le menu.
Pour finir, avec la position:fixed; on garantie la présente de la boite à l'intérieur de la fenêtre de l'écran (garantie qu'IE6 ne sait pas tenir).
Voir à ce sujet l'excellentissime site Alsacreations.com
Puis en CSS, je déclare le sélecteur ul#menu (le # renvoie à l'ID) : la liste dont l'identifiant unique = menu sera présentée de la manière suivante...
Ensuite, je déclare que cet élément (ul#menu) sera positionné de manière absolu, c-a-d qu'il ne va pas s'inscrire et réagir de la même manière que les autres éléments de la page web : chaque élément d'une page web se disposant d'abord l'un en-dessous de l'autre (balises de bloc comme p, ul, ou div, que j'appelle des boites) puis l'un à côté de l'autre (balises en ligne comme a ou span).
C'est ce qu'on appelle le flux : j'ai sorti ul#menu du flux !
ul#menu est positionné en absolu : il se moque des boites adjacentes et se met là où on lui dit : ici en haut à gauche.
Ainsi, toutes les autres boites (les <p>
se positionneront de manière normale, n°2 en dessous de n°1, sauf notre menu.Enfin, j'accorde à notre menu un indice z-index=100 : comme dans un jeu de cartes, le menu restera toujours au-dessus de la pioche, alors que les <p> iront toujours en-dessous.. (z-index=1). Ainsi, ils vont disparaitre au scroll sous le menu.
Pour finir, avec la position:fixed; on garantie la présente de la boite à l'intérieur de la fenêtre de l'écran (garantie qu'IE6 ne sait pas tenir).
Voir à ce sujet l'excellentissime site Alsacreations.com
multiformat
New Member
Oui, j'avoue qu'expliquer le positionnement dans le flux en 10 lignes, c'était un peu too much...
multiformat
New Member
La balise <select>, associée à <option>, à l'intérieur d'un formulaire (balise <form>
.Dans l'exemple, une liste déroulante 2005 - 2004 -2003.
L'attribut value="2005" correspond à ce qui sera renvoyé par le formulaire, soit par mail (méthode POST à l'adresse indiquée en action"
soit dans l'URL ; l'élément (entre les balises <option></option> correspond à ce que verra l'internaute !Cybervince
Best Member
J'aime pas les vidéos dans les sites internet (je les apprécie seulement dans les anims flash)morice link=topic=9483.msg98186#msg98186 date=1136290762 a dit: