Sujet Précédent Sujet Suivant

Problème de superposition image/menu

Résolu/Fermé
rollerfire Messages postés 133 Date d'inscription jeudi 13 octobre 2011 Statut Membre Dernière intervention 12 octobre 2017 - Modifié par rollerfire le 17/11/2012 à 20:07
rollerfire Messages postés 133 Date d'inscription jeudi 13 octobre 2011 Statut Membre Dernière intervention 12 octobre 2017 - 27 nov. 2012 à 15:45
Bonjour, je viens de terminer avec l'aide d'autre personne que je remercie encore mon menu , mais mon nouveau problème est que je souhaite avoir un lien de retour a la page d'accueil sur le logo "vip" ,'sa j'ai réussi a le faire .

Mais quand je passe dans une résolution basse, le logo ce met sur le menu se qui fait qu'il est impossible de cliquer !(essayer en réduisant votre fenêtre de navigateur)

http://vip-anim.fr/


J'ai essayer avec les z-index et les position met le problème est que quand je donne une position au #menu il se colle au coté gauche du site et n'est plus centré , ce que je ne veut pas .

si quelqu'un a une solution , merci.

voila le code 


<!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" lang="en" xml:lang="en"> 
  <head> 
    <title></title> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <style type="text/css"> 
/*<![CDATA[*/ 
    <!-- 
    * { 
      margin: 0; 
      padding: 0; 
    } 

    html{ 
      background-color: #000000; 
    } 

    #site{ 
      position: relative; 
      margin-top: 30px; 
      width: 100%; 
      z-index: 10; 
    } 

    #header{ 
      position: absolute; 
      width: auto; 
      height: auto; 
      margin-left: 20px; 

    } 

    #menu{ 
      height: 100px; 
      margin-left: auto; 
    } 

    #footer{ 
      height: 100px; 
      width: 1000px; 
      background-image: url(http://www.vip-anim.fr/miseenpage/image/barre%20fin.png); 
      margin: auto; 
    } 

    #content{ 
      width: 100%; 
      margin-top: 20px; 
    } 

    #carou{ 
       height: 500px; 
    } 




      /* TRUC POUR IMAGE EN BG */ 

    .background { 
      top: 0; 
      left: 0; 
      width: 100%; 
      height: 100%; 
      position: absolute; 
      z-index: 2; 
    } 

    .screen { 
      height: 100%; 
    } 

    .image { 
      width: 100%; 
    } 

    .full { 
      width: 100%; 
      height: 100%; 
    } 

    /* TRUC POUR IMAGE EN BG */ 


    --> 
    /*]]>*/ 
    </style> 
    <link rel="stylesheet" href="menu1/style.css" type="text/css" /> 
    <script type="text/javascript"> 
<!-- 
function MM_preloadImages() { //v3.0 
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); 
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) 
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} 
} 
function MM_swapImgRestore() { //v3.0 
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; 
} 
function MM_findObj(n, d) { //v4.01 
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { 
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} 
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; 
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); 
  if(!x && d.getElementById) x=d.getElementById(n); return x; 
} 

function MM_swapImage() { //v3.0 
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) 
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} 
} 
//--> 
    </script> 
  </head> 
  <body onload="MM_preloadImages('miseenpage/menu/menu2p.png','miseenpage/menu/menu3p.png','miseenpage/menu/menu4p.png','miseenpage/menu/menu5p.png')"> 

  <!-- TRUC POUR IMAGE EN BG --> 
    <div class="background"> 
      <img class="full screen image" src="http://www.vip-anim.fr/miseenpage/image/arriereplan.jpg" alt="" /> 
   <!-- TRUC POUR IMAGE EN BG --> 

  </div> 
    <div id="site"> 
      <div id="header"><a href="index.php"><img src="miseenpage/image/logoVERT.png" alt="" width="405" height="138" /></a></div> 
     <div id="menu"><center> 
         <table width="1150" border="0"> 
        <tr> 
          <td><center> 
      <img src="miseenpage/menu/menu1.png" alt="" width="22" height="119" /><a href="vip.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','miseenpage/menu/menu2p.png',1)"><img src="miseenpage/menu/menu2.png" border="0" id="Image5" /></a><a href="prestation.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','miseenpage/menu/menu3p.png',1)"><img src="miseenpage/menu/menu3.png" border="0" id="Image6" /></a><a href="contact.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','miseenpage/menu/menu4p.png',1)"><img src="miseenpage/menu/menu4.png" border="0" id="Image7" /></a><a href="partenaire.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','miseenpage/menu/menu5p.png',1)"><img src="miseenpage/menu/menu5.png" border="0" id="Image8" /></a><img src="miseenpage/menu/menu6.png" alt="" width="23" height="119" /> 
  </center></td> 
        </tr> 
      </table></center> 
      </div> 
      <div id="content"> 
        <div id="carou"> 
          <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%"> 
            <param name="base" value="http://www.vip-anim.fr/" /> 
            <param name="movie" value="http://www.vip-anim.fr/articles/mariagenico/Carousel.swf" /> 
            <param name="quality" value="high" /> 
            <param name="wmode" value="transparent" /> 
            <param name="swfversion" value="6.0.65.0" /> 
            <!-- Cette balise <param> invite les utilisateurs de Flash Player en version 6.0 r65 et ultérieure à télécharger la version la plus récente de Flash Player. Supprimez-la si vous ne voulez pas que cette invite soit visible. --> 
            <param name="expressinstall" value= 
            "http://www.vip-anim.fr/articles/mariagenico/Scripts/expressInstall.swf" /> 
            <!-- La balise <object> suivante est destinée aux navigateurs autres qu'IE. Supprimez-la d'IE à l'aide d'IECC. --> 
            <!--[if !IE]>--> 
            <object type="application/x-shockwave-flash" data= 
            "http://www.vip-anim.fr/articles/mariagenico/Carousel.swf" width="100%" height="100%"> 
              <!--<![endif]--> 
              <param name="base" value="http://www.vip-anim.fr/" /> 
              <param name="quality" value="high" /> 
              <param name="wmode" value="transparent" /> 
              <param name="swfversion" value="6.0.65.0" /> 
              <param name="expressinstall" value="http://www.vip-anim.fr/Scripts/expressInstall.swf" /> 
              <!-- Le navigateur affichera le contenu alternatif suivant pour les utilisateurs d'un lecteur Flash de version 6.0 ou de versions plus anciennes. --> 
              <div> 
                <h4> 
                  Le contenu de cette page nécessite une version plus récente d'Adobe Flash Player. 
                </h4> 
                <p> 
                  <a href="https://get.adobe.com/flashplayer/"><img src= 
                  "https://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt= 
                  "Obtenir le lecteur Adobe Flash" /></a> 
                </p> 
              </div><!--[if !IE]>--> 
            </object> <!--<![endif]--> 
          </object> 
        </div> 
      </div> 
      <div id="footer"></div> 
  </div> 
</body> 
</html>




A voir également:

9 réponses

Réponse 1 / 9
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
Modifié par RAD ZONE le 19/11/2012 à 10:11
Salut

houlala !!! c est quoi cette table que tu a mise ! un menu doit ce faire en ul et li !!!

comme je t ai explique vouloir absoluement ces images en rollover posent plusieurs problemes !
voir ce post https://forums.commentcamarche.net/forum/affich-26468083-modification-animation-background-images#p26497900

je vais essayer de t expliquer rapidement !

je t ai fais une base html css structure en fonction de tes demande particulieres !

1 : une image de grande taille en background

2 : un swf transparent au centre

et je t avais mis un menu css marge a gauche en fonction de ton image vip!

pourquoi dans ton cas le menu tout en image ( que je deconseille meme en CSS a tout le monde pour plusieurs raisons , les principales etant la visibilite , l accessibilite et le referencement entre autre ) ?

pour commencer le wmode transparent rend les swf capricieux a certaines regles html comme le z-index ce qui fait qu il est dure de faire passer les images de ce type de menu par dessus le swf donc cela impose de faire un menu a width fixe pour eviter le chevauchement , le menu css n a pas ces contraintes et peut etre fluide !

