LOGO

AccueilAccueil  PortailPortail  CalendrierCalendrier  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  Connexion  

Partagez | 
 

 Code Onglets

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
avatar
Admin



Messages : 520
Date d'inscription : 17/12/2009
Age : 21
Localisation : Sur le forum, en train de moderer vos paves de textes!

Feuille de Superheros/Supervillain - Mutant
Sexe: Masculin
Jauge de vie du Superheros/Supervillain - Mutant:
0/0  (0/0)

MessageSujet: Code Onglets   Sam 30 Mar - 12:59

HTML

Code:
<div class="système_onglet"><!--
    --><input id="onglet-1" type="radio" name="radio-set" class="onglet-select-1" checked="checked" /><!--
    --><label for="onglet-1" class="onglet-nom-1">Onglet 1</label><!--
   
    --><input id="onglet-2" type="radio" name="radio-set" class="onglet-select-2" /><!--
    --><label for="onglet-2" class="onglet-nom-2">Onglet 2</label><!--
   
    --><input id="onglet-3" type="radio" name="radio-set" class="onglet-select-3" /><!--
    --><label for="onglet-3" class="onglet-nom-3">Onglet 3</label><!--
   
    --><input id="onglet-4" type="radio" name="radio-set" class="onglet-select-4" /><!--
    --><label for="onglet-4" class="onglet-nom-4">Onglet 4</label><!--
           
               
    --><div class="contenu"><!--
        --><div class="contenu-1">Contenu 1</div><!--
        --><div class="contenu-2">Contenu 2</div><!--
        --><div class="contenu-3">Contenu 3</div><!--
        --><div class="contenu-4">Contenu 4</div><!--
    --></div><!--
--></div>
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://dc-marvel-rpg.forumactif.com
avatar
Admin



Messages : 520
Date d'inscription : 17/12/2009
Age : 21
Localisation : Sur le forum, en train de moderer vos paves de textes!

Feuille de Superheros/Supervillain - Mutant
Sexe: Masculin
Jauge de vie du Superheros/Supervillain - Mutant:
0/0  (0/0)

MessageSujet: Re: Code Onglets   Sam 30 Mar - 13:01

CSS

Code:
/*ONGLETS*/
.système_onglet {
    position: relative;
    margin: auto;
    width: 490px;
}
 
.système_onglet input {
position: absolute;
z-index: 999;
width: 15px;
height: 15px;
margin-left: 226px;
top: -3px;
opacity: 0;
cursor: pointer;
}

.système_onglet input#onglet-2 {
left: 24px;
}

.système_onglet input#onglet-3{
    left: 155px; /* valeur égale à la largeur1 + valeur2 + distance entre deux onglets (10px)
                donc ici : 15 + 30 + 10 = 55px ; on nommera cette valeur valeur3  */
}

.système_onglet input#onglet-4{
    left: 180px; /* valeur égale à la largeur1 + valeur3 + distance entre deux onglets (10px)
                donc ici : 15 + 55 + 10 = 85px  */
}

.système_onglet input#onglet-5{
    left: 205px; /* valeur égale à la largeur1 + valeur3 + distance entre deux onglets (10px)
                donc ici : 15 + 80 + 10 = 395px  */
}

.système_onglet input#onglet-6{
    left: 230px; /* valeur égale à la largeur1 + valeur3 + distance entre deux onglets (10px)
                donc ici : 15 + 110 + 10 = 135px  */
}

.système_onglet input#onglet-7{
    left: 255px; /* valeur égale à la largeur1 + valeur3 + distance entre deux onglets (10px)
                donc ici : 15 + 135 + 10 = 160px  */
}

.système_onglet input#onglet-8{
    left: 280px; /* valeur égale à la largeur1 + valeur3 + distance entre deux onglets (10px)
                donc ici : 15 + 85 + 10 = 395px  */
}

