SEND all files + questionnaires + json + data_tests
This commit is contained in:
vincent_b
@@ -0,0 +1,91 @@
|
||||
#cibler_css_id_class_el {
|
||||
nav#top_menu, nav#vertical_menu {
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
|
||||
#top_menu {
|
||||
width: fit-content;
|
||||
float: right;
|
||||
padding-left: 30px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
#top_menu .menu_liste {
|
||||
padding-left: 0;
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
#vertical_menu .menu_liste {
|
||||
margin: 0 30px 0 0px;
|
||||
padding-left: 0;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
.menu_item {
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
padding: 10px;
|
||||
border: 1px solid;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
a[data-type] {
|
||||
background: yellow;
|
||||
}
|
||||
li:hover {
|
||||
background: #000 !important;
|
||||
color: #FFF !important;
|
||||
}
|
||||
|
||||
.menu_item .submenu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
/* width: fit-content; */
|
||||
width: max-content;
|
||||
border: 1px solid;
|
||||
padding: 3px 20px 10px 15px;
|
||||
margin: 8px 0 0 -10px;
|
||||
background: #000 !important;
|
||||
color: #FFF !important;
|
||||
text-align: left;
|
||||
list-style: none;
|
||||
}
|
||||
.menu_item:hover .submenu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu_item .submenu .submenu_item {
|
||||
color: #FFF;
|
||||
background: #000 !important;
|
||||
border: 1px solid #000;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
.menu_item .submenu .submenu_item:hover {
|
||||
filter: invert(1);
|
||||
margin-left: -15px;
|
||||
margin-right: -23px;
|
||||
padding-left: 13px;
|
||||
border-color: #FFF !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#vertical_menu {
|
||||
width: fit-content;
|
||||
float: left;
|
||||
}
|
||||
#vertical_menu li.menu_item {
|
||||
display: block;
|
||||
width: max-content;
|
||||
padding: 9px 10px;
|
||||
}
|
||||
#vertical_menu .submenu {
|
||||
margin-top: -35px !important;
|
||||
margin-left: 80px !important;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
<div id="cibler_css_id_class_el">
|
||||
<nav id="top_menu">
|
||||
<ul class="menu_liste">
|
||||
<li class="menu_item" data-num="0">menu 0</li>
|
||||
<li class="menu_item" data-num="1">menu 1</li>
|
||||
<li class="menu_item" data-num="2">menu 2</li>
|
||||
|
||||
<li class="menu_item" data-num="3" data-sub="oui">
|
||||
<a id="menu_3">menu 3</a>
|
||||
<ul class="submenu">
|
||||
<li class="submenu_item" data-num="1">sous-menu 1</li>
|
||||
<li class="submenu_item" data-num="2">sous-menu 2</li>
|
||||
<li class="submenu_item" data-num="3">sous-menu 3</li>
|
||||
<li class="submenu_item" data-num="4">sous-menu 4</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="menu_item">
|
||||
<a href='#' target='_blank' data-type='demo'>menu 4</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav id="vertical_menu">
|
||||
|
||||
<ul class="menu_liste">
|
||||
<li class="menu_item" data-num="0">menu 0</li>
|
||||
<li class="menu_item" data-num="1">menu 1</li>
|
||||
<li class="menu_item" data-num="2">menu 2</li>
|
||||
<li class="menu_item" data-num="3" data-sub="oui">
|
||||
<a id="menu_3">menu 3</a>
|
||||
<ul class="submenu">
|
||||
<li class="submenu_item" data-type="files img">
|
||||
images
|
||||
</li>
|
||||
<li class="submenu_item" data-type="files draw">
|
||||
dessins
|
||||
</li>
|
||||
<li class="submenu_item" data-type="files txt">
|
||||
textes
|
||||
</li>
|
||||
<li class="submenu_item" data-type="files ref">
|
||||
references
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="menu_item">
|
||||
<a href='https://code.bonnebulle.xyz' target='_blank' data-type='demo'>menu 4</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<section>
|
||||
<article>
|
||||
Aliquip excepteur et ad aute magna eu nulla in ut id excepteur tempor elit. Aliquip pariatur cupidatat do. Eiusmod voluptate irure fugiat aliquip eiusmod laborum quis veniam in irure id anim nisi. Ex adipisicing sint quis nisi quis ipsum fugiat. Excepteur consectetur sit irure ad occaecat duis. Incididunt ipsum non amet amet tempor fugiat magna sint ad. Eu consectetur nostrud sit quis officia aliqua consequat eiusmod officia occaecat elit sint labore do. Ullamco dolor consectetur aliquip pariatur reprehenderit incididunt esse.
|
||||
</article>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,6 @@
|
||||
<pre><code class="line-numbers show-language nohelp_result language-css">
|
||||
#top_menu .submenu_item[data-num="4"],
|
||||
#vertical_menu [data-type="files draw"] {
|
||||
background: red !important;
|
||||
}
|
||||
</code></pre>
|
||||
@@ -0,0 +1,28 @@
|
||||
Element :
|
||||
div a { ... } /* CSS cible a présent dans une div */
|
||||
<div>
|
||||
<a href='http:...' target='_blank' data-type='demo'>lien</a>
|
||||
</div>
|
||||
<a href='http:...'>lien</a> <!-- non ciblé/affecté, hors de div -->
|
||||
|
||||
Attribut :
|
||||
'href', 'target', 'data-type' (dans l'element a)...
|
||||
a[href] { ... } /* element a avec attribut href */
|
||||
a[href$=".html"] { ... } /* attribut href fini par... */
|
||||
a[href^="https"] { ... } /* attribut href commence par... */
|
||||
a[href*="fichier_final"] { ... } /* attribut href contient... */
|
||||
|
||||
Id :
|
||||
#top_menu { .... }
|
||||
<nav id="top_menu">
|
||||
|
||||
Classe :
|
||||
.menu_item { .... }
|
||||
<li class="menu_item">menu 1</li>
|
||||
|
||||
TODO :
|
||||
Cibler le 4e sous-menu dans #top_menu
|
||||
Faire de même dans le menu de gauche, mais cette fois, cibler le 2e sous-menu
|
||||
... forcer leur couleur de fond (background) dans une couleur de votre choix...
|
||||
... Utiliser !important si nécesaire
|
||||
|
||||
@@ -0,0 +1,91 @@
|
||||
#cibler_css_id_class_el {
|
||||
nav#top_menu, nav#vertical_menu {
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
|
||||
#top_menu {
|
||||
width: fit-content;
|
||||
float: right;
|
||||
padding-left:330px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
#top_menu .menu_liste {
|
||||
padding-left: 0;
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
#vertical_menu .menu_liste {
|
||||
margin: 0 30px 0 0px;
|
||||
padding-left: 0;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
.menu_item {
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
padding: 10px;
|
||||
border: 1px solid;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
a[data-type] {
|
||||
background: yellow;
|
||||
}
|
||||
li:hover {
|
||||
background: #000 !important;
|
||||
color: #FFF !important;
|
||||
}
|
||||
|
||||
.menu_item .submenu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
/* width: fit-content; */
|
||||
width: max-content;
|
||||
border: 1px solid;
|
||||
padding: 3px 20px 10px 15px;
|
||||
margin: 8px 0 0 -10px;
|
||||
background: #000 !important;
|
||||
color: #FFF !important;
|
||||
text-align: left;
|
||||
list-style: none;
|
||||
}
|
||||
.menu_item:hover .submenu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu_item .submenu .submenu_item {
|
||||
color: #FFF;
|
||||
background: #000 !important;
|
||||
border: 1px solid #000;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
.menu_item .submenu .submenu_item:hover {
|
||||
filter: invert(1);
|
||||
margin-left: -15px;
|
||||
margin-right: -23px;
|
||||
padding-left: 13px;
|
||||
border-color: #FFF !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#vertical_menu {
|
||||
width: fit-content;
|
||||
float: left;
|
||||
}
|
||||
#vertical_menu li.menu_item {
|
||||
display: block;
|
||||
width: max-content;
|
||||
padding: 9px 10px;
|
||||
}
|
||||
#vertical_menu .submenu {
|
||||
margin-top: -35px !important;
|
||||
margin-left: 80px !important;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
#cibler_css_id_class_el {
|
||||
nav#top_menu, nav#vertical_menu {
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
|
||||
#top_menu {
|
||||
width: fit-content;
|
||||
float: right;
|
||||
padding-left: 30px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
#top_menu .menu_liste {
|
||||
padding-left: 0;
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
#vertical_menu .menu_liste {
|
||||
margin: 0 30px 0 0px;
|
||||
padding-left: 0;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
.menu_item {
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
padding: 10px;
|
||||
border: 1px solid;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
a[data-type] {
|
||||
background: yellow;
|
||||
}
|
||||
li:hover {
|
||||
background: #000 !important;
|
||||
color: #FFF !important;
|
||||
}
|
||||
|
||||
.menu_item .submenu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
/* width: fit-content; */
|
||||
width: max-content;
|
||||
border: 1px solid;
|
||||
padding: 3px 20px 10px 15px;
|
||||
margin: 8px 0 0 -10px;
|
||||
background: #000 !important;
|
||||
color: #FFF !important;
|
||||
text-align: left;
|
||||
list-style: none;
|
||||
}
|
||||
.menu_item:hover .submenu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu_item .submenu .submenu_item {
|
||||
color: #FFF;
|
||||
background: #000 !important;
|
||||
border: 1px solid #000;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
.menu_item .submenu .submenu_item:hover {
|
||||
filter: invert(1);
|
||||
margin-left: -15px;
|
||||
margin-right: -23px;
|
||||
padding-left: 13px;
|
||||
border-color: #FFF;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#vertical_menu {
|
||||
width: fit-content;
|
||||
float: left;
|
||||
}
|
||||
#vertical_menu li.menu_item {
|
||||
display: block;
|
||||
width: max-content;
|
||||
padding: 9px 10px;
|
||||
}
|
||||
#vertical_menu .submenu {
|
||||
margin-top: -35px !important;
|
||||
margin-left: 80px !important;
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user