1. ⭐⭐⭐ Grosse PROMO en cours sur ma plateforme SEO My Ranking Metrics
    Rejeter la notice

menu horizontal défilant en css...un problème d'alignement

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par cheloniologue, 1 Novembre 2010.

  1. cheloniologue
    cheloniologue WRInaute impliqué
    Inscrit:
    8 Février 2006
    Messages:
    914
    J'aime reçus:
    0
    Bonjour,

    Alors je tente de faire une barre de menu déroulant. En gros plusieurs menu déroulant cote à cote.
    Et c'est là que mon problème apparait ... je n'arrive pas à les aligner !!!

    Voici le résultat actuel : http://www.cheloniophilie.com/Copie-index.php

    Je voudrai les coller ...mais je n'y arrive pas ... j'arrive pas à voir quoi modifier dans le CSS ...

    Code:
    <STYLE type=text/css>#monmenu {
    	FONT-WEIGHT: bold; FONT-SIZE: 90%; FONT-FAMILY: trebuchet ms,arial,tahoma,verdana,sans-serif
    }
    #monmenu UL UL {
    	BORDER-RIGHT: #b0b0b0 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #b0b0b0 1px solid; DISPLAY: none; PADDING-LEFT: 0px; LEFT: 164px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #b0b0b0 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: #b0b0b0 1px solid; POSITION: absolute; TOP: -1px
    }
    #monmenu LI {
    	PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; MARGIN: 0px; WIDTH: 160px; PADDING-TOP: 2px; LIST-STYLE-TYPE: none; POSITION: relative; BACKGROUND-COLOR: #e0e0e0
    }
    #monmenu LI:hover {
    	BACKGROUND-COLOR: #ffff70
    }
    #monmenu LI.sfhover {
    	BACKGROUND-COLOR: #ffff70
    }
    #monmenu LI A {
    	TEXT-DECORATION: none
    }
    #monmenu LI:hover UL.niveau2 {
    	DISPLAY: block
    }
    #monmenu LI LI:hover UL.niveau3 {
    	DISPLAY: block
    }
    #monmenu LI.sfhover UL.niveau2 {
    	DISPLAY: block
    }
    #monmenu LI LI.sfhover UL.niveau3 {
    	DISPLAY: block
    }
    #monmenu LI.plus {
    	BACKGROUND-POSITION: right 50%; BACKGROUND-IMAGE: url(illustrations/fdroite.gif); BORDER-BOTTOM: #b0b0b0 1px solid; BACKGROUND-REPEAT: no-repeat
    }
    </STYLE>
    Quelqu'un peut il m'aider ?
     
  2. cheloniologue
    cheloniologue WRInaute impliqué
    Inscrit:
    8 Février 2006
    Messages:
    914
    J'aime reçus:
    0
    je rappelle bien que c'est du css ... un menu déroulant en Javascript j'ai déjà fait sans problème mais en css je bloque quelque part ...
     
  3. stone66
    stone66 WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    176
    J'aime reçus:
    0
    Bonjour,

    j'aime pas du tout ce code mais bon ça ne regarde que moi :D

    ton problème est que tu ne defini pas ta class niveau1 que tu mets dans ton <UL class=niveau1>

    donc il faut ajouter à ta feuille css:
    Code:
    .niveau1 { padding-left:0;}
    et ensuite tu mets ton <table width="100%">

    donc il va utiliser toute la page, il faut retirer width="100%" ou mettre la taille exacte que tu veux.

    Amicalement,
    Stone66
     
  4. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 874
    J'aime reçus:
    262
    Tu rajoutes:

    Code:
    *{margin:0;padding:0;}
    Puis tu enlèves le width:160px de #monmenu LI
     
  5. cheloniologue
    cheloniologue WRInaute impliqué
    Inscrit:
    8 Février 2006
    Messages:
    914
    J'aime reçus:
    0
    Merci !!! vraiment merci cela fonctionne impeccable !!! SEULEMENT si vous regardez par vous même ... les liens dans le menu déroulant n'ont pas la même longueur que le rectangle du haut !!!
    Comment faire pour que les dimensions des "rectangles" soient les mêmes ???
    regardez http://www.cheloniophilie.com/Copie-index.php

    Voici le code actuel (j'ai viré les dimensions en 164px pour que tout rentre dans ma balise "with=100%")
    PS: Le java c'est pour que cela fonctionne avec IE5 et IE6

    Code:
    <STYLE type=text/css>#monmenu {
    	FONT-WEIGHT: bold; FONT-SIZE: 90%; FONT-FAMILY: trebuchet ms,arial,tahoma,verdana,sans-serif
    }
    #monmenu UL UL {
    	BORDER-RIGHT: #b0b0b0 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #b0b0b0 1px solid; DISPLAY: none; PADDING-LEFT: 0px; LEFT: 100%; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #b0b0b0 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: #b0b0b0 1px solid; POSITION: absolute; TOP: -1px
    }
    #monmenu LI {
    	PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; MARGIN: 0px; WIDTH: 100%; PADDING-TOP: 2px; LIST-STYLE-TYPE: none; POSITION: relative; BACKGROUND-COLOR: #e0e0e0
    }
    #monmenu LI:hover {
    	BACKGROUND-COLOR: #ffff70
    }
    #monmenu LI.sfhover {
    	BACKGROUND-COLOR: #ffff70
    }
    #monmenu LI A {
    	TEXT-DECORATION: none
    }
    #monmenu LI:hover UL.niveau2 {
    	DISPLAY: block
    }
    #monmenu LI LI:hover UL.niveau3 {
    	DISPLAY: block
    }
    #monmenu LI.sfhover UL.niveau2 {
    	DISPLAY: block
    }
    #monmenu LI LI.sfhover UL.niveau3 {
    	DISPLAY: block
    }
    #monmenu LI.plus {
    	BACKGROUND-POSITION: right 50%; BACKGROUND-IMAGE: url(illustrations/fdroite.gif); BORDER-BOTTOM: #b0b0b0 1px solid; BACKGROUND-REPEAT: no-repeat
    }
    .niveau1 { padding-left:0; margin:0;padding:0;}
    
    </STYLE>
    <!--[if lt IE 7]>
    <SCRIPT type=text/javascript>
    // Fonction destinée à remplacer le "LI:hover" pour IE 6
    sfHover = function() {
    var sfEls = document.getElementById("monmenu").getElementsByTagName("li");
    for (var i=0; i<sfEls.length; i++) {
    sfEls[i].onmouseover = function() {
    this.className = this.className.replace(new RegExp(" sfhover"), "");
    this.className += " sfhover";
    }
    sfEls[i].onmouseout = function() {
    this.className = this.className.replace(new RegExp(" sfhover"), "");
    }
    }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    </SCRIPT>
    
    <STYLE type=text/css>#monmenu LI {
    	WIDTH: 100%
    }
    </STYLE>
    <![endif]-->
     
  6. stone66
    stone66 WRInaute discret
    Inscrit:
    30 Août 2010
    Messages:
    176
    J'aime reçus:
    0
    tu ajoutes width: 100%; à #monmenu UL UL
    et pour faire plus beau tu retires PADDING-RIGHT: 2px; PADDING-LEFT: 2px; à #monmenu LI

    sinon juste pour un peu optimiser, ton css pourrais tenir en ces quelques lignes :
    Code:
    <STYLE type="text/css">
    <!--
    * { border:0;margin:0;padding:0}
    #monmenu { 
    	FONT-WEIGHT: bold; FONT-SIZE: 90%; FONT-FAMILY: trebuchet ms,arial,tahoma,verdana,sans-serif
    }
    #monmenu UL UL {
    	width:100%; BORDER: #b0b0b0 1px solid; DISPLAY: none; LEFT: 100%; POSITION: absolute; TOP: -1px
    }
    #monmenu LI {
    	PADDING: 2px 2px; WIDTH: 98%; LIST-STYLE-TYPE: none; POSITION: relative; BACKGROUND-COLOR: #e0e0e0
    }
    #monmenu LI:hover, #monmenu LI.sfhover  {
    	BACKGROUND-COLOR: #ffff70
    }
    #monmenu LI A {
    	TEXT-DECORATION: none
    }
    #monmenu LI:hover UL.niveau2, #monmenu LI LI:hover UL.niveau3, #monmenu LI.sfhover UL.niveau2,#monmenu LI LI.sfhover UL.niveau3  {
    	DISPLAY: block
    }
    #monmenu LI.plus {
    	BACKGROUND-POSITION: right 50%; BACKGROUND-IMAGE: url(illustrations/fdroite.gif); BORDER-BOTTOM: #b0b0b0 1px solid; BACKGROUND-REPEAT: no-repeat
    }
    
     -->
    </STYLE>
     
  7. cheloniologue
    cheloniologue WRInaute impliqué
    Inscrit:
    8 Février 2006
    Messages:
    914
    J'aime reçus:
    0
    Merci !!! :mrgreen: :mrgreen: :mrgreen: :mrgreen:

    voilà la gueule que ça donne au final !!!
    http://www.cheloniophilie.com/Copie-index.php

    PS: j'ai pas encore touché au css du texte ... je vais m'en occuper

    Merci beaucoup pour vos conseils

    Cordialement
     
Chargement...
Similar Threads - menu horizontal défilant Forum Date
faire un lien en php, entre menu horizontal et une page CMS Développement d'un site Web ou d'une appli mobile 13 Mars 2012
centrer menu horizontal deroulant Développement d'un site Web ou d'une appli mobile 28 Juin 2011
Menu horizontal sur une ligne Développement d'un site Web ou d'une appli mobile 24 Juin 2011
Menu déroulant avec sous menu horizontale. Développement d'un site Web ou d'une appli mobile 30 Septembre 2010
Menu deroulant horizontal Développement d'un site Web ou d'une appli mobile 1 Mai 2009
WordPress Cocon sémantique et CMS : liens menu et footer Référencement Google 18 Novembre 2019
Le menu n'apparait pas dans l'interface Google Ads AdWords 17 Novembre 2019
Conserver ou non le nofollow sur menu Netlinking, backlinks, liens et redirections 9 Octobre 2019
Menu navigation, les tendances? Développement d'un site Web ou d'une appli mobile 20 Septembre 2019
Ne pas rendre crawlable le menu ? Référencement Google 15 Septembre 2019
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice