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 :

Mise en forme LI sur menu


Sujet :

CSS

  1. #1
    Membre à l'essai
    Inscrit en
    août 2008
    Messages
    11
    Détails du profil
    Informations forums :
    Inscription : août 2008
    Messages : 11
    Points : 11
    Points
    11
    Par défaut Mise en forme LI sur menu
    Bonjour tlm,

    J'ai un problème avec mon menu sur mon site http://www.deeplive.fr/
    Je n'arrive pas à créer une bordure noire autour de mes éléments <li> ou un fond noir.

    On le remarque lorsqu'on développe un menu ou sous-menu.
    Celles ci sont transparentes, c'est moche.

    Vous pouvez me dire comment faire s'il vous plaît ?

    Voici le 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
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    nav {    
        display: block;
        text-align: center;
    	padding: 10px;
      }
      nav ul {
        margin: 10;
        padding:0;
        list-style: none;
      }
      .nav a {
        display:block; 
        background: #111; 
        color:#fff; 
        text-decoration: none;
        padding: .8em 1.8em;
        text-transform: uppercase;
        font-size: 80%;letter-spacing: 2px;
        text-shadow: 0 -1px 0 #000;
        position: relative;
      }
      .nav{  
        vertical-align: top; 
        display: inline-block;
        box-shadow: 1px -1px -1px 1px #000, -1px 1px -1px 1px #fff, 0 0 6px 3px #fff;
        border-radius:6px;
    	background: #111;
      }
      .nav li {
    	position: relative;
      }
      .nav > li { 
        float:left; 
        border-bottom: 4px #aaa solid; 
        margin-right: 1px; 
      } 
      .nav > li > a { 
        margin-bottom:1px;
        box-shadow:inset 0 2em .33em -.5em #555; 
      }
      .nav > li:hover , .nav > li:hover >a{  border-bottom-color:orange;}
      .nav li:hover > a { color:orange; }
      .nav > li:first-child  { border-radius: 4px 0 0 4px;} 
      .nav > li:first-child>a{border-radius: 4px 0 0 0;}
      .nav > li:last-child  { 
      border-radius: 0 0 4px 0; 
      margin-right: 0;
      } 
      .nav > li:last-child >a{border-radius: 0 4px 0 0; }
      .nav li li a { margin-top:1px}
     
     
      .nav li a:first-child:nth-last-child(2):before { 
         content:""; 
         position: absolute; 
         height:0; 
         width: 0; 
         border: 5px solid transparent; 
         top: 50% ;
         right:5px;  
       }
     
    .nav ul {
      position: absolute;
      white-space: nowrap;
      border-bottom: 5px solid  orange;
      z-index: 1;
      left: -99999em;
    }
    .nav > li:hover > ul {
      left: auto;
      padding-top: 5px  ;
      min-width: 100%;
    }
    .nav > li li ul {  border-left:1px solid #fff;}
     
     
    .nav > li li:hover > ul { 
      margin-left: 1px;
      left: 100%;
      top: -1px;
    }
     
    .nav > li > a:first-child:nth-last-child(2):before { 
      border-top-color: #aaa; 
    }
    .nav > li:hover > a:first-child:nth-last-child(2):before {
      border: 5px solid transparent; 
      border-bottom-color: orange; 
      margin-top:-5px
    }
    .nav li li > a:first-child:nth-last-child(2):before {  
      border-left-color: #aaa; 
      margin-top: -5px
    }
    .nav li li:hover > a:first-child:nth-last-child(2):before {
      border: 5px solid transparent; 
      border-right-color: orange;
      right: 10px; 
    }

    Côté html...
    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
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <nav>
    	<img src="images/top_banner.png"/>
    	<br>
    		<ul class="nav">
    				<li><a href="http://www.deeplive.fr">Accueil</a></li>
    			<li>
    				<a href="#">Mon Menu 1</a>
    				<ul>
    				<li><a href="#">Lien 1</a></li><li><a href="#">Lien 2</a></li><li><a href="#">Lien 3</a></li>
    				</ul>
    			</li>					
     
    			<li>
    				<a href="#">Mon Menu 2</a>
    				<ul>
    				<li><a href="test1.php">Vraie page 404</a></li>
    			<li>
    				<a href="#">Sous Menu</a>
    				<ul>
    				<li><a id="ID_LINK_0" href="#">Page 404 mode Integrated</a></li><li><a href="pages/404/" target="_self">Page 404 mode This</a></li><li><a href="pages/404/" target="_blank">Page 404 mode New Tab</a></li><li><a id="ID_LINK_1" href="#">Page 404 mode Integrated 2</a></li>
    				</ul>
    			</li>					
    				<li><a href="#">Un lien sans rien</a></li>
    				</ul>
    			</li>					
    				<li><a href="javascript:swal('Deep Live', 'Message', 'info');">A Propos</a></li>
    		</ul>
    </nav>

    Merci d'avance

  2. #2
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    août 2003
    Messages
    3 642
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : août 2003
    Messages : 3 642
    Points : 5 060
    Points
    5 060
    Par défaut
    Salut,

    Ben en tout cas, t'as bossé ta css!

    Alors, je ne sais pas trop mais j'ai essayé un bête li{background:solid 2px red} et ça change déjà tout tout;

  3. #3
    Membre à l'essai
    Inscrit en
    août 2008
    Messages
    11
    Détails du profil
    Informations forums :
    Inscription : août 2008
    Messages : 11
    Points : 11
    Points
    11
    Par défaut
    L'air de rien, tu m'as fait réfléchir.
    Encore merci

    La source:
    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
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
     
    /*
    	COLORS NAMES LIST
    	https://www.quackit.com/css/color/charts/css_color_names_chart.cfm
    	COLORS PICK IT
    	https://www.w3schools.com/colors/colors_picker.asp
    */
    :root {
      --menu_border-bottom-color: orange;
      --sousmenu_border-bottom: orange;
      --fleche_border-bottom-color: orange;
      --menu_hover-color: orange;
      --nav_a-background: black;
      --nav_a-color: white;
      --nav_border-background: #262626;
      --nav_li-border-bottom: powderblue;
      --nav_li_a-color: white;
      --nav_li_a-background: black;
      --nav_li_a-border-width: 0px;
      --nav_li_a-border-style: solid;
      --nav_li_a-border-color: dimgray;  
    }
     
      nav {    
        display: block;
        text-align: center;
    	padding: 10px;
      }
      nav ul {
        margin: 10;
        padding:0;
        list-style: none;
      }
     
      .nav a {
        display:block; 
        background: var(--nav_a-background); 
        color: var(--nav_a-color); 
        text-decoration: none;
        padding: .8em 1.8em;
        text-transform: uppercase;
        font-size: 80%;letter-spacing: 2px;
        text-shadow: 0 -1px 0 #000;
        position: relative;
      }
      .nav{  
        vertical-align: top; 
        display: inline-block;
        box-shadow: 1px -1px -1px 1px #000, -1px 1px -1px 1px #fff, 0 0 6px 3px #fff;
        border-radius:6px;
    	background: var(--nav_border-background);
      }
      .nav li {
    	position: relative;	    
    	}
      .nav > li { 
        float:left; 
        border-bottom: 4px var(--nav_li-border-bottom) solid; 
        margin-right: 1px; 
      } 
      .nav > li > a { 
        margin-bottom:1px;
        box-shadow:inset 0 2em .33em -.5em #555; 
      }
      .nav > li:hover , .nav > li:hover >a{  border-bottom-color: var(--menu_border-bottom-color);}
      .nav li:hover > a { color: var(--menu_hover-color); }
      .nav > li:first-child  { border-radius: 4px 0 0 4px;} 
      .nav > li:first-child>a{border-radius: 4px 0 0 0;}
      .nav > li:last-child  { 
      border-radius: 0 0 4px 0; 
      margin-right: 0;
      } 
      .nav > li:last-child >a{border-radius: 0 4px 0 0; }
      .nav li li a { 
    	margin-top:0px;
    	text-align: left;
    	color: var(--nav_li_a-color);
    	background: var(--nav_li_a-background);
    	border-width: var(--nav_li_a-border-width);
    	border-style: var(--nav_li_a-border-style);
    	border-color: var(--nav_li_a-border-color);
      }
     
      .nav li a:first-child:nth-last-child(2):before { 
         content:""; 
         position: absolute; 
         height:0; 
         width: 0; 
         border: 5px solid transparent; 
         top: 50% ;
         right:5px;  
       }
     
     /* positions des sous-menus */
    .nav ul {
      position: absolute;
      white-space: nowrap;
      border-bottom: 5px solid var(--sousmenu_border-bottom);
      z-index: 1;
      left: -99999em;  
    }
    .nav > li:hover > ul {
      left: auto;
      padding-top: 5px  ;
      min-width: 100%;
    }
    .nav > li li ul {  border-left:1px solid #fff;}
     
    .nav > li li:hover > ul { 
      margin-left: 1px;
      left: 100%;
      top: -1px;
    }
     
    /* les flèches */
    .nav > li > a:first-child:nth-last-child(2):before { 
      border-top-color: #aaa; 
    }
    .nav > li:hover > a:first-child:nth-last-child(2):before {
      border: 5px solid transparent; 
      border-bottom-color: var(--fleche_border-bottom-color); 
      margin-top:-5px
    }
    .nav li li > a:first-child:nth-last-child(2):before {  
      border-left-color: #aaa; 
      margin-top: -5px
    }
    .nav li li:hover > a:first-child:nth-last-child(2):before {
      border: 5px solid transparent; 
      border-right-color: orange;
      right: 10px; 
    }

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

Discussions similaires

  1. Mise en forme conditionnelle sur condition
    Par rimbaut dans le forum Excel
    Réponses: 3
    Dernier message: 09/08/2007, 08h43
  2. Mise en forme d'un menu en CSS
    Par bouchette63 dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 15/06/2007, 10h50
  3. Réponses: 8
    Dernier message: 19/06/2006, 16h31
  4. Réponses: 4
    Dernier message: 15/11/2005, 18h53

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