28172 sujets

CSS et mise en forme, CSS3

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 :
<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&eacute;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 Smiley cligne
Modifié par Repear (01 Jun 2011 - 12:58)
Merci,

mais j’ai déjà ésséyé sa, et enfait mon menu se met à la verticale, car si mes images sont en display:block; elles ne peuvent plus etre à coté les unes des autres (enfin c'est ce que je pense ^^)
Bonjour,

Je sais pas si c'est voulu, mais sur IE ton menu ne s'affiche pas correctement (du moins avec le code fourni), sinon j'ai une solution pour faire ce que tu veux sous FF/Chrome/Opera

Vu que tu as 6 "li", tu mets :


[role=navigation] li { 
     
    text-align:center; 
    list-style-type: none; 
    float:left;
    width:16%;
} 


et :


[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; 
    width:100%;
} 


Pour le dernier sous menu (contact) faudra que tu mettes un padding-top ou autre pour créer l'écart
Modifié par Natha (01 Jun 2011 - 11:38)
Natha a écrit :
sur IE

IE 6, 7, 8, 9 ou 10? Smiley lol
Modifié par fvsch (01 Jun 2011 - 11:45)
6 7 8 9 et ... 10 Smiley lol

Du moins 6 7 8 et 10 via IETester, et 9 via l'IE installé sur mon pc
Je ne tient pas compte d'IE ^^

merci je vais testé sa

edit: Merci, sa marche Smiley cligne (à par qu'il va faloir que je regarde sa de plus près parceque j'ais pas tout capté ^^)
Sous IE 9 sa marche chez moi (premiere fois que jutilise internet ***** depuis que j'ais mon pc ><)


re edit : j'ais compris ! =D merci encore Smiley cligne
Modifié par Repear (01 Jun 2011 - 13:05)