Lien d'une signature codée Bouton_activeLien d'une signature codée Bouton_hoverLien d'une signature codée Fb-hoverLien d'une signature codée Fb-active
AccueilForumÉquipe 
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Système d'onglets simple et personnalisable
Lien d'une signature codée EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
Lien d'une signature codée EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Lien d'une signature codée EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Lien d'une signature codée EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Lien d'une signature codée EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Lien d'une signature codée EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Lien d'une signature codée EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Lien d'une signature codée EmptySam 11 Fév 2023, 06:04 par Krager

Le deal à ne pas rater :
Smartphone Xiaomi 14 – 512 Go- 6,36″ 5G Double SIM à 599€
599 €
Voir le deal

CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolusPartagez
 

Lien d'une signature codée

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://instinct.naturalforum.net
Kevoune
{ Membre }
{ Membre }

Féminin Messages : 44



Lien d'une signature codée Empty
Bonjour à tous et à toutes!

Alors j'ai ici une signature codée et j'aimerais que lorsqu'on clique sur un lien, ça agisse comme un onglet dans la signa et non comme un lien menant vers une autre page.... Et donc, lorsqu'on cliquerait sur "Moi", il y aurait une petite description de moi même. Dans l'onglet "Mes signatures", on y retrouverait, évidemment, mes signatures, et ainsi de suite... xd Comment faire?? De plus, j'aimerais que lorsqu'on change d'onglet, il y ait une image de fond. Un motif par exemple...

CODE HTML
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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.footer-sign { /* Barre au bas de la signature */
  background-color: #D2C4AA; /* Couleur du fond */
  -moz-border-radius:0px 0px 5px 5px; /* Arrondissement des bordures */
  padding-left: 5px; /* Ajustement */
  padding-right: 5px; /* Ajustement */
}

.footer-link { /* Liens */
  color: #1F1F1F; /* Couleur du texte */
  font-variant: small-caps; /* Variante: petites majuscules */
  text-decoration: none !important; /* Éviter le soulignement des lien */
  margin-right: 20px; /* Ajustement */
  font-size: 12px; /* Taille du texte */

}

.footer-link:hover { /* Liens survolés */
  color: #4B4B4B; /* Couleur du texte */
  text-transform: uppercase; /* Texte en majuscule */
}

.footer-link:before {  /* Ajout du carré avant le lien */
    content: "•";   
    margin-left: 3px; /* Ajustement */
  margin-right: 3px; /* Ajustement */
  }

.footer-link:hover:before { /* Ajout de flèche avant le lien survolé */
    content: "►";   
    margin-left: 3px; /* Ajustement */
  margin-right: 3px; /* Ajustement */
  }


-->
</style></head>

<body>
<table width="420" border="0" cellspacing="0" cellpadding="0">
  <tr>

    <td width="418"><img src=" http://xtropik.net/uploads/1372851613_tropik.png" width="418" height="148" /></td>
  </tr>
  <tr>
 
    <td><div class="footer-sign"><center><a href="LIEN" target="_blank" class="footer-link">Moi</a><a href="LIEN" target="_blank" class="footer-link">Mes signatures</a><a href="LIEN" target="_blank" class="footer-link">Mes cadeaux</a></center></div></td>
  </tr>
</table>
</body>
</html>

APERÇU
Code:
http://alpha.naturalforum.net/h1-signature

Merci d'avance! Smile
MessageSujet: Lien d'une signature codée   Lien d'une signature codée EmptyMer 03 Juil 2013, 08:46
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Lien d'une signature codée Empty
Salut,

En faisant une petite recherche sur le forum, tu trouveras rapidement ton bonheur Wink
Exemple :
http://www.css-actif.com/search?mode=searchbox&search_keywords=signature+onglet&show_results=topics
MessageSujet: Re: Lien d'une signature codée   Lien d'une signature codée EmptyMer 03 Juil 2013, 10:16
Revenir en haut Aller en bas
http://instinct.naturalforum.net
Kevoune
{ Membre }
{ Membre }

Féminin Messages : 44



Lien d'une signature codée Empty
Merci pour le conseil! Malheureusement, j'ai été voir et bien que j'ai trouvé des signatures codés avec un système d'onglet, lorsque j'ai tenter d'apporter des modifications à la mienne, ça n'a fait que la déformer... Au final, j'arrive à ça:

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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

.bloc_texte{
  position:absolute;
  left:0px;
  top:0px;
  left: 0px;
  width :418px; 
  height:148px;
color: #ffffff;
 font-size: 11px;
 font-family:georgia; 
 text-decoration: none;
 border-bottom: 0px #4f4f4f solid; 
 border-top: 0px #4f4f4f solid;
 border-right: 0px #4f4f4f solid;
 border-left: 0px #4f4f4f solid; 
text-shadow: #ffffff 2px 2px 3px; 
 display:block;
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius:  0px 0px 0px 0px;
background-image: url('http://xtropik.net/uploads/1372851613_tropik.png');
-webkit-box-shadow: 1px 2px 2px 3px #000000;
-moz-box-shadow: 1px 2px 2px 3px #000000;
text-align: justify; }



<!--
.titre { /* Barre au bas de la signature */
  background-color: #D2C4AA; /* Couleur du fond */
  -moz-border-radius:0px 0px 5px 5px; /* Arrondissement des bordures */
  padding-left: 5px; /* Ajustement */
  padding-right: 5px; /* Ajustement */
}

.titre { /* Liens */
  color: #1F1F1F; /* Couleur du texte */
  font-variant: small-caps; /* Variante: petites majuscules */
  text-decoration: none !important; /* Éviter le soulignement des lien */
  margin-right: 20px; /* Ajustement */
  font-size: 12px; /* Taille du texte */

}

.titre:hover { /* Liens survolés */
  color: #4B4B4B; /* Couleur du texte */
  text-transform: uppercase; /* Texte en majuscule */
}

.titre:before {  /* Ajout du carré avant le lien */
    content: "•";   
    margin-left: 3px; /* Ajustement */
  margin-right: 3px; /* Ajustement */
  }

.titre:hover:before { /* Ajout de flèche avant le lien survolé */
    content: "►";   
    margin-left: 3px; /* Ajustement */
  margin-right: 3px; /* Ajustement */
  }


-->
</style></head>


<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
<!--
jQuery().ready(function(){
  $(".bloc_texte").hide();
  $("#1").show();
  $(".titre").mouseover(function(){
      if($(this).next("div").is(":hidden")){                 
        $(".titre").next("div:visible").hide();
        $(this).next("div").show();
      }
  }); 
});
-->
</script>

<body>
<table width="418" border="0" cellspacing="0" cellpadding="0">
 
  <tr>
  <td width="410"><img src=" http://xtropik.net/uploads/1372851613_tropik.png" width="410" height="110" /></td>

    <td><span><h1 class="titre">ONGLET 1</h1><div class="bloc_texte" id="1">CONTENU DU BLOC DE LA SIGNATURE 1</div>

<h1 class="titre">ONGLET 2</h1><div class="bloc_texte">CONTENU DU BLOC DE LA SIGNATURE 2</div>

<h1 class="titre">ONGLET 3</h1><div class="bloc_texte">CONTENU DU BLOC DE LA SIGNATURE 3</div></span>
</td>
  </tr>
</table>
</body>
</html>


http://alpha.naturalforum.net/h2-signa-test

:S
MessageSujet: Re: Lien d'une signature codée   Lien d'une signature codée EmptyJeu 04 Juil 2013, 12:40
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Lien d'une signature codée Empty
Comment ça la déformer ?
MessageSujet: Re: Lien d'une signature codée   Lien d'une signature codée EmptyJeu 11 Juil 2013, 10:49
Revenir en haut Aller en bas
http://instinct.naturalforum.net
Kevoune
{ Membre }
{ Membre }

Féminin Messages : 44



Lien d'une signature codée Empty
Bah le modèle n'est plus le même?? xd
MessageSujet: Re: Lien d'une signature codée   Lien d'une signature codée EmptyJeu 11 Juil 2013, 11:03
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Lien d'une signature codée Empty
Que le modèle ne soit plus le même c'est normal, il faut adapter tout cela à ton premier modèle au niveau du html et du css Wink
Tu as des connaissances en HTML et CSS ou pas du tout ?
MessageSujet: Re: Lien d'une signature codée   Lien d'une signature codée EmptyJeu 11 Juil 2013, 12:08
Revenir en haut Aller en bas
http://instinct.naturalforum.net
Kevoune
{ Membre }
{ Membre }

