CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur: Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus! |
| Recherche un code CSS pour ma page d'accueil | |
| kriisten25
{ Membre }
Messages : 46
| Bonsoir à tous, Je me permet de poster ce message, car après avoir créée ma page d'acceuil, je souhaiterais faire un effet mais ne trouve pas le CSS. Voici mon schéma : - Spoiler:
https://i.servimg.com/u/f37/16/57/46/69/ex10.png
Je souhaiterais faire à peu près ceci. En faîtes dans le plus grand tableau que j'ai effectué, je souhaiterais faire au passage de la souris (ce qui est en fond gris) faire comme un infobulle ou il y aura comme un menu déroulant s'il vous plait.
Si vous n'avez pas très bien saisi, j'essayerais de vous en faire un mieux Merci infiniment de votre attention & passez une bonne soirée, Cindy. | | |
| | | Fire-Fly
{ Membre actif }
Messages : 429
| Salut! Bon, à cause de la politique qui dit que les membres n'ont pas le droit de faire de commande, on ne peux pas te donner le code comme ça, gratuitement. Ce qui m'échappe dans ta demande, c'est que tu as dit la réponse toi-même, tu n'as qu'à faire une infobulle (tuto ici). Donc... quelle est ta demande exactement ? | | |
| | | kriisten25
{ Membre }
Messages : 46
| Bonjour, Merci tout d'abords de ta réponse. Oui, je le savais mais j'ai hésité tout de même à poster mon sujet ; désolé :S Ben en faîtes, j'ai essayé avec le code infobulle et mettre dans le javascript mais rien ne s'affiche en faîtes. Dans mon javascript, j'ai mis ce code là : - Code:
-
function affiche(menu) { document.getElementById("menu").style.display='block'; } function cache(menu){ document.getElementById("menu").style.display='none'; } Dans mon CSS celui là : - Code:
-
div.menu { position: relative; /* on définit le bloc comme élément de référence */ cursor:pointer; /*donne au curseur la forme de petite main, comme sur un lien*/ }
div.menu > div{ display: none; /* ceci masque l'infobulle */ }
div.menu:hover { background: none; /* correction d'un bug IE */ z-index: 500; /* on s'arrange pour que notre bloc soit au dessus des autres en cas de conflit */ }
/* Lorsqu'on survole le contenu du bloc */ div.menu:hover > div{ display: block; /* ceci affiche l'infobulle (on peut aussi utiliser inline au lieu de block) */
/* on positionne notre infobulle par rapport au bloc conteneur */ position: absolute; top: 5px; /* 5px par rapport au haut du bloc .infobulle */ left: 15px; /* 15 px par rapport à la gauche du bloc .infobulle */
/* Et puis on rajoute tous les éléments de mise en forme de l'infobulle */ background: #ebebeb; /* arrière-plan de l'infobulle */ color: black; /* texte dans l'infobulle */ padding: 3px; /* marges internes par rapport aux bords */ /* bordures de votre infobulle*/ border: 1px dotted black; Et pour ma page d'acceuil, celui là : - Code:
-
<center><div id="menu"><ul><li><a href="#"><center><div style ="border-top: 2px solid #0F0F0F; width: 250px;"></div></center>Pour commencer ...</a> <ul> <li><a href="http://eternal-twilight.forumsactifs.com/t266-reglement-d-eternal-twilight-forum-chapitre-4-the-hell-of-eternity">Règlement</a> </li><li><a href="http://eternal-twilight.forumsactifs.com/t522-complements-d-informations">Compléments</a> </li><li><a href="http://eternal-twilight.forumsactifs.com/t524-story">Story</a> </li><li><a href="http://eternal-twilight.forumsactifs.com/t523-pour-faire-un-bon-rpg">Le RPG</a> </li><li><a href="http://eternal-twilight.forumsactifs.com/f5-postes-vacants">Les scénarios</a> </li></ul></li>
<li><a href="#">Facultatifs ...</a> <ul> <li><a href="http://eternal-twilight.forumsactifs.com/f8-messages-du-staff">Newsletter</a> </li><li><a href="http://eternal-twilight.forumsactifs.com/f31-espace-partenariats">Partenariats</a> </li><li><a href="http://eternal-twilight.forumsactifs.com/f32-invites-questions">Questions</a> </li><li><a href="http://eternal-twilight.forumsactifs.com/t664-presentation-du-staff-d-eternal-twilight-forum">Le Staff</a> </li></ul></li>
<li><a href="#">Votre personnage ...</a> <ul> <li><a href="http://eternal-twilight.forumsactifs.com/t421-botin-d-avatars">Avatars</a> </li><li><a href="http://eternal-twilight.forumsactifs.com/f2-presentations"> Présentations</a> </li><li><a href="http://eternal-twilight.forumsactifs.com/t421-botin-d-avatars">Bottin.</a> </li><li><a href="http://eternal-twilight.forumsactifs.com/f57-gestions-personnages">Liens & Rp's.</a> </li></ul></li>
</ul> </div></TD>
| | |
| | | Safran
{ Spécialiste }
Messages : 658
| As-tu activé le javascript sur le forum ? Pour vérifier : Panneau d'Administration → Modules → Gestion des codes Javascript → Activer la gestion des codes Javascript : Oui | | |
| | | kriisten25
{ Membre }
Messages : 46
| Hello Oui, je l'ai activé | | |
| | | 'Christa
Lostmindy
Messages : 2856
| Bonjour. Hum, faudrait savoir, c'est un identifiant ou bien une classe, le menu ? Parce que dans le javascript je vois qu'il y a un getElementById , dans le HTML nous avons <div id="menu"> et dans le CSS il y a un .menu , or comme l'indiquent les bases les plus élémentaires du CSS, une classe est précédée d'un point, et un identifiant est précédé d'un # Maintenant ma question est : pourquoi du javascript, pourquoi une infobulle ? Tu devrais plutôt chercher sur internet comment réaliser des menus en CSS au lieu de coder des trucs bizarres '_' | | |
| | | 'Christa
Lostmindy
Messages : 2856
| Bonjour, ton problème est-il résolu ? | | |
| | | Psycho
Psychopathe
Messages : 3407
| Hello (: N'ayant toujours pas obtenu de réponse, je considère ce sujet comme résolu ! Merci de ta compréhension | | |
| | | Contenu sponsorisé
| | | | | Recherche un code CSS pour ma page d'accueil | |
|
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|
|