Sujets similaires

Sujet: Menu déroulant en CSS. [RESOLU] Mer 15 Jan 2014, 17:12

Bonjour ! Je viens vers vous car j'ai un souci de CSS Menu déroulant en CSS. [RESOLU] 3451650135

Alors pour mieux vous illustrer ce que je tente de faire, j'aimerais des colonnes déroulantes comme dans cette fiche de présentation, les colonnes motivations et petits plus. Au lieu de demander simplement le code, je suis partie à sa recherche de moi-même pour tenter de comprendre. J'ai trouvée ça, c'est ce qui s'en rapproche le plus pour le moment. C'est là que les problèmes interviennent Laughing

- Comme vous pouvez le voir, l'effet est horizontal et non vertical comme je le souhaite, et même en modifiant les width par height rien ne change, je ne sais pas si je m'y prends mal ou si le code est mal conçu scratch

- Ensuite, j'aimerais savoir comment mettre du texte dans ce cadre justement ? Enfin si c'est possible ? Menu déroulant en CSS. [RESOLU] 1616978029

Je crois que c'est tout pour le moment Siffle

Merci d'avance !

Sujet: Re: Menu déroulant en CSS. [RESOLU] Mer 15 Jan 2014, 17:53

Alors en modifiant width par height c'est bon... Mais tu t'apercevras qu'il n'y a plus la transition. Pourquoi ?
Tout simplement par ce que dans le CSS il y a ceci :

Code:: transition-property:width;
transition-duration:1s;
transition-timing-function:linear;
transition-delay:2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;

Plus précisément :

Code:: transition-property:width;
-webkit-transition-property:width;

Il faut ici aussi remplacer width par height ^^

Et pour mettre du texte dedans, oui tu peux totalement, il suffit de le mettre à l'intérieur d'une balise p par exemple ^^

Sujet: Re: Menu déroulant en CSS. [RESOLU] Jeu 16 Jan 2014, 07:14

Je vais tester ça, merci ! J'ai encore deux petites questions du coup, un peu bêtes mais je préfère m'en assurer ^^

- Le code là, il se place dans le css c'est ça ? Ou dans une page HTML ?

- Je ne connais pas du tout la balise p, elle fonctionne comme une div ?

Sujet: Re: Menu déroulant en CSS. [RESOLU] Jeu 16 Jan 2014, 09:20

Citation :: - Le code là, il se place dans le css c'est ça ? Ou dans une page HTML ?

Je n'ai pas très bien compris ta question, tu parles de quel code précisément ?
Le code HTML = les balises

Code:: <div>BLABLABLA N'IMPORTE QUOI</div>

Le code CSS = un sélecteur, des accolades {} et des propriétés.

Code:: div { background: red;}

Citation :: - Je ne connais pas du tout la balise p, elle fonctionne comme une div ?

Oui, p signifie paragraphe ^^
Voici un exemple :

Code:: <div><p>Un petit paragraphe de blabla je raconte n'importe quoi etc, et là là la</p></div>

Sujet: Re: Menu déroulant en CSS. [RESOLU] Jeu 16 Jan 2014, 10:14

Je parle de ce code là

Code:: <!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
transition-property:width;
transition-duration:1s;
transition-timing-function:linear;
transition-delay:2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}

div:hover
{
width:200px;
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

<p>Hover over the div element above, to see the transition effect.</p>
<p><b>Note:</b> The transition effect will wait 2 seconds before starting.</p>

</body>
</html>

Je ne sais pas où le placer, dans le css je suppose mais bon.

Donc dans ma fiche de présentation je n'ai qu'à mettre :

Code:: <div class=lenomquej'auraisdonnéàmaclass><p>le texte qui va dans les menus déroulants</p></div>

?

Sujet: Re: Menu déroulant en CSS. [RESOLU] Jeu 16 Jan 2014, 15:49

Tout ce qui est entre les balises style est du CSS, il faut donc le placer dans la feuille de style :

Code:: div {
width:100px;
height:100px;
background:red;
transition-property:width;
transition-duration:1s;
transition-timing-function:linear;
transition-delay:2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}

div:hover {
width:200px;
}

Attention néanmoins, le code CSS actuel s'appliquera à toutes les div, ce n'est pas l'effet rechercher, il faut penser à remplacer div par .lenomdelaclass et div:hover par .lenomdelaclass:hover

Ensuite pour le code HTML dans la fiche de présentation normalement cela devrait bon.

Sujet: Re: Menu déroulant en CSS. [RESOLU] Ven 24 Jan 2014, 09:17

Bonjour, et désolé du retard. J'ai testée en mettant

Code:: onglet {
width:100px;
height:100px;
background:red;
transition-property:width;
transition-duration:1s;
transition-timing-function:linear;
transition-delay:2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}

onglet:hover {
width:200px;
}

Dans mon css et :

Code:: <div class=onglet><p>
mon texte
</p>/div>

Dans le message, mais rien ne se passe à part un /div> sous le texte..

Sujet: Re: Menu déroulant en CSS. [RESOLU] Ven 24 Jan 2014, 11:19

Pour le CSS, attention à bien mettre un point devant le "onglet". En effet il s'agit d'une classe et non pas d'une balise.

Code:: .onglet {
   width:100px;
   height:100px;
   background:red;
   transition-property:width;
   transition-duration:1s;
   transition-timing-function:linear;
   transition-delay:2s;
   /* Safari */
   -webkit-transition-property:width;
   -webkit-transition-duration:1s;
   -webkit-transition-timing-function:linear;
   -webkit-transition-delay:2s;
   }

   .onglet:hover {
width:200px;
   }

Attention à l'ouverture et la fermeture de tes balises en HTML, et au guillemets autour des attributs (class par exemple). Le HTML devrait être comme ça:

Code:: <div class="onglet"><p>
mon texte
</p></div>

J'ai testé ton code et il fonctionne, pense juste à rester en survolant longtemps, car il y a un "transition-delay" de 2s ^^ (en gros il attend 2s avant de commencer)

Sujet: Re: Menu déroulant en CSS. [RESOLU] Ven 24 Jan 2014, 12:39

Merci, mais voilà ce que j'ai en apportant les corrections :

https://i.servimg.com/u/f55/18/09/31/60/sans_t10.png

Sujet: Re: Menu déroulant en CSS. [RESOLU] Sam 25 Jan 2014, 15:11

Surtout dans le CSS n'oublie pas de remplacer "width" par "height" aux endroits que je t'avais dit dans mon premier message ^^.
Pense aussi à personnaliser les valeurs de largeur (with) et de hauteur (height)

Dans ton CSS, rajoute pour .onglet "overflow: hidden;"

Tu peux oublier la balise p, en fait il n'y en pas besoin ^^

Code:: <div class="onglet">mon texte</div>

Sujet: Re: Menu déroulant en CSS. [RESOLU] Sam 25 Jan 2014, 16:50

J'ai modifiée et il y a toujours un souci, il n'y a aucun défilement.

Un screen : https://i.servimg.com/u/f55/18/09/31/60/sans_t11.png

Mon css :

Code:: .ongletpres {
   width:100px;
   height:100px;
   background:red;
   transition-property:height;
   transition-duration:1s;
   transition-timing-function:linear;
   transition-delay:2s;
   overflow: hidden;
   /* Safari */
   -webkit-transition-property:height;
   -webkit-transition-duration:1s;
   -webkit-transition-timing-function:linear;
   -webkit-transition-delay:2s;
   }

   .ongletpres hover {
width:200px;
   }

Et donc dans ma fiche :

Code:: <div class="ongletpres">
[b]NOM COMPLET ✘[/b] écrire ici. [b]SURNOM ✘[/b] écrire ici. [b]DATE ET LIEU DE NAISSANCE ✘[/b] écrire ici. [b]ORIGINES ✘[/b] écrire ici. [b]MÉTIER/ÉTUDES ✘[/b] écrire ici. [b]ORIENTATION SEXUELLE ✘[/b] écrire ici. [b]STATUT CIVIL ✘[/b] écrire ici. [b]GROUPE ✘[/b] écrire ici. [b]MUSIQUE MAESTRO ✘[/b] mettre un lien ici.
</div>

EDIT ; Problème résolu, un code css en plus et tout marche parfaitement, merci beaucoup pour ton aide I love you

Sujet: Re: Menu déroulant en CSS. [RESOLU] Ven 31 Jan 2014, 10:14

( au passage le code de forum actif pour sélectionner le contenu d'un code a été mis à jour pour éviter ce double sélectionner ^^)

Bonjour, je suis celle qui l'a aidé à trouver. manque de bol moi j'ai une autre utilisation et jsuis bloquée. Le défilement se pass etc mais il faut éloigner les groupes d'onglet énormément.. Ya t'il un moyen de les faire moins espacés ?

Mon css:

Sujet: Re: Menu déroulant en CSS. [RESOLU] Ven 31 Jan 2014, 11:12

Est ce que tu peux m'envoyer un lien vers un exemple, et une screen qui montre le problème s'il te plait ?

Citation :: ( au passage le code de forum actif pour sélectionner le contenu d'un code a été mis à jour pour éviter ce double sélectionner ^^)

Je sais ^^, mais je ne suis pas du staff de CSSActif, donc la modif ne se fera pas Sad

Sujet: Re: Menu déroulant en CSS. [RESOLU] Ven 31 Jan 2014, 11:34

Oui mais faut les prévenir xDD

j'ai pas vraiment d'exemple en fait xD Mais jpeux te montrer le screen.

https://2img.net/r/hpimg15/pics/270553versionnormale.png Ca c'est sans rien.
Le html =
https://2img.net/r/hpimg15/pics/901515versiononglets.png Avec le code.

Sujet: Re: Menu déroulant en CSS. [RESOLU] Ven 31 Jan 2014, 15:47

Citation :: Oui mais faut les prévenir xDD

CSSActif est à l'abandon, le staff ne s'en occupe plus du tout ^^'

Es tu sûre de m'avoir donné le bon HTML et le bon CSS, je n'ai pas du tout le même rendu que toi Wink

, je vais donc avoir du mal à t'aider sans exemple concret :s

Sujet: Re: Menu déroulant en CSS. [RESOLU] Ven 31 Jan 2014, 16:01

Bah oui OO

Est ce que tu pourrais ouvrir un nouveau topic avec tes codes, et un lien où je peux voir au cas où je n'arrive pas à reproduire ton problème (par exemple si c'est une fiche perso, tu me donnes le lien du sujet ^^, il faut juste que ce soit visible pour les invités) Razz

.

Menu déroulant en CSS. [RESOLU]

Menu déroulant en CSS. [RESOLU]

Sujets similaires

Sujets similaires

Partenaires Or