Bouton sur deux lignes

Marsh Posté le 10-01-2013 à 17:33:26

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 :

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 :

<ul class="menu">
<li><a href="#">Un Bouton<br /><span class="boutons">Qui ne marche pas du tout</span></a></li>
<li><a href="#">Dépannage</a></li>
<li><a href="#">Formation</a></li>
<li><a href="#">Contact</a>
</ul>

Un bout de CSS

Code :

.menu {
float: inside;
display: block;
padding-right: 50px;
padding-left: 50px;
}
nav.primary ul li {
display: inline;
float: inside;
position: relative;
}
nav.primary ul li a {
display: inline-block;
line-height: 15px;
padding: 0 30px;
color: #ebebeb;
text-transform: none;
text-decoration: none;
font-weight: bold;
letter-spacing: 0.08em;
}
nav.primary ul li a:hover {
cursor: pointer;
color: #ff6a00
}
nav.primary ul li a span:hover {
cursor: pointer;
color: Aquamarine
}

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.

Reply

Marsh Posté le 10-01-2013 à 17:33:26

Reply

Marsh Posté le 11-01-2013 à 15:00:38

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

Reply

Marsh Posté le 11-01-2013 à 18:36:37

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!

Reply

Bouton sur deux lignes

Sujets relatifs:

Leave a Replay