Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1488 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Bouton sur deux lignes

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Bouton sur deux lignes

n°2170616
Skaym
Posté le 10-01-2013 à 17:33:26  profilanswer
 

Bonjour à tous,
 
Je débute en html et je suis confronté a un petit problème pour ma navigation.
 
Je voudrais que chacun de mes liens comprenne un titre, et un petit texte explicatif, comme sur l'image ci dessous :
 
http://img15.hostingpics.net/pics/692986bouton.png
 
Je voudrais qu'en le survolant le texte "un bouton" devienne vert clair et le sous titre "qui ne marche pas du tout" passe en blanc.
Mais je voudrais que ca reste un seul lien, je veux dire si on survole "un bouton", que le sous titre change lui aussi de couleur.
 
J'ai pas mal tourné sur le net je n'arrive pas à trouver de réponse satisfaisante
 
Voilà ou j'en suis (c'est un extrait bien sûr), mais ca marche pas du tout, je comprends pas comment dire a mon lien qu'il contient deux éléments qui doivent changer pour deux couleurs differentes
 
Un bout de code
 

Code :
  1. <ul class="menu">
  2.                <li><a href="#">Un Bouton<br /><span class="boutons">Qui ne marche pas du tout</span></a></li>
  3.      <li><a href="#">Dépannage</a></li>
  4.      <li><a href="#">Formation</a></li>
  5.      <li><a href="#">Contact</a>
  6.             </ul>


 
Un bout de CSS
 

Code :
  1. .menu {
  2.     float: inside;
  3.     display: block;
  4.     padding-right: 50px;
  5.     padding-left: 50px;
  6. }
  7. nav.primary ul li {
  8. display: inline;
  9. float: inside;
  10. position: relative;
  11. }
  12. nav.primary ul li a {
  13. display: inline-block;
  14. line-height: 15px;
  15. padding:  0 30px;
  16. color: #ebebeb;
  17. text-transform: none;
  18. text-decoration: none;
  19. font-weight: bold;
  20. letter-spacing: 0.08em;
  21. }
  22. nav.primary ul li a:hover {
  23. cursor: pointer;
  24.     color: #ff6a00
  25. }
  26. nav.primary ul li a span:hover {
  27. cursor: pointer;
  28.     color: Aquamarine
  29. }


 
 
Je vous remercie par avance, et si par hasard une réponse valable a ma problématique avait déjà été postée et m'avait échappée je vous serais très reconnaissant de me l'indiquer.

mood
Publicité
Posté le 10-01-2013 à 17:33:26  profilanswer
 

n°2170738
gelatine_v​elue
Posté le 11-01-2013 à 15:00:38  profilanswer
 

La soluce ici: http://jsfiddle.net/85MMz/

 

Une remarque: tu as posté du css qui ne correspond pas au html, j'ai du rajouter des balises. Ca aide pas pour comprendre.
Une autre remarque: j'ai testé que sous firefox.


Message édité par gelatine_velue le 11-01-2013 à 15:02:50
n°2170782
Skaym
Posté le 11-01-2013 à 18:36:37  profilanswer
 

Salut Gelatine!
 
Merci beaucoup pour ton aide ça répond tout à fait à ce que je cherchais, et finalement c'est simple quand on a la solution sous les yeux ^^
 
Désolé pour les balises manquantes j'ai oublié que j'avais fait des tests ratés, je ferais gaffe si prochaine fois il y a.
 
 
Merci encore et au plaisir!


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Bouton sur deux lignes

 

Sujets relatifs
Création d'un tableau html (lignes + colonnes) avec mysql[API] utilisation bouton fait Segfault le programme
AS3 Simple swap de CLip/BoutonBatch afficher les 10 derniers caractères de chaques lignes
Visual C++ 2010 - Lancer un batch dos depuis un bouton[VBA]Calcul du nombre de lignes avec 3 conditions non numériques
[IDE] Sauts de lignes ftpafficher le texte d'un bouton sur plusieurs lignes
bouton SUBMIT : texte sur 2 lignes !est-il possible de faire un bouton sur 2 lignes avec CSS2 ?
Plus de sujets relatifs à : Bouton sur deux lignes


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR