[RESOLU] Menu déroulant (PHP, CSS et JS)

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : [RESOLU] Menu déroulant (PHP, CSS et JS)

Re: Menu déroulant (PHP, CSS et JS)

par xTG » 19 janv. 2012, 14:53

Le background est à placer sur le ul et non sur les li.

Re: Menu déroulant (PHP, CSS et JS)

par arthur77 » 19 janv. 2012, 14:51

Personne ?

Re: Menu déroulant (PHP, CSS et JS)

par arthur77 » 12 janv. 2012, 21:20

Aucune idée ? :?

Re: Menu déroulant (PHP, CSS et JS)

par arthur77 » 11 janv. 2012, 09:14

Image

Re: Menu déroulant (PHP, CSS et JS)

par juliette » 10 janv. 2012, 19:14

fait voir une capture

Re: Menu déroulant (PHP, CSS et JS)

par arthur77 » 10 janv. 2012, 17:57

margin-top non ? en tout cas "margin-top: -16px" le colle pil poil ! merci !

Une dernière question (je sais je suis chiant ... :p ) quand on déroule le menu (affichage notifications), seul l'espace des lettres est sur un fond, donc si on déroule le menu sur un fond coloré, on a de jolis trous blancs ! est-ce qu'on pourrais faire un bloc blanc derrière les élements <li> de <ul> notifications ?

Re: Menu déroulant (PHP, CSS et JS)

par juliete » 10 janv. 2012, 11:24

essaye margin-tio ="-3"

Re: Menu déroulant (PHP, CSS et JS)

par arthur77 » 09 janv. 2012, 19:32

Le menu n'allait pas à droite parce qu'il n'avait pas la place dans le div ! J'ai rajouté ça à #nav :

Code : Tout sélectionner

width: 99%;
Et ça fonctionne.

Donc tout est niquel ! Une dernière petite chose : la div #nav n'est pas collée tout en haut de la page, il y a un petit jour d'environ 3px alors que le margin-top et le padding-top sont à 0, tu as une idée ?

Re: Menu déroulant (PHP, CSS et JS)

par arthur77 » 08 janv. 2012, 22:41

Ca n'a rien changé ... :x

Re: Menu déroulant (PHP, CSS et JS)

par juliette » 08 janv. 2012, 21:00

change ça pour voir, le tout la est de positionné le menu en haut a droite...
#menu, #menu ul /* Liste */     
{        position: relative;
         float:right;
         padding : 0; /* pas de marge intérieure */
         margin : 0; /* ni extérieure */
         list-style : none; /* on supprime le style par défaut de la liste */
         line-height : 21px; /* on définit une hauteur pour chaque élément.  ancien : 21px */
         text-align : center; /* on centre le texte qui se trouve dans la liste */
}

Re: Menu déroulant (PHP, CSS et JS)

par arthur77 » 08 janv. 2012, 20:26

Image

(J'ai modifié le padding-bottom de .fullheader (alias "bienvenue") pour qu'il descend jusqu'en bas du who is online)


Bon alors changement de plan, est-ce qu'on peut coller le who is online et les boutons tout à droite, comme ça il faudrai un pseudo super long pour que ça se superpose ? Et aussi, comme on le voit sur l'image, les boutons et le WhoIsOnline ne sont pas colé en haut, alors que j'ai des "margin-top" et "padding-top" à 0, on peut pas les coller ?

Je remet le CSS :

Code : Tout sélectionner

/* TOUTE cette première partie concerne l'affichage déroulant des notifications */ #nav { position: fixed; margin-top: 0px; margin-left:116px; background-color: #9C9F9E; } #menu, #menu ul /* Liste */ { padding : 0; /* pas de marge intérieure */ margin : 0; /* ni extérieure */ list-style : none; /* on supprime le style par défaut de la liste */ line-height : 21px; /* on définit une hauteur pour chaque élément. ancien : 21px */ text-align : center; /* on centre le texte qui se trouve dans la liste */ } #menu /* Ensemble du menu */ { font-weight : bold; /* on met le texte en gras */ font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */ font-size : 12px; /* hauteur du texte : 12 pixels */ } #menu a /* Contenu des listes */ { padding : 0; /* aucune marge intérieure */ background : #fff; /* couleur de fond */ color : #000; /* couleur du texte */ text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */ width : 144px; /* largeur */ } #menu li /* Elements des listes */ { float : left; /* pour IE qui ne reconnaît pas "transparent" */ border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */ } /* IE ne reconnaissant pas le sélecteur ">" */ html>body #menu li { border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */ } #menu li ul /* Sous-listes */ { position: absolute; /* Position absolue */ width: 144px; /* Largeur des sous-listes. ancien : 144px */ left: -999em; /* Hop, on envoie loin du champ de vision */ } #menu li ul li /* Éléments de sous-listes */ { /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */ border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */ } /* IE ne reconnaissant pas le sélecteur ">" */ html>body #menu li ul li { border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */ } #menu li ul ul { margin : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */ /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */ border-left : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */ } /* IE ne reconnaissant pas le sélecteur ">" */ html>body #menu li ul ul { border-left : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */ } #menu a:hover /* Lorsque la souris passe sur un des liens */ { color: #194898; background: #fff; } #menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */ { left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */ } #menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */ { left: auto; /* Repositionnement normal */ min-height: 0; /* Corrige un bug sous IE */ } /* FIN DE CETTE PREMIERE PARTIE pour l'affichage déroulant des notifs */ a { text-decoration: none; color: #194898; } a:hover { text-decoration: none; text-decoration: underline; color: #5368D2; } a:active { text-decoration: none; text-decoration: underline; color: #5368D2; } a:visited { text-decoration: none; color: #194898; } body { text-align: center; font-family: "Trebuchet MS", Arial; } .wio { font-style: italic; font-size: 0.7em; } p { background-color: #9C9F9E; margin-left: 100px; margin-right: 100px; } .footer { margin-bottom: 100px; border: 2px #194898 dashed; } .header .logo { position : absolute; left: 9%; } .header { text-align: left; } .fullheader { position : fixed; top: 0px; margin-top: 0px; margin-right: 0px; margin-left: 0px; text-align: center; padding-bottom: 9px; }

Re: Menu déroulant (PHP, CSS et JS)

par juliette » 08 janv. 2012, 20:16

en fait, des solutions, j'en ai plusieurs sauf que je ne vois pas comment caler le menu après bonjours avec le possibilité de se déplacer suivant la longueur du pseudo ...

Re: Menu déroulant (PHP, CSS et JS)

par juliette » 08 janv. 2012, 20:06

tu en es ou la, fait voir une image

Re: Menu déroulant (PHP, CSS et JS)

par arthur77 » 08 janv. 2012, 18:28

le clear: both ne fonctionne pas; tu veux que j'essaye de mettre le bienvenue dans un <li> ou alors tu as autre chose apparement ?

Re: Menu déroulant (PHP, CSS et JS)

par juliette » 08 janv. 2012, 14:33

bon, tout ça ce n'est pas la solution, tu peut faire autrement !!!