194 lines
3.5 KiB
CSS
Executable File
194 lines
3.5 KiB
CSS
Executable File
/************************************************/
|
|
/* onglets.css */
|
|
/* Abdelkader BELLOUNDJA */
|
|
/* a.belloundja@gmail.com */
|
|
/************************************************/
|
|
|
|
/* . onglets sur un markup ul. C'est lui qui contiendra toute la structure des onglets */
|
|
.onglets {
|
|
padding: 0;
|
|
margin: 0em 24.5em 0em 0em;
|
|
float: left;
|
|
position: absolute;
|
|
bottom: 0.5em;
|
|
left: 0.5em;
|
|
top: 2.5em;
|
|
right: 0;
|
|
display: block;
|
|
background-color: #eee;
|
|
border-right: 4px solid #eee;
|
|
}
|
|
|
|
.onglets.fullscreen {
|
|
margin: 0 0 0 0;
|
|
top: 0em;
|
|
right: 0em;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
|
|
/* onglet sur un markup li dont les enfants sont : span.onglet_title et div.onglet_content. C'est le nom de cette classe qui change pour passer en mode "focus" */
|
|
|
|
.onglets > li {
|
|
display: inline;
|
|
margin: 0 0.5em 0 0;
|
|
padding: 0;
|
|
z-index: 1;
|
|
float: left;
|
|
list-style-type: none;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.onglets > .onglets_tools a.close:hover {
|
|
background-color: red;
|
|
}
|
|
|
|
.onglets > .onglets_tools a:hover {
|
|
color: white;
|
|
background-color: silver;
|
|
border-top: 2px outset #0099cc;
|
|
border-left: 2px outset #0099cc;
|
|
border-right: 2px outset #0099cc;
|
|
}
|
|
|
|
.onglets > .onglets_tools a:active {
|
|
border-top: 2px inset #0099cc;
|
|
border-left: 2px inset #0099cc;
|
|
border-right: 2px inset #0099cc;
|
|
|
|
}
|
|
|
|
|
|
|
|
.onglets > .onglets_tools a {
|
|
padding: 0.25em 0.75em 0.3em .75em;
|
|
margin-left: 0.25em;
|
|
}
|
|
.onglets > .onglets_tools {
|
|
/* margin: 0 -2px 0 0; */
|
|
margin: 0;
|
|
padding: 0;
|
|
float: right;/*
|
|
position: absolute;
|
|
right: -4px;*/
|
|
}
|
|
|
|
/* Les images */
|
|
.onglets > .icon {
|
|
margin: 0 0.25em 0 0.25em;
|
|
float: left;
|
|
}
|
|
|
|
|
|
/* Nom de l'onglet, Fils des li inactifs*/
|
|
.onglets > li > a {
|
|
position: relative;
|
|
text-decoration: none;
|
|
margin: 0;
|
|
padding: 0.25em 1.5em 0.3em .75em;
|
|
display: block;
|
|
text-align: center;
|
|
color: #f00;
|
|
background-color: #fff;
|
|
cursor: pointer;
|
|
/*min-width: 8em;
|
|
max-width: 12.5em;*/
|
|
border-top: 2px solid #0099cc;
|
|
border-left: 2px solid #0099cc;
|
|
border-right: 2px solid #0099cc;
|
|
z-index: 1;
|
|
float: none;
|
|
border-radius: 8px 8px 0px 0px;
|
|
}
|
|
|
|
.onglets > li.onglet > a:hover {
|
|
|
|
border-top: 2px outset #0099cc;
|
|
border-left: 2px outset #0099cc;
|
|
border-right: 2px outset #0099cc;
|
|
|
|
}
|
|
|
|
|
|
.onglets > li.onglet > a:active {
|
|
|
|
border-top: 2px inset #0099cc;
|
|
border-left: 2px inset #0099cc;
|
|
border-right: 2px inset #0099cc;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Nom de l'onglet, fils du li actif */
|
|
.onglets > li.active_onglet > .onglet_title {
|
|
color: white;
|
|
background-color: #0099cc;
|
|
border-top: 2px outset #0099cc;
|
|
border-right: 2px outset #0099cc;
|
|
border-left: 2px outset #0099cc;
|
|
/*margin-bottom: 10px;*/
|
|
z-index: 3;
|
|
cursor: default;
|
|
}
|
|
|
|
|
|
/* Nom de l'onglet pendant le survol */
|
|
.onglets > .onglet > .onglet_title:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
|
|
/* div contenu des onglet inactifs*/
|
|
.onglets > .onglet > .onglet_content {
|
|
display: none;
|
|
}
|
|
|
|
|
|
/* div contenu des onglet actifs*/
|
|
.onglets > .active_onglet > .onglet_content {
|
|
display: block;
|
|
float: left;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 1.95em;
|
|
bottom: 0;
|
|
margin: -2px 0 0 0;
|
|
padding: 0;
|
|
border: 2px outset #0099cc;
|
|
width: 100%;
|
|
z-index: 2;
|
|
color: #000;
|
|
min-height: 5em;
|
|
background-color: #0099cc;
|
|
overflow: auto;
|
|
/*background-image: url(../images/motif.png);*/
|
|
background-attachment: fixed;
|
|
border-radius: 0 0 8px 8px;
|
|
}
|
|
|
|
.onglet_tools {
|
|
position: relative;
|
|
z-index: 3;
|
|
font-size: 1.2em;
|
|
float: right;
|
|
top: -1.4em;
|
|
margin: 0 0.25em;
|
|
display: block;
|
|
cursor: pointer;
|
|
padding: 0 0.25em 0.15em 0.25em;
|
|
}
|
|
|
|
.onglet_tools:hover {
|
|
color: white;
|
|
background-color: red;
|
|
border-radius: 8px;
|
|
} |