Forum SELFHTML Archives du forum 2004 septembre| Forum SELFHTML Archives du forum 2004 septembre |
 |
Forum SELFHTML: Archives: |
 |
|
 |
|
Le message suivant est de: emmanuel, 13. 09. 2004, 21:39
bonjour le monde,
Je bosse en ce moment sur un site ou je voudrais avoir un menu horizontal dynamique avec des sous-menus onmouseover.
Je veux du tout horizontal (menu et sous-menus). j'ai cherché, j'ai testé, j'ai modifié...
Je ne parvient pas à faire un menu qui marche pour tout les navigateurs.
Je croyais avoir enfin trouvé une solution avec un script trouvé sur dynamiquedrive que j'ai bidouillé, mais horreur, en le testant aujourdhui sur IE 5.1 pour Mac OS 9.x, les sous-menu ne s'affiche pas.
Il y a un menu que je détournerais bien, c'est celui de tiscali mais une partie est protégée (je trouve ça pas bon esprit d'ailleur).
Questions :
- Pensez-vous qu'on peux avoir ce type de menu et fonctions lorsque qu'on veux qque chose de visible par 99,9% des internautes (c'est très important pour moi. Je viens de Mac, je trouve IE6 nul et je pense que les webmaster qui font des sites qui ne sont pas vraiment visible et utilisable par tout le monde ne font pas leur boulo)?
- Que pensez-vous de ce type de menu?
- Quelqu'un connaitrait t'il un exemple détournable (avec l'accord du/des créateur(s) oeuf corse).
- Est-ce qu'une buse en javascript peut y arriver?
Merci pour vos réponses,
Emmanuel
 |
Le message suivant est de: Patrick Andrieu, 13. 09. 2004, 23:20
Bonjour Emmanuel!
»» Je ne parvient pas à faire un menu qui marche pour tout les navigateurs.
Tiens donc, on connait ça... Tous les navigateurs... faut pas rêver! Tu peux contenter tous les navigateurs qui connaissent le DOM par exemple, c'est à dire IE à partir de 5 (entre nous, le 6 est bien meilleur, tout au moins sous Windows, je ne vois pas ce que tu lui reproches), Opera à partir de 6.3, mieux encore à partir des versions 7 et Mozilla à partir de 1.0 (Netscape 7). En dessous, tu auras des problèmes avec le DOM. DOM est cependant à conseiller plus que DHTML dont les modèles sont dépassés.
»» - Pensez-vous qu'on peux avoir ce type de menu et fonctions lorsque qu'on veux qque chose de visible par 99,9% des internautes (c'est très important pour moi. Je viens de Mac, je trouve IE6 nul et je pense que les webmaster qui font des sites qui ne sont pas vraiment visible et utilisable par tout le monde ne font pas leur boulo)?
Non. 99.9 % des internautes est impossible, vu qu'il y a déjà au moins 4 à 5 % qui surfent sans JavaScript (déactivé). À moins que tu ne veuilles dire 99,9 % de ceux qui n'ont pas déactivé JavaScript?...
»» - Que pensez-vous de ce type de menu?
S'ils fonctionnent, ils sont bien. Mais ils ne doivent jamais _jamais_ être les seuls moyens de navigation dans une page! Sinon, tous ceux n'ayant pas JavaScript ou chez qui pour une raison ou pour une autre le menu ne fonctionne pas seront exclus. Pense qu'il y a nombre de "petits" navigateurs tels que Konqueror, Safari et autres... Faudrait tester avec tous les navis, ce qui devient quasiment impossible...
»» - Quelqu'un connaitrait t'il un exemple détournable (avec l'accord du/des créateur(s) oeuf corse).
Cherche sur le Web. Navigue, repère ce qu'il te plait. Regarde le code-source. Demande aux auteurs... à ce propos, que veux-tu dire par "protégé"??? Tout ce qui est sur ton ordinateur a été téléchargé, il n'y rien de protégé, rien que l'on ne puisse retrouver (parfois, c'est certes très très bien caché)!
»» - Est-ce qu'une buse en javascript peut y arriver?
Qu'est-ce qu'une buse (ma terminologie française laissant à désirer)?
Meilleures salutations de Francfort sur le Main,
Patrick
| |
Le message suivant est de: emmanuel, 14. 09. 2004, 14:16
salut Patrick,
"...entre nous, le 6 est bien meilleur, tout au moins sous Windows, je ne vois pas ce que tu lui reproches"
Pour faire cour, je lui reproche d'être moins bien que la concurence mais beaucoup plus diffusé. c'est d'autant plus domage que j'avais trouvé les versions 5 très bien et ça m'avais presque réconcilié avec microsoft.
"...Pense qu'il y a nombre de "petits" navigateurs tels que Konqueror, Safari et autres"
Je teste systématiquement sur IE6 et 5(pour mac), Firefox, Netscape 6 et 7, opera 7 et safari, de temps en temps sur d'autre navigateurs (par exemple netscape 4.7 ou Kmeleon). ne connaissant personne utilisant unix je ne teste pas pour Konqueror.
"Qu'est-ce qu'une buse ..."
Pris dans le Robert :" fig. et fam. Personne sotte et ignorante -> bête. Quelle buse! "Pas une buse diplomatique qui ne se crût supérieure à moi de toute la hauteur de sa bêtise" (Chateaubriand)
"...que veux-tu dire par "protégé"??? Tout ce qui est sur ton ordinateur a été téléchargé"
Je viens de Mac mais je bosse sur PC depuis un an. Mon gros problême c'est que sur Mac je sais me débrouiller, sur PC je suis une buse.
Quand je dis protégé, c'est que apparemnt la plus grande partie du script est dans un fichier que je ne peux éditer avec mon navigateur.
"Non. 99.9 % des internautes est impossible, vu qu'il y a déjà au moins 4 à 5 % qui surfent sans JavaScript (déactivé). À moins que tu ne veuilles dire 99,9 % de ceux qui n'ont pas déactivé JavaScript?"
4 à 5%! Tu est sur? Ca me parrait beaucoup franchement. me suggére une solution qui me semble élégante utilise beaucoup de CSS et qui pourrait bien répondre à mes attentes.
je vais regarder ça.
NB: le vérificateur d'ortographe me renvoi un message d'erreur (j'utilise Firefox 0.9.3 sur Windows XP)
merci et A+
Emmanuel
| |
Le message suivant est de: emmanuel, 14. 09. 2004, 14:21
Petite correction, ne prend pas en compte le NB, j'ai juste fait une erreur de manipulation (pasmis mon nom)
:(
| |
Le message suivant est de: Patrick Andrieu, 14. 09. 2004, 14:59
Re!
»» Quand je dis protégé, c'est que apparemnt la plus grande partie du script est dans un fichier que je ne peux éditer avec mon navigateur.
Le script serait-t-il dans un fichier externe (extension .js). Tu peux les éditer avec un éditeur texte. Pour les trouver, repère dans le code-source les mentions:
<script type="text/javascript" src="/files/haupt.js"></script>
Ensuite tu tapes dans ta barre d'adresse:
view-source:http://www.domaine.fr/files/haupt.js
Meilleures salutations de Francfort sur le Main,
Patrick
| |
Le message suivant est de: emmanuel, 14. 09. 2004, 15:25
dear Patrick,
L'un des nombreux avantages d'un navigateur comme Firefox (ou Opera et sans doute la plupart des navigateurs) sur IE6 c'est que tu n'a pas besoin de passer par le bloc-notes (ou autre) pour voir les fichiers .js d'ailleur lorsque tu affiche la source c'est la même chose.
Rassure toi je suis mauvais mais pas au point de ne pas connaitre ça. Il y a dans cette page en effet une réference à un fichier .js mais qui ne fait que déclarer des variables en gros, il manque donc la partie qui construit le menu.
... En y regardant de plus près ils semblent utiliser en grande partie du CSS, c'est pour ça que je ne trouvais pas(j'avais pas regarder le bon fichier).
toute mes désol
A+
Emmanuel
| |
Le message suivant est de: David, 14. 09. 2004, 11:52
http://www.site-en-stock.net/
»» bonjour le monde,
»
salut!
»» Je ne parvient pas à faire un menu qui marche pour tout les navigateurs.
Oui, moi aussi je passe souvent des heures sur une difference d'interpretation entre IE et Mozilla.
»» Je croyais avoir enfin trouvé une solution avec un script trouvé sur dynamiquedrive que j'ai bidouillé, mais horreur, en le testant aujourdhui sur IE 5.1 pour Mac OS 9.x, les sous-menu ne s'affiche pas.
Oula, abandonne ce genre de reference et code toi meme, mais on va t'aider.
»» Il y a un menu que je détournerais bien, c'est celui de tiscali mais une partie est protégée (je trouve ça pas bon esprit d'ailleur).
cite nous une URL qu'on voit ca.
»» Questions :
»» - Pensez-vous qu'on peux avoir ce type de menu et fonctions lorsque qu'on veux qque chose de visible par 99,9% des internautes (c'est très important pour moi. Je viens de Mac, je trouve IE6 nul et je pense que les webmaster qui font des sites qui ne sont pas vraiment visible et utilisable par tout le monde ne font pas leur boulo)?
Oui c'est possible, mais c'est dur. Alors pour un simple rollover sur un bouton pas besoin de javascript deja, il suffit de bien connaitre le CSS et toutes ses merveilles. Un exemple: http://www.alsacreations.com/articles/imgreactive/ tu verras le code source est meme explique.
2eme exemple un menu horizontal avec des sous-menus: http://www.alsacreations.com/articles/deroulant/, là il a y un peu de javascript mais surtout du CSS
T'as plus qu'a faire un mix des deux, et tu obtiendras un super menu horizontal avec tres peu de javascript, ca sera compatible avec bcp de navigateurs, en tous cas tout ceux qui interprete correctement les CSS, tu risques juste d'avoir qq soucis de decalage avec IE car il ne respecte pas le modele de boite, mais on peut en venir a bout.
»» - Que pensez-vous de ce type de menu?
C'est plutot bien et les codes que je te propose utilise intelligement le CSS et les balises de menu comme <li> ou <dl>, choses que l'on voit trop rarement dans la creation de sites internet.
»» - Quelqu'un connaitrait t'il un exemple détournable (avec l'accord du/des créateur(s) oeuf corse).
ceux que je t'ai cite plus eux, c'est meme fait pour ca ;-), pour l'oeuf corse voir San-A.
»» - Est-ce qu'une buse en javascript peut y arriver?
mais oui d'ailleurs moins il y aura de javascript mieux ce sera.
si tu rencotre encore des problemes avec ca, cite ton code on t'aidera a le debugger.
@+
David
--
Get Firefox!
http://www.mozilla-europe.org/fr/products/firefox/
Avec ça vous allez voir ce qu'est un vrai navigateur web...
| |
Le message suivant est de: Emmanuel, 14. 09. 2004, 14:32
Salut David,
Merci pour tes réponses je regarde ce que tu suggère et je reviens.
NB : je parle du site français de Tiscali (http://tiscali.fr/) je trouve le menu bien fait et il marche pour tout les navigateurs avec lesquels je l'ai testé.
A+ (le temps que j'étudie)
Emmanuel
PS pour Patrick : étonnant les ' marche aujourd'hui contrairement à hier, je me demande si c'est pas lié au correcteur d'ortographe.
| |
Le message suivant est de: Patrick Andrieu, 14. 09. 2004, 14:46
Bonjour Emmanuel!
»» PS pour Patrick : étonnant les ' marche aujourd'hui contrairement à hier, je me demande si c'est pas lié au correcteur d'ortographe.
As-tu envoyé ton message avec le même navi qu'hier? J'ai eu des problèmes pour le message de réouverture (apostrophes remplacés par ') que j'avais envoyé depuis un IE 5. La bogue est sur la liste pour les DEV.
Concernant la vérification de l'orthographe... :) Nous n'avons pas encore de "dictionnaire". Celle-ce ne devrait donc pas fonctionner...
Meilleures salutations de Francfort sur le Main,
Patrick
| |
Le message suivant est de: Patrick Andrieu, 14. 09. 2004, 14:48
Re!
»» l'orthographe... :)
Je viens de tester la vérification de l'orthographe et maintenant, mes apostrophes sont abimées :)
Meilleures salutations de Francfort sur le Main,
Patrick
| |
Le message suivant est de: Patrick Andrieu, 14. 09. 2004, 15:13
Bonjour!
<test>
Test d'apostrophes depuis Mozilla sans correction d'orthographe
</test>
Ciao!
| |
Le message suivant est de: Patrick Andrieu, 14. 09. 2004, 15:15
Re!
<test>
Test d'apostrophes depuis Mozilla _après_ correction d'orthographe
</test>
ReCiao!
| |
Le message suivant est de: David, 14. 09. 2004, 14:54
http://www.site-en-stock.net/
»» Merci pour tes réponses je regarde ce que tu suggère et je reviens.
»» NB : je parle du site français de Tiscali (http://tiscali.fr/) je trouve le menu bien fait et il marche pour tout les navigateurs avec lesquels je l'ai testé.
tiens regarde ca aussi: http://www.alsacreations.com/articles/commentaires/ ca ressemble bcp ace uqe tu veux faire et sans javascript, c'est pas merveilleux le CSS? :-)
--
Get Firefox!
http://www.mozilla-europe.org/fr/products/firefox/
Avec ça vous allez voir ce qu'est un vrai navigateur web...
| |
Le message suivant est de: emmanuel, 14. 09. 2004, 15:01
"tiens regarde ca aussi: http://www.alsacreations.com/articles/commentaires/ ca ressemble bcp ace uqe tu veux faire et sans javascript, c'est pas merveilleux le "
Ca me semble très intelligent ce truc et si ça marche vraiment comme je crois, c'est la solution que je cherche.
Je copi, je teste et je vous en parle.
| |
Le message suivant est de: emmanuel, 14. 09. 2004, 15:56
David,
Je viens de regarder ce que ça donne sur IE 5.1 (Mac 9.x), les calques de commentaires (dont je veux faire des sous-menus) ne s'affiches pas. Je vais peut-être utiliser ça malgrés tout car c'est tout de même beaucoup plus multi-tout que du javascript et les liens du menu devraient marcher pour a peut près tous les navigateurs (donc pas besoin de faire un alt qque chose).
Je travail dessus et je vous en parle.
A+
Emmanuel
| |
Le message suivant est de: emmanuel, 16. 09. 2004, 19:56
ciao tutti,
j'ai essayé aujourd'hui de bidouiller le menu indiquer par David pour le conformer à ce que je veux et je dois dire que je galère.
mon problème est que je veux un sous-menu or je ne peux pas mettre de balise <a> dans une balise <a> (j'ai essayé ça marche pas même en faisant plusieures class).
j'ai donc essayé d'ajouter un échelon en utilisant <h1> puis <span> puis <div> au lieu de <a> au premier niveau mais ces balises ne réagissent pas :hover sur IE.
Est-ce que quelqu'un a une idée?
est-ce que ce que je dis est claire?
help please,
NB : l'idée est d'éviter si possible javascript
Emmanuel
| |
Le message suivant est de: David, 17. 09. 2004, 12:05
http://www.site-en-stock.net/
Salut emmanuel!
bon voila j'ai une solution qui marche sous mozilla-1.6:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><head><title>Menu horizontal</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<style type="text/css">
<!--
/* CSS issu des tutoriels www.alsacreations.com/articles */
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
margin: 1px;
}
#menu li {
background: #fff;
}
#menu ul {
position:absolute;
top:20px;
left:0;
width:750px;
}
#menu li a, #menu li a:hover {
display: block;
margin-left:5px;
text-align: left;
float:left;
border-top: 1px solid gray;
color: #000;}
#menu li a:hover {
text-decoration:underline;
}
a {text-decoration: none;
color: black;}
-->
</style></head>
<body>
<div id="menu">
<dl><dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt></dl>
<dl><dt onmouseover="javascript:montre('smenu1');">Menu 1</dt><dd style="display: block;" id="smenu1">
<ul>
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 1.2</a></li>
</ul>
</dd></dl>
<dl><dt onmouseover="javascript:montre('smenu2');">Menu 2</dt><dd style="display: none;" id="smenu2">
<ul>
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
<li><a href="#">Sous-Menu 2.4</a></li>
</ul>
</dd></dl>
<dl><dt onmouseover="javascript:montre('smenu3');">Menu 3</dt><dd style="display: none;" id="smenu3">
<ul>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.2</a></li>
<li><a href="#">Sous-Menu 3.3</a></li>
<li><a href="#">Sous-Menu 3.4</a></li>
<li><a href="#">Sous-Menu 3.5</a></li>
</ul>
</dd></dl>
<dl><dt onmouseover="javascript:montre('smenu4');">Menu 4</dt><dd style="display: none;" id="smenu4">
<ul>
<li><a href="#">Sous-Menu 4.1</a></li>
<li><a href="#">Sous-Menu 4.2</a></li>
<li><a href="#">Sous-Menu 4.3</a></li>
</ul>
</dd></dl>
</div>
</body></html>
il y a un peu de javascript mais pas trop, le code doit etre ameliorable encore,a toi de bidouiller là j'ai fait le plus gros! Dis moi sica marche sous IE
@+
David
--
Get Firefox!
http://www.mozilla-europe.org/fr/products/firefox/
Avec ça vous allez voir ce qu'est un vrai navigateur web...
| |
Le message suivant est de: Patrick Andrieu, 17. 09. 2004, 12:29
Bonjour David!
»» onmouseover="javascript:montre();"
^^^^^^^^^^
Ca c'est faux. onmouseover étant un gestionnaire d'évenement, celui ci implique du JavaScript :)
Donc: onmouseover="montre();"
:)
Meilleures salutations de Francfort sur le Main,
Patrick
| |
Le message suivant est de: Celelibi, 
sysygogo86@msn.com, 17. 09. 2004, 22:13
http://www.espionet.com
Salut Patrick
»» »» onmouseover="javascript:montre();"
»» ^^^^^^^^^^
»»
»» Ca c'est faux. onmouseover étant un gestionnaire d'évenement, celui ci implique du JavaScript :)
»»
»» Donc: onmouseover="montre();"
»»
je suis tout à fait d'accord avec toi, ce genre de trucs (mettre javascript: dans un gestionnaire d'évènement) m'horripile au plus haut point.
la confusion des gens vient du fait que dans l'url on doit mettre "javascript:" pour pouvoir fair exécuter du javascript. donc on peut le mettre dans le "href" d'un lien ou dnas le "action" d'un form (même si les remplacer par des gestionnaires d'évènements est plus souhaitable).
et pour finir, le code onmouseover="javascript:montre();" en lui même est gramaticalement juste (ou presque). seulement ce code sera interprêté comme un label nommé "javascript" suivi de l'appel à la fonction montre(). mais ce label n'a rien à faire là car il n'est jamais utilisé, et il n'est pas suivi d'un bloc d'instructions (comme if, while, for ...).
voilà pour la théorie des "javascript:" dans les gestionnaires d'évènements.
| |
Le message suivant est de: emmanuel, 19. 09. 2004, 00:48
merci David,
j'e m'y remet lundi et te dis ce que ça donne (en tenant compte de la remarque de Patrick et Celebi)
A+
Emmanuel
| |
Le message suivant est de: emmanuel, 20. 09. 2004, 15:19
salut tout le monde,
Est-ce que quelqu'un a une idée de la raison pour laquelle IE avec le SP2 montre un message d'alerte lorsque je teste le menu fourni par David et bloque une partie de l'affichage.
NB pour David : Je crois que je vais utiliser le script de http://www.alsacreations.com/articles/modelesmenus/hd1.htm en faisant des adaptations avec http://www.alsacreations.com/articles/modelesmenus/hd2.htm, j'aurai bien utilisé uniquement le deuxième mais il déconne sur ie5.
ça m'embête d'autant plus que le menu que tu propose est celui qui se comporte au plus près de ce que je veux.
I SHALL PREVALE (un jour.... peut-être...enfin j'éspère)
A+
emmnuel
| |
Le message suivant est de: Emmanuel, 20. 09. 2004, 15:35
Sorry, Sorry, Sorry, Sorry, Sorry, Sorry, Sorry, Sorry, Sorry, Sorry, Sorry, Sorry, Sorry, Sorry,
je viens de m'appercevoir que j'avais laissé un 'javascript:montre()'
et c'est apparement ce qui provoque le message d'alerte pour IE6 avec SP2. Bon à savoir me semble-t-il.
Emmanuel
| |
Le message suivant est de: David, 21. 09. 2004, 09:59
http://www.site-en-stock.net/
»» Sorry, Sorry, Sorry, Sorry, Sorry, Sorry, Sorry, Sorry, Sorry, Sorry, Sorry, Sorry, Sorry, Sorry,
»» je viens de m'appercevoir que j'avais laissé un 'javascript:montre()'
»» et c'est apparement ce qui provoque le message d'alerte pour IE6 avec SP2. Bon à savoir me semble-t-il.
IE serait devenus sensibles aux normes des languages??!! Si c'est ca j'en suis sur le cul. Par contre j'ai remarque que SP2, bloque tous ce qui est multimedia comme les anim FLash, les lecteurs de musique intégre, tous ca sous couvert de bloquer les ActiveX douteux, mais peut etre qu'il bloque aussi certains codes javascript ou qu'il a pris ca pour un pop-up....
Sinon Emmanuel, pour la solution que je t'ai donnee, c'est justement le mix des deux que tu as citer c'est pour ca qu'il reste un cadre qui s'affiche qq part me semble-t'il, mon mix n'est pas parfait a toi de l'ameliorer.
@+
david
--
Get Firefox!
http://www.mozilla-europe.org/fr/products/firefox/
Avec ça vous allez voir ce qu'est un vrai navigateur web...
| |
Le message suivant est de: Emmanuel, 23. 09. 2004, 15:18
'javascript:montre()'
»» »» et c'est apparement ce qui provoque le message d'alerte pour IE6 avec SP2. Bon à savoir me semble-t-il.
En fait c'est pas ça. si je teste en local ça provoque un message d'erreur mais pas en ligne. Si quelqu'un peux me dire pourquoi je serais interressé de le savoir.
pour ce qui est de la solution que tu m'a donnée David c'est en effet celle qui marche le mieux mais à chaque modif que je fait je suis obligé de tester sur tout les navigateurs car les réactions sont divers.
ains tel quel sur IE5 pour mac les sous-menus s'affichent en escalier.
C'est dingue le temps que je passe sur ce ###### de menu mais il me semble voir la lumière au bout du tunnel.
Bon je m'y remet là tout de suite mais comme j'ai pas beaucoup de temps je pense que ma solution finale sera pour demain au mieu (je ne suis pas certain de pouvoir y consacré du temps demain)
A+
Emmanuel
| |
Le message suivant est de: emmanuel, 24. 09. 2004, 19:35
ullo,
il y a un truc que j'arrive pas à comprendre.
En gros j'utilise la solution proposé par David et ça marche bien sauf...
quand je place le menu autrement qu'à
position: absolute;
top: 0;
le sous-menu ne s'affiche pas sur IE5 (sauf le premier pixel)
en largeur pas de problème.
any idea?
A+
Emmanuel
| |
Le message suivant est de: emmanuel, 01. 10. 2004, 20:22
salut tous,
Bon j'ai trouvé une solution qui marche sur tous les navigateurs à partir des versions 5 et qui pour la version 4.7 de netscape n'est pas horrible (pb de style).
testé sur IE5+, Netscape 6+, mozilla, Firefox, Opera 6+, Safari, Camino ... si qq'un veux le tester sur un navigateur Linux ça serait sympa.
Adaptable sans probléme.
Si voulez de la couleur de fond sur le(s) titre(s), je recommande d'utiliser des balizes <h1>, ou <span> si vous voulez spécifier des largeur, mais attention, le float;left marche pas (je crois) avec Netscape 4.7 donc a mon avis à éviter (on peut se débrouiller sans).
NB : j'ai essayé de faire le plus simple possible, donc pas de xhtml, du style simple, un javascript limpide trouvé par David sur www.alsacreations.com
Ca marche et c'est utilisable/adaptable par les nuls (genre moi).
Commentaires/remarques/critiques bien venus,
A+,
Emmanuel
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>menu horizontal</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript" type="text/javascript">
<!--
function SymError()
{
return true;
}
window.onerror = SymError;
//-->
</script> <script type="text/javascript" language="JavaScript">
<!--
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script> <style type="text/css">
<!--
/* CSS issu des tutoriels www.alsacreations.com/articles */
body {
margin: 0;
padding: 0;
background: white;
font: 9pt verdana, arial, sans-serif;
}
#menu {
position: absolute;
top: 40px;
left: 140px;
z-index:100;
width: 700px;
height: 20px;
}
div {
border-top:1px solid #cccccc;
position:absolute;
top:55px;
left:140px;
width:450px;
font: 8pt Arial,Helvetica,sans-serif;
}
a {text-decoration: none;
color: black;}
a:hover {text-decoration: none;
color: red;}
-->
</style>
</head>
<BODY>
<span id="menu"><a href="pipo.htm" title="Pipo" onmouseover="montre('smenu1');">Pipo</a>
- <a href="publication.htm" onmouseover="montre('smenu2');">Publications</a>
- <a href="tools.htm" onmouseover="montre('smenu3');">Tools</a> - <a href="news.htm" onmouseover="montre('smenu4');">News</a>
- <a href="steel/steel.htm" onmouseover="montre('smenu5');">Titre 5</a> - <a href="news/news.htm">Topics</a>
- <a href="news/news.htm">links</a></span>
<div style="display: none;" id="smenu1"><a href="pipo.htm">pipo ci</a> - <a href="pipo.htm">pipo là</a></div>
<div style="display: none;" id="smenu2"><a href="publication.htm">Liste</a> - <a href="publication.htm#p1">Publication 1</a> - <a href="publication.htm">Publication 2</a> - <a href="publication.htm">Publication 3</a></div>
<div style="display: none;" id="smenu3"><a href="tools.htm">Tool 1</a> <FONT COLOR="#CCCCCC">l</FONT> <a href="tools.htm">Tool 2</a> <FONT COLOR="#CCCCCC">l</FONT> <a href="tools.htm">Tool 3</a> <FONT COLOR="#CCCCCC">l</FONT> <a href="tools.htm">Calculation tools</a></div>
<div style="display: none;" id="smenu4"> <a href="#">Expositions</a> <FONT COLOR="#CCCCCC">l</FONT> <a href="#">Evénements</a> <FONT COLOR="#CCCCCC">l</FONT> <a href="#">Agenda</a></div>
<div style="display: none;" id="smenu5"><a href="#">Sous-titre 5.1</a> <FONT COLOR="#CCCCCC">l</FONT> <a href="#">Sous-titre 5.2</a> <FONT COLOR="#CCCCCC">l</FONT> <a href="#">Sous-titre 5.3</a> <FONT COLOR="#CCCCCC">l</FONT> <a href="#">Sous-titre 5.4</a></div>
</BODY>
</html>
| |
Le message suivant est de: emmanuel, 01. 10. 2004, 20:56
reuh,
une ereur s'est glissé
»» <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
il faut bien sur
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
je suis passé de xhtml à html
désol :s
A+
emmanuel
|
| Forum SELFHTML Archives du forum 2004 septembre |
© 1998-2004 selfhtml@fr.selfhtml.org
(JAVASCRIPT)