.système_onglet input#onglet-9{
    left: 305px; /* valeur égale à la largeur1 + valeur3 + distance entre deux onglets (10px)
                donc ici : 15 + 85 + 10 = 395px  */
}

.système_onglet input#onglet-10{
    left: 330px; /* valeur égale à la largeur1 + valeur3 + distance entre deux onglets (10px)
                donc ici : 15 + 85 + 10 = 395px  */
}

.système_onglet input#onglet-11{
    left: 355px; /* valeur égale à la largeur1 + valeur3 + distance entre deux onglets (10px)
                donc ici : 15 + 85 + 10 = 395px  */
}

/* style des onglets */
.système_onglet label {
    background-color: ;
    border-radius: 200px;
    height: 15px;
    width: 15px;
    position: relative;
    float: left;
    margin-right: 10px;
}

/* style d'un onglet au survol */
.système_onglet input:hover + label {
    border-color: red;
 
    position: relative;
    float: left;
    margin-right: 10px;
}
 
.système_onglet label:first-of-type {
    z-index: 11;
    margin-left: 5px;
}
 
.onglet-nom-2 {
    z-index: 10;
}
 
.onglet-nom-3 {
    z-index: 9;
}
 
.onglet-nom-4 {
    z-index: 8;
}

.onglet-nom-5 {
    z-index: 7;
}

.onglet-nom-6 {
    z-index: 6;
}

.onglet-nom-7 {
    z-index: 5;
}

.onglet-nom-8 {
    z-index: 4;
}

.onglet-nom-9 {
    z-index: 3;
}

.onglet-nom-10 {
    z-index: 2;
}

.onglet-nom-11 {
    z-index: 1;
}


/* style de l'onglet sélectionné */
.système_onglet input:checked + label {
    z-index: 6;
}
 
/* style du contenu des onglets */
.contenu div {
    position: absolute;
    top: 20px;
    left: 0;
    padding: 10px 40px;
    z-index: 1;
    opacity: 0;
    transition: all linear 0.1s;
  width: 460px;
}

.système_onglet input.onglet-select-1:checked ~ .contenu .contenu-1,
.système_onglet input.onglet-select-2:checked ~ .contenu .contenu-2,
.système_onglet input.onglet-select-3:checked ~ .contenu .contenu-3,
.système_onglet input.onglet-select-4:checked ~ .contenu .contenu-4,
.système_onglet input.onglet-select-5:checked ~ .contenu .contenu-5,
.système_onglet input.onglet-select-6:checked ~ .contenu .contenu-6,
.système_onglet input.onglet-select-7:checked ~ .contenu .contenu-7,
.système_onglet input.onglet-select-8:checked ~ .contenu .contenu-8,
.système_onglet input.onglet-select-9:checked ~ .contenu .contenu-9,
.système_onglet input.onglet-select-10:checked ~ .contenu .contenu-10,
.système_onglet input.onglet-select-11:checked ~ .contenu .contenu-11
{
    z-index: 100;
    opacity: 1;
}

/*pastilles*/

.architecte{
        height: 15px;
        width: 15px;
   border-radius: 200px;
   background-color: #fca74c;
   color: #fca74c;
   box-shadow: 0px 0px 4px #ffb566;
   text-align: center;}

.joker{
   height: 15px;
   width: 15px;
   border-radius: 200px;
   background-color: #fcad58;
   color: #fcad58;
   box-shadow: 0px 0px 4px #ffbb73;
   text-align: center;
}

.gestion{
   height: 15px;
   width: 15px;
   border-radius: 200px;
   background-color: #fcb365;
   color: #fcb365;
   box-shadow: 0px 0px 4px #ffc180;
   text-align: center;
}

.comm{
   height: 15px;
   width: 15px;
   border-radius: 200px;
   background-color: #fcb972;
   color: #fcb972;
   box-shadow: 0px 0px 4px #ffc88c;
   text-align: center;
}

