Partagez|

[CREAPHY] Présentation 3 onglets + description rapide

Voir le sujet précédent Voir le sujet suivant Aller en bas

avatar

I am Pyphilia

Messages : 325
Points : 613
Date d'inscription : 03/02/2011
Age : 19

MessageSujet: [CREAPHY] Présentation 3 onglets + description rapide Jeu 27 Fév - 20:37



HTML
Code:
<div style="text-align:center">
<div id="img">
   <img src="http://img15.hostingpics.net/pics/454036jh14.png"/>
   <span class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis placerat, mauris vitae tempus auctor, tortor purus hendrerit arcu, sed iaculis lectus nisi posuere est. Donec et bibendum nisi. Nullam porta porta elit, non faucibus neque pretium non. </span>
</div>
<div id="onglets">
   <div class="tab1 onglet"><span class="tab"><span class="title">Titre</span>
<div style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis placerat, mauris vitae tempus auctor, tortor purus hendrerit arcu, sed iaculis lectus nisi posuere est. Donec et bibendum nisi. Nullam porta porta elit, non faucibus neque pretium non. Praesent tempus, massa eget placerat sollicitudin, nibh mi semper turpis, ut fringilla metus urna vel nunc. Sed erat lorem, posuere eu urna sit amet, suscipit ornare est. Aliquam erat volutpat. Nulla facilisi. Aenean commodo ante enim. Integer nec massa in lorem venenatis accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In nibh nisl, varius non enim et, faucibus laoreet leo. Vestibulum ut congue tortor, quis tristique arcu. Nullam feugiat ligula non varius blandit.

Suspendisse consequat hendrerit luctus. Aliquam erat volutpat. Mauris cursus tempus lobortis. Cras vulputate fermentum lorem interdum mollis. Vivamus ut scelerisque nunc. Fusce dictum ipsum lacus, a tincidunt massa posuere sit amet. Fusce malesuada massa malesuada, iaculis mauris ut, rutrum enim. Nam eget luctus enim, ac convallis felis. Nunc vel nisi risus. Morbi lacinia nisi cursus, tincidunt sem eu, adipiscing mi. Vestibulum congue purus tellus, sed volutpat nisi congue eu. Etiam tempor nunc vel lectus venenatis, placerat malesuada urna ultricies. Donec molestie, lacus eu dapibus aliquam, dolor mi tempor quam, sit amet lacinia ante est ac urna. Suspendisse vel lacus fermentum, varius augue molestie, volutpat libero.
</div>
</span>
   </div>
   <div class="tab2 onglet" style="width:340px;opacity:1;">
   <span class="tab">
   <span class="title">Titre</span>
      <div style="">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis placerat, mauris vitae tempus auctor, tortor purus hendrerit arcu, sed iaculis lectus nisi posuere est. Donec et bibendum nisi. Nullam porta porta elit, non faucibus neque pretium non. Praesent tempus, massa eget placerat sollicitudin, nibh mi semper turpis, ut fringilla metus urna vel nunc. Sed erat lorem, posuere eu urna sit amet, suscipit ornare est. Aliquam erat volutpat. Nulla facilisi. Aenean commodo ante enim. Integer nec massa in lorem venenatis accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In nibh nisl, varius non enim et, faucibus laoreet leo. Vestibulum ut congue tortor, quis tristique arcu. Nullam feugiat ligula non varius blandit.
</div>
</span>
   </div>
   <div class="tab3 onglet"><span class="tab"><span class="title">Titre</span>
      <div style="">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis placerat, mauris vitae tempus auctor, tortor purus hendrerit arcu, sed iaculis lectus nisi posuere est. Donec et bibendum nisi. Nullam porta porta elit, non faucibus neque pretium non. Praesent tempus, massa eget placerat sollicitudin, nibh mi semper turpis, ut fringilla metus urna vel nunc. Sed erat lorem, posuere eu urna sit amet, suscipit ornare est. Aliquam erat volutpat. Nulla facilisi. Aenean commodo ante enim. Integer nec massa in lorem venenatis accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In nibh nisl, varius non enim et, faucibus laoreet leo. Vestibulum ut congue tortor, quis tristique arcu. Nullam feugiat ligula non varius blandit.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis placerat, mauris vitae tempus auctor, tortor purus hendrerit arcu, sed iaculis lectus nisi posuere est. Donec et bibendum nisi. Nullam porta porta elit, non faucibus neque pretium non. Praesent tempus, massa eget placerat sollicitudin, nibh mi semper turpis, ut fringilla metus urna vel nunc. Sed erat lorem, posuere eu urna sit amet, suscipit ornare est. Aliquam erat volutpat. Nulla facilisi. Aenean commodo ante enim. Integer nec massa in lorem venenatis accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In nibh nisl, varius non enim et, faucibus laoreet leo. Vestibulum ut congue tortor, quis tristique arcu. Nullam feugiat ligula non varius blandit.
      </div>
   </span>
   </div>
</div>
</div>

CSS

Code:

.title{font-size:43px;
font-family:georgia;
letter-spacing:-5px;
word-spacing:10px;
color:#915546;
text-transform:lowercase;
text-align:center;
display:block;}

#onglets, #img {display:inline-block;
   vertical-align: top;
padding:10px;
background:url(http://img11.hostingpics.net/pics/68490922pa.png) #d2c6b4;
border-top-left-radius:15px 30px;
border-bottom-right-radius:15px 30px;}

#img {
   vertical-align: middle;
   padding-top:40px;
height:520px;
}

#img img {
border:0 #bfad91 solid;
border-width:5px 0;
}

#img .desc {
   text-align: justify;
   background: rgba(255,255,255,0.6);
   display: block;
   height:150px;
   overflow:auto;
   margin-top: 10px;
   width:190px;
   padding:10px 5px;
font-family:arial;
font-size:12px;
border-radius:1px;
opacity:0.8;
color:rgba(0,0,0,0.75)
}

#onglets {
   width:410px;
height:550px;
text-align:justify;
}

#onglets .tab1, #onglets .tab2, #onglets .tab3 {
   background: #f7f4ef;
   width:10px;
   height:100%;
   display:inline-block;
   overflow:hidden;
   padding:0 5px;
opacity:0.7;
color:rgba(0,0,0,0.7);

   transition:all 1.5s;
   -moz-transition:all 1.5s;
}
#onglets .tab1:hover, #onglets .tab2:hover, #onglets .tab3:hover {opacity:1;}

#onglets div span.tab {
   display:block;
   width:310px;
   height:480px;
   margin:5px 0 0 15px;
}

#onglets div span.tab div{
overflow:auto;
height:485px;
font-family:arial;
font-size:12px;}

JQUERY

Code:
$(document).ready(function(){

      $("#onglets div.onglet")
      .mouseenter(function(){
            $("div.tab2").css("width","10px");
            $("div.tab2").css("opacity","0.7");
            $(this).css("width","340px");
         })
      .mouseleave(function(){
            $(this).css("width","10px");
            $("div.tab2").css("width","340px");
            $("div.tab2").css("opacity","1");
         });
   });
Revenir en haut Aller en bas
http://essay.forumgratuit.ch

[CREAPHY] Présentation 3 onglets + description rapide

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

Sujets similaires

-
» Catégories par onglets avec rajout d'une ligne de description
» onglets les catégories et non la description
» [Annulée] Demande de description des catégories.
» Commande Générateur de présentation
» Fiche en onglets

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Essai-Fond-Pyphilia :: Créaphy :: Codages-