School of Pub, où la perfection est à la portée de chacun. (Dixit Audidounette)

AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

 


Partager | 
 

 Aide en codage.

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Aller à la page : Précédent  1, 2
AuteurMessage
 

Miettes

Directrice

Voir le dossier scolaire

Directrice

Féminin Rang spécial: Designer professionnelle, formatrice analystes, codeurs, admins, animateurs, graphistes (photoshop, gimp)
Marraine

Rédactrice en chef du M-SoP

Chroniqueuse de l'émission de SoP

Nombre de messages: 44273
Age: 24
Localisation: Lille
$ops: 21186
Points: 505
Date d'inscription: 01/02/2008
Distinctions: Membre de l'EST-SoP
*** Co-Rédactrice en Chef du M-SoP ***

SoP Story

Des mises en scènes
photographiques.
Quelle équipe a
l'Oeil du photographe ?
»»Vous choisissez !««

 
MessageSujet: Re: Aide en codage.    Ven 16 Déc - 9:21

Hello Smile

On y va donc ^^

Dans le css on va donc indiquer pour les onglets

-> alignés à gauche
Code:
ul.conteneur_onglets{
   margin:0;
   padding:0;
   float:left;
}


Que chaque onglet
Code:
ul.conteneur_onglets li.onglet{

-> a un fond de couleur unie
Code:
background-color:#code_couleur;

-> Angle arrondi en haut à gauche
Code:
-webkit-border-top-left-radius: 12px;
-moz-border-radius-topleft: 12px;
border-top-left-radius: 12px;

-> Angle arrondi en bas à droite
Code:

   -webkit-border-bottom-right-radius: 12px;   
   -moz-border-radius-bottomright: 12px;   
   border-bottom-right-radius: 12px;

-> A une largeur minimum fixe et une hauteur fixe
Code:
   min-width:140px;
   width:auto;
   height:20px;

-> a des bordures
Code:
border-top:solid 2px black;
   border-left:solid 2px black;
   border-right:solid 2px black;



Ce qui nous donne par exemple :
Code:
ul.conteneur_onglets li.onglet{
   display:inline-block;
   padding:5px; /* Espace entre le bord de l'onglet et le texte */
   margin-left:4px; /* Espace entre chaque onglet */
   margin-bottom:0 !important;
   min-width:140px;
   width:auto;
   height:20px;
   background-color:#e26e26;
   border-top:solid 2px black;
   border-left:solid 2px black;
   border-right:solid 2px black;
   -webkit-border-top-left-radius: 12px;
   -webkit-border-bottom-right-radius: 12px;
   -moz-border-radius-topleft: 12px;
   -moz-border-radius-bottomright: 12px;
   border-top-left-radius: 12px;
   border-bottom-right-radius: 12px;
}


###########

Et ensuite, on travaille le rendu quand ils sont survolés
Code:
ul.conteneur_onglets li.onglet:hover{


pour que le texte se "dédouble" (bref, on ajoute une ombre)
Code:
text-shadow: Xpx Ypx Zpx #code_couleur;

X = décalage de l'ombre sur l'axe horizontal
Y = décalage de l'ombre sur l'axe vertical
Z = flou de l'ombre

ce qui donne par exemple pour cette partie
Code:
ul.conteneur_onglets li.onglet:hover{
   text-shadow: 1px 1px 4px #666666;
   }


##########

Et donc au final, le code CSS ressemble à ça

Code:
ul.conteneur_onglets{
   margin:0;
   padding:0;
   float:left;
}

ul.conteneur_onglets li.onglet{
   display:inline-block;
   padding:5px; /* Espace entre le bord de l'onglet et le texte */
   margin-left:4px; /* Espace entre chaque onglet */
   margin-bottom:0 !important;
   min-width:140px;
   width:auto;
   height:20px;
   background-color:#e26e26;
   border-top:solid 2px black;
   border-left:solid 2px black;
   border-right:solid 2px black;
   -webkit-border-top-left-radius: 12px;
   -webkit-border-bottom-right-radius: 12px;
   -moz-border-radius-topleft: 12px;
   -moz-border-radius-bottomright: 12px;
   border-top-left-radius: 12px;
   border-bottom-right-radius: 12px;
}

ul.conteneur_onglets li.onglet:hover{
   text-shadow: 1px 1px 4px #666666;
   }
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://pvereecken.fr/
 

Liam

Etudiant

Voir le dossier scolaire

Etudiant

Masculin Nombre de messages: 191
Age: 19
$ops: 289
Points: 130
Date d'inscription: 05/04/2011
SoP Story

Des mises en scènes
photographiques.
Quelle équipe a
l'Oeil du photographe ?
»»Vous choisissez !««

 
MessageSujet: Re: Aide en codage.    Ven 16 Déc - 22:18

.. 9a ne fonctionne paas, ça me met ce que je t'ai montré précédemment é_è
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://irianeth-enkidiev.forumgratuit.org/
 

Miettes

Directrice

Voir le dossier scolaire

Directrice

Féminin Rang spécial: Designer professionnelle, formatrice analystes, codeurs, admins, animateurs, graphistes (photoshop, gimp)
Marraine

Rédactrice en chef du M-SoP

Chroniqueuse de l'émission de SoP

Nombre de messages: 44273
Age: 24
Localisation: Lille
$ops: 21186
Points: 505
Date d'inscription: 01/02/2008
Distinctions: Membre de l'EST-SoP
*** Co-Rédactrice en Chef du M-SoP ***

SoP Story

Des mises en scènes
photographiques.
Quelle équipe a
l'Oeil du photographe ?
»»Vous choisissez !««

 
MessageSujet: Re: Aide en codage.    Sam 17 Déc - 22:24

Euh tu ne m'as rien montré en fait Embarassed
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://pvereecken.fr/
 

Liam

Etudiant

Voir le dossier scolaire

Etudiant

Masculin Nombre de messages: 191
Age: 19
$ops: 289
Points: 130
Date d'inscription: 05/04/2011
SoP Story

Des mises en scènes
photographiques.
Quelle équipe a
l'Oeil du photographe ?
»»Vous choisissez !««

 
MessageSujet: Re: Aide en codage.    Sam 17 Déc - 22:33

Flûte il me semblait que je l'avait déjà fait ^^'




Et voici le template complet au cas ou .. ^^'

Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
   <tr>
      <td valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall">{LAST_VISIT_DATE}<br />
         {CURRENT_TIME}<br />
         </span>
         <!-- END switch_user_logged_in -->
         <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
         <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
         <!-- END switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
   </tr>
</table>
<!-- DEBUT MODIF ONGLETS -->
 
<script type="text/javascript">
<!--
 
document.write('<div align="center" style="display:none;" id="conteneur_barre_onglet">
<ul class="conteneur_onglets">
 
<li onClick="change_cat(1)" class="onglet actif" id="onglet_1"> *Staff* </li>
<li onClick="change_cat(2)" class="onglet " id="onglet_2"> Avant d'accoster sur les continents </li>
<li onClick="change_cat(3)" class="onglet " id="onglet_3"> Bienvenue Sur Enkidiev </li>
<li onClick="change_cat(4)" class="onglet " id="onglet_4"> Premiers pas sur Irianeth ... </li>
<li onClick="change_cat(5)" class="onglet " id="onglet_5"> La salle de détente </li>
 
</ul></div>');
 
var compteur_cat = 1;
 
function change_cat(numero)
{
  if(document.getElementById('categorie_'+numero))
  {
      /* affichage de la bonne categorie */
      $('table[id^=categorie_]').css('display','none');
      $('table[id=categorie_'+numero+']').fadeIn();
   
      /* affichage du bon onglet */
      $('.actif').removeClass("actif");
      $('.onglet[id=onglet_'+numero+']').addClass("actif");
  }
}
 
function capture_cat()
{
  if(compteur_cat == 1)
  {
      document.write('<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" id="categorie_' + compteur_cat + '" >');
  }
  else
  {
      $('#conteneur_barre_onglet').css("display","block");
      document.write('<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" id="categorie_' + compteur_cat + '" style="display:none;">');
  }
 
  compteur_cat++;
}
 
//-->
</script>
 
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
 
<script type="text/javascript">
<!--
  capture_cat();
//-->
</script>
 
<!-- FIN MODIF ONGLETS -->

  <tr>
       <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
   </tr>
   <!-- END tablehead -->
   <!-- BEGIN cathead -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
         <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
               <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
         </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
   </tr>
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
      <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
         <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
         <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
               <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
         </h{catrow.forumrow.LEVEL}>
         <div class="desc_forum">{catrow.forumrow.FORUM_DESC}</div><div class="stats">{catrow.forumrow.TOPICS} sujets & {catrow.forumrow.POSTS} messages<br />{catrow.forumrow.LAST_POST}</div>
         <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
         </span>
      </td>
   
   </tr>
   <!-- END forumrow -->
   <!-- BEGIN catfoot -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
   </tr>
   <!-- END catfoot -->
   <!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://irianeth-enkidiev.forumgratuit.org/
 

Miettes

Directrice

Voir le dossier scolaire

Directrice

Féminin Rang spécial: Designer professionnelle, formatrice analystes, codeurs, admins, animateurs, graphistes (photoshop, gimp)
Marraine

Rédactrice en chef du M-SoP

Chroniqueuse de l&#39;émission de SoP

Nombre de messages: 44273
Age: 24
Localisation: Lille
$ops: 21186
Points: 505
Date d'inscription: 01/02/2008
Distinctions: Membre de l'EST-SoP
*** Co-Rédactrice en Chef du M-SoP ***

SoP Story

Des mises en scènes
photographiques.
Quelle équipe a
l'Oeil du photographe ?
»»Vous choisissez !««

 
MessageSujet: Re: Aide en codage.    Lun 19 Déc - 12:51

Coucou Smile

En fait, pour que ça fonctionne, il faut que ton forum ait exactement les memes catégories que ton forum. Sinon, le code ne sait pas quel onglet correspond à tel catégorie Smile
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://pvereecken.fr/
 

Liam

Etudiant

Voir le dossier scolaire

Etudiant

Masculin Nombre de messages: 191
Age: 19
$ops: 289
Points: 130
Date d'inscription: 05/04/2011
SoP Story

Des mises en scènes
photographiques.
Quelle équipe a
l'Oeil du photographe ?
»»Vous choisissez !««

 
MessageSujet: Re: Aide en codage.    Lun 19 Déc - 13:03

Tu parle des noms des catégories ? C'est le cas j'ai fait du copier/coller j'ai fait correspondre les numéros à la place de la catégorie (savais pas si c'était utile mais bon xD) du coup je vois pas trop ce qui bug =/
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://irianeth-enkidiev.forumgratuit.org/
 

Miettes

Directrice

Voir le dossier scolaire

Directrice

Féminin Rang spécial: Designer professionnelle, formatrice analystes, codeurs, admins, animateurs, graphistes (photoshop, gimp)
Marraine

Rédactrice en chef du M-SoP

Chroniqueuse de l&#39;émission de SoP

Nombre de messages: 44273
Age: 24
Localisation: Lille
$ops: 21186
Points: 505
Date d'inscription: 01/02/2008
Distinctions: Membre de l'EST-SoP
*** Co-Rédactrice en Chef du M-SoP ***

SoP Story

Des mises en scènes
photographiques.
Quelle équipe a
l'Oeil du photographe ?
»»Vous choisissez !««

 
MessageSujet: Re: Aide en codage.    Lun 19 Déc - 13:38

Tu peux me donner le lien de ton forum de test stp ? Smile
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://pvereecken.fr/
 

Liam

Etudiant

Voir le dossier scolaire

Etudiant

Masculin Nombre de messages: 191
Age: 19
$ops: 289
Points: 130
Date d'inscription: 05/04/2011
SoP Story

Des mises en scènes
photographiques.
Quelle équipe a
l'Oeil du photographe ?
»»Vous choisissez !««

 
MessageSujet: Re: Aide en codage.    Lun 19 Déc - 13:56

Je te parlais de mon forum qui va recevoir le code mais voici le lien ♥

http://ze-test.keuf.net/ Sur le forum test ça fonctionne mais je ne comprend pas pourquoi ça ne fonctionne pas sur l'autre forum ...
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://irianeth-enkidiev.forumgratuit.org/
 

Miettes

Directrice

Voir le dossier scolaire

Directrice

Féminin Rang spécial: Designer professionnelle, formatrice analystes, codeurs, admins, animateurs, graphistes (photoshop, gimp)
Marraine

Rédactrice en chef du M-SoP

Chroniqueuse de l&#39;émission de SoP

Nombre de messages: 44273
Age: 24
Localisation: Lille
$ops: 21186
Points: 505
Date d'inscription: 01/02/2008
Distinctions: Membre de l'EST-SoP
*** Co-Rédactrice en Chef du M-SoP ***

SoP Story

Des mises en scènes
photographiques.
Quelle équipe a
l'Oeil du photographe ?
»»Vous choisissez !««

 
MessageSujet: Re: Aide en codage.    Lun 19 Déc - 14:11

Tu avais essayer de le mettre et de valider le template toussa ?

Parce que le code est bon, ça devrait marcher (pas en prévisualisation par contre)
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://pvereecken.fr/
 

Liam

Etudiant

Voir le dossier scolaire

Etudiant

Masculin Nombre de messages: 191
Age: 19
$ops: 289
Points: 130
Date d'inscription: 05/04/2011
SoP Story

Des mises en scènes
photographiques.
Quelle équipe a
l'Oeil du photographe ?
»»Vous choisissez !««

 
MessageSujet: Re: Aide en codage.    Lun 19 Déc - 14:30

Oui les impr écran que je t'ai mit ont été fait quand je l'ai mit en place é_è

Edit' J'ai réussi, en faite ça venait des noms en mettant exactement les même ça plante mais en modifiant ça fonctionne, je comprend pas pourquoi mais bon au moins ça marche °°'
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://irianeth-enkidiev.forumgratuit.org/
 

Miettes

Directrice

Voir le dossier scolaire

Directrice

Féminin Rang spécial: Designer professionnelle, formatrice analystes, codeurs, admins, animateurs, graphistes (photoshop, gimp)
Marraine

Rédactrice en chef du M-SoP

Chroniqueuse de l&#39;émission de SoP

Nombre de messages: 44273
Age: 24
Localisation: Lille
$ops: 21186
Points: 505
Date d'inscription: 01/02/2008
Distinctions: Membre de l'EST-SoP
*** Co-Rédactrice en Chef du M-SoP ***

SoP Story

Des mises en scènes
photographiques.
Quelle équipe a
l'Oeil du photographe ?
»»Vous choisissez !««

 
MessageSujet: Re: Aide en codage.    Lun 19 Déc - 14:50

Ah... bizarre...

L'aide est finie ? ou d'autres choses sont à régler ?
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://pvereecken.fr/
 

Liam

Etudiant

Voir le dossier scolaire

Etudiant

Masculin Nombre de messages: 191
Age: 19
$ops: 289
Points: 130
Date d'inscription: 05/04/2011
SoP Story

Des mises en scènes
photographiques.
Quelle équipe a
l'Oeil du photographe ?
»»Vous choisissez !««

 
MessageSujet: Re: Aide en codage.    Lun 19 Déc - 15:01

L'aide est terminée, merci ♥
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://irianeth-enkidiev.forumgratuit.org/
 

Miettes

Directrice

Voir le dossier scolaire

Directrice

Féminin Rang spécial: Designer professionnelle, formatrice analystes, codeurs, admins, animateurs, graphistes (photoshop, gimp)
Marraine

Rédactrice en chef du M-SoP

Chroniqueuse de l&#39;émission de SoP

Nombre de messages: 44273
Age: 24
Localisation: Lille
$ops: 21186
Points: 505
Date d'inscription: 01/02/2008
Distinctions: Membre de l'EST-SoP
*** Co-Rédactrice en Chef du M-SoP ***

SoP Story

Des mises en scènes
photographiques.
Quelle équipe a
l'Oeil du photographe ?
»»Vous choisissez !««

 
MessageSujet: Re: Aide en codage.    Lun 19 Déc - 15:29

Je t'en prie ^^ N'hésite pas à revenir si tu as un souci.

En attendant, je classe.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://pvereecken.fr/
 

Aide en codage.

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 2 sur 2Aller à la page : Précédent  1, 2

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
School of Pub :: Archives du forum :: Les archives du forum :: Aides spécifiques-


Aller en haut
Aller en bas