Actualité informatique
Test comparatif matériel informatique
Jeux vidéo
Astuces informatique
Vidéo
Télécharger
Services en ligne
Forum informatique
01Business


||-  Webmaster

|||-  

design de page web

 

106 utilisateurs inconnus
Ajouter une réponse
 

 
Page photos
 
     
Vider la liste des messages à citer
 
 Page :
1
Auteur
 Sujet :

design de page web

Prévenir les modérateurs en cas d'abus 
dezyario
dezyario
  1. Posté le 30/10/2017 à 19:09:49  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
bonjour mes chefs,

svp aidez a résoudre ce menu css/html a l'aide de Notepad, qui me fatigue depuis 4 jours enfermés.
je veux que le sous menu "menu2" s'affiche a droite lorsqu'on survol "premier Cycle secondaire".
je vous laisse le code source
Code :(Double-cliquez pour supprimer les numéros de ligne)
  1.  <head>
  2.    <title>ETUDE</title>
  3.    <meta charset="utf-8" />
  4.    <link rel="stylesheet" href="menu.css" />
  5.  </head>
  6.  <body>
  7.    <div id="autre1">
  8.      <ul id="autre">
  9.        <li id="au"><a href="#">COLLEGE</a></li>
  10.        <ul id="sous">
  11.          <li id="dell"><a href="#">Publique laic</a>
  12.            <ul id="del">
  13.              <li id="ok"><a href="#">premier Cycle secondaire</a>
  14.                <ul id="menu2">
  15.                  <li><a href="#">Classe de 6eme</a></li>
  16.                  <li><a href="#">Classe de 3eme</a></li>
  17.                </ul>
  18.              </li>
  19.            </ul>
  20.          </li>
  21.        </ul>
  22.      </ul>
  23.    </div>
  24.  </body>
  25. </html>



Code :(Double-cliquez pour supprimer les numéros de ligne)
  1. body{
  2.  margin: 0px;
  3.  padding:0
  4. }
  5.  
  6. #autre{
  7.  padding:0;
  8.  margin:0;
  9.  list-style:none;
  10.  text-align: center;
  11.  width: 180px;
  12. }
  13.  
  14. #autre ul{
  15.  padding:0;
  16.  margin:0;
  17.  list-style:none;
  18.  text-align: center;
  19. }
  20.  
  21. #autre li{
  22.  background-color:#729EBF;
  23.  background-image:-webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);
  24.  background-image: linear-gradient(to bottom, #729EBF 0%, #333A40 100%);
  25.  border-radius: 6px;
  26.  margin-bottom:2px;
  27.  box-shadow: 3px 3px 3px #999;
  28.  border:solid 1px #333A40
  29. }
  30.  
  31. #autre li li{
  32.  max-height:0;
  33.  overflow: hidden;
  34.  transition: all .5s;
  35.  border-radius:0;
  36.  background: #444;
  37.  box-shadow: none;
  38.  border:none;
  39.  margin:0
  40. }
  41.  
  42. #autre a{
  43.  display:block;
  44.  text-decoration: none;
  45.  color: #fff;
  46.  padding: 8px 0;
  47.  font-family: verdana;
  48.  font-size:1.2em
  49. }
  50.  
  51. #autre ul li a,#autre li:hover li a{
  52.  font-size:1em
  53. }
  54.  
  55. #autre li:hover{
  56.  background: #729EBF
  57. }
  58.  
  59. #sous li li:hover{
  60.  background: #999;
  61. }
  62.  
  63. #au ul li{
  64.  border-radius: 0 0 6px 6px;
  65.  border:none;
  66. }
  67.  
  68. #sous li:hover li{
  69.  max-height: 15em;
  70. }
  71.  
  72. #del li ul{
  73.  position:absolute;
  74.  left:180px;
  75.  display:none;
  76. }
  77.  
  78. #dell ul li:hover ul{
  79.  display: block;
  80.  z-index:1;
  81. }


merci a vous

Edit par Tintin10 : rajout des balises de code
Message édité par Tintin10 le 30/10/2017 à 20:20:58
  1. config
tintin10
Habitué (de 5 000 à 9 999 messages postés) Développeur
  1. Posté le 31/10/2017 à 21:09:18  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
Bonjour. Il faut faire flotter la liste concernée.
Code :(Double-cliquez pour supprimer les numéros de ligne)
  1. <A HREF="#" CLASS="float">premier Cycle secondaire</A>

Code :(Double-cliquez pour supprimer les numéros de ligne)
  1. #autre a.float{
  2.  float:right;
  3. }

(Publicité)
 Page :
1

Aller à :
 

Sujets relatifs
recherche webmaster pour ameliorer le design de mon site Programmer impression en bloc de la page 7 de 100 fichiers HTM offline
Agrandir des images sur une même page web (même tableau) ouverture d'une page dans un target par un click bouton en javascript
aide pour design site web  
Plus de sujets relatifs à : design de page web

Les 5 sujets de discussion précédents Nombre de réponses Dernier message
AutarcieInformationnelle : blog référencement 1
Recherche Staff pour site web 1
recherche webmaster pour ameliorer le design de mon site 1
Recherche intégrateur Web 1