tu veux aussi que ton menu soit centre !
donc que dans le cas de resolution inferieur a 1024 il faut qu il passe par dessus l image vip de maniere a le rendre cliquable !
je t ai donc dis de changer le z-index de la div header ! mais si maintenant tu veux que cette div soit aussi cliquable et visible quand le menu est par dessus la c est pas bon , faut faire un choix ;-)
c est pour cette raison que j avais mis une marge fixe de 445px ( taille de l image vip 405 + 20 du margin left + 20 de marge )a gauche a la div menu de maniere a eviter ca !

crois moi le mieux dans ton cas est de styliser le menu css que je t avais fais avec la page et d oublier ces rollover d images !

je te remet le code complet ! 

<!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" lang="en" xml:lang="en">   
  <head>   
    <title>Vip Anim</title>   
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />   
    <style type="text/css">   
/*<![CDATA[*/   
    <!--   
   * {   
 margin: 0;   
 padding: 0;   
}   
html {   
 background-color: #000000;   
}   
#site {   
 position: relative;   
 margin-top: 30px;   
 width: 100%;   
 z-index: 10;   
}   
#header {   
 position: absolute;   
 width: 405px;   
 height: 138px;   
 margin-left: 20px;   
 background-image: url(http://www.vip-anim.fr/miseenpage/image/logoVERT.png);   
}   
#menu {   
 height: 100px;   
 margin-left: 445px;   
}   
#footer {   
 height: 100px;   
 width: 1000px;   
 background-image: url(http://www.vip-anim.fr/miseenpage/image/barre%20fin.png);   
 margin: auto;   
}   
#content {   
 width: 100%;   
 margin-top: 20px;   
}   
#carou {   
 height: 500px;   
}   
/* TRUC POUR IMAGE EN BG */   
.background {   
 top: 0;   
 left: 0;   
 width: 100%;   
 height: 100%;   
 position: absolute;   
 z-index: 2;   
}   
.screen {   
 height: 100%;   
}   
.image {   
 width: 100%;   
}   
.full {   
 width: 100%;   
 height: 100%;   
}   
/* TRUC POUR IMAGE EN BG */   
/* DEBUT MENU */   
ul#menu1 {   
 margin: 0;   
 list-style: none;   
 padding: 0;   
 -moz-border-radius: 5px;   
 -webkit-border-radius: 5px;   
 border-radius: 5px;   
 font-size: 0;   
 z-index: 999;   
 position: relative;   
 display: inline-block;   
 zoom: 1;   
 *display: inline;   
}   
ul#menu1 li {   
 display: block;   
 white-space: nowrap;   
 font-size: 0;   
 float: left;   
}   
ul#menu1>li {   
 margin: 0;   
}   
* html ul#menu1 li a {   
 display: inline-block;   
}   
ul#menu1 a:active, ul#menu1 a:focus {   
 outline-style: none;   
}   
ul#menu1 a {   
 display: block;   
 vertical-align: middle;   
 text-align: center;   
 text-decoration: none;   
 font: bold 22px Trebuchet MS;   
 color: #FFFFCC;   
 text-shadow: #FFF 0 0 1px;   
 cursor: pointer;   
 padding: 10px;   
 background-color: #07744E;   
 width: 125px;   
 height: 80px;   
 line-height: 80px;   
 border:  2px  solid #9EB79D   
}   
ul#menu1 li:hover>a, ul#menu1 a.pressed {   
 background-color: #669999;   
 color: #FFFFFF;   
 text-decoration: none;   
 text-shadow: #FFF 0 0 1px;   
 border: 2px  solid #CCFFFF;   
}   
ul#menu1 li:hover>a, ul#menu1 li>a.pressed {   
 background-color: #669999;   
 color: #FFFFFF;   
 text-decoration: none;   
 text-shadow: #FFF 0 0 1px;   
 border: 2px  solid #CCFFFF;   
}   
ul#menu1 li.toppremier>a {   
 border-radius: 5px 0 0 5px;   
 -moz-border-radius: 5px 0 0 5px;   
 -webkit-border-radius: 5px;   
 -webkit-border-top-right-radius: 0;   
 -webkit-border-bottom-right-radius: 0;   
}   
ul#menu1 li.topdernier>a {   
 border-radius: 0 5px 5px 0;   
 -moz-border-radius: 0 5px 5px 0;   
 -webkit-border-radius: 0;   
 -webkit-border-top-right-radius: 5px;   
 -webkit-border-bottom-right-radius: 5px;   
}   

   /* FIN MENU */   
    -->   
    /*]]>*/   
    </style>   
  </head>   
  <body>   

  <!-- TRUC POUR IMAGE EN BG -->   
    <div class="background">   
      <img class="full screen image" src="http://www.vip-anim.fr/miseenpage/image/arriereplan.jpg" alt="" />   
   <!-- TRUC POUR IMAGE EN BG -->   

    </div>   
    <div id="site">   
      <div id="header"></div>   
      <div id="menu">   
        <ul id="menu1" class="topmenu">   
          <li class="toppremier">   
            <a href="#">Vip</a>   
          </li>   
          <li class="topmenu">   
            <a href="#">Prestations</a>   
          </li>   
          <li class="topmenu">   
            <a href="#">Contact</a>   
          </li>   
          <li class="topdernier">   
            <a href="#">Partenaires</a>   
          </li>   
        </ul>   
      </div>   
      <div id="content">   
        <div id="carou">   
          <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%">   
            <param name="base" value="http://www.vip-anim.fr/" />   
            <param name="movie" value="http://www.vip-anim.fr/articles/mariagenico/Carousel.swf" />   
            <param name="quality" value="high" />   
            <param name="wmode" value="transparent" />   
            <param name="swfversion" value="6.0.65.0" />   
            <!-- Cette balise <param> invite les utilisateurs de Flash Player en version 6.0 r65 et ultérieure à télécharger la version la plus récente de Flash Player. Supprimez-la si vous ne voulez pas que cette invite soit visible. -->   
            <param name="expressinstall" value=   
            "http://www.vip-anim.fr/articles/mariagenico/Scripts/expressInstall.swf" />   
            <!-- La balise <object> suivante est destinée aux navigateurs autres qu'IE. Supprimez-la d'IE à l'aide d'IECC. -->   
            <!--[if !IE]>-->   
            <object type="application/x-shockwave-flash" data=   
            "http://www.vip-anim.fr/articles/mariagenico/Carousel.swf" width="100%" height="100%">   
              <!--<![endif]-->   
              <param name="base" value="http://www.vip-anim.fr/" />   
              <param name="quality" value="high" />   
              <param name="wmode" value="transparent" />   
              <param name="swfversion" value="6.0.65.0" />   
              <param name="expressinstall" value="http://www.vip-anim.fr/Scripts/expressInstall.swf" />   
              <!-- Le navigateur affichera le contenu alternatif suivant pour les utilisateurs d'un lecteur Flash de version 6.0 ou de versions plus anciennes. -->   
              <div>   
                <h4>   
                  Le contenu de cette page nécessite une version plus récente d'Adobe Flash Player.   
                </h4>   
                <p>   
                  <a href="https://get.adobe.com/flashplayer/"><img src=   
                  "https://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt=   
                  "Obtenir le lecteur Adobe Flash" /></a>   
                </p>   
              </div><!--[if !IE]>-->   
            </object> <!--<![endif]-->   
          </object>   
        </div>   
      </div>   
      <div id="footer"></div>   
    </div>   
  </body>   
</html>


a+


♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣
0
Réponse 2 / 9
rollerfire Messages postés 133 Date d'inscription jeudi 13 octobre 2011 Statut Membre Dernière intervention 12 octobre 2017 1
Modifié par rollerfire le 19/11/2012 à 11:22
Oui mais le menu css est pas très beau , et j'ai remis mes images je sais, mais avec ton menu quand on réduit y a la moitié qui passe en dessous sa cache le texte . faut que j'trouve une solution qui me permette a la fois de pouvoir cliquer cliquer sur vip sur le menu mais que vip soit sous le menu et que même si on réduit on voit le menu ...... chauuuuud

Je sais que le code du menu fait mal a regarder mais au moins il ne se divise pas en deux et mes images y sont intégré .
0
Réponse 3 / 9
rollerfire Messages postés 133 Date d'inscription jeudi 13 octobre 2011 Statut Membre Dernière intervention 12 octobre 2017 1
Modifié par rollerfire le 19/11/2012 à 11:22
Mais je crois que je vais faire simple je vais ajouté a ma page vip le bouton accueil ^^
0
Réponse 4 / 9
rollerfire Messages postés 133 Date d'inscription jeudi 13 octobre 2011 Statut Membre Dernière intervention 12 octobre 2017 1
19 nov. 2012 à 12:52
tien je viens de voir que sous internet explorer le vip est cliquable c'est bien la première fois que internet explorer fait quelque chose de bien ^^
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 9
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
19 nov. 2012 à 13:49 
Oui mais le menu css est pas très beau ,mais avec ton menu quand on réduit y a la moitié qui passe en dessous sa cache le texte
??????????

pas tres beau ?!
c est normal c est juste la structure du menu , a toi de le styliser !

la moitié qui passe en dessous sa cache le texte ,
je ne vois pas ou tu as vue ca ?,voila la page!
https://travellerz.de/

a+
0
Réponse 6 / 9
rollerfire Messages postés 133 Date d'inscription jeudi 13 octobre 2011 Statut Membre Dernière intervention 12 octobre 2017 1
19 nov. 2012 à 14:08
Si regarde réduit ta page , mais quand je réduis , ce qui ne peut pas entrer dans la page passe en dessous .

Promis je vais essayer de styliser le menu que tu m'a fait et une fois qu'il sera joli je l'intégrer a ma page . En attendant je laisse mon menu d'homme primitif .
0
Réponse 7 / 9
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
19 nov. 2012 à 14:28 
ce qui ne peut pas entrer dans la page passe en dessous .

c est normal c est ca un menu fluide !!!!
si tu veux eviter cela il suffit de donner un width a la div menu DANS LE CSS, evite de mettre du css embraque dans les balises html ou tu vas vite t y perdre et c est une tres mauvaise pratique !!!

a+
0
Réponse 8 / 9
rollerfire Messages postés 133 Date d'inscription jeudi 13 octobre 2011 Statut Membre Dernière intervention 12 octobre 2017 1
19 nov. 2012 à 14:32
donc je peux supprimer les tableaux et mettre un width dans la div menu sa donnera le même résultat ? je test.
0
rollerfire Messages postés 133 Date d'inscription jeudi 13 octobre 2011 Statut Membre Dernière intervention 12 octobre 2017 1
19 nov. 2012 à 14:35
j'ai fait ça mes le menu se divise toujours , mais je pense que vu la taille sa ne gênera pas . je test en 800x600
0
rollerfire Messages postés 133 Date d'inscription jeudi 13 octobre 2011 Statut Membre Dernière intervention 12 octobre 2017 1
19 nov. 2012 à 14:36
bon sa passe , tout façon qui de nos jour a encore du 800x600 .
0
Réponse 9 / 9
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
Modifié par RAD ZONE le 19/11/2012 à 14:47 
j'ai fait ça mes le menu se divise toujours

IMPOSSIBLE

sans le width
https://travellerz.de/

regarde la meme page ou j ai juste ajouter width: 600px; DANS LE CSS a la div menu
https://travellerz.de/


a+


♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣
0
rollerfire Messages postés 133 Date d'inscription jeudi 13 octobre 2011 Statut Membre Dernière intervention 12 octobre 2017 1
19 nov. 2012 à 14:51
ouai j'ai vu j'avais pas mis les pixel , met maintenant que je l'est met le menu part a l'autre bout de la page . je vais laisser comme sa , sa fonctionne niquel.
0
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
Modifié par RAD ZONE le 19/11/2012 à 17:50
ok mais penche toi quand meme sur mon menu css , il est tres stylisable y compris avec des images de fond !
Exemple vite fait
https://travellerz.de/

