Forum Crea illusion Fantasy
A quoi sert le forum ?
Ce forum est liée à mon site Crea illusion Fantasy. Un plus pour vous aidez dans vos créations.Vous ne savez pas créer, et vous recherchez une création personnalisée. Le forum vous écoutera vos demandes.
Plusieurs sections :
Des aides: pour votre forum,votre site ou blog.Des tutoriels(photoshop,paintshop,gimp,photofiltre,ect...).Demandes de créations personnalisées. Aide pour prendre en main vos logiciels.Des tutos, des scripts. aides pour le logiciel Flash..... Des concours, des challenges, des duels. Vous y trouverez un accueil sympathique.
Au plaisir de vous lire sur le forum. D'autres choses à venir découvrir sur le forum de Créa illusion Fantasy.

N'hésitez pas à venir vous inscrire.


Aides & Conseils pour le graphisme & forum & site web & blog & tout autres supports.
 
AccueilPortailFAQPublicationsPublicationsS'enregistrerConnexion
Votre bannière ici,Faite la demande dans la catégorie: La place Public


Partagez | .
 

 Un tableau ou menu horizontal, à onglets, tout en CSS

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


avatar


Messages : 6726
Venue : 27/06/2009 Je suis: : Féminin
Né(e) le : 17/09/1963
Age : 53
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 8990

MessageSujet: Un tableau ou menu horizontal, à onglets, tout en CSS   Mar 23 Mai - 20:52


Coucou

Voici le code pour faire un tableau avec un menu , proposant des images, des annonces, des vidéos si vous le souhaitez.

Code Html:
Code:


<div id="menu-tab"><!----------------tableau-01---------------------------------->
<div id="page-wrap">
<div class="tabs"><!----------------onglet-01-accueil-------------------------->
<div class="tab"><input id="tab-1" checked="checked" name="tab-group-1" type="radio" /> <label for="tab-1">Accueil</label>
<div class="content">
<p><a href="#">Retour Acceuil</a></p>
<p><a href="#">Contact</a></p>
<p><a href="#">Newsletter</a></p>
</div>
</div>
<!----------------onglet-02-articles-------------------------->
<div class="tab"><input id="tab-2" name="tab-group-1" type="radio" /> <label for="tab-2">Articles</label>
<div class="content">
<p>Exemple, une image, du texte</p>
<br />
<p><img src="http://ekladata.com/UM-RXN_kZ3q93_FwWhFA15FP_uc.jpg" alt="" /></p>
</div>
</div>
<!----------------onglet-03-forum-------------------------->
<div class="tab"><input id="tab-3" name="tab-group-1" type="radio" /> <label for="tab-3">Forum</label>
<div class="content">
<p>Exemple, une image, et une video...</p>
<br />
<p><img src="http://ekladata.com/UM-RXN_kZ3q93_FwWhFA15FP_uc.jpg" alt="" /> <iframe style="margin-left: 30px; box-shadow: 6px 6px 10px grey;" src="http://player.vimeo.com/video/36778024" frameborder="0" width="500" height="281"></iframe></p>
</div>
</div>
<!----------------onglet-04-libre-------------------------->
<div class="tab"><input id="tab-4" name="tab-group-1" type="radio" /> <label for="tab-4">Video-1</label>
<div class="content">
<p>Une vidéo de Constance..!</p>
<br /> <iframe src="//www.youtube.com/embed/LU2BQY_Doio?rel=0" frameborder="0" width="420" height="315" allowfullscreen="allowfullscreen"></iframe></div>
</div>
<!----------------onglet-05-libre------------------------->
<div class="tab"><input id="tab-5" name="tab-group-1" type="radio" /> <label for="tab-5">Video-2</label>
<div class="content"><br /> <iframe src="//www.youtube.com/embed/I3W3mRs4ULQ?rel=0" frameborder="0" width="560" height="315" allowfullscreen="allowfullscreen"></iframe></div>
</div>
</div>
<!----------------onglet-06-libre--------------------------
<div class="tab"><input id="tab-6" name="tab-group-1" type="radio" /> <label for="tab-6">Codes</label>
<div class="content">
<p>Code CSS</p>
<br /> <iframe src="//www.youtube.com/embed/LU2BQY_Doio?rel=0" frameborder="0" width="420" height="315" allowfullscreen="allowfullscreen"></iframe></div>
</div>
</div>---></div>
</div>
<p><br /><br /><br /></p>


