IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Probleme avec IE6 et IE7 pour un menu


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Inscrit en
    Novembre 2007
    Messages
    72
    Détails du profil
    Informations forums :
    Inscription : Novembre 2007
    Messages : 72
    Par défaut Probleme avec IE6 et IE7 pour un menu
    Bonjour,

    J'ai modifié un <ul> pour faire un menu horizontal, avec des images, un peu comme des icones de bureau sur Windows, ça marche bien sur Opera 10.61, Chrome 5.0.375.127 , Firefox 3.6.8 , IE8, Safari 5.0.1.

    Mais sur IE 6et IE7, le menu s'affiche bizarrement, à la verticale.

    Qu'est ce que je dois faire pour corriger ça?

    Voilà le code:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    <!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">
    ...
     
    <div class="maincontainer">
    	<div id="menu">
    		<ul>
    			<li><div id="blocenregistrer" class="blocmenu"><a href="./inscription.php" title="S'enregistrer">S'enregistrer</a></div></li>
    			<li><div id="blocpasse" class="blocmenu"><a href="#" title="Mot de passe oubli&eacute;?">Mot de passe oubli&eacute;?</a></div></li>
    			<li><div id="blocaide" class="blocmenu"><a href="./p_conseils.php" title="Conseils">Conseils</a></div></li>
    		</ul>
    	</div> 
    ...
    </div>
     
     
     
    LE CSS
     
     
    body {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    background-color:#CC2527;
    margin-left:auto;
    margin-right:auto;
    font-size:9pt;
    color:#000;
    line-height:13pt;
    text-align:center;
    padding:0;
    }
     
    ul {
      margin-top: 16px;
      margin-right: 16px;
      margin-bottom: 0px;
      margin-left: 40px;
      padding: 0px;
      list-style: none;
    }
     
    li {
      float: left;
      margin-left: 50px;
    }
     
    #menu {
    width:931px;
    height:64px;
    margin-left:-20px;
    }
     
    .blocmenu {
    margin-right:auto;
    padding-top:64px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:8pt;
    font-weight:700;
    text-decoration:none;
    }
     
    .blocmenu a {
    background:#fff;
    color:#000;
    text-decoration:none;
    }
     
    .blocmenu a:active {
    background:#fff;
    color:#CC2527;
    }
     
    .blocmenu a:hover {
    background:#fff;
    color:#000;
    padding-bottom:2px;
    border-bottom:dotted #CC2527;
    }
     
    #blocenregistrer {
    background:url(images/enregistrer.png) no-repeat;
    background-position:10px 0px;
    text-align:center;
    width:84px;
    margin-left:230px;
    }
     
    #blocpasse {
    background:url(images/passe.png) no-repeat;
    background-position:50px 0px;
    text-align:center;
    width:164px;
    margin-left:auto;
    }
     
    #blocaide {
    background:url(images/aide.png) no-repeat;
    text-align:center;
    width:64px;
    margin-left:auto;
    }

  2. #2
    Membre éclairé
    Profil pro
    Inscrit en
    Septembre 2010
    Messages
    71
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2010
    Messages : 71
    Par défaut
    Bonjour,

    Je te déconseille d'imbriquer des DIVs dans des LIs.
    As tu essayer d'appliquer un float left à tes DIVs?

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    #menu ul div{
    float:left;
    }

  3. #3
    Expert confirmé
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 660
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 660
    Par défaut
    Dans ton cas quel est l'intérêt de mettre des div dans des li ?

    Sinon, je ferai la même remarque que Lenézé.

  4. #4
    Membre confirmé
    Inscrit en
    Novembre 2007
    Messages
    72
    Détails du profil
    Informations forums :
    Inscription : Novembre 2007
    Messages : 72
    Par défaut
    Les DIV dans les LI c'est pour permettre d'afficher une image individuelle en background sur chaque lien du LI

    Sinon, quelle autre méthode me conseilleriez-vous pour faire la même chose?

  5. #5
    Expert confirmé
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 660
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 660
    Par défaut
    tu as 3 possibilités :

    *utiliser des div
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
    <div style="border:none; margin:5px; float:left; background-image:url('images/i1.gif'); width:30px; height:30px"/>
    <a href="">Bla bla</a>
    </div>
    <div style="border:none; margin:5px; float:left; background-image:url('images/i2.gif'); width:30px; height:30px"/>
    <a href="">Bla bla</a>
    </div>
    <div style="border:none; margin:5px; float:left; background-image:url('images/i3.gif'); width:30px; height:30px"/>
    <a href="">Bla bla</a>
    </div>
    <br style="clear:both" />
    <div> coucou</div>
    Mais tu dois préciser la hauteur et la largeur du div (au moins la largeur) car par défaut le div prend la largeur de la page.


    *utiliser une liste
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
     
    <div>
    <ul>
    <li style="border:none; margin:5px; float:left; background-image:url('images/i1.gif');"/>
    <a href="">Bla bla</a>
    </li>
    <li style="border:none; margin:5px; float:left; background-image:url('images/i2.gif');"/>
    <a href="">Bla bla</a>
    </li>
    <li style="border:none; margin:5px; float:left; background-image:url('images/i3.gif');"/>
    <a href="">Bla bla</a>
    </li>
    </ul>
    </div>
    <br style="clear:both" />
    <div> coucou</div>
    Il faudra enlever les puces.


    *utiliser des liens et des balises img
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
     
    <div>
    <a href="lien"><img src="images/i1.gif" style="border:none">Blabla</a>
    <a href="lien"><img src="images/i2.gif" style="border:none">Blabla</a>
    <a href="lien"><img src="images/i3.gif" style="border:none">Blabla</a>
    <br/>
    </div>

Discussions similaires

  1. Probleme avec la methode SetVolume pour la Speech API
    Par Jim_Nastiq dans le forum Windows
    Réponses: 1
    Dernier message: 03/05/2007, 14h58
  2. Problème avec a.exe, requis pour compiler
    Par jejerome dans le forum KDE
    Réponses: 4
    Dernier message: 15/04/2006, 23h28
  3. [EasyPHP] probleme avec EasyPHP et chemin pour htpasswd
    Par Death83 dans le forum EDI, CMS, Outils, Scripts et API
    Réponses: 35
    Dernier message: 15/01/2006, 14h51
  4. [CSS] Probleme avec IE6
    Par m312 dans le forum Mise en page CSS
    Réponses: 11
    Dernier message: 12/08/2005, 13h20
  5. Réponses: 1
    Dernier message: 01/04/2005, 09h39

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo