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
    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é
    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
    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; 
    }

###raw>template_hook.ano_emploi###