28173 sujets

CSS et mise en forme, CSS3

Bonjours, à vous.

J'ai un petit soucis.

je m'éxplique: j'ai besoin de faire un moteur de recherche graphique mais sans utiliser de javascript (c'est une contraite).
Je part donc du principe de faire un menu qui quand on passe sur une cellule li l'image de fond change et une div span avec le lien s'affiche.

ici je vous montre se qui marche:

- le css:


.menu a
{
width: 22px; /* largeur du bouton, que vous pouvez changer à loisir */
height: 27px;
float: left;
display: block;
text-align: center;
border: 1px hidden #fff;
text-decoration: none;
color: #000;
background-image: url(052.jpg);
}
.menu a:hover 
{
color: #411;
border: 1px hidden Black;
border-bottom: 0px;
color: #fff;
background-image: url(052.gif);
}

.menu a span /* définition de la balise <span> inclue dans <a> */
{ 
display: none;
}

.menu a:hover span /* définition de la balise <span> au survol */
{
display: inline;
position: absolute;
top: 0px;
left: 20px;
width: 150px; /* largeur de la zone de commentaires, selon la taille du menu */
text-align: center;
border-top: none;
color: Blue;
background-color: Fuchsia;
}


- le code html


<ul class="menu">
<li><a href=""><span>phrase bidon! j'aimerais que se soit un lien.</span></a></li>-->
</ul>


maintenant la limite de ce code est que si je veux que le contenu du span soit un lien aie aie aie tout se casse. (cela viens du fait que le <a href> prend les carac de tout les autres <a>).

donc jme suis dis on va feinter je vais remplacer les <a> par des <p>.
et sa marche sur FF trop cool^^ sauf que sous ie euh ben sa marche. pas.

jvous rebalance le test avec les <p>.


.menu p{
	width: 22px; /* largeur du bouton, que vous pouvez changer à loisir */
	height: 27px;
	float: left;
	display: block;
	text-align: center;
	border: 1px hidden #fff;
	text-decoration: none;
	color: #000;
	background-image: url(052.jpg);
}

.menu p:hover {
	color: #411;
	border: 1px hidden Black;
	border-bottom: 0px;
	color: #fff;
	background-image: url(052.gif);
}

.menu p span
{     /* définition de la balise <span> inclue dans <a> */
display: none;
}

.menu p:hover span {
	/* définition de la balise <span> au survol */
	display: inline;
	position: absolute;
	top: 0px;
	left: 20px;
	width: 150px; /* largeur de la zone de commentaires, selon la taille du menu */
	text-align: center;
	border-top: none;
	color: Blue;
	background-color: Fuchsia;
}

<BODY>
<ul class="menu">

<li><p><span><a href="">phrase bidon! j'aimerais que se soit un lien</a></span></p></li>
</BODY>


je sais avec du java c'est simple je sais mais comme dis pas de java me demande ont,alors j'execute.

Merci de votre aide.