Modéré par : Skippy bmag 
Index du Forum » » Modifications ou correction de thèmes existants » » [Résolu] - Toujours et encore TZ
Auteur[Résolu] - Toujours et encore TZ
territoire
27   

territoire
  Posté : 26-03-2013 16:39

bonjour à tous,

TZ_maville est superbe ... je crois qu'il faut d'abord féliciter son auteur.

De mon côté, j'essaie de mettre un menu déroulant en lieu et place du menu actuel ... et je n'y arrive pas !!! je l'ai fait sur "brown", "mouse-bmag", et c'est Ok, mais avec celui-ci, je n'y arrive pas. Faut dire que je n'y comprends pas grand chose avec les CSS.

Quelqu'un a-t-il déjà réussi à le faire et si oui, pourrait-il m'aider?

Merci d'avance

Message édité par : territoire / 26-03-2013 16:42


  Profil  www  
bmag
290     
 Styles Team (TST)

bmag
  Posté : 27-03-2013 09:54

slt
quel menu déroulant désires tu palcer ds le header?

tu as 2 chose à faire:
ds le fichier html placer tes liens, le code html de ton menu
ds le fichier Css sous : /*le menu horizontal du header: à titre d'exemple le travail de Stu Nicholls*/
mettre la css correspondante

  Profil  www  
territoire
27   

territoire
  Posté : 27-03-2013 13:16

Le menu d'origine est quelque chose comme ca



<br clear="all" />
<div class="div4"> 
    <ul id="navlist">
        <li title=""><a  href="index.php">Accueil</a></li>    & nbsp;       
        <li title=""><a  href="index.php?op=newindex&catid=1">Notre actualité</a> ;</li>      
        <li title=""><a  href="forum.php">Forum</a></li>    &nb sp;
        <li title=""><a  href="modules.php?ModPath=links&ModStart=links">Liens</a>< ;/li>     
        <li title=""><a  href="modules.php?ModPath=encapsuleur&ModStart=encapsulation&page =photos">Photos</a></li> 
        <li title=""><a  href="modules.php?ModPath=encapsuleur&ModStart=encapsulation&page =Contact">Contact</a></li>      &n bsp;  
    </ul>         
</div>


avec la css qui va bien.

Je remplace le code ci-dessus par



<div align="left">
    <ul id="header_menu">
        <li title=""><a  href="index.php">Accueil</a></li>    & nbsp;       
        <li title=""><a  href="index.php?op=newindex&catid=1">Notre actualité</a> ;</li>      
        <li title="">
            <a  href="modules.php?ModPath=encapsuleur&ModStart=encapsulation&page =Elevage">Notre élevage</a>
            <u l>
              ;   <li><a href="modules.php?ModPath=encapsuleur&a mp;ModStart=encapsulation&page=Males">Nos mâles</a></li> ;
              ;   <li><a href="modules.php?ModPath=encapsuleur&a mp;ModStart=encapsulation&page=Femelles">Nos femelles</a>< /li>
              ;   <li><a href="modules.php?ModPath=encapsuleur&a mp;ModStart=encapsulation&page=Chiots">Chiots disponibles</a> </li>
              ;   <li><a href="modules.php?ModPath=encapsuleur&a mp;ModStart=encapsulation&page=Portees">Portées à venir</a& gt;</li>
              ;   <li><a href="modules.php?ModPath=encapsuleur&a mp;ModStart=encapsulation&page=Souvenirs">Souvenirs</a></li>
              ;   <li><a href="modules.php?ModPath=encapsuleur&a mp;ModStart=encapsulation&page=Resultats">Nos résultats</a>&l t;/li>
            </ ul>
        </li>      
        <li title="">
            <a  href="#">Documents</a>
            <u l>
              ;   <li><a href="index.php?op=newindex&catid=3 ">La race BA</a></li>
              ;   <li><a href="index.php?op=newindex&catid=2 ">Divers</a></li>
            </ ul>
        </li>   
        <li title=""><a  href="forum.php">Forum</a></li>    &nb sp;
        <li title=""><a  href="modules.php?ModPath=links&ModStart=links">Liens</a>< ;/li>     
        <li title=""><a  href="modules.php?ModPath=encapsuleur&ModStart=encapsulation&page =photos">Photos</a></li> 
        <li title=""><a  href="modules.php?ModPath=encapsuleur&ModStart=encapsulation&page =Contact">Contact</a></li>      &n bsp;
    </ul>    
</div>



avec dans la css



/************************************************************************
Mise en forme du menu
*************************************************************************/

/* Menu déroulant*/
#header_menu {
    padding : 20px 0 0 0; / * pas de marge intérieure */
    margin : 5px 0px 5px 0;  ;/* ni extérieure */
    list-style : none;
    line-height : 40px; /* définit&nb sp;une hauteur pour chaque élément */
    font-weight : bold; /* texte  ;en gras */
    font-family : Arial;
    font-size : 13px; /* hauteur  ;du texte : 12 pixels */    
    width: 100%;
    text-align:center;
}

#header_menu ul { /* Liste */     ; 
    padding : 0; /* pas de  marge intérieure */
    margin : 0; /* ni extérieure  */
    list-style : none;
    line-height : 40px; /* définit&nb sp;une hauteur pour chaque élément */
}


#header_menu a { /* Contenu des listes */
    display : block; /* Les lien s deviennent des balises de type block */
    padding : 0;
    color : #fff; /* couleur du& nbsp;texte */
    text-decoration : none;
    width: 99px;
}

#header_menu li { /* Éléments des listes * /      
    float : left;
    border-right: 1px solid #fff;
    width : 99px;
    /* background: !url(!../images/LBlocs/bg_su bmenu_header.png); */
    background-color: #E0DFBB;
    color: #000000;    
}

#header_menu li ul { /* Sous-listes */
    position: absolute;
    border-left: 1px solid #fff;
    width: 99px;
    left: -999em;

}

#header_menu li ul li { /* Eléments de&nbs p;sous-listes */
    border-top: 1px solid #fff;
}

#header_menu li ul ul {
    margin: -34px 0 0 106px;
    border-left: 1px solid #fff;
}

#header_menu a:hover { /* Lorsque la souris&nbs p;passe sur un des liens */    
    background-color: #B4AD81;
    color: #8B7C3F;
}

#header_menu li:hover ul ul, #menu li.sfhover u l ul {
    left: -999em;
}

#header_menu li:hover ul, #header_menu li li:hover&n bsp;ul, #header_menu li.sfhover ul, #header_menu li&nb sp;li.sfhover ul {
    left: auto;
    min-height: 0;
}




Il s'agit en fait du menu déroulant proposé sur ce site.

Ca fonctionne sur mouse-bmag, brown et d'autres, mais ici, tout se passe comme si je n'avais pas ajouté les classes dans la css.


  Profil  www  
territoire
27   

territoire
  Posté : 29-03-2013 08:04

Personne n'a une petite idée pour implémenter le 2ème menu proposé ici http://www.http://styles.npds.org/sections.php?op=viewarticle&artid=22 dans TZ-maville?

Moi, je n'y arrive pas.

Merci d'avance

  Profil  www  
Sauter à :