Féminin Messages : 44



Lien d'une signature codée Empty
J'en ai un peu, mais pas assez pour ça il faut croire XD
MessageSujet: Re: Lien d'une signature codée   Lien d'une signature codée EmptyVen 12 Juil 2013, 14:31
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Lien d'une signature codée Empty
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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--


.footer-link { /* Liens */
  color: #1F1F1F; /* Couleur du texte */
  font-variant: small-caps; /* Variante: petites majuscules */
  text-decoration: none !important; /* Éviter le soulignement des lien */
  margin-right: 20px; /* Ajustement */
  font-size: 12px; /* Taille du texte */

}

.footer-link:hover { /* Liens survolés */
  color: #4B4B4B; /* Couleur du texte */
  text-transform: uppercase; /* Texte en majuscule */
}

.footer-link:before {  /* Ajout du carré avant le lien */
    content: "•";   
    margin-left: 3px; /* Ajustement */
  margin-right: 3px; /* Ajustement */
  }

.footer-link:hover:before { /* Ajout de flèche avant le lien survolé */
    content: "►";   
    margin-left: 3px; /* Ajustement */
  margin-right: 3px; /* Ajustement */
  }


   .footer-sign {
      background: #D2C4AA;
      width: 420px;
      margin: 5px;
      position: relative;
      text-align: center;
      padding-top: 160px;
   }
   
   .bloc_texte {
      position: absolute;
      top: 0;
      bottom:0;
      width: 420px;
      height: 160px;
      overflow: auto;
   }
   
   
-->
</style>
</head>

<body>

<div id="signa">
   <div class="footer-sign">
      <a href="#" class="footer-link titre">Moi</a>
      <div class="bloc_texte" id="1"> <!-- Contenu affiché par défaut -->
         <img src=" http://xtropik.net/uploads/1372851613_tropik.png" width="418" height="148" />
      </div>
      
      <a href="#" class="footer-link titre">Mes signatures</a>
      <div class="bloc_texte">CONTENU DU BLOC DE LA SIGNATURE 2</div>
      
      <a href="#" class="footer-link titre">Mes cadeaux</a>
      <div class="bloc_texte">CONTENU SUPER MEGA GIGA BIEN DU BLOC DE LA SIGNATURE 3</div>      
   </div>
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

<script type="text/javascript">
   
   jQuery().ready(function(){
     $(".bloc_texte").hide();
     $("#1").show();
     $(".titre").mouseover(function(){
        if($(this).next("div").is(":hidden")){                 
          $(".titre").next("div:visible").hide();
          $(this).next("div").show();
        }
     }); 
   });
   
</script>
</body>
</html>

Quelque chose comme ceci te conviendrait-il ?
MessageSujet: Re: Lien d'une signature codée   Lien d'une signature codée EmptyVen 12 Juil 2013, 15:04
Revenir en haut Aller en bas
http://instinct.naturalforum.net
Kevoune
{ Membre }
{ Membre }

Féminin Messages : 44



Lien d'une signature codée Empty
C'est parfait!!! J'ai pu la modifier à ma guise!!! Merci beaucoup!!! <3
MessageSujet: Re: Lien d'une signature codée   Lien d'une signature codée EmptyDim 14 Juil 2013, 17:13
Revenir en haut Aller en bas
Contenu sponsorisé




Lien d'une signature codée Empty
MessageSujet: Re: Lien d'une signature codée   Lien d'une signature codée Empty
Revenir en haut Aller en bas
 

Lien d'une signature codée

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

 Sujets similaires

-
» Signature codée
» Signature codée beug ou perso
» Signature codée
» Signature Codée
» Signature codée avec Onglets

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-
ChatBox
:
AccueilAccueil  RechercherRechercher  Dernières imagesDernières images  Connexion  S'enregistrerS'enregistrer  

Partenaires Or

← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Cookies | Forum gratuit