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

|-  INTERNET


|||-  

Chaque entête du menu déroulant de largeur différente ?

 

Ajouter une réponse
 

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

Chaque entête du menu déroulant de largeur différente ?

Prévenir les modérateurs en cas d'abus 
pat734
  1. homepage
pat734
Sur la bonne voie (de 100 à 499 messages postés)
  1. Posté le 31/10/2008 à 14:14:03  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
Bonjour,
 Je souhaite personnaliser mon menu déroulant en donnant une largeur différente à chaque titre de menu "Techniques et astuces est plus large que Antiquités" comme sur l'image ci-dessous :

 http://img100.imageshack.us/im​g100/3249/image1pl4.th.jpghttp://img100.imageshack.us/im​ages/thpix.gif

 Mais lorsque j'ouvre mon navigateur Internet Explorer voici ce que j'obtiens alors que cela fonctionne sous Safari :

 http://img100.imageshack.us/im​g100/1742/image2yw3.th.jpghttp://img100.imageshack.us/im​ages/thpix.gif

 Que faut il modifier dans le fichier css ?
 Merci par avance pour votre aide.

 Je joints le code css ainsi que le code html :

 Code css :

 body {
 margin: 0;
 padding: 0;
 background: white;
 font-family: "Times New Roman", Times, serif;
 font-size: 14px;                
 }
 dl1, dl2, dl3, dl4, dl5, dl6, dl7, dt, dd, ul, li {
 margin: 0;                
 padding: 0;              
 list-style-type: none;    
 }
 #menu {
 position: absolute;
 top: 0;
 left: 0;
 z-index:100;
 width: 980px;      
 height: auto;
 }
 #menu dl1 {
 float: left;
 width: 100px;
 }
 #menu dl2 {
 float: left;
 width: 100px;
 }
 #menu dl3 {
 float: left;
 width: 140px;
 }
 #menu dl4 {
 float: left;
 width: 200px;
 }
 #menu dl5 {
 float: left;
 width: 170px;
 }
 #menu dl6 {
 float: left;
 width: 170px;
 }
 #menu dl7 {
 float: left;
 width: 100px;
 }
 #menu dt {
 color: white;  
 cursor: pointer;
 line-height: 20px;
 text-align: center;
 font-weight: bold;
 background-color: black;
 background-image: url(menu.jpg);
 background-repeat: no-repeat;    
 border: 1px solid gray;    
 margin: 1px;      
 }
 #menu dd {
 display: none;
 border: 1px solid gray;
 }
 #menu li {
 text-align: center;
 background: black;
 }
 #menu li a, #menu dt a {
 color: white;              
 text-decoration: none;                              
 display: block;
 height: 100%;
 border: 0 none;
 }
 #menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
 background-image: url(image.jpg);
 }
 #site {
 position: absolute;
 z-index: 1;
 top : 70px;
 left : 10px;
 color: #000;
 background-color: #ddd;
 padding: 5px;
 border: 1px solid gray;
 }

 Code html :

 <div id="menu">
  <dl1>

   <dt onmouseover="javascript:montre​();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
  </dl1>
   
  <dl2>    
   <dt onmouseover="javascript:montre​('smenu1');">Contacts</dt>

   <dd id="smenu1" onmouseover="javascript:montre​('smenu1');" onmouseout="javascript:montre(​'');">
    <ul>
     <li><a href="#">Sous-Menu 1.1</a></li>
     <li><a href="#">Sous-Menu 1.2</a></li>
     <li><a href="#">Sous-Menu 1.3</a></li>
     <li><a href="#">Sous-Menu 1.4</a></li>
     </ul>
   </dd>
  </dl2>
  <dl3>  
   <dt onmouseover="javascript:montre​('smenu2');">Visite de l'atelier</dt>

    <dd id="smenu2" onmouseover="javascript:montre​('smenu2');" onmouseout="javascript:montre(​'');">
    <ul>
     <li><a href="#">Sous-Menu 2.1</a></li>
     <li><a href="#">Sous-Menu 2.2</a></li>
     <li><a href="#">Sous-Menu 2.3</a></li>
     <li><a href="#">Sous-Menu 2.4</a></li>
    </ul>
    </dd>
  </dl3>
   
  <dl4>  
   <dt onmouseover="javascript:montre​('smenu3');">Photos de nos restaurations</dt>
    <dd id="smenu3" onmouseover="javascript:montre​('smenu3');" onmouseout="javascript:montre(​'');">
    <ul>

     <li><a href="#">Sous-Menu 3.1</a></li>
     <li><a href="#">Sous-Menu 3.2</a></li>
     <li><a href="#">Sous-Menu 3.3</a></li>
     <li><a href="#">Sous-Menu 3.4</a></li>
     <li><a href="#">Sous-Menu 3.5</a></li>
    </ul>
    </dd>
  </dl4>
 <dl5>  
   <dt onmouseover="javascript:montre​('smenu4');">Techniques et astuces</dt>
    <dd id="smenu4" onmouseover="javascript:montre​('smenu4');" onmouseout="javascript:montre(​'');">
    <ul>

     <li><a href="#">Sous-Menu 4.1</a></li>
     <li><a href="#">Sous-Menu 4.2</a></li>
     <li><a href="#">Sous-Menu 4.3</a></li>
    </ul>
    </dd>
 </dl5>
 <dl6>  
   <dt onmouseover="javascript:montre​('smenu5');">Historiques du mobilier</dt>
    <dd id="smenu5" onmouseover="javascript:montre​('smenu5');" onmouseout="javascript:montre(​'');">
    <ul>

     <li><a href="#">Sous-Menu 5.1</a></li>
     <li><a href="#">Sous-Menu 5.2</a></li>
     <li><a href="#">Sous-Menu 5.3</a></li>
    </ul>
    </dd>
  </dl6>
  <dl7>    
   <dt onmouseover="javascript:montre​('smenu6');">Antiquités</dt>

   <dd id="smenu6" onmouseover="javascript:montre​('smenu6');" onmouseout="javascript:montre(​'');">
    <ul>
     <li><a href="#">Sous-Menu 1.1</a></li>
     <li><a href="#">Sous-Menu 1.2</a></li>
     <li><a href="#">Sous-Menu 1.3</a></li>
     <li><a href="#">Sous-Menu 1.4</a></li>
     </ul>
   </dd>
  </dl7>
 </div>




---------------
pat
  1. homepage
poum
Habitué (de 5 000 à 9 999 messages postés)
  1. Posté le 02/11/2008 à 20:37:04  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 
:hello:

 je n'ai pas tout regardé mais ajoute cette dernière ligne au CSS pour les dl1, dl2, dl3 etc.

 display:inline;

 :edit

 je viens de tester, ça casse tout, arrange tout bref, faudrait revoir qui fait quoi dans cet ensemble :D


---------------
http://www.onlyweb.fr
(Publicité)
  1. homepage
pat734
Sur la bonne voie (de 100 à 499 messages postés)
  1. Posté le 02/11/2008 à 22:00:39  
  1. answer
  1. Prévenir les modérateurs en cas d'abus
 

poum a écrit :

:hello:

 je n'ai pas tout regardé mais ajoute cette dernière ligne au CSS pour les dl1, dl2, dl3 etc.

 display:inline;

 :edit

 je viens de tester, ça casse tout, arrange tout bref, faudrait revoir qui fait quoi dans cet ensemble :D

 




 Bonsoir,
 Merci pour avoir testé. J'ai déjà fait plusieurs modifications mais cela ne marche toujours pas sous Internet Explorer.
 Je vais continuer mes recherches.
 Bonne soirée.


---------------
pat
 Page :
1

Aller à :
 

Sujets relatifs
limitation en largeur dans firefox??? Menu déroulant fixe ?
menu en bas de page outlook change entete
entête (photo)aleatoire compression d'entête ip
compression entete IP Obtenir une adresse IP differente à chaque connexion??
Plus de sujets relatifs à : Chaque entête du menu déroulant de largeur différente ?

Les 5 sujets de discussion précédents Nombre de réponses Dernier message
Comment mettre une fenêtre sur son site [résolu] 2
Aide pour Netlor Studio 3
Erreur T_FOR php 2
Cree mot de pass pour site 3
Comment créer un site gratuitement ou à moindre à coût 4