Affichage javascript a devenir fou
Résolu/Fermé
crazyghandi
Messages postés
312
Date d'inscription
vendredi 9 novembre 2007
Statut
Membre
Dernière intervention
4 octobre 2011
-
10 nov. 2008 à 11:52
crazyghandi Messages postés 312 Date d'inscription vendredi 9 novembre 2007 Statut Membre Dernière intervention 4 octobre 2011 - 15 nov. 2008 à 14:22
crazyghandi Messages postés 312 Date d'inscription vendredi 9 novembre 2007 Statut Membre Dernière intervention 4 octobre 2011 - 15 nov. 2008 à 14:22
A voir également:
- Affichage javascript a devenir fou
- Telecharger javascript - Télécharger - Langages
- Affichage double ecran - Guide
- Windows 11 affichage classique - Guide
- Les paramètres d'affichage nvidia ne sont pas disponibles ✓ - Forum Carte graphique
- Devenir administrateur pc lycée 2023 ✓ - Forum Windows 10
7 réponses
Groarh
Messages postés
682
Date d'inscription
vendredi 1 août 2008
Statut
Membre
Dernière intervention
28 juin 2015
185
10 nov. 2008 à 12:54
10 nov. 2008 à 12:54
Ça ressemble davantage à un problème de css. Après, il y a tellement de codes javascript différents pour faire un menu, j'ai envie de dire : chaque cas est particulier.
Fais voir ton code CSS déjà, je vais voir si y'a pas moyen d'arranger quek'chose...
Tu es sur la bonne pente mon fils. Se soucier de l'aspect de ton site sous différents navigateurs, c'est un bon réflexe. :D
P.S. Quelle est ta version d'Opera ? Il est censé respecter les standards encore mieux que FF, donc c'est bizarre que ce soit lui qui mette à mal l'affichage... La dernière version stable pour Windz est la 9.62.
Fais voir ton code CSS déjà, je vais voir si y'a pas moyen d'arranger quek'chose...
Tu es sur la bonne pente mon fils. Se soucier de l'aspect de ton site sous différents navigateurs, c'est un bon réflexe. :D
P.S. Quelle est ta version d'Opera ? Il est censé respecter les standards encore mieux que FF, donc c'est bizarre que ce soit lui qui mette à mal l'affichage... La dernière version stable pour Windz est la 9.62.
crazyghandi
Messages postés
312
Date d'inscription
vendredi 9 novembre 2007
Statut
Membre
Dernière intervention
4 octobre 2011
19
10 nov. 2008 à 17:58
10 nov. 2008 à 17:58
Salut,
Le pb c'est que c'est un éditeur de menus qui s'apelle all web menus mais il m'embete trop donc je pense que je vais faire ledit menu moi meme
Conseillez vous javascript ou css ou les deux ?
Quelque petits conseils de départ ? Car je connais bien html php mais java c'est limite
Merci pour votre réponse
Le pb c'est que c'est un éditeur de menus qui s'apelle all web menus mais il m'embete trop donc je pense que je vais faire ledit menu moi meme
Conseillez vous javascript ou css ou les deux ?
Quelque petits conseils de départ ? Car je connais bien html php mais java c'est limite
Merci pour votre réponse
Groarh
Messages postés
682
Date d'inscription
vendredi 1 août 2008
Statut
Membre
Dernière intervention
28 juin 2015
185
10 nov. 2008 à 18:49
10 nov. 2008 à 18:49
Salut !
C'est pas java, c'est javascript. Ne pas confondre stp.
CSS te permet de contrôler l'aspect de ton menu mais pas le comportement. Commence par construire ton menu entier, tout déroulé, et une fois que l'aspect te plaira, ajoute la règle display: none; sur les éléments qui en ont besoin et commence à rajouter ton javascript.
Pour bien faire, mais seulement si tu as le courage, utilise des gestinnaires d'évènements (j'ai fait un mini tuto dessus) pour gérer les mousemove, mouseout et autres mouseover éventuels.
Dans tous les cas, essaye de commencer tout seul et reviens ici si tu as un problème. ;)
C'est pas java, c'est javascript. Ne pas confondre stp.
CSS te permet de contrôler l'aspect de ton menu mais pas le comportement. Commence par construire ton menu entier, tout déroulé, et une fois que l'aspect te plaira, ajoute la règle display: none; sur les éléments qui en ont besoin et commence à rajouter ton javascript.
Pour bien faire, mais seulement si tu as le courage, utilise des gestinnaires d'évènements (j'ai fait un mini tuto dessus) pour gérer les mousemove, mouseout et autres mouseover éventuels.
Dans tous les cas, essaye de commencer tout seul et reviens ici si tu as un problème. ;)
crazyghandi
Messages postés
312
Date d'inscription
vendredi 9 novembre 2007
Statut
Membre
Dernière intervention
4 octobre 2011
19
10 nov. 2008 à 20:22
10 nov. 2008 à 20:22
Salut,
Alors voici un premier essai en css du mieu que j'ai pu
<style type="text/css">
#nav {
list-style: none ;
margin: 0 ;
padding: 0 ;
}
#nav li {
display: inline ;
}
#nav li a {
color: #fff ;
background-image:url(images/tile.jpg);
display:inherit;
font: 1em "Trebuchet MS",Arial,sans-serif ;
font-size:24px;
color:#000000;
line-height: 1em ;
padding: 20px 10x 0px 100px ;
text-align: center ;
text-decoration: none ;
margin-left:100px;
}
#nav li a:hover, #nav li a:focus, #nav li a:active {
text-decoration: underline ;
}
--></style>
</head>
<body>
<div align="left">
<ul id="nav">
<li><a href="index.php?main=accueil.php">Accueil</a><br>
<a href="index.php?main=acquereur.php">Acquereur</a><br>
<a href="index.php?main=vendeur.php">Vendeur</a><br>
<a href="index.php?main=offres.php">Offres</a><br>
<a href="index.php?main=contact.php">Contact</a><br>
</li>
</ul>
</div>
</body>
Ca marche pas mal sauf que je n'arrive pas a regler l'espace entre le texte et la bordure.
Il m'affiche par exemple:
|qsdf|
|dfghdfghdfghdfgh|
alors que je voudrais
| qsdf |
|dfghdfghdfghdfgh|
Et ceci par rapport aux dimensions de "tile.jpg" : 100px par 40px
Merci d'avance
Alors voici un premier essai en css du mieu que j'ai pu
<style type="text/css">
#nav {
list-style: none ;
margin: 0 ;
padding: 0 ;
}
#nav li {
display: inline ;
}
#nav li a {
color: #fff ;
background-image:url(images/tile.jpg);
display:inherit;
font: 1em "Trebuchet MS",Arial,sans-serif ;
font-size:24px;
color:#000000;
line-height: 1em ;
padding: 20px 10x 0px 100px ;
text-align: center ;
text-decoration: none ;
margin-left:100px;
}
#nav li a:hover, #nav li a:focus, #nav li a:active {
text-decoration: underline ;
}
--></style>
</head>
<body>
<div align="left">
<ul id="nav">
<li><a href="index.php?main=accueil.php">Accueil</a><br>
<a href="index.php?main=acquereur.php">Acquereur</a><br>
<a href="index.php?main=vendeur.php">Vendeur</a><br>
<a href="index.php?main=offres.php">Offres</a><br>
<a href="index.php?main=contact.php">Contact</a><br>
</li>
</ul>
</div>
</body>
Ca marche pas mal sauf que je n'arrive pas a regler l'espace entre le texte et la bordure.
Il m'affiche par exemple:
|qsdf|
|dfghdfghdfghdfgh|
alors que je voudrais
| qsdf |
|dfghdfghdfghdfgh|
Et ceci par rapport aux dimensions de "tile.jpg" : 100px par 40px
Merci d'avance
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
crazyghandi
Messages postés
312
Date d'inscription
vendredi 9 novembre 2007
Statut
Membre
Dernière intervention
4 octobre 2011
19
10 nov. 2008 à 20:23
10 nov. 2008 à 20:23
pardon erreur d'affiche je voudrais :
|----------qsdf---------| avec des espaces bien sur
|dfghdfghdfghdfgh|
|----------qsdf---------| avec des espaces bien sur
|dfghdfghdfghdfgh|
Groarh
Messages postés
682
Date d'inscription
vendredi 1 août 2008
Statut
Membre
Dernière intervention
28 juin 2015
185
12 nov. 2008 à 12:32
12 nov. 2008 à 12:32
salut,
tu sembles déjà mal à l'aise avec le html seul...
Je te propose :
Pas besoin de la div, et note que l'attribut align est déprécié, au profit de la règle CSS équivalente.
Ensuite, un peu de théorie sur les éléments block et inline :
1/ Les éléments block sont reconnaissables par leur aspect rectangulaire et le fait qu'ils ont souvent la largeur d'une ligne entière (exemple : h1, ul, p, etc. ).
2/ Les éléments inline se comportent comme des lignes de texte et ne déforment donc pas leur conteneur (ex : em, strong, kbd, etc. ). Point important ici : ils n'ont pas de padding !
a et li sont de type block. Pour leur ajouter des paddings, une astuce courante consiste à leur mettre le type block, puis à les rendre flottants pour qu'ils puissent être plusieurs sur une même ligne.
Ici on pourrait faire ça sur les li, mais il est plus agréable d'avoir l'effet block sur les a (pour le hover).
Ensuite, un padding automatique (tellement pratique qu'on finit par dire merde à IE5 ^^) sur les côtés gauche et droite, avec la syntaxe raccourcie :
Et voilà !
tu sembles déjà mal à l'aise avec le html seul...
Je te propose :
<ul id="nav"> <li><a href="index.php?main=accueil.php">Accueil</a></li> <li><a href="index.php?main=acquereur.php">Acquereur</a></li> <li><a href="index.php?main=vendeur.php">Vendeur</a></li> <li><a href="index.php?main=offres.php">Offres</a></li> <li><a href="index.php?main=contact.php">Contact</a></li> </ul>
Pas besoin de la div, et note que l'attribut align est déprécié, au profit de la règle CSS équivalente.
Ensuite, un peu de théorie sur les éléments block et inline :
1/ Les éléments block sont reconnaissables par leur aspect rectangulaire et le fait qu'ils ont souvent la largeur d'une ligne entière (exemple : h1, ul, p, etc. ).
2/ Les éléments inline se comportent comme des lignes de texte et ne déforment donc pas leur conteneur (ex : em, strong, kbd, etc. ). Point important ici : ils n'ont pas de padding !
a et li sont de type block. Pour leur ajouter des paddings, une astuce courante consiste à leur mettre le type block, puis à les rendre flottants pour qu'ils puissent être plusieurs sur une même ligne.
Ici on pourrait faire ça sur les li, mais il est plus agréable d'avoir l'effet block sur les a (pour le hover).
#nav li {
float: left;
}
#nav li a {
display: block;
}
Ensuite, un padding automatique (tellement pratique qu'on finit par dire merde à IE5 ^^) sur les côtés gauche et droite, avec la syntaxe raccourcie :
padding: 0 auto;
Et voilà !
crazyghandi
Messages postés
312
Date d'inscription
vendredi 9 novembre 2007
Statut
Membre
Dernière intervention
4 octobre 2011
19
15 nov. 2008 à 14:22
15 nov. 2008 à 14:22
ok j'ai compris un peu comment ca marchait jve mdocumenter encore un peu pour fair un truc bien propre
merci pour le coup de main
merci pour le coup de main