.inte{
   height: 15px;
   width: 15px;
   border-radius: 200px;
   background-color: #fcbf7e;
   color: #fcbf7e;
   box-shadow: 0px 0px 4px #ffce99;
   text-align: center;
}

.tete{
   height: 15px;
   width: 15px;
   border-radius: 200px;
   background-color: #fcc68b;
   color: #fcc68b;
   box-shadow: 0px 0px 4px #ffd4a6;
   text-align: center;
}
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://dc-marvel-rpg.forumactif.com
avatar
Admin



Messages : 520
Date d'inscription : 17/12/2009
Age : 21
Localisation : Sur le forum, en train de moderer vos paves de textes!

Feuille de Superheros/Supervillain - Mutant
Sexe: Masculin
Jauge de vie du Superheros/Supervillain - Mutant:
0/0  (0/0)

MessageSujet: Re: Code Onglets   Sam 30 Mar - 14:09

Code:
<center><table class="cadrepv01" align="center" style="background: url('http://data.nimages.fr/e6t.png'); margin: auto;"><tr><td valign="top"><div class="pvleft"><div class="texteinterne">BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA  BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA  BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA  BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA  BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA  BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA  BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA  BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA</div></div></td><td valign="top"><img src="http://data.nimages.fr/1jwd.png" class="imagelogo"></td><td valign="top"><div class="pvright"><div class="texteinterne">BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA  BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA  BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA  BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA  BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA  BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA  BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA  BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA</div></div></td></tr><tr><td><div class="liensicones"><img src="http://data.nimages.fr/1jwd.png"><img src="http://data.nimages.fr/1fqi.png"><img src="http://data.nimages.fr/1bk8.png"><img src="http://data.nimages.fr/1jwd.png"><img src="http://data.nimages.fr/1fqi.png"><img src="http://data.nimages.fr/1bk8.png"></div></td><td></td><td><div class="liensicones2"><img src="http://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/actions/identity.png"> <img src="http://cdn1.iconfinder.com/data/icons/bnw/128x128/apps/kghostview.png"> <img src="http://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/apps/quick_restart.png"> <img src="http://cdn3.iconfinder.com/data/icons/softicons/PNG/Book.png"></div></td></tr></table></center>

Ça ressemble à ça :

http://humanitas.forum-canada.com/t2-sujet-tests-pvs
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://dc-marvel-rpg.forumactif.com
avatar
Admin



Messages : 520
Date d'inscription : 17/12/2009
Age : 21
Localisation : Sur le forum, en train de moderer vos paves de textes!

Feuille de Superheros/Supervillain - Mutant
Sexe: Masculin
Jauge de vie du Superheros/Supervillain - Mutant:
0/0  (0/0)

MessageSujet: Re: Code Onglets   Mer 4 Sep - 15:24

in a world where no one understands, it's good to find someone who can, you know me better than i know myself. don't care what they say don't care what this world thinks, we got each other that's all we need, and you show me, i don't need nothing else. call me crazy, call me a fool. call me crazy, maybe it's true. but i'm crazy 'bout you, i can't help it, there's nothing i can do. i'm crazy bout you. and i love it cause i know you're crazy bout me too.

TÉLÉPHONE | FORMSPRING | LIENS
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://dc-marvel-rpg.forumactif.com
Contenu sponsorisé




MessageSujet: Re: Code Onglets   

Revenir en haut Aller en bas
 

Code Onglets

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» [SOFT] MOBILETAG CODE BARRE READER V3.06 : Lecteur code barre 1D/2D.. avec e-comparateur de prix [GRATUIT]
» 2011 - CamaC4 : AK bâchée ELIGOR - Code 1 - Décoration CAMAC
» [AIDE]Modifier les applis associées au onglets du bas (slider)
» [Upgrade code error]HTC HD bloqué écran tri-couleurs
» [SOFT] CODE DE LA ROUTE : Entrainez-vous [Gratuit]

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
They Coined It :: Accès pour tous-