| Faire un menu horizontal déroulant (messages) | |
|
|
Raito
{ Membre }
Messages : 64
| Enfin un menu déroulant simple à comprendre. Merci Beaucoup Haricoow pour ce tutos ♥ | | |
|
| |
KiiMy
{ Membre }
Messages : 82
| Super tuto merci beaucoup !!! Est-il possible de faire en sorte que le menu se déroule au clic ? | | |
|
| |
Edelweiss
{ Membre }
Messages : 105
| Coucou,
Kiimy » Remplace les "OnMouseOver" par "OnClick" .
J'ai une question : Comment faire pour qu'il n'y est plus le contenu quand la souris n'est pas dessus. Car quand on survole un peu, son contenu apparait, mais il reste même quand la souris n'est plus là =/. | | |
|
| |
KiiMy
{ Membre }
Messages : 82
| D'accord merci beaucoup ! Edelweiss t'as question n'est pas bête du tout, je n'avais même pas remarquer x) J'aimerais donc savoir aussi *fait sa fille qui saoul tout le monde* | | |
|
| |
Merveille
{ Membre }
Messages : 86
| J'ai un problème, quand je met le code CSS, il m'écris ça : Votre CSS a bien été mis à jour. Remarque : Les balises html génèrent des erreurs dans les feuilles de style. Une correction vient donc d'être effectuée afin de supprimer les balises html que vous avez placées dans la feuille de style. Et après, ben j'ai plus le code TT Mon CSs [ avant le problème du code ] - Spoiler:
a.forumlink:link, a.forumlink:visited { font-family: georgia; text-transform : uppercase; text-align: center; font-size: 100%; border-bottom: 5px solid #FF6161; color: #couleur; letter-spacing: 1px; display: block; -moz-border-radius:10px; } a.forumlink:hover, a.forumlink:hover:visited { background-image: url("https://i.servimg.com/u/f37/14/97/46/26/barre_10.jpg"); color: #FFFFFF; #FFFFFF text-align: center; display: block; border-bottom: 5px solid #FF6161; -moz-border-radius:10px; }
a.imginfo { border-bottom:0 solid #couleur; color:#couleur; position:relative; text-decoration:none; } a.imginfo span { display:none; } a.imginfo:hover { -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background:transparent none repeat scroll 0 0; cursor:help; z-index: 999; } a.imginfo:hover span { -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background:white none repeat scroll 0 0; border-color:#couleur; border-style:solid; border-width:3px 3px 5px 5px; display:inline; left:20px; padding:3px; position:absolute; top:15px; white-space:nowrap; } a:hover{ letter-spacing : 2px; }
a:hover { text-decoration: none !important; }
a { text-shadow: 2px 2px 5px #456C85; } a { text-decoration: none; }
tr.post td {padding-left: 20px;}
.bodyline { border: dashed 1px white; }
.blur{ background-color: #ccc; /*#456C85*/ color: inherit; margin-left: 4px; margin-top: 4px; }
.shadow, .content{ position: relative; bottom: 2px; right: 2px; }
.shadow{ background-color: #666; /*#456C85*/ color: inherit; }
.content{ background-color: #fff; /*#3C5B6E*/ color: #000; /*#456D85*/ border: 1px solid #000; /*#3C5B6E*/ padding: .5em 2ex; }
.defilement { overflow: auto; width: 250px; height: 30px; }
.titrefiche { background-color: #couleur; color: #couleur; font-size: 20px; text-align: center; }
.question { font-weight: bold; border-bottom: 1px solid #couleur; }
div.infobulle_avatar em { display:none; }
div.infobulle_avatar:hover { background: none; z-index: 999; cursor: hand; position: relative; text-decoration:none; border: 0; }
div.infobulle_avatar:hover em { font-style: normal; /*Arial*/ font-size: 10px; /*20*/ color:#FF7575 !important; /*#266B96*/ padding: 3px; display: block; position: absolute; -moz-border-radius: 10px; /* bord arrondis*/ -webkit-border-radius: 10px; /* bord arrondis*/ border-radius: 10px ; /* bord arrondis*/ background-color: #ABE6FF; /*#ABE6FF*/ border: 5px solid #FF7575; /*#ABE6FF*/ width:150px; /*30px*/ top: 100px; /*infobulle à 100px du haut*/ left: 100px; /*infobulle à 100px de la gauche*/ }
/ Modération /
.corbeille { background-color: #365a68; /*--- Couleur de fond ---*/ border: 1px solid #000000; /*--- Taille, type et couleur de la bordure ---*/ color: #000000; /*--- Couleur du texte ---*/ } .corbeille { background-image: url('http://www.dzvet.net/forum/images/corb.png'); /*--- Image de la corbeille ---*/ background-repeat: no-repeat; /*--- On ne fait apparaître l'image qu'une seule fois ---*/ background-position: center left; /*--- On positionne notre corbeille au milieu à gauche ---*/ background-color: #365a68; /*--- Couleur de fond ---*/ border: 1px solid #000000; /*--- Taille, type et couleur de la bordure ---*/ color: #000000; /*--- Couleur du texte ---*/ } .corbeille { background-image: url('http://www.dzvet.net/forum/images/corb.png'); /*--- Image de la corbeille ---*/ background-repeat: no-repeat; /*--- On ne fait apparaître l'image qu'une seule fois ---*/ background-position: center left; /*--- On positionne notre corbeille au milieu à gauche ---*/ background-color: #365a68; /*--- Couleur de fond ---*/ border: 1px solid #000000; /*--- Taille, type et couleur de la bordure ---*/ color: #000000; /*--- Couleur du texte ---*/ padding-left: 55px; /*--- On espace la bordure gauche du texte de 55px ---*/ min-height: 60px; /*--- On donne une taille minimale de 60px au tableau ---*/ }
.up { background-color: #FFE53D; /*--- Couleur de fond ---*/ border: 1px solid #000000; /*--- Taille, type et couleur de la bordure ---*/ color: #000000; /*--- Couleur du texte ---*/ } .up { background-image: url('http://www1.bestgraph.com/gifs/ecole/interro/interro-13.gif'); /*--- Image de la corbeille ---*/ background-repeat: no-repeat; /*--- On ne fait apparaître l'image qu'une seule fois ---*/ background-position: center left; /*--- On positionne notre corbeille au milieu à gauche ---*/ background-color: #FFD500; /*--- Couleur de fond ---*/ border: 1px solid #000000; /*--- Taille, type et couleur de la bordure ---*/ color: #000000; /*--- Couleur du texte ---*/ } .up { background-image: url('http://www1.bestgraph.com/gifs/ecole/interro/interro-13.gif'); /*--- Image de la corbeille ---*/ background-repeat: no-repeat; /*--- On ne fait apparaître l'image qu'une seule fois ---*/ background-position: center left; /*--- On positionne notre corbeille au milieu à gauche ---*/ background-color: #FFD500; /*--- Couleur de fond ---*/ border: 1px solid #000000; /*--- Taille, type et couleur de la bordure ---*/ color: #000000; /*--- Couleur du texte ---*/ padding-left: 55px; /*--- On espace la bordure gauche du texte de 55px ---*/ min-height: 60px; /*--- On donne une taille minimale de 60px au tableau ---*/ } .validé { background-color: #365a68; /*--- Couleur de fond ---*/ border: 1px solid #000000; /*--- Taille, type et couleur de la bordure ---*/ color: #000000; /*--- Couleur du texte ---*/ } .validé { background-image: url('http://www.monsieurparking.com/images/icones/valide-48x48.png'); /*--- Image de la corbeille ---*/ background-repeat: no-repeat; /*--- On ne fait apparaître l'image qu'une seule fois ---*/ background-position: center left; /*--- On positionne notre corbeille au milieu à gauche ---*/ background-color: #A2CF83; /*--- Couleur de fond ---*/ border: 1px solid #006E04; /*--- Taille, type et couleur de la bordure ---*/ color: #000000; /*--- Couleur du texte ---*/ } .validé { background-image: url('http://www.monsieurparking.com/images/icones/valide-48x48.png'); /*--- Image de la corbeille ---*/ background-repeat: no-repeat; /*--- On ne fait apparaître l'image qu'une seule fois ---*/ background-position: center left; /*--- On positionne notre corbeille au milieu à gauche ---*/ background-color: #A2CF83; /*--- Couleur de fond ---*/ border: 1px solid #006E04; /*--- Taille, type et couleur de la bordure ---*/ color: #000000; /*--- Couleur du texte ---*/ padding-left: 55px; /*--- On espace la bordure gauche du texte de 55px ---*/ min-height: 60px; /*--- On donne une taille minimale de 60px au tableau ---*/ }
/ TEST MENUE DÉROULANT/
| | |
|
| |
Kalia B.
{ Membre }
Messages : 27
| Merci beaucoup pour le tuto ! ^^
Je vais faire mon boulet, pardonnez-moi d'avance mais: - est-il possible de centrer cette barre de navigation? - où changer les couleurs du menu? J'ai bien essayée seule mais j'ai peur de faire des bêtises... ^^
Merci. | | |
|
| |
Miilka
{ Membre }
Messages : 49
| Bonjour,
Merci du tuto mais chez moi ça bug voila mon problème :
http://painted-shift.forumactif.org/index.htm
Le fond deviant tout blanc et le menune se déroule pas pourtant j'ai tout bien fait comment arranger ça s'il te plaît ? :S | | |
|
| |
Edelweiss
{ Membre }
Messages : 105
| Coucou,
Merveille » Je ne suis pas sure que ça vienne de là, mets tu as ceci dans ton code - Code:
-
color: #FFFFFF; #FFFFFF Kalia B. » Tu entoures ce code - Spoiler:
- Code:
-
<div id="navigation">
<dl> <dt onmouseover="javascript:montre('smenu1');">Règlement</dt> <dd id="smenu1"> <ul> <li><a href="">Lalalilalilala</a></li>
</ul> </dd> </dl> <dl> <dt onmouseover="javascript:montre('smenu2');">Contexte</dt> <dd id="smenu2"> <ul> <li><a href="">Lalalilalilala</a></li>
</ul> </dd>
</dl>
<dl> <dt onmouseover="javascript:montre('smenu3');">Présentations</dt> <dd id="smenu3"> <ul> <li><a href="">Lalalilalilala</a></li> </ul> </dd> </dl>
<dl> <dt onmouseover="javascript:montre('smenu4');">Copyright</dt> <dd id="smenu4"> <ul> <li><a href="">Menu © Haricoow pour CSSActif</a></li> </ul> </dd> </dl>
</div> par - Code:
-
<center> & </center> Par contre je ne suis pas sure du tout =S.
Pour changer la couleur des menu je crois que c'est ici - Code:
-
#navigation li { text-align: center; background: #fff; } #navigation li a, #menu dt a { color: #000; text-decoration: none; display: block; border: 0 none; } | | |
|
| |
Kalia B.
{ Membre }
Messages : 27
| Ah, malheureusement, ça ne centre pas ! | | |
|
| |
Neko_Chan
{ Membre }
Messages : 72
| Bonjour/bonsoir, Ce tutoriel est super! ^^
Mais j'ai eu un petit problème au niveau de la page HTML, j'ai bien inséré le code, et j'ai tous suivit, mais j'ai pas le menu qui se déroule, enfin j'ai le menu, mais pas ce qui doit se dérouler quand je passe la souri dessus. °°'
Donc je bug un peu dessus. ><
Merci à celui qui voudrait bien m'aider. | | |
|
| |
Haribot' ♪
{ Membre hyper-actif }
Messages : 5163
| As-tu bien inséré ceci : - Code:
-
<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> | | |
|
| |
Neko_Chan
{ Membre }
Messages : 72
| Oui, je l'ai bien mise dans une nouvelle page HTML, mais ça à pas l'air d'aider.
Edit : Peut-être qu'il y a un problème avec mon HTML ou ma CSS.
| | |
|
| |
LittleThing
{ Membre }
Messages : 175
| Si tu insères ceci : - Spoiler:
- Code:
-
<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" media="screen"> <!--
dl, dt, dd, ul, li { margin: 0; padding: 0; list-style-type: none; } #navigation dl { float: left; width: 12em; } #navigation dt { cursor: pointer; text-align: center; font-weight: bold; background: #ffffff; border: 1px solid gray; margin: 1px; } #navigation dd { display: none; border: 1px solid black; } #navigation li { text-align: center; background: #fff; } #navigation li a, #menu dt a { color: #000; text-decoration: none; display: block; border: 0 none; } #navigation li a:hover, #navigation li a:focus, #navigation dt a:hover, #navigation dt a:focus { background: #000000; color:#FFF; } #site { position: absolute; z-index: 1; top : 70px; left : 10px; color: #000; background-color: #ddd; padding: 5px; border: 1px solid gray; } --> </style> <div id="navigation">
<dl> <dt onmouseover="javascript:montre('smenu1');">Règlement</dt> <dd id="smenu1"> <ul> <li><a href="">Lalalilalilala</a></li>
</ul>
</dd> </dl> <dl> <dt onmouseover="javascript:montre('smenu2');">Contexte</dt> <dd id="smenu2"> <ul> <li><a href="">Lalalilalilala</a></li>
</ul> </dd>
</dl>
<dl> <dt onmouseover="javascript:montre('smenu3');">Présentations</dt> <dd id="smenu3"> <ul> <li><a href="">Lalalilalilala</a></li> </ul> </dd> </dl>
<dl> <dt onmouseover="javascript:montre('smenu4');">Copyright</dt> <dd id="smenu4">
<ul> <li><a href="">Menu © Haricoow pour CSSActif</a></li> </ul> </dd> </dl>
</div>
Ça devrait marcher. Moi aussi, ça ne se déroulait pas, mais de cette façon, ça marche. Et pas besoin de créer une page HTML, ni rien. Tu intègres ce code dans ta page d'accueil, et ça devrait marcher... Pour moi, en tout cas, ça a marché. Ah... Je ne sais pas si c'est très conventionnel, mais au moins, ça marche pour moi, de cette façon. | | |
|
| |
Neko_Chan
{ Membre }
Messages : 72
| Bonjour, Oh! Ça marche! Merci beaucoup, LittleThing! ^^ | | |
|
| |
LittleThing
{ Membre }
Messages : 175
| De rien ! De rien ! ^^
[de la fille qui bidouille n'importe comment, et que ça finit par marcher...] | | |
|
| |
Anna
{ Membre }
Messages : 46
| Merci pour ce tuto^^ Mais j'ai un petit problème xD. J'aimerais mettre ce menu dans un message sur le forum, où dois-je alors placer les codes? T_T | | |
|
| |
Haribot' ♪
{ Membre hyper-actif }
Messages : 5163
| Il faut que tu fasses le code sur une Page HTML et ensuite, tu la place en Iframe. Pour plus d'infos, fait une rechercher avec le mot-clé "iframe" sur le forum | | |
|
| |
Anna
{ Membre }
Messages : 46
| D'accord, merci beaucoup!^^ | | |
|
| |
Bl✖✖dyCherries ™
{ Membre }
Messages : 20
| Forumactif efface le CSS à chaque fois que je tente de l'ajouter à ma fiche CSS >< comment faire ? | | |
|
| |
Jehro
{ Membre }
Messages : 100
| Cherry", le code CSS est à ajouter non pas dans ta feuille de style CSS, mais toujours dans ta page HTML ; - Code:
-
<style type="text/css"> est spécifique du HTML où l'on veut introduire du language CSS__ je pense. | | |
|
| |
Bl✖✖dyCherries ™
{ Membre }
Messages : 20
| Oui je viens de le comprendre >< je fais des codes Css depuis un moment déjà et je viens de comprendre tir machin >< •boulet• Merci d'avoir répondu et expliqué | | |
|
| |
Jehro
{ Membre }
Messages : 100
| Pas de problème, on a tous des petits moments de distraction (et j'ai cru voir que quelques personnes ont fait la même chose que toi au départ) :pirat: | | |
|
| |
Naoko144
{ Membre }
Messages : 35
| Salut! J'ai un petit problème avec ton code .-. Je l'ai copié collé plusieur fois et la même erreur reviens =/ Le déroulement ne fonctionne pas et le fond du forum devient blanc. J'ai réussis à enlevé le fond blanc, mais je ne voit pas pourquoi le déroulement ne fonctionne pas .-. voici mon forum test: http://aetherworld.actifforum.com/index.htm et voici le code complet: - Code:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Menu Horizontal Déroulant</title>
<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" media="screen"> <!-- body { margin: 0; padding: 0; font: 80% "Comic Sans MS", cursive; } dl, dt, dd, ul, li { margin: 0; padding: 0; list-style-type: none; } #navigation dl { float: left; width: 12em; } #navigation dt { cursor: pointer; text-align: center; font-weight: bold; background: #ffffff; border: 1px solid gray; margin: 1px; } #navigation dd { display: none; border: 1px solid black; } #navigation li { text-align: center; background: #fff; } #navigation li a, #menu dt a { color: #000; text-decoration: none; display: block; height: 10%; border: 0 none; } #navigation li a:hover, #navigation li a:focus, #navigation dt a:hover, #navigation dt a:focus { background: #000000; color:#FFF; } #site { position: absolute; z-index: 1; top : 70px; left : 10px; color: #000; background-color: #ddd; padding: 5px; border: 1px solid gray; } --> </style>
</head>
<body><div id="navigation">
<dl> <dt onmouseover="javascript:montre('smenu1');">Règlement</dt> <dd id="smenu1"> <ul> <li><a href="">Lalalilalilala</a></li>
</ul> </dd> </dl> <dl> <dt onmouseover="javascript:montre('smenu2');">Contexte</dt> <dd id="smenu2"> <ul> <li><a href="">Lalalilalilala</a></li>
</ul> </dd>
</dl>
<dl> <dt onmouseover="javascript:montre('smenu3');">Présentations</dt> <dd id="smenu3"> <ul> <li><a href="">Lalalilalilala</a></li> </ul> </dd> </dl>
<dl> <dt onmouseover="javascript:montre('smenu4');">Copyright</dt> <dd id="smenu4"> <ul> <li><a href="">Menu © Haricoow pour CSSActif</a></li> </ul> </dd> </dl>
</div> </body> </html> Si vous pourriez m'aider .-. J'apprécierais beaucoup | | |
|
| |
A S K !
{ Membre }
Messages : 17
| Coucou, je sais pas si ça va changer quelque chose, mais en tout cas, comme ça, chez moi ça marche x) Donc il te suffit de copier et coller le code suivant dans la page Htlm x) - Code:
-
<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" media="screen"> <!-- dl, dt, dd, ul, li { margin: 0; padding: 0; list-style-type: none; } #navigation dl { float: left; width: 12em; } #navigation dt { cursor: pointer; text-align: center; font-weight: bold; background: #ffffff; border: 1px solid gray; margin: 1px; } #navigation dd { display: none; border: 1px solid black; } #navigation li { text-align: center; background: #fff; } #navigation li a, #menu dt a { color: #000; text-decoration: none; display: block; border: 0 none; } #navigation li a:hover, #navigation li a:focus, #navigation dt a:hover, #navigation dt a:focus { background: #000000; color:#FFF; } #site { position: absolute; z-index: 1; top : 70px; left : 10px; color: #000; background-color: #ddd; padding: 5px; border: 1px solid gray; } --> </style><div id="navigation"> <dl> <dt onmouseover="javascript:montre('smenu1');">Règlement</dt> <dd id="smenu1"> <ul> <li><a href="">Lalalilalilala</a></li> </ul> </dd> </dl> <dl> <dt onmouseover="javascript:montre('smenu2');">Contexte</dt> <dd id="smenu2"> <ul> <li><a href="">Lalalilalilala</a></li> </ul> </dd> </dl> <dl> <dt onmouseover="javascript:montre('smenu3');">Présentations</dt> <dd id="smenu3"> <ul> <li><a href="">Lalalilalilala</a></li> </ul> </dd> </dl> <dl> <dt onmouseover="javascript:montre('smenu4');">Copyright</dt> <dd id="smenu4"> <ul> <li><a href="">Menu Haricoow pour CSSActif</a></li> </ul> </dd> </dl> </div> J'espère que ça marchera également chez toi Sinon, je me demandais comment centrer le menu ? Oo | | |
|
| |
Naoko144
{ Membre }
Messages : 35
| Merci beaucoup ASK tout fonctionne parfaitement maintenant! >3< | | |
|
| |
Contenu sponsorisé
| |
| |
| Faire un menu horizontal déroulant (messages) | |
|