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 :

Integrer menu CSS dans un design


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre du Club
    Profil pro
    Inscrit en
    Janvier 2011
    Messages
    5
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Janvier 2011
    Messages : 5
    Par défaut Integrer menu CSS dans un design
    Bonjour à tous! Je fait appelle à votre aide car je ne sait plus quoi faire pour y arriver. Voici mon site web et vous comprendrai tout!

    http://www.pokersroom.ca

    J'aimerais avoir un fond transparant pour le menu pour voir le design en dessous, et les sous-menu leurs mettre une couleur. En gros j'aimerais s'avoir quel code et ou le mettre pour donner une couleur différente au menu qu'au sous-menu.

    Voici mon code css:

    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
    #menu, #menu ul    
    {
            padding : 0;
            margin : 0;
            list-style : none; 
            line-height : 21px; 
            text-align : center; 
    }
     
    #menu 
    {
            font-weight : bold; 
            font-family : Arial; 
            font-size : 12px; 
    }
    #menu a 
    {
            display : block; 
            padding : 0; 
            background : gray;         
            color : #fff; 
            text-decoration : none; 
            width : 118px; 
    }
    #menu li       
    { 
            float : left; 
     
            border-right : 0px solid #fff;
    }
     
     
    html>body #menu li
    {
            border-right: 1px solid transparent ; 
    }
     
    #menu li ul 
    { 
            position: absolute; 
            width: 144px; 
            left: -999em; 
    }
     
     
    #menu li ul li 
    {
     
            border-top : 1px solid #fff; 
    }
     
     
    html>body #menu li ul li                
    {
            border-top : 1px solid transparent; 
    }
     
    #menu li ul ul 
    {
            margin    : -22px 0 0 144px ; 
     
            border-left     : 1px solid #fff ;      
    }
     
     
    html>body #menu li ul ul                
    {
            border-left     : 1px solid transparent ; 
    }
    #menu a:hover     
    {
            color: #000; 
            background: #fff; 
    }
     
    #menu li:hover ul ul, #menu li.sfhover ul ul 
    {
            left: -999em; 
    }
     
    #menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  
    {
            left: auto; 
            min-height: 0; 
    }

    Je vous remercie pour votre aide!

  2. #2
    Rédacteur
    Avatar de David55
    Homme Profil pro
    Ingénieur informatique
    Inscrit en
    Août 2010
    Messages
    1 542
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Ingénieur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Août 2010
    Messages : 1 542
    Par défaut
    Remplace ta class "#menu a" par

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
     
    #menu a {
    background:none repeat scroll 0 0 transparent;
    color:#FFFFFF;
    display:block;
    padding:0;
    text-decoration:none;
    width:118px;
    }
    Petit conseil: utilise firebug

  3. #3
    Membre du Club
    Profil pro
    Inscrit en
    Janvier 2011
    Messages
    5
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Janvier 2011
    Messages : 5
    Par défaut
    Hey bien je te remercie c'est déja beaucoup mieu comme cela. Mais il manque un dernier petit détail, maintenant c'est tout le menu qui est transparent. Y a t'il moyen que les sous-menu est un fond de couleur?

    http://www.pokersroom.ca

    Merci!

  4. #4
    Rédacteur
    Avatar de David55
    Homme Profil pro
    Ingénieur informatique
    Inscrit en
    Août 2010
    Messages
    1 542
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Ingénieur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Août 2010
    Messages : 1 542
    Par défaut
    Ajoute ceci:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    #menu ul a{
    background-color:green;
    }
    Bien sur remplace green par la couleur de ton choix

  5. #5
    Membre du Club
    Profil pro
    Inscrit en
    Janvier 2011
    Messages
    5
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Janvier 2011
    Messages : 5
    Par défaut
    Super sa fonctionne, je te remercie.

  6. #6
    Rédacteur
    Avatar de David55
    Homme Profil pro
    Ingénieur informatique
    Inscrit en
    Août 2010
    Messages
    1 542
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Ingénieur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Août 2010
    Messages : 1 542
    Par défaut
    derien

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

Discussions similaires

  1. Insérer un menu css dans une image
    Par rimbaut dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 07/06/2010, 10h41
  2. integrer du php dans un css
    Par tycoons dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 18/11/2006, 00h09
  3. Comment integre un calque dans le html ou css
    Par rimbaut dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 09/05/2006, 16h39

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