AccueilAccueil  CalendrierCalendrier  FAQFAQ  RechercherRechercher  MembresMembres  S'enregistrerS'enregistrer  ConnexionConnexion  
Bienvenue sur Entraide, Invité ! (=
Nous recrutons un Staff complet! => Forum recrutement.

Partagez | 
 

 Codage : tableau à onglet

Aller en bas 
AuteurMessage
kokoro mai
Entraide-Membre
avatar

Messages : 11
Date d'inscription : 02/03/2011

MessageSujet: Codage : tableau à onglet   Sam 5 Mar - 19:57

Bonsoir, excusez moi de vous éranger, je me perd pas mal avec tous le codages en languages html , pourriez vous m'aidez s'il vous plaît.

Nature de la demande: je souhaîte faire un tableau à onglet, j'ai commencé le mien, il n'y a pas longtemps mais j'aimerais de l'aide, je vous fournit mon code

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tuto faire une en tete sous forme d'onglet</title>

<style>
/**** Structure de l'en-tête ****/

body{
  background-color:transparent;
  }

#en_tete{
  width:800px;
  min-height:400px;
  height:auto;
  color:#1a3a2f;
  font-family: Comic sans ms;
  border:1px solid #dedbc0;
  margin:auto;
  }
 
#en_tete tr{
  vertical-align:top;
  }
 
#en_tete img{
  border:0;
  }
 
span.onglet{
  float:left;
  }
 
 span.onglet img:hover{
  cursor:pointer;
  }

#en_tete  .bloc_texte{ 
  position:absolute;
  margin-top:0;
  }
 
/** Onglet 1 **/

#en_tete  #onglet1{
  background-image:url("http://i78.servimg.com/u/f78/15/48/31/66/fond_e10.jpg");
  background-repeat:no-repeat;
  background-position:top;
  width:900px;
  min-height:339px;
  margin-left:-35px;
  }
 
#en_tete  #onglet1 .contenu{
  width:296px;
  height:auto;
  background-image:url("http://www.future.fr/telecharger/ressources/images/textures/rose/pink059.jpg");
  border:white 1px solid;
  margin-left:497px;
  margin-right:9px;
  text-align:center;
  font-size:12px;
  margin-top:10px;
  }


#en_tete  #onglet1 .contenu p{
  padding-left:12px;
  padding-right:12px;
  padding-top:2px;
  padding-bottom:2px;
  }
 
#en_tete  #onglet1 .infos{
  font-size:10px;
  margin-left:220px;
  margin-top:-40px;
  }
 
/** Onglet 2 **/

#en_tete  #onglet2{
  background-image:url("http://i78.servimg.com/u/f78/15/48/31/66/fond_e10.jpg");
  background-repeat:no-repeat;
  background-position:top;
  width:800px;
  min-height:339px;
  margin-left:-220px;
  }
 
#en_tete  #onglet2 .contenu{
  width:600px;
  height:auto;
  margin:auto;
  text-align:center;
  font-size:14px;
  margin-top:10px;
  }
 
#en_tete  #onglet2 .infos{
  font-size:10px;
  margin-left:30px;
  margin-top:90px;
  }
 
/** Onglet 3 **/

#en_tete  #onglet3{
  background-image:url("images/fd_onglet.png");
  background-repeat:no-repeat;
  background-position:top;
  width:800px;
  min-height:339px;
  margin-left:-400px;
  }

#en_tete  #onglet3  #liste{
  width:225px;
  height:160px;
  margin-left:35px;
  background-image:url("images/fd_texte.png");
  border:white 1px solid;
  font-size:12px;
  }
 
#en_tete  #onglet3  #texte{
  width:500px;
  height:auto;
  margin-left:285px;
  margin-right:15px;
  margin-top:-160px;
  background-image:url("images/fd_texte.png");
  border:white 1px solid;
  text-align:center;
  font-size:14px;
  }
 
#en_tete  #onglet3 .infos{
  font-size:10px;
  margin-left:30px;
  margin-top:10px;
  }
 
/** Onglet 4 **/

#en_tete  #onglet4{
  background-image:url("images/fd_onglet.png");
  background-repeat:no-repeat;
  background-position:top;
  width:800px;
  min-height:339px;
  margin-left:-584px;
  }


#en_tete  #onglet4 .infos{
  font-size:14px;
  margin-left:50px;
  margin-top:50px;
  }
  </style>
</head>


<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.pvereecken.fr/Tuto_SoP/tuto_entete_onglet/js_onglet.js"></script>


<body>

<div id="en_tete">


<span class="onglet">
  <div class="navigation"><img src="http://i78.servimg.com/u/f78/15/48/31/66/bienve10.jpg"

style="height:61px;width:185px" alt="Bienvenu {USERNAME}" onMouseOver="this.src ='images/nav_hover_02.png';" onMouseOut="this.src = 'images/nav_02.png';" /></div>
  <div class="bloc_texte" id="onglet1">
      <div class="contenu">
        <p>Soyez prudent ! Ne perdez pas la tête ! Tâchez de rester calme ... Vous vevez d'atterir dans un vaste univers... celui de Pandora Hearts.
