Bonjour,
voila j'ai un menu horizontal composé de plusieurs images carrées à la suite:
- le menu est une liste horizontale
- dans chaque élément de la liste j'ai une image entourée d'un lien
- dans le css, j'utilise des "over" pour modifier le style de l'image
Voici mon problème:
J'aimerais ajouter du texte (lien) au dessus des images. J'aimerais garder la possibilitlé de cliquer partout sur l'image, et les effets "over" sur l'image. De plus j'aimerais avoir un effet sur les textes (liens) au dessus de l'image.
Contrainte:
- pas de javascript
Je joins ici mon code de base:
+ HTML
+CSS
Si qqn a une idée ou même mieux un exemple ce serait avec plaisir
voila j'ai un menu horizontal composé de plusieurs images carrées à la suite:
- le menu est une liste horizontale
- dans chaque élément de la liste j'ai une image entourée d'un lien
- dans le css, j'utilise des "over" pour modifier le style de l'image
Voici mon problème:
J'aimerais ajouter du texte (lien) au dessus des images. J'aimerais garder la possibilitlé de cliquer partout sur l'image, et les effets "over" sur l'image. De plus j'aimerais avoir un effet sur les textes (liens) au dessus de l'image.
Contrainte:
- pas de javascript
Je joins ici mon code de base:
+ HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
<title>exmpl</title>
<link href="./exmpl.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="icons">
<ul>
<li> </li>
<li><a href="#"><img src="img/Crystal_Clear_app_kfm_home.png" title="home" alt="home" border="0" height="60" width="60"></a></li>
<li><a href="#"><img src="img/Crystal_Clear_app_demo.png" title="creations" alt="creation" border="0" height="60" width="60"></a></li>
<li><a href="#"><img src="img/Crystal_Clear_app_knewsticker.png" title="blog" alt="blog" border="0" height="60" width="60"></a></li>
<li><a href="#"><img src="img/Crystal_Clear_app_linneighborhood.png" title="links" alt="links" border="0" height="60" width="60"></a></li>
<li><a href="#"><img src="img/Crystal_Clear_app_kuser.png" title="cv" alt="cv" border="0" height="60" width="60"></a></li>
<li><a href="#"><img src="img/Crystal_Clear_app_email.png" title="contact" alt="contact" border="0" height="60" width="60"></a></li>
</ul>
</div>
</div>
</body>
</html>+CSS
html, body {
margin: 0px;
padding: 0px;
}
#container{
margin-left:20px;
}
#icons{
width: 100%;
height: 70px; /* les images font 60px */
/*background-color: #FFFFFF;*/
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#icons img{
margin-right:20px;
border:1px dashed black;
filter:alpha(opacity=30);
-moz-opacity:0.3;
opacity: 0.3;
}
#icons ul{
list-style: none;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px -4px;
}
#icons ul li{
float:left;
list-style: none;
margin-left:0px;
margin-right:0px;
padding: 0px;
}
#icons ul li a{
text-decoration:none;
}
#icons ul li a:hover{
text-decoration:none;
}
#icons ul li a:hover img{
border:1px solid black ;
filter:alpha(opacity=100);
-moz-opacity:1;
opacity: 1;
}Si qqn a une idée ou même mieux un exemple ce serait avec plaisir