Code CSS:
Code:
/*-----------------------------------------*/
* {
    margin: 0;
    padding: 0;
  
    }
#menu-tab {
    /*background: white;*/
    font-family: 'trebuchet ms', geneva;
    font-size: 11pt;
    color:black;
    }
    
#menu-tab a {
color: grey;
font-weight: normal;
font-style: normal;
text-decoration: none;
font-variant: normal;
}
#menu-tab a:hover{
color: green;

}
    
/*--------------Dimensions tableau--------------*/

#page-wrap {
      width: 70%;
      margin: 10px auto;
      
    }
    
/*--------------Onglets--------------*/

.tabs {
      position: relative;  
      min-height: 480px; /* This part sucks */
      clear: both;
      margin: 25px 0;
    }
    .tab {
      float: left;
    }
    .tab label {
      background: rgba(170, 185, 185, 0.97);
      padding: 10px;
      border: 1px solid #ccc;
      margin-left: -1px;
      position: relative;
      left: 1px;
      border-radius: 10px 10px 0px 0px;
      box-shadow: 3px -3px 6px rgba(0, 0, 0, 0.71);
    }
    .tab [type=radio] {
      display: none;  
    }
    
/*--------------Contenu article onglet--------------*/
    .content {
      position: absolute;
      top: 28px;
      left: 0;
      background: white;
      right: 0;
      bottom: 0;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 0px 10px 10px 10px;
      box-shadow:6px 6px 10px rgba(0, 0, 0, 0.41);
      overflow: hidden;
      overflow-y: auto;
      margin-bottom: -20px;
    }
    .content > * {
      opacity: 0;
      
      -webkit-transform: translate3d(0, 0, 0);
    
      -webkit-transform: translateX(-100%);
      -moz-transform:    translateX(-100%);
      -ms-transform:     translateX(-100%);
      -o-transform:      translateX(-100%);
      
      -webkit-transition: all 0.6s ease;
      -moz-transition:    all 0.6s ease;
      -ms-transition:     all 0.6s ease;
      -o-transition:      all 0.6s ease;
    }
    
/*-------------Onglets actifs--------------*/

    [type=radio]:checked ~ label {
      background: white;
      border-bottom: 1px solid white;
      z-index: 2;
    }
    [type=radio]:checked ~ label ~ .content {
      z-index: 1;
    }
    [type=radio]:checked ~ label ~ .content > * {
      opacity: 1;
      
      -webkit-transform: translateX(0);
      -moz-transform:    translateX(0);
      -ms-transform:     translateX(0);
      -o-transform:      translateX(0);
    }
/*--------------Images--------------*/

    .content img {
    border:4px solid white;
    box-shadow:6px 6px 10px grey;
    -webkit-transition: all 0.6s ease;
      -moz-transition:    all 0.6s ease;
      -ms-transition:     all 0.6s ease;
      -o-transition:      all 0.6s ease;
    }
    
    .content img:hover {
    opacity: 0.8;
    -webkit-transform: rotate(7deg);
      -moz-transform:    translateX(0);
      -ms-transform:     translateX(0);
      -o-transform:      translateX(0);
      -webkit-transition: all 0.6s ease;
      -moz-transition:    all 0.6s ease;
      -ms-transition:     all 0.6s ease;
      -o-transition:      all 0.6s ease;
      }

Voici le rendu final

[Vous devez être inscrit et connecté pour voir cette image]
Revenir en haut Aller en bas
http://www.creaillusionfantasy.com/
 

Un tableau ou menu horizontal, à onglets, tout en CSS

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

 Sujets similaires

-
» Menu Horizontal
» Juste changer la couleur de la police du menu horizontal
» Menu Horizontal et Déroulant
» Créer un menu horizontal en accordéon
» Créer un menu horizontal qui défile

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Forum Crea illusion Fantasy  :: Sites web-