28172 sujets

CSS et mise en forme, CSS3

Hover qui ne change pas de couleur

nav {
	float: right;
	margin-top: 50px;
	display: inline;
}

nav a {
	font-family: 'Joy';
	text-transform: lowercase;
	font-size: 20px;
	color: #ffffff;
	margin-left: 20px;
}

nav a:hover {
	color: #f2034b;
}
<nav><a href="#">Home</a> <a href="#">Agency</a> <a href="#">Portfolio</a> <a href="#">Services</a> <a href="#">Contact</a></nav>
il faut mettre tes <a> dans des <li> et le tout dans une <ul>, il s'agit bien d'une liste non ordonnée. Smiley cligne
EDIT: adapter le CSS en fonction comme ici
Modifié par jmlapam (25 Oct 2011 - 21:11)
Ca ne marche pas, de plus, le men est inversé. JE crois que je vais aller me coucher, et reprendre ça au clair demain (mal de tête).

A moins que j'ai fait une erreur, voici mon code:

#nav li {
	float: right;
	margin-top: 50px;
	padding: 0 ;
	list-style: none;
	display: inline;
}

#nav li a {
	font-family: 'Joy';
	text-transform: lowercase;
	font-size: 20px;
	color: #ffffff;
	margin-left: 20px;
}

#nav li a:hover {
	color: #f2034b;
}


<ul id="nav">
		<li><a href="#">Home</a></li>
		<li><a href="#">Agency</a></li>
		<li><a href="#">Portfolio</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Contact</a></li>
	</ul>

Modifié par nova313 (25 Oct 2011 - 21:31)
je verrais bien une hauteur à li, mais ce n'est que mon avis




nova313 a écrit :
nav {
	float: right;
	margin-top: 50px;
	display: inline;
}

nav a {
	font-family: 'Joy';
	text-transform: lowercase;
	font-size: 20px;
	color: #ffffff;
	margin-left: 20px;
}

nav a:hover {
	color: #f2034b;
}
Hello.

Au vu du code posté, c'est un comportement tout à fait anormal (j'ai jamais vu ça perso).
Donc pas mieux que nounours2, page en ligne ou un jsFiddle reproduisant le bug, sinon on ne peux pas faire grand chose pour t'aider.
Hello,

Pourquoi faire "flotter les li", si tu leurs donnes un mode de rendu en ligne ?
Pourquoi cette marge haute sur ces mêmes li ?
Bref, le mieux effectivement lorsque l'on rencontre ce type de souci, c'est de fournir une page en ligne reproduisant le phénomène (une autre portion du code peut éventuellement "interféré"...)
Il n'est pas non plus inutile de préciser sous quel système d'exploitation et avec quel navigateur tu rencontres ce problème...

La balle est dans ton camp Smiley cligne
Salut,

A quoi sert le float, je comprends pas.
Je regarderais plutôt du côté des scripts pour le souci d'affichage.

<hs>
Sinon utilise les raccourcis CSS, tu gagneras du temps:
 padding-bottom:0;
  padding-left:0;
  padding-right:0;
  padding-top:0;


C'est 
padding:0;


Sinon ailleurs, <div class="content"> devrait être <ul class="content">

</hs>
#nav li {
	float: right;
	margin-top: 50px;
	padding: 0 ;
	list-style: none;
	display: inline;
}


euh... juste

#nav li {
	display: inline;
	margin-top: 50px;
	padding: 0 ;
	list-style: none;
}


devrait te suffire non ? pourquoi ce float ?
Hello,

C'est un bug de rendu de Webkit, apparemment. Je l'ai sous Chrome mais pas sous Firefox.
J'arrive à le résoudre en veillant bien à ce que le dessin des lettres ne dépasse pas de la boite inline du lien (un bon moyen pour ça c'est d'utiliser un peu de padding).

En passant:
- Ton code HTML est invalide.
- La mise en page est toute cassée sous Firefox (peut-être liée au premier problème, ou à l'utilisation de styles spécifiques à Webkit...).
fvsch a écrit :
Hello,

C'est un bug de rendu de Webkit, apparemment. Je l'ai sous Chrome mais pas sous Firefox.
J'arrive à le résoudre en veillant bien à ce que le dessin des lettres ne dépasse pas de la boite inline du lien (un bon moyen pour ça c'est d'utiliser un peu de padding).

En passant:
- Ton code HTML est invalide.
- La mise en page est toute cassée sous Firefox (peut-être liée au premier problème, ou à l'utilisation de styles spécifiques à Webkit...).


Merci, ça résout déjà mon problème initial. En ce qui concerne le menu, j'essairai de modifier tout ça ce soir.
Florian_R a écrit :
Hello.

Au vu du code posté, c'est un comportement tout à fait anormal (j'ai jamais vu ça perso).
Donc pas mieux que nounours2, page en ligne ou un jsFiddle reproduisant le bug, sinon on ne peux pas faire grand chose pour t'aider.


j'ai vu ça mais il y a longtemps, mais avec des images plus ou moins transparente,
avec hover, ça montrer le background au survol
mais je vois que ce n'est pas le cas ici
Sujet clos
Aller à