Bonjours,
Voilà j'ais un p'tit probleme avec mon menu horizontal, je me suis inspiré de http://www.goetter.fr/
Donc des images qui tourne au passage de la sourie, mais étant doné que mon menu est horizontal, je voudrais que mes images soit au dessus du texte de mon lien (et pas à coté)
mon menu :
c'est pas trop lisible avec le php (qui me sert a définir quelle page est active)
Le css de mon menu :
merci d'avance
Modifié par Repear (01 Jun 2011 - 12:58)
Voilà j'ais un p'tit probleme avec mon menu horizontal, je me suis inspiré de http://www.goetter.fr/
Donc des images qui tourne au passage de la sourie, mais étant doné que mon menu est horizontal, je voudrais que mes images soit au dessus du texte de mon lien (et pas à coté)
mon menu :
<div id="menu" align="center">
<nav role="navigation">
<ul>
<li id="ac"><img src="image/icons/home2.png"><a href="index.php" title=""
<?php
if ($page == "acceuil")
{
echo "class=active";
}
?>
>Accueil</a></li>
<li id="ph"><img src="image/icons/pic.png"><a href="photo.php" title=""
<?php
if ($page == "photo")
{
echo "class=active";
}
?>
>Photos</a></li>
<li id="vi"><img src="image/icons/vid.png"><a href="video.php" title=""
<?php
if ($page == "video")
{
echo "class=active";
}
?>
>Vidéos</a></li>
<li id="mu"><img src="image//icons/ecasque.png"><a href="music.php" title=""
<?php
if ($page == "music")
{
echo "class=active";
}
?>
>Musiques</a></li>
<li id="au"><img src="image/icons/burn.png"><a href="autre.php" title=""
<?php
if ($page == "autre")
{
echo "class=active";
}
?>
>Autres</a></li>
<li><a href="contact.php" title="">Contact</a></li>
</ul>
</nav>
</div>
c'est pas trop lisible avec le php (qui me sert a définir quelle page est active)
Le css de mon menu :
[role=navigation] {
position: center;
}
[role=navigation] ul {
list-style-type:none;
width: 75%;
height: 90px;
}
[role=navigation] li {
text-align:center;
list-style-type: none;
display:inline;
line-height:90px;
width: 50%;
}
[role=navigation] img {
vertical-align: middle;
-webkit-transition: all 1.25s;
-moz-transition: all 1.25s;
-o-transition: all 1.25s;
transition: all 1.25s;
transition-timing-function: ease-in-out;
margin-left:20px;
}
[role=navigation] a {
color: #060;
text-decoration: none;
margin-left: 14px;
font-size:x-large;
vertical-align: middle;
text-shadow: 1px 1px 0 #0F0;
-moz-transition-property: color;
-webkit-transition-property: color;
-o-transition-property: color;
transition-property: color;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
display:inline-block;
}
[role=navigation] a:hover, [role=navigation] a:focus {
color:#F00;
}
[role=navigation] li:hover img {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
#menu li a.active{
color:#F60
}
merci d'avance
Modifié par Repear (01 Jun 2011 - 12:58)