28172 sujets

CSS et mise en forme, CSS3

Couleur de soulignement differentes de la couleur du texte

Bonjour a tous , je cherche désespérément comment avoir un texte h2 souligner de couleur blanche sans attribution du blanc a mon h2 ce que j'ai fait jusque l'as me change la couleur de mon h2 alors que j'ai définie précédemment la couleur de celui-ci

Auriez vous une solution a me proposer ?
j'ai pas trouvé mieux non plus je suis cependant obliger de donner un width pour ne pas avoir toute la largueur de ma div pour avoir la largueur du texte. Merci sinon je me permet une nouvelle demande comment faire un lien sur une image qui change d'image quand je passe avec la souris ? sans javascript
tout ce que j'essaie ne passe pas j'ai un body avec une image voila mon css 

body{

	background:url(fond2.png) top left repeat-x #3B0017;

	color:#F6E497; :

	margin:1; padding:0;

}
h2{
color:#6E0017;
font-size:30px;
font-family:Georgia;
}




#conteneur{

	

	max-width:1200px;
	min-width:700px;

	margin:30px ;

	padding-top:50px;

}




h1{

	color:#C79F4B;

	font-weight:normal;

	font-size:1.6em;

}
a.rollover:focus
{
outline:0;
} 

a.rollover {
     width: 245px;
     height: 65px;
     background: url(theme/n3owebB.png)  no-repeat ;
     border: 0;
}
a.rollover:hover {
     background: url(theme/logoA.png);
     border:none;
}

.soulignerBlanc {

border-bottom:solid 1px #fff ; width:400px;
}


et dans mon html 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>ma page </title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <link rel="stylesheet" href="theme/style.css" type="text/css" media="screen" />
</head>

<body>
<h2><a class="rollover" href="#"></a></h2>
    <div id="conteneur">
      <h1 class="soulignerBlanc">Bienvenue</h1>
      <p>Bonjour</p>
    </div>
</body>
</html>
Pour le soulignement, tu n'es pas obligé de déclarer une largeur si tu ajoutes un display:inline; à ton h2

Pour le changement d'images au survol css, je te conseille de faire varier la position de ton background et inclure tes 2 images dans une seule.

Cependant, un lien vide (<a href='#'></a>) n'est autant pas accessible qu'un changement d'image avec javascript.

Je te conseillerai donc de garder un vrai lien avec changement dynamique de la source en javascript.
Merci c'est simplement des testes donc j'ai passé comme cela en mettant a en display block

Dans le html 

<a class="rollover" href="#" alt="mon site"></a>


dans mon css

a.rollover {
     
     display:block;
     width:245px;
     height:65px;
     background:url(n3owebB.png)top left no-repeat;
     border: 0;
    
}
a.rollover:hover {
     background:url(logoA.png);
     border:none;
}

mais visiblement cette méthode ne permet plus l'affichage de texte alternatif quand il n'y a plus d'image ?

est ce un comportement normal ?
Oui effectivement je me suis mélangé les pinceaux en gros comment faire pour avoir quelque chose de correct car j'utilise et c'est la que j'ai du mal a comprendre une image de logo qui au passage de la souris affiche une autre image mais comment faire pour avoir du texte en lieu et place de l'image si celle ci ne s'affiche pas ?

Visiblement je devrais plutot mettre ma balise img dans mon html et donné un attribut alt et oublier le hover ?
Modifié par nux02160 (23 Apr 2010 - 16:45)
la seule chose que j'ai trouver c'est ça pour le html

<a class="rollover" href="#"><img src="theme/test.png" alt="n3oweb"/></a>

ensuite dans le css 

a.rollover {
color:#1A1109;

}

a.rollover:focus
{
outline:0;
} 



a.rollover {
     
     display:block;
     width:245px;
     height:65px;
     background:url(test.png)top left no-repeat;
     border: none;
    
}
a.rollover:hover {
     background:url(test2.png)top left ;
     border:none;
}


cela permet d'avoir l'effet et un texte alternatif les seules contraintes un leger decalage qui fait un effet 3 d et obliger de donnée une couleur au lien car sinon on voit les bordures autour de l'image avec border a none l'effet n'est plus visible si quelqu'un a mieux a proposé ce serait pas de refut Smiley smile

le resultat vaut mieux qu'un long discours

http://www.monsterup.com/image.php?url=upload/1272035972627.png
nux02160 a écrit :
Bonjour a tous , je cherche désespérément comment avoir un texte h2 souligner de couleur blanche sans attribution du blanc a mon h2 ce que j'ai fait jusque l'as me change la couleur de mon h2 alors que j'ai définie précédemment la couleur de celui-ci 

h2 {
  color: red;
  border-bottom: 1px solid green;
}

nux02160 a écrit :
j'ai pas trouvé mieux non plus je suis cependant obliger de donner un width pour ne pas avoir toute la largueur de ma div pour avoir la largueur du texte.

h2 {float: left;}
ou
h2 {display: inline;}
ou
h2 {display: inline-block;}
ou
h2 {display: table;}

J'en oublie peut-être. Smiley smile

En passant:
a.rollover:focus { 
  outline: 0;
}

Ça va pas la tête de supprimer les indications de focus? Criminel, va. Smiley biggol
Modifié par Florent V. (23 Apr 2010 - 18:20)
Merci Florent Smiley smile

Pour mon lien sur image j'ai du garder cette methode pour l'instant j'ai mis un display none et je vais lire l'article d'alsa sur halte au display none Smiley smile
Sujet clos
Aller à