Tous les membres te souhaitent un bon atterrissage sur ce forum kokoro mai ! Vous êtes nouveau! Vous êtes perdus ! Ne vous inquiètez pas, ce n'est pas un monde dangereux, juste un peu loufoque ! Nous aurons la joie de vous aider !
Après avoir été inscrit ( et après l'activation de votre compte ), lisez le règlement et ne soyez pas timide, nous aimerions vous connaître .Vous avez des questions ? Un topic a été crée pour ça ! Ou allez à la FAQ ou au dernier recours vous pouvez m'envoyer un MP .
Nous espérons que vous passerez un agréable moment parmi nous sur ce modeste forum ( pas connu du tout ^^' )Merci :)

</p>
      </div>
      <div class="infos">
        <p> * * *</p>
      </div>     
  </div>
</span>

<span class="onglet">
  <div class="navigation"><img src="http://i78.servimg.com/u/f78/15/48/31/66/staff_10.jpg" style="height:61px;width:180px" alt="Le Staff" onMouseOver="this.src ='images/nav_hover_03.png';" onMouseOut="this.src = 'ihttp://i78.servimg.com/u/f78/15/48/31/66/staff_10.jpg';" /></div>
  <div class="bloc_texte" id="onglet2">
      <div class="contenu">
        <p><a href="http://pandora-hearts-manga.forums-actifs.com/u1"><center><img src="http://r18.imgfast.net/users/1814/17/58/62/avatars/1-22.jpg"</center></a>

<a href="http://pandora-hearts-manga.forums-actifs.com/u2">
<center><img src="http://r18.imgfast.net/users/1814/17/58/62/avatars/2-78.jpg"</center></a>

<a href="http://pandora-hearts-manga.forums-actifs.com/u6">
<p align="right"><img src="http://r18.imgfast.net/users/1814/17/58/62/avatars/6-14.jpg"</p></a>

<a href="http://pandora-hearts-manga.forums-actifs.com/u8">
<img src="http://r18.imgfast.net/users/1814/17/58/62/avatars/8-27.jpg"</a>
      </div>
      <div class="infos">
        <p>Ceci est l'onglet 2</p>
      </div>     
  </div>
</span>

<span class="onglet">
  <div class="navigation"><img src="images/nav_04.png" style="height:61px;width:184px" alt="Mon onglet 3" onMouseOver="this.src ='images/nav_hover_04.png';" onMouseOut="this.src = 'images/nav_04.png';" /></div>
  <div class="bloc_texte" id="onglet3">
      <div class="contenu" id="liste">
        <ul>
            <li>point 1</li>
            <li>point 2</li>
            <li>point 3</li>
        </ul>
      </div>
      <div class="contenu" id="texte">
        <p>Vide pour l'instant</p>
      </div>
      <div class="infos">
        <p>Ceci est l'onglet 3</p>
      </div>     
  </div>
</span>

<span class="onglet">
  <div class="navigation"><img src="images/nav_05.png" style="height:61px;width:180px" alt="Mon onglet 4" onMouseOver="this.src ='images/nav_hover_05.png';" onMouseOut="this.src = 'images/nav_05.png';" /></div>
  <div class="bloc_texte" id="onglet4">
      <div class="infos">
        <p>Ceci est l'onglet 4</p>
      </div>     
  </div>
</span>

<span class="onglet"><img src="images/nav_06.png" style="height:61px;width:36px" alt="nav" /></span>

</div>

</body>

</html>

( j'ai créer une page html dans le panneau d'administration pour faire la page d'accueil )

Lien où le code sera utilisé: [Vous devez être inscrit et connecté pour voir ce lien]
Illustration:
Spoiler:
 
Autres indications: Pour l'instant, c'est bon ... je crois


Merci beaucoup et bonne soirée !
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://pandora-hearts-manga.forums-actifs.com/
PatMax
Entraide-Membre
avatar

Messages : 4
Date d'inscription : 25/02/2011

MessageSujet: Re: Codage : tableau à onglet   Dim 13 Mar - 10:05

Elle consiste en quoi ta demande ?
Tu veux de l'aide OK, mais à quel niveau tu bloques ?
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.patmax.info
 
Codage : tableau à onglet
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Tableau à onglet dans le QEEL
» Tableau à onglet.
» Mon tableau à onglet dépasse du tableau de la page d'acceuil
» J'aimerai faire un tableau à onglet
» Vrai-faux tableau à onglet

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Entraide :: Section privé :: ---Corbeille-
Sauter vers:  


©-Entraide 2010-2011, tous droits réservés. Il est interdit de copier, totalement ou partiellement entraide. Sous peine de poursuites.
Forum optimisé pour Mozilla Firefox.
Créer un forum | © phpBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit