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 :

menu horizontal style vista.


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre Expert
    Avatar de aityahia
    Homme Profil pro
    CIEPTAL CARS SPA
    Inscrit en
    Mars 2006
    Messages
    1 938
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 49
    Localisation : Algérie

    Informations professionnelles :
    Activité : CIEPTAL CARS SPA
    Secteur : Transports

    Informations forums :
    Inscription : Mars 2006
    Messages : 1 938
    Par défaut menu horizontal style vista.
    salut a tous
    j'aimerais créer un menu horizontal style vista mais, le problème c'est que je n'arrive pas a bien gérer les bordure avec les image

    et pour ça je dispose de 6 image
    3 pour la barre de menu et 3 pour le hover la taille des boutons doit être extensible.

    pour la création du menu j'utilise une liste <ul><li>.

    si quelqu'un peut m'aider sa serais très sympa.
    Images attachées Images attachées  

  2. #2
    Inactif  
    Avatar de Kerod
    Profil pro
    Inscrit en
    Septembre 2004
    Messages
    11 672
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2004
    Messages : 11 672
    Par défaut
    Pour t'aider il faudrait déjà nous donner ta base

  3. #3
    Membre Expert
    Avatar de aityahia
    Homme Profil pro
    CIEPTAL CARS SPA
    Inscrit en
    Mars 2006
    Messages
    1 938
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 49
    Localisation : Algérie

    Informations professionnelles :
    Activité : CIEPTAL CARS SPA
    Secteur : Transports

    Informations forums :
    Inscription : Mars 2006
    Messages : 1 938
    Par défaut

    désoler, je vous donne le bout de code que j'ai pu faire mais qui ne fonction pas encore.

    Code HTML.

    Code XHTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div id="Menu">
      <div class="gauche"></div>
      <div class="barre">
         <ul>
             <li><a href="#">Item 1</a></li>
             <li><a href="#">Item 2</a></li>
         </ul>
      </div>
      <div class="droite"></div>
    </div>

    code CSS c'est la que sa ne va pas (je crois)

    Code CSS : 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
    #menu                                   /*barre du menu */
      {
          width : 400px;                  
          height: 32px;
          font-family: Verdana Arial;
      }
     
    #menu .barre {
            float : left;
            width : 392x;
            height: 32px;
            background-image: url(main-button-tile.jpg);
            background-repeat: repeat-x;
            overflow: hidden;
     
    }
     
    #menu .droite {
            float : left;
            background: url(main-footer.jpg) right no-repeat  ;
            width: 4px;
            height: 32px;
            overflow: hidden;
     
    }
     
     
    #menu .gauche {
            float : left;
            background : url(main-header.jpg) left no-repeat ;
            width: 4px;
            height: 32px;
            overflow: hidden;
    }
     
    #menu ul
      {
           list-style-type: none;
           float: left;
           position: relative;
      }
     
    #menu li  {
          float: left;
          height: 32px;
          margin: 0;
     }
     
    #menu li a  {
         display: block;
         width: 150px;
         height: auto;
         color: #FFF;
         margin: 0;
         text-decoration: none;
     }
     
    #menu li a:hover  {
         background: url(main-buttonOver-tile.jpg) repeat-x; 
     }

    mon grand problème c'est d'ajouter les deux images qui ouvre et ferme l'image au moment du survol j'ai pensé a gérer ça avec des span a l"intérieur de la balise li mais je n'arrive pas.

    ci-joint mes images.

    je remercie d'avance.
    Fichiers attachés Fichiers attachés

  4. #4
    Membre Expert
    Avatar de aityahia
    Homme Profil pro
    CIEPTAL CARS SPA
    Inscrit en
    Mars 2006
    Messages
    1 938
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 49
    Localisation : Algérie

    Informations professionnelles :
    Activité : CIEPTAL CARS SPA
    Secteur : Transports

    Informations forums :
    Inscription : Mars 2006
    Messages : 1 938
    Par défaut
    j'ai bidouillé a gauche et a droite est j'ai trouvé la solutions, effectivement j'ai recours au span je vais poster mon code une fois qu'il est nétoyé.

    a+.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. menu horizontal avec plusieurs styles
    Par bruman dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 19/02/2009, 16h39
  2. prob menu horizontal
    Par tinkye_winkye dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 25/01/2005, 11h19
  3. Comment créer un menu popup style XP ?
    Par chaours dans le forum Composants VCL
    Réponses: 4
    Dernier message: 29/09/2003, 09h38

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