le code 

<!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" lang="en" xml:lang="en">
  <head>
    <title>Vip Anim</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
/*<![CDATA[*/
    <!--
   * {
 margin: 0;
 padding: 0;
}
html {
 background-color: #000000;
}
#site {
 position: relative;
 margin-top: 30px;
 width: 100%;
 z-index: 10;
}
#header {
 position: absolute;
 width: 405px;
 height: 138px;
 margin-left: 20px;
 background-image: url(http://www.vip-anim.fr/miseenpage/image/logoVERT.png);
}
#menu {
  width: 600px;
 height: 100px;
 margin-left: 445px;
}
#footer {
 height: 100px;
 width: 1000px;
 background-image: url(http://www.vip-anim.fr/miseenpage/image/barre%20fin.png);
 margin: auto;
}
#content {
 width: 100%;
 margin-top: 20px;
}
#carou {
 height: 500px;
}

/* DEBUT TRUC POUR IMAGE EN BG */
.background {
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 position: absolute;
 z-index: 2;
}
.screen {
 height: 100%;
}
.image {
 width: 100%;
}
.full {
 width: 100%;
 height: 100%;
}
/* FIN TRUC POUR IMAGE EN BG */

/* DEBUT MENU */
ul#menu1 {
 margin: 0;
 list-style: none;
 padding: 0;
 font-size: 0;
 z-index: 999;
 position: relative;
 display: inline-block;
 zoom: 1;
 *display: inline;
}
ul#menu1 li {
 display: block;
 white-space: nowrap;
 font-size: 0;
 float: left;

}
ul#menu1>li {
 margin: 0;
}
* html ul#menu1 li a {

 display: inline-block;
}
ul#menu1 a:active, ul#menu1 a:focus {
 outline-style: none;
}
ul#menu1 a {
 display: block;
 vertical-align: middle;
 cursor: pointer;
 padding: 10px;
 width: 128px;
 height: 80px;
 line-height: 80px;

 /* pour cacher les texte au visiteur mais pas au moteurs */
 text-indent: -9999em;
 /* pour cacher les texte au visiteur mais pas au moteurs */
  /* pour centrer les bg */
  background-position: center ;
  /* pour centrer les bg */
}

ul#menu1 li.titre.vip>a {
 border-radius: 20px 0 0 20px;
 -moz-border-radius: 20px 0 0 20px;
 -webkit-border-radius: 20px;
 -webkit-border-top-right-radius: 0;
 -webkit-border-bottom-right-radius: 0;
 background-image: url(http://www.vip-anim.fr/miseenpage/menu/menu2.png);
}
 ul#menu1 li.titre.vip:hover>a {
