1
J'ai un problème avec le css dans Uikit et je ne peux pas comprendre. J'ai une section Nav et lorsque je passe la souris sur les éléments de la liste, cela ne change pas le pointeur du curseur. J'ai mis un fichier css personnalisé nommé custom.css. Si je supprime cela du code, cela fonctionne. Encore une fois, si je sorte le code dans un nouveau fichier html sans mon css cela fonctionne. Je ne peux pas résoudre mon problème de quelque façon que ce soit.Mon css personnalisé affecte uikit.css travail sur le curseur de navigation
Ci-dessous le code html:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>CVING</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="images/favicon.ico" />
<link rel="stylesheet" href="css/uikit.min.css" />
<link rel="stylesheet" href="css/custom.css" />
<script src="js/jquery.min.js"></script>
<script src="js/uikit.min.js"></script>
</head>
<body>
<div id="navigation" class="uk-width-1-1">
<!-- Navigation Large Medium Devices -->
<nav class="uk-navbar">
<div id="brand" class="uk-navbar-brand">
<a href="#"><img src="images/cving_neg.png" alt="CV Ing Interview Platform"></a>
</div>
<ul id="menu" class="uk-navbar-nav uk-navbar-flip uk-grid-small">
<li><a id="radar" href=""></a></li>
<li class="uk-active"><a id="cv" href=""></a></li>
<li><a id="career" href=""></a></li>
<li><a id="personalitytest" href=""></a></li>
<li><a id="settings" href=""></a></li>
<li><a id="avatar" href=""></a></li>
</ul>
</nav>
</div> <!-- Fine Navigation -->
<div id="content">
<div id="wrap-cv" class="uk-container-center uk-width-1-2 uk-grid-small">
<div id="menu-cv" class="uk-panel uk-panel-box uk-border-rounded uk-contrast">
<ul class="uk-nav uk-nav-side uk-nav-parent-icon uk-width-1-1" data-uk-nav>
<li class="uk-active"><a href="">Active</a></li>
<li><a href="">Item</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="">Sub item</a></li>
<li><a href="">Sub item</a>
<ul>
<li><a href="">Sub item</a></li>
<li><a href="">Sub item</a></li>
</ul>
</li>
</ul>
</li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="">Sub item</a></li>
<li><a href="">Sub item</a></li>
</ul>
</li>
</ul>
un ici mon css:
* {
margin: 0;
padding: 0;
}
/* Navigation */
#navigation {
background-color: #0080D4;
height: auto;
}
#navigation nav {
background-color: #0080D4;
height: auto;
line-height: 46px;
}
ul#menu {
line-height: 50px;
margin-top: 4px
}
ul#menu li {
margin-right: 5px;
}
ul#menu li.uk-active a, ul#menu li.uk-active a img{
background-color: transparent;
color: #fff;
}
#radar {
background: url("../images/radar-b.png");
background-repeat: no-repeat;
background-position: center;
}
.uk-active #radar {
background: url("../images/radar-w.png");
background-repeat: no-repeat;
background-position: center;
}
#cv {
background: url("../images/cv-b.png");
background-repeat: no-repeat;
background-position: center;
}
.uk-active #cv {
background: url("../images/cv-w.png");
background-repeat: no-repeat;
background-position: center;
}
#career {
background: url("../images/career-b.png");
background-repeat: no-repeat;
background-position: center;
}
.uk-active #career {
background: url("../images/career-w.png");
background-repeat: no-repeat;
background-position: center;
}
#personalitytest {
background: url("../images/personalitytest-b.png");
background-repeat: no-repeat;
background-position: center;
}
.uk-active #personalitytest {
background: url("../images/personalitytest-w.png");
background-repeat: no-repeat;
background-position: center;
}
#settings {
background: url("../images/settings-b.png");
background-repeat: no-repeat;
background-position: center;
}
.uk-active #settings {
background: url("../images/settings-w.png");
background-repeat: no-repeat;
background-position: center;
}
#avatar {
background: url("../images/user_avatar_website.png");
background-repeat: no-repeat;
background-position: center;
}
ul#menu li:hover a {
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
background-color: transparent;
}
ul#menu li:last-child:hover a {
border-radius: none;
border: none;
background-color: transparent;
}
/* Content */
#content {
position: relative;
top:0;
left: 0;
min-height: 100vh;
min-width: 100vw;
background: linear-gradient(rgba(13, 69, 133, 0.8), rgba(13, 69, 133, 0.8)), url("../images/background.jpg") no-repeat center 0px;
background-size: cover;
z-index: -1;
}
div#wrap-cv {
position: relative;
top:10px;
z-index: 1;
}
#menu-cv {
width: 25%;
position: relative;
left: 0;
background-color: #0d4585;
}
div#menu-cv ul {padding-top: 5px;}
/*div#menu-cv ul li {
margin-bottom: 10px;
font-size: 0.8em;
font-weight: bold;
}*/
/* Content Header with Shape Effect */
#header-cv {
position: relative;
background-color: #0D4585;
padding: 0 20px 10px;
border-top-right-radius: 20px;
border-bottom: 2px solid #3a679c;
right: 20px;
margin-top: 20px;
width: 60%;
}
#header-cv:before {
content: '';
position: absolute;
top: -20px;
left: 0;
border: 20px solid #0D4585;
border-top-left-radius: 20px;
border-bottom-color: transparent;
border-right-color: transparent;
border-right-width: 0;
border-bottom-width: 0;
}
#header-cv:after {
content: '';
position: absolute;
top: -40px;
left: 20px;
width: 40%;
border: 20px solid rgba(255, 255, 255, 0);
border-right-color: transparent;
border-top-color: transparent;
border-bottom-color: #0D4585;
border-right-width: 100px;
border-left-width: 0;
}
#header-cv h6 {
color: #fff;
margin: 0;
}
/* End Content Header with Shape Effect */
Si facile ??? :) Merci beaucoup. De toute façon, je ne peux pas comprendre pourquoi ... – lisarko8077