| | Menu déroulant en CSS. [RESOLU] |  |
|
 Hestia 
{ Membre }
 Messages : 41
![Menu déroulant en CSS. [RESOLU] Empty](https://2img.net/i/fa/empty.gif) | Bonjour ! Je viens vers vous car j'ai un souci de CSS ![Menu déroulant en CSS. [RESOLU] 3451650135](/users/3911/10/76/28/smiles/3451650135.png) 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  - 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  - Ensuite, j'aimerais savoir comment mettre du texte dans ce cadre justement ? Enfin si c'est possible ? ![Menu déroulant en CSS. [RESOLU] 1616978029](/users/3911/10/76/28/smiles/1616978029.png) Je crois que c'est tout pour le moment  Merci d'avance ! |
Dernière édition par Hestia le Ven 31 Jan 2014, 09:58, édité 1 fois | |
|
| | |
Nihil 
{ Modérateur }
Messages : 1216
| 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 ^^ | | |
|
| | |
Hestia
{ Membre }
Messages : 41
| 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 ? | | |
|
| | |
Nihil
{ Modérateur }
Messages : 1216
| - 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> | | |
|
| | |
Hestia
{ Membre }
Messages : 41
| 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> ? | | |
|
| | |
Nihil
{ Modérateur }
Messages : 1216
| 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. | | |
|
| | |
Hestia
{ Membre }
Messages : 41
| 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.. | | |
|
| | |
Nihil
{ Modérateur }
Messages : 1216
| 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) | | |
|
| | |
Hestia
{ Membre }
Messages : 41
| Merci, mais voilà ce que j'ai en apportant les corrections :
https://i.servimg.com/u/f55/18/09/31/60/sans_t10.png | | |
|
| | |
Nihil
{ Modérateur }
Messages : 1216
| 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> | | |
|
| | |
Hestia
{ Membre }
Messages : 41
| 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  |
Dernière édition par Hestia le Ven 31 Jan 2014, 09:51, édité 2 fois | |
|
| | |
JavaJunkiie™
{ Membre }
Messages : 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:
| | |
|
| | |
Nihil
{ Modérateur }
Messages : 1216
| 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  | | |
|
| | |
JavaJunkiie™
{ Membre }
Messages : 14
| 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. | | |
|
| | |
Nihil
{ Modérateur }
Messages : 1216
| - 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  , je vais donc avoir du mal à t'aider sans exemple concret :s | | |
|
| | |
JavaJunkiie™
{ Membre }
Messages : 14
| |
| | |
Nihil
{ Modérateur }
Messages : 1216
| 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)  . | | |
|
| | |
Contenu sponsorisé
| |
| | |
| | Menu déroulant en CSS. [RESOLU] | |
|
![Menu déroulant en CSS. [RESOLU] Bouton_active](https://2img.net/h/theme3.cssactif.com/ui/bouton_active.png)
![Menu déroulant en CSS. [RESOLU] Bouton_hover](https://2img.net/h/theme3.cssactif.com/ui/bouton_hover.png)
![Menu déroulant en CSS. [RESOLU] Fb-hover](https://2img.net/h/theme3.cssactif.com/facebook/fb-hover.png)
![Menu déroulant en CSS. [RESOLU] Fb-active](https://2img.net/h/theme3.cssactif.com/facebook/fb-active.png)
![Menu déroulant en CSS. [RESOLU] Logo](https://2img.net/h/theme3.cssactif.com/logo.png){kind=logo}