border-radius: 20px 0 0 20px;
 -moz-border-radius: 20px 0 0 20px;
 -webkit-border-radius: 20px;
 -webkit-border-top-right-radius: 0;
 -webkit-border-bottom-right-radius: 0;
 background-image: url(http://www.vip-anim.fr/miseenpage/menu/menu2p.png);

}

  ul#menu1 li.presta>a{
   background-image: url(http://www.vip-anim.fr/miseenpage/menu/menu3.png);

  }

 ul#menu1 li.presta:hover>a, ul#menu1 .presta a.pressed {
  background-image: url(http://www.vip-anim.fr/miseenpage/menu/menu3p.png);

}
 ul#menu1 li.contact>a{
   background-image: url(http://www.vip-anim.fr/miseenpage/menu/menu4.png);

  }

 ul#menu1 li.contact:hover>a, ul#menu1 .contact a.pressed {
  background-image: url(http://www.vip-anim.fr/miseenpage/menu/menu4p.png);

}
ul#menu1 li.titre.parte>a {
 border-radius: 0 20px 20px 0;
 -moz-border-radius: 0 20px 20px 0;
 -webkit-border-radius: 20px;
 -webkit-border-top-left-radius: 0;
 -webkit-border-bottom-left-radius: 0;
 background-image: url(http://www.vip-anim.fr/miseenpage/menu/menu5.png)
}
  ul#menu1 li.titre.parte:hover>a {
 border-radius: 0 20px 20px 0;
 -moz-border-radius: 0 20px 20px 0;
 -webkit-border-radius: 20px;
 -webkit-border-top-left-radius: 0;
 -webkit-border-bottom-left-radius: 0;
 background-image: url(http://www.vip-anim.fr/miseenpage/menu/menu5p.png);

}
   /* FIN MENU */
    -->
    /*]]>*/
    </style>
  </head>
  <body>

  <!-- TRUC POUR IMAGE EN BG -->
    <div class="background">
      <img class="full screen image" src="http://www.vip-anim.fr/miseenpage/image/arriereplan.jpg" alt="" />
   <!-- TRUC POUR IMAGE EN BG -->

    </div>
    <div id="site">
      <div id="header"></div>
      <div id="menu">
        <ul id="menu1" class="titremenu">
          <li class="titre vip">
            <a href="#">Vip</a>
          </li>
          <li class="titremenu presta">
            <a href="#">Prestations</a>
          </li>
          <li class="titremenu contact">
            <a href="#">Contact</a>
          </li>
          <li class="titre parte">
            <a href="#">Partenaires</a>
          </li>
        </ul>
      </div>
      <div id="content">
        <div id="carou">
          <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%">
            <param name="base" value="http://www.vip-anim.fr/" />
            <param name="movie" value="http://www.vip-anim.fr/articles/mariagenico/Carousel.swf" />
            <param name="quality" value="high" />
            <param name="wmode" value="transparent" />
            <param name="swfversion" value="6.0.65.0" />
            <!-- Cette balise <param> invite les utilisateurs de Flash Player en version 6.0 r65 et ultérieure à télécharger la version la plus récente de Flash Player. Supprimez-la si vous ne voulez pas que cette invite soit visible. -->
            <param name="expressinstall" value=
            "http://www.vip-anim.fr/articles/mariagenico/Scripts/expressInstall.swf" />
            <!-- La balise <object> suivante est destinée aux navigateurs autres qu'IE. Supprimez-la d'IE à l'aide d'IECC. -->
            <!--[if !IE]>-->
            <object type="application/x-shockwave-flash" data=
            "http://www.vip-anim.fr/articles/mariagenico/Carousel.swf" width="100%" height="100%">
              <!--<![endif]-->
              <param name="base" value="http://www.vip-anim.fr/" />
              <param name="quality" value="high" />
              <param name="wmode" value="transparent" />
              <param name="swfversion" value="6.0.65.0" />
              <param name="expressinstall" value="http://www.vip-anim.fr/Scripts/expressInstall.swf" />
              <!-- Le navigateur affichera le contenu alternatif suivant pour les utilisateurs d'un lecteur Flash de version 6.0 ou de versions plus anciennes. -->
              <div>
                <h4>
                  Le contenu de cette page nécessite une version plus récente d'Adobe Flash Player.
                </h4>
                <p>
                  <a href="https://get.adobe.com/flashplayer/"><img src=
                  "https://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt=
                  "Obtenir le lecteur Adobe Flash" /></a>
                </p>
              </div><!--[if !IE]>-->
            </object> <!--<![endif]-->
          </object>
        </div>
      </div>
      <div id="footer"></div>
    </div>
  </body>
</html>


a+
0
rollerfire Messages postés 133 Date d'inscription jeudi 13 octobre 2011 Statut Membre Dernière intervention 12 octobre 2017 1
19 nov. 2012 à 21:27
a pas mal je vais partir de sa pour essayer d'avoir un bon résultat , si j'avance je posterais mon travail.
0
rollerfire Messages postés 133 Date d'inscription jeudi 13 octobre 2011 Statut Membre Dernière intervention 12 octobre 2017 1
27 nov. 2012 à 15:45
j'arrive pas a obtenir ce qu'il faut je travail encore dessus .
0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
Tainavictor -

9 réponses
Comment enlever le rouge sur la photo svp ?
lucas0909 -
bazfile -

11 réponses
les entrées et les sortées
oussman -
MarsuGL -

2 réponses