Mello
Messages : 111 Date d'inscription : 08/01/2013
| Sujet: Fiche à onglets - ok Jeu 24 Juil - 18:00 | |
| | |
|
Mello
Messages : 111 Date d'inscription : 08/01/2013
| Sujet: Re: Fiche à onglets - ok Jeu 24 Juil - 18:01 | |
| - Code:
-
<!doctype html> <html> <head> <link href='http://fonts.googleapis.com/css?family=Shojumaru' rel='stylesheet' type='text/css'> <script type="text/javascript" src="http://tinyurl.com/var-fa"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="http://insanitary-test.forumactif.org/11080.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Règlement</title> <style> /* .systab .tab => les onglet */ .systab .tab { margin:auto; font-family: 'Shojumaru', cursive; padding-left:19px; padding-right:19px; padding-top:8px; padding-bottom:12px; color:black; font-size:14px; background-color: #c0c0c0;} /* .systab .tab:hover => les onglets survolés */ .systab .tab:hover { background-color: grey;} /* .systab .tab.selected => les onglets sélectionnés */ .systab .tab.selected{ background-color: grey ; } /* .systab .contents => les conteneurs des contenus associés aux onglets */ .systab .contents { margin-top:12px; background-color:#c0c0c0; border:3px solid grey; padding:10px; text-align:justify; width:938px;} #image-left{ position:absolute; top:370px;} #image-right{ position:absolute; top:370px; margin-left:801px;} #onglet-1{ margin-left:163px;} #credits{ text-align:center;} a{ color:black; font-weight:bold;} </style> </head>
<body> <img src="http://img.xooimage.com/files58/3/b/3/saison8bis-43dddfe.jpg" style="width:964px;height:364px;" /> <div id="image-left"> <img src="http://image.noelshack.com/fichiers/2014/08/1392757731-image-barre-nav.png" /></div> <div id="image-right"> <img src="http://image.noelshack.com/fichiers/2014/08/1392757731-image-barre-nav.png" /></div>
<div class="systab s_float"> <div> <span id="onglet-1">Résumé</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et pellentesque purus. Vivamus in bibendum nisl. Donec facilisis, nulla sed placerat sollicitudin, diam dolor euismod nulla, vitae molestie tellus elit eget ipsum. Sed tincidunt lobortis bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat quam non massa ullamcorper laoreet. Nam augue purus, tristique et volutpat in, malesuada et diam. Aliquam id est at sem lobortis sagittis. Nulla facilisis ornare nulla, in feugiat libero consectetur ut. Nulla dignissim orci quam, a porta augue placerat quis. Pellentesque consequat quis dui nec suscipit. </div> <div> <span>Histoire</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et pellentesque purus. Vivamus in bibendum nisl. Donec facilisis, nulla sed placerat sollicitudin, diam dolor euismod nulla, vitae molestie tellus elit eget ipsum. Sed tincidunt lobortis bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat quam non massa ullamcorper laoreet. Nam augue purus, tristique et volutpat in, malesuada et diam. Aliquam id est at sem lobortis sagittis. Nulla facilisis ornare nulla, in feugiat libero consectetur ut. Nulla dignissim orci quam, a porta augue placerat quis. Pellentesque consequat quis dui nec suscipit. </div> <div> <span>Illustrations</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et pellentesque purus. Vivamus in bibendum nisl. Donec facilisis, nulla sed placerat sollicitudin, diam dolor euismod nulla, vitae molestie tellus elit eget ipsum. Sed tincidunt lobortis bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat quam non massa ullamcorper laoreet. Nam augue purus, tristique et volutpat in, malesuada et diam. Aliquam id est at sem lobortis sagittis. Nulla facilisis ornare nulla, in feugiat libero consectetur ut. Nulla dignissim orci quam, a porta augue placerat quis. Pellentesque consequat quis dui nec suscipit. </div> <div> <span>Informations</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et pellentesque purus. Vivamus in bibendum nisl. Donec facilisis, nulla sed placerat sollicitudin, diam dolor euismod nulla, vitae molestie tellus elit eget ipsum. Sed tincidunt lobortis bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat quam non massa ullamcorper laoreet. Nam augue purus, tristique et volutpat in, malesuada et diam. Aliquam id est at sem lobortis sagittis. Nulla facilisis ornare nulla, in feugiat libero consectetur ut. Nulla dignissim orci quam, a porta augue placerat quis. Pellentesque consequat quis dui nec suscipit. </div> <div id="credits"> <span>Crédits</span> Cette fiche a été réalisée par Mello, sur <a href="http://epicode.bbactif.com">Epicode</a>. <br/> Merci de ne pas reproduire.<br/> <a href="http://epicode.bbactif.com"><img src="http://img15.hostingpics.net/pics/633916logo3.png"/></a> </div> </div>
</body> </html> | |
|