Actif'Help

Aide à la naissance et à la relance
 

Partagez | 
 

 Codage pour image au-dessus et en dessous des catégories

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Shoki 鍾馗

avatar

Messages : 31
Date d'inscription : 08/10/2012
Age : 44

MessageSujet: Codage pour image au-dessus et en dessous des catégories   Mar 9 Oct - 6:43

Bonjour,

tout d'abord le lien du forum pour lequel j'ai besoin d'aide: http://www.tutoxphotoshop.com/

Mon problème est que je voudrais mettre une image au-dessus et une dessous de chaque catégorie.
Exemple en image (c'est une maquette, fais pas attention à la qualité)::
 

J'ai tenté plusieurs tutos, mais je dois rater une étape car je déforme le forum à chaque fois.

Merci d'avance pour ton aide. Wink

_________________
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Saray
Duck President
Duck President
avatar

Messages : 352
Date d'inscription : 10/07/2012
Age : 27

MessageSujet: Re: Codage pour image au-dessus et en dessous des catégories   Mar 9 Oct - 8:34

Coucou ^^
Aucuns soucis, je vais y regarder avec toi Wink

Alors personnellement, je ne suis pas pour donner les codes tout fait et après débrouille-toi... je te propose donc qu'on regarde à ça pas à pas ^^
Maintenant, si tu préfères avoir le code d'une traite et y regarder toi-même, c'est toi qui voit Very Happy
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://actif-help.probb.fr
Shoki 鍾馗

avatar

Messages : 31
Date d'inscription : 08/10/2012
Age : 44

MessageSujet: Re: Codage pour image au-dessus et en dessous des catégories   Mar 9 Oct - 9:02

Non, j'aime bien faire les choses bien. Donc pas à pas, c'est parfait.
Tout d'abord, je voudrais savoir. Il faut une image pour le dessus et pour le dessous.
Mais faut-il une image pour le milieu qui se répètera?

_________________
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Saray
Duck President
Duck President
avatar

Messages : 352
Date d'inscription : 10/07/2012
Age : 27

MessageSujet: Re: Codage pour image au-dessus et en dessous des catégories   Mar 9 Oct - 19:16

Pour celle du milieu c'est à toi de voir. Ce n'est absolument pas obligatoire, si tu ne mets pas d'image ton fond gardera la couleur choisie dans ton PA. Maintenant, si tu veux mettre une image je te conseille un fond uniforme qui pourra se répéter sans coupures.... à la rigueur on peut même jouer avec une texture douce mais pas de motifs.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://actif-help.probb.fr
Shoki 鍾馗

avatar

Messages : 31
Date d'inscription : 08/10/2012
Age : 44

MessageSujet: Re: Codage pour image au-dessus et en dessous des catégories   Mer 10 Oct - 6:20

Je vais le faire avec image au milieu. Car sinon je pense que j'aurai un problème au niveau des ombrages.
Donc par quoi dois-je commencer?

PS: si tu as des conseils pour le reste du forum, n'hésites pas hein. Wink Tout conseil est bon à prendre. Wink

_________________
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Saray
Duck President
Duck President
avatar

Messages : 352
Date d'inscription : 10/07/2012
Age : 27

MessageSujet: Re: Codage pour image au-dessus et en dessous des catégories   Mer 10 Oct - 8:49

Alors je vais commencer par une micro analyse uniquement niveau codage ^^:

-> le fond du forum fait bizarre; on a une texture uniquement sur le côté gauche et une couleur sur la droite... personnellement, je trouve que ça cloche Embarassed j'aurais mis l'image partout ou alors juste une couleur mais pas les deux ainsi ^^"
-> j'aurais également codé le QEEL afin qu'il reste dans l'esprit général du forum... parce que tout est travaillé niveau présentation et après on se retrouve avec un QEEL banal et classique... ça casse un peu l'effet je trouve.

Bien à présent passons à l'essentiel de ta demande Very Happy

On va donc commencer par le Template. Pour cela il va te falloir les droits fondateur ^^
Tu vas donc dans Panneau d'administration -> Affichage -> Templates -> Index_Box

Ici on va devoir "diviser" nos catégories en trois parties : l'entête, le tronc et le footer.
  1. L'entête:
    Cherche cette partie dans ton template :
    Code:
    <!-- BEGIN catrow --><!-- BEGIN tablehead -->
    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
    On va lui ajouter une
    Code:
    <div>
    et on lui donne un nom afin de pouvoir modifier dans le CSS. Pour cela ajoute :
    Code:
    <div class="cathead"></div>
    juste avant ton
    Code:
    <table>
    , ce qui donne :
    Code:
    <!-- BEGIN catrow --><!-- BEGIN tablehead -->
    <div class="cathead"></div>
    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

    Ca va, tu suis? Alors on continue! ^^
  2. Le tronc:
    On va ouvrir notre
    Code:
    <div class="catbody">
    à la suite de celle de l'entête ...
    Code:
    <!-- BEGIN catrow --><!-- BEGIN tablehead -->
    <div class="cathead"></div><div class="catbody">
    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
    et à la refermer au niveau du footer :
    Code:
      <!-- END catfoot -->
      <!-- BEGIN tablefoot -->
    </table>
    </div>
    <img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

    Avoue que c'est assez simple Very Happy

  3. Le footer:
    Ici il te suffit d'installer ta
    Code:
    <div>
    juste après la fermeture du tronc :
    Code:
      <!-- BEGIN tablefoot -->
    </table>
    </div><div class="catfoot"></div>
    <img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->


Ca va jusqu'à présent? Je te laisse regarder à ça et une fois que c'est fait, on regarde pour la suite Very Happy

N'hésite surtout pas à poser des questions ou à le dire quand ça ne va pas Wink
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://actif-help.probb.fr
Shoki 鍾馗

avatar

Messages : 31
Date d'inscription : 08/10/2012
Age : 44

MessageSujet: Re: Codage pour image au-dessus et en dessous des catégories   Jeu 11 Oct - 5:33

Jusqu'ici tout va bien. Et je vois déjà où j'avais fais des erreurs. J'attends la suite avec impatience. Encore merci. Wink

_________________
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Saray
Duck President
Duck President
avatar

Messages : 352
Date d'inscription : 10/07/2012
Age : 27

MessageSujet: Re: Codage pour image au-dessus et en dessous des catégories   Jeu 11 Oct - 6:33

Super ^^
On attaque donc le CSS Very Happy

Nous allons reprendre les nom de nos div, ce qui donne:
Code:
.cathead
{

}

.catbody
{

}

.catfoot
{

}

Idea petit rappel : cathead = dessus, catbody = milieu et catfoot = bas

A présent, nous allons dire à nos div que nous voulons afficher telle image :

.cathead
Code:
  background: url(LIEN URL DE TON IMAGE) top center no-repeat; /*Ici on ne veut pas qu'elle se répète*/
width: yypx; /*Largeur de l'image*/
height: yypx; /*Hauteur de l'image*/
  margin: auto; /*Permet de centrer la partie du corps*/

Continuons avec le .catbody
Code:
 background: url(LIEN URL DE TON IMAGE) center repeat-y; /*Ici on veut qu'elle se répète*/
width: yypx; /*Largeur de l'image*/
  margin: auto;

Et on termine avec le .catfoot
Code:
 background: url(LIEN URL DE TON IMAGE) top center no-repeat; /*Ici on ne veut pas qu'elle se répète*/
width: yypx; /*Largeur de l'image*/
height: yypx; /*Hauteur de l'image*/
  margin: auto; /*Permet de centrer la partie du corps*/

Et voilà Very Happy ne te reste plus qu'à compléter les informations avec tes images Wink

Si tu as un soucis quelque part, n'hésites pas à le dire Very Happy
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://actif-help.probb.fr
Shoki 鍾馗

avatar

Messages : 31
Date d'inscription : 08/10/2012
Age : 44

MessageSujet: Re: Codage pour image au-dessus et en dessous des catégories   Jeu 11 Oct - 7:12

Tout d'abord merci encore pour ton aide.

Mais j'ai encore quelques petits soucis:
Screen:
 
Comme tu vois le forum déborde de chaque côté. J'ai essayé réduire la largeur du forum, rien n'y fait. J'ai tenté d'enlever le code .forumline que j'avais mis dans le css, rien n'y fait.
De même, je voudrais supprimer la ligne de titre et pouvoir mettre mon titre sur l'image du haut.

Je pense qu'on y est presque, mais je trouve pas comment réduire la largeur du forum.
Merci encore. Wink

_________________
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Saray
Duck President
Duck President
avatar

Messages : 352
Date d'inscription : 10/07/2012
Age : 27

MessageSujet: Re: Codage pour image au-dessus et en dessous des catégories   Jeu 11 Oct - 8:06

Peux-tu me montrer ton CSS que j'y regarde pour la largeur du forum s'il te plaît?

Pour le titre, tu parles du titre de catégorie? Si oui, il n'est nul besoin de grandes lignes de codage Very Happy

-> Couleurs : supprimes la couleur du fond de titre de catégorie; ensuite tu remplaces le titre de ta catégorie par
Code:
<img src="LIEN URL DE TON IMAGE" alt="NOM"/>
N'aies craintes si il te dit qu'il y a une erreur dans le nom de ta catégorie c'est une réaction tout ce qu'il y a de plus normal Wink
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://actif-help.probb.fr
Shoki 鍾馗

avatar

Messages : 31
Date d'inscription : 08/10/2012
Age : 44

MessageSujet: Re: Codage pour image au-dessus et en dessous des catégories   Jeu 11 Oct - 8:22

Fais pas attention au bordel, j'ai pas aligner mes codes ni mis une hiérarchie. Bref, c'est le bordel. lol!
Code:
a:hover{text-transform:uppercase;}
.forumline
        {
          padding: 3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        -ô-border-radius:3px;
        -khtml-border-radius:3px;
        -moz-box-shadow: 4px 4px 4px black;
    -webkit-box-shadow: 5px 5px 5px black;
    box-shadow: 5px 5px 5px black;
        border-radius:5px;
        }

a[href="/u328"] span strong {background:url("http://i47.servimg.com/u/f47/17/57/15/92/mettre10.png") no-repeat;padding-left:10px;padding-top:0px}
a[href="/u186"] span strong {background:url("http://i40.servimg.com/u/f40/17/10/28/33/couron14.png") no-repeat;padding-left:2px;padding-top:1px}
.modo {
    background-image: url('http://users.skynet.be/fc357926/sg/danger.png');
    background-repeat: no-repeat;
    background-position: center left;
    background-color: #f26522;
    border: 2px solid #197b30;
    color: #000000;
    padding-left: 65px;
    min-height: 60px;
}
.rg
    {
    cursor:pointer;
    }
.postdetails.poster-profile a img {
  max-width:200px;
  max-height:250px;
}
.signature_div img {
        max-height:200px;
        max-width:450px;
        }
.mimo {
    margin:25px;
    margin-top:25px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    -moz-box-shadow: 4px 4px 4px black;
    -webkit-box-shadow: 5px 5px 5px black;
    box-shadow: 5px 5px 5px black;
    border: 3px solid #FF7700;
    padding: 25px;
    padding-left: 25px;
    margin: 25px;
    background-color: #4F4C48;
    min-height: 60px;
}
.spoiler {
    margin:20px;
    margin-top:20px;
    -moz-border-radius: 70px;
    border-radius: 70px;
    -moz-box-shadow: 4px 4px 4px black;
    -webkit-box-shadow: 5px 5px 5px black;
    box-shadow: 5px 5px 5px black;
    border: 3px solid #FF7700;
    padding: 20px;
    padding-left: 40px;
    margin: 20px;
    background-color: #4F4C48;
    min-height: 60px;
}
.quote {
    margin:20px;
    margin-top:20px;
    -moz-border-radius: 70px;
    border-radius: 70px;
    -moz-box-shadow: 4px 4px 4px black;
    -webkit-box-shadow: 5px 5px 5px black;
    box-shadow: 5px 5px 5px black;
    border: 3px solid #FF7700;
    padding: 20px;
    padding-left: 40px;
    margin: 20px;
    background-color: #4F4C48;
    min-height: 60px;
}
.code {
    margin:20px;
    margin-top:20px;
    -moz-border-radius: 70px;
    border-radius: 70px;
    -moz-box-shadow: 4px 4px 4px black;
    -webkit-box-shadow: 5px 5px 5px black;
    box-shadow: 5px 5px 5px black;
    border: 3px solid #FF7700;
    padding: 20px;
    padding-left: 40px;
    margin: 20px;
    background-color: #4F4C48;
    min-height: 60px;
}
.postbody h1 {
  margin:0; /* pour supprimer les marges automatiques des balises de titre */
  font-family: 'Marcellus SC',impact,serif; /* Ceci est la police utilisée pour écrire votre titre. Il est conseillé de laisser serif à la fin, c'est la police par défaut (utilisée si les autres polices ne sont pas présentes sur les pc des personnes qui lisent les titres). */
  font-size: 40px; /* Détermine la taille de la police. 100% est la taille normale, 110% est donc un peu plus grand */
  color: #FF7700; /* Couleur de la police ^^ */
  text-align: center;
}
.postbody h2 {
  margin:0; /* pour supprimer les marges automatiques des balises de titre */
  font-family: 'Ranchers',impact,serif,cursive; /* Ceci est la police utilisée pour écrire votre titre. Il est conseillé de laisser serif à la fin, c'est la police par défaut (utilisée si les autres polices ne sont pas présentes sur les pc des personnes qui lisent les titres). */
  font-size: 40px; /* Détermine la taille de la police. 100% est la taille normale, 110% est donc un peu plus grand */
  color: #FF7700; /* Couleur de la police ^^ */
  text-align: center;
}
.postbody h3 {
  margin:0; /* pour supprimer les marges automatiques des balises de titre */
  font-family: 'Norican',impact,serif,cursive; /* Ceci est la police utilisée pour écrire votre titre. Il est conseillé de laisser serif à la fin, c'est la police par défaut (utilisée si les autres polices ne sont pas présentes sur les pc des personnes qui lisent les titres). */
  font-size: 40px; /* Détermine la taille de la police. 100% est la taille normale, 110% est donc un peu plus grand */
  color: #FF7700; /* Couleur de la police ^^ */
  text-align: center;
}
.postbody h4 {
  margin:0; /* pour supprimer les marges automatiques des balises de titre */
  font-family: 'Marcellus SC',impact,serif; /* Ceci est la police utilisée pour écrire votre titre. Il est conseillé de laisser serif à la fin, c'est la police par défaut (utilisée si les autres polices ne sont pas présentes sur les pc des personnes qui lisent les titres). */
  font-size: 40px; /* Détermine la taille de la police. 100% est la taille normale, 110% est donc un peu plus grand */
  color: #FF7700; /* Couleur de la police ^^ */
  text-align: center;
  text-shadow: 2px 2px 2px black;
}
.postbody h5 {
  margin:0; /* pour supprimer les marges automatiques des balises de titre */
  font-family: 'Marcellus SC',impact,serif; /* Ceci est la police utilisée pour écrire votre titre. Il est conseillé de laisser serif à la fin, c'est la police par défaut (utilisée si les autres polices ne sont pas présentes sur les pc des personnes qui lisent les titres). */
  font-size: 40px; /* Détermine la taille de la police. 100% est la taille normale, 110% est donc un peu plus grand */
  color: #FF7700; /* Couleur de la police ^^ */
  text-align: center;
  text-shadow: 1px 1px 1px white;
}
.sujets_messages {
  width:160px;
  padding: 3px; /* pour ne pas que le texte se colle aux bords du cadre */
  font-size: 10px;
  font-weight : bold;
  /* après on peut rajouter ce qu'on veut : une bordure, une image de fond ... */
  border: 2px solid #FF7700;
  -moz-box-shadow: 4px 4px 4px black;
    -webkit-box-shadow: 5px 5px 5px black;
    box-shadow: 5px 5px 5px black;
  background-color: #888888;
}


.derniers_sujets {
  margin-top: 3px; /* pour faire un léger espace entre la ligne des "messages & sujets" et "dernier message posté" */
  padding: 3px; /* pour ne pas que le texte se colle aux bords du cadre */

  /* après on peut rajouter ce qu'on veut : une bordure, une image de fond, des coins arrondis un peu originaux... */
  border: 2px solid #FF7700;
  background-color: #4F4C48;
  border-radius:0 10px 0 10px;
  -moz-border-radius:0 10px 0 10px;
  -webkit-border-radius:0 10px 0 10px;
  -moz-box-shadow: 4px 4px 4px black;
    -webkit-box-shadow: 5px 5px 5px black;
    box-shadow: 5px 5px 5px black;
}
.shoki {
    margin:15px;
    margin-top:5px;
    border-radius:0 30px 0 30px;
  -moz-border-radius:0 30px 0 30px;
  -webkit-border-radius:0 30px 0 30px;
    -moz-box-shadow: 4px 4px 4px black;
    -webkit-box-shadow: 5px 5px 5px black;
    box-shadow: 5px 5px 5px black;
    border: 3px solid #FF7700;
    padding: 5px;
    padding-left: 20px;
    margin: 5px;
    background-color: #4F4C48;
    min-height: 60px;
}
.shoki2 {
  float:right;
  height:40px;
  width:200px;
  margin-right: 10px;
  padding :2px;
  border: 2px solid #FF7700;
  border-radius:0 10px 0 10px;
  -moz-border-radius:0 10px 0 10px;
  -webkit-border-radius:0 10px 0 10px;
  box-shadow:2px 2px 10px black inset;
  -moz-box-shadow:2px 2px 10px black inset;
  -webkit-box-shadow:2px 2px 10px black inset;
  color: #000000;
  background-color: #5a5a5a;
  overflow: auto;
}
Comme tu vois rien d'extraordinaire, mis à part des titres et des box. Mais serait-il possible que ce soit la PA flash qui bloque la réduction de la largeur du forum?
Edit: j'ai essayé sans, ça change rien.

Edit: 2
En fait, après avoir changer le .forumline dans le css et avoir mis:
Code:
.forumline
        {
  padding-left: 25px;
  padding-right:25px;
        }
ça fonctionnait pour la largeur. Mais j'avais une énorme bordure de chaque côté. J'ai dû supprimer la couleur du cadre des cellules. Et là, ça marche.
Le problème c'est que je n'ai plus aucune bordure. lol!
Spoiler:
 
Comment supprimer ces bordures énormes?
Editttttt (un de plus)... lol
Après une série de tests, j'ai mis ça dans le css:
Code:
.forumline
        {
  width: 970px;
  padding-left: 0px;
  padding-right:0px;
  margin-right: 25px;
  margin-left: 25px;
        }
Mais maintenant, c'est mon qui est en ligne qui n'est plus centré... Pourquoi? Alors que j'y ai pas touché. lol!

_________________
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Saray
Duck President
Duck President
avatar

Messages : 352
Date d'inscription : 10/07/2012
Age : 27

MessageSujet: Re: Codage pour image au-dessus et en dessous des catégories   Ven 12 Oct - 1:14

affraid
Tu pourrais me remettre ton CSS modifié parce que là j'ai pas envie de tout dérégler avec les modifs que tu as faites ^^" ?
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://actif-help.probb.fr
Shoki 鍾馗

avatar

Messages : 31
Date d'inscription : 08/10/2012
Age : 44

MessageSujet: Re: Codage pour image au-dessus et en dessous des catégories   Ven 12 Oct - 2:04

Code:
a:hover{text-transform:uppercase;}
.forumline
        {
  padding-left: 0px;
  padding-right:0px;
  margin-right: 25px;
  margin-left: 25px;
  width: 970px;
}

a[href="/u328"] span strong {background:url("http://i47.servimg.com/u/f47/17/57/15/92/mettre10.png") no-repeat;padding-left:10px;padding-top:0px}
a[href="/u186"] span strong {background:url("http://i40.servimg.com/u/f40/17/10/28/33/couron14.png") no-repeat;padding-left:2px;padding-top:1px}
.modo {
    background-image: url('http://users.skynet.be/fc357926/sg/danger.png');
    background-repeat: no-repeat;
    background-position: center left;
    background-color: #f26522;
    border: 2px solid #197b30;
    color: #000000;
    padding-left: 65px;
    min-height: 60px;
}
.rg
    {
    cursor:pointer;
    }
.postdetails.poster-profile a img {
  max-width:200px;
  max-height:250px;
}
.signature_div img {
        max-height:200px;
        max-width:450px;
        }
.mimo {
    margin:25px;
    margin-top:25px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    -moz-box-shadow: 4px 4px 4px black;
    -webkit-box-shadow: 5px 5px 5px black;
    box-shadow: 5px 5px 5px black;
    border: 3px solid #FF7700;
    padding: 25px;
    padding-left: 25px;
    margin: 25px;
    background-color: #4F4C48;
    min-height: 60px;
}
.spoiler {
    margin:20px;
    margin-top:20px;
    -moz-border-radius: 70px;
    border-radius: 70px;
    -moz-box-shadow: 4px 4px 4px black;
    -webkit-box-shadow: 5px 5px 5px black;
    box-shadow: 5px 5px 5px black;
    border: 3px solid #FF7700;
    padding: 20px;
    padding-left: 40px;
    margin: 20px;
    background-color: #4F4C48;
    min-height: 60px;
}
.quote {
    margin:20px;
    margin-top:20px;
    -moz-border-radius: 70px;
    border-radius: 70px;
    -moz-box-shadow: 4px 4px 4px black;
    -webkit-box-shadow: 5px 5px 5px black;
    box-shadow: 5px 5px 5px black;
    border: 3px solid #FF7700;
    padding: 20px;
    padding-left: 40px;
    margin: 20px;
    background-color: #4F4C48;
    min-height: 60px;
}
.code {
    margin:20px;
    margin-top:20px;
    -moz-border-radius: 70px;
    border-radius: 70px;
    -moz-box-shadow: 4px 4px 4px black;
    -webkit-box-shadow: 5px 5px 5px black;
    box-shadow: 5px 5px 5px black;
    border: 3px solid #FF7700;
    padding: 20px;
    padding-left: 40px;
    margin: 20px;
    background-color: #4F4C48;
    min-height: 60px;
}
.postbody h1 {
  margin:0; /* pour supprimer les marges automatiques des balises de titre */
  font-family: 'Marcellus SC',impact,serif; /* Ceci est la police utilisée pour écrire votre titre. Il est conseillé de laisser serif à la fin, c'est la police par défaut (utilisée si les autres polices ne sont pas présentes sur les pc des personnes qui lisent les titres). */
  font-size: 40px; /* Détermine la taille de la police. 100% est la taille normale, 110% est donc un peu plus grand */
  color: #FF7700; /* Couleur de la police ^^ */
  text-align: center;
}
.postbody h2 {
  margin:0; /* pour supprimer les marges automatiques des balises de titre */
  font-family: 'Ranchers',impact,serif,cursive; /* Ceci est la police utilisée pour écrire votre titre. Il est conseillé de laisser serif à la fin, c'est la police par défaut (utilisée si les autres polices ne sont pas présentes sur les pc des personnes qui lisent les titres). */
  font-size: 40px; /* Détermine la taille de la police. 100% est la taille normale, 110% est donc un peu plus grand */
  color: #FF7700; /* Couleur de la police ^^ */
  text-align: center;
}
.postbody h3 {
  margin:0; /* pour supprimer les marges automatiques des balises de titre */
  font-family: 'Norican',impact,serif,cursive; /* Ceci est la police utilisée pour écrire votre titre. Il est conseillé de laisser serif à la fin, c'est la police par défaut (utilisée si les autres polices ne sont pas présentes sur les pc des personnes qui lisent les titres). */
  font-size: 40px; /* Détermine la taille de la police. 100% est la taille normale, 110% est donc un peu plus grand */
  color: #FF7700; /* Couleur de la police ^^ */
  text-align: center;
}
.postbody h4 {
  margin:0; /* pour supprimer les marges automatiques des balises de titre */
  font-family: 'Marcellus SC',impact,serif; /* Ceci est la police utilisée pour écrire votre titre. Il est conseillé de laisser serif à la fin, c'est la police par défaut (utilisée si les autres polices ne sont pas présentes sur les pc des personnes qui lisent les titres). */
  font-size: 40px; /* Détermine la taille de la police. 100% est la taille normale, 110% est donc un peu plus grand */
  color: #FF7700; /* Couleur de la police ^^ */
  text-align: center;
  text-shadow: 2px 2px 2px black;
}
.postbody h5 {
  margin:0; /* pour supprimer les marges automatiques des balises de titre */
  font-family: 'Marcellus SC',impact,serif; /* Ceci est la police utilisée pour écrire votre titre. Il est conseillé de laisser serif à la fin, c'est la police par défaut (utilisée si les autres polices ne sont pas présentes sur les pc des personnes qui lisent les titres). */
  font-size: 40px; /* Détermine la taille de la police. 100% est la taille normale, 110% est donc un peu plus grand */
  color: #FF7700; /* Couleur de la police ^^ */
  text-align: center;
  text-shadow: 1px 1px 1px white;
}
.sujets_messages {
  width:160px;
  padding: 3px; /* pour ne pas que le texte se colle aux bords du cadre */
  font-size: 10px;
  font-weight : bold;
  /* après on peut rajouter ce qu'on veut : une bordure, une image de fond ... */
  border: 2px solid #FF7700;
  -moz-box-shadow: 4px 4px 4px black;
    -webkit-box-shadow: 5px 5px 5px black;
    box-shadow: 5px 5px 5px black;
  background-color: #888888;
}


.derniers_sujets {
  margin-top: 3px; /* pour faire un léger espace entre la ligne des "messages & sujets" et "dernier message posté" */
  padding: 3px; /* pour ne pas que le texte se colle aux bords du cadre */

  /* après on peut rajouter ce qu'on veut : une bordure, une image de fond, des coins arrondis un peu originaux... */
  border: 2px solid #FF7700;
  background-color: #4F4C48;
  border-radius:0 10px 0 10px;
  -moz-border-radius:0 10px 0 10px;
  -webkit-border-radius:0 10px 0 10px;
  -moz-box-shadow: 4px 4px 4px black;
    -webkit-box-shadow: 5px 5px 5px black;
    box-shadow: 5px 5px 5px black;
}
.shoki {
    margin:15px;
    margin-top:5px;
    border-radius:0 30px 0 30px;
  -moz-border-radius:0 30px 0 30px;
  -webkit-border-radius:0 30px 0 30px;
    -moz-box-shadow: 4px 4px 4px black;
    -webkit-box-shadow: 5px 5px 5px black;
    box-shadow: 5px 5px 5px black;
    border: 3px solid #FF7700;
    padding: 5px;
    padding-left: 20px;
    margin: 5px;
    background-color: #4F4C48;
    min-height: 60px;
}
.shoki2 {
  float:right;
  height:40px;
  width:200px;
  margin-right: 10px;
  padding :2px;
  border: 2px solid #FF7700;
  border-radius:0 10px 0 10px;
  -moz-border-radius:0 10px 0 10px;
  -webkit-border-radius:0 10px 0 10px;
  box-shadow:2px 2px 10px black inset;
  -moz-box-shadow:2px 2px 10px black inset;
  -webkit-box-shadow:2px 2px 10px black inset;
  color: #000000;
  background-color: #5a5a5a;
  overflow: auto;
}
.cathead {
  background: url(http://i37.servimg.com/u/f37/17/57/15/92/tutoxp12.png) top center no-repeat; /*Ici on ne veut pas qu'elle se répète*/
  width: 1020px; /*Largeur de l'image*/
  height: 78px; /*Hauteur de l'image*/
  margin: auto; /*Permet de centrer la partie du corps*/
}
.catbody {
  background: url(http://i33.servimg.com/u/f33/16/63/49/07/tutoxp10.png) center repeat-y; /*Ici on veut qu'elle se répète*/
  width: 1020px; /*Largeur de l'image*/
  margin: auto;
}
.catfoot {
  background: url(http://i33.servimg.com/u/f33/16/63/49/07/tutoxp11.png) top center no-repeat; /*Ici on ne veut pas qu'elle se répète*/
  width: 1020px; /*Largeur de l'image*/
  height: 78px; /*Hauteur de l'image*/
  margin: auto; /*Permet de centrer la partie du corps*/
}

Voilà, merci encore. Wink

_________________
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Shoki 鍾馗

avatar

Messages : 31
Date d'inscription : 08/10/2012
Age : 44

MessageSujet: Re: Codage pour image au-dessus et en dessous des catégories   Ven 12 Oct - 16:41

Coucou, j'ai réglé mon soucis de qui est en ligne décentré en rajoutant des balises center et br dans le template index body. Par contre, j'ai la boîte de smileys quand on poste qui est déformée. Pourrais-tu me dire c'est quelle template que je dois modifier? Car j'ai vu qu'il y en avait plusieurs qui concernaient cette fameuse boîte...
Merci d'avance. Wink

_________________
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Saray
Duck President
Duck President
avatar

Messages : 352
Date d'inscription : 10/07/2012
Age : 27

MessageSujet: Re: Codage pour image au-dessus et en dessous des catégories   Sam 13 Oct - 4:58

Coucou ^^
Super ça Very Happy

Alors là tu me poses une colle... je n'ai jamais touché aux boîtes de Smileys... j'irai voir sur les forums de codage que je fréquente dès que FA aura régler le bug d'hébergement TT"

Désolée pour l'attente du coup :/
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://actif-help.probb.fr
Shoki 鍾馗

avatar

Messages : 31
Date d'inscription : 08/10/2012
Age : 44

MessageSujet: Re: Codage pour image au-dessus et en dessous des catégories   Sam 13 Oct - 5:35

Bein en fait, j'ai trouvé et réglé le soucis. Wink
Mais maintenant, j'aimerai supprimer la ligne que j'ai entouré en rouge dans mon screen et ajouté une image de titre qui se superposera sur l'image du dessus de ma catégorie.
Si c'est possible, bien sûr.
Spoiler:
 
Merci encore pour tout ce que tu fais. Wink

_________________
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Saray
Duck President
Duck President
avatar

Messages : 352
Date d'inscription : 10/07/2012
Age : 27

MessageSujet: Re: Codage pour image au-dessus et en dessous des catégories   Sam 13 Oct - 21:58

Pour ça tu vas dans : Affichage -> Images et couleurs -> Gestion des images -> Mode avancé -> Général/Navigation -> Image du fond des titres : tu laisses "vide" comme ça tu n'auras pas d'image et si tu n'as pas mis de couleur se sera en "transparence" Wink

Aucun soucis Wink par contre n'oublie pas :
Citation :
Afin que notre travail soi reconnu, nous demandons simplement que notre logo soi affiché et visible sur votre forum.

De plus, je t'ajoute dans le groupe des "Protégés" et tu peux donc promouvoir ton forum Wink
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://actif-help.probb.fr
Shoki 鍾馗

avatar

Messages : 31
Date d'inscription : 08/10/2012
Age : 44

MessageSujet: Re: Codage pour image au-dessus et en dessous des catégories   Dim 14 Oct - 4:27

C'est fait. Wink
Logo ajouté dans le footer du forum avec les autres partenaires.
D'ailleurs où puis-je poster une demande de partenariat?

Edit: j'ai tenté à ta manière, mais ça ne marchait pas trop. Donc j'ai croisé un autre tuto avec le tien.
Dans le template index box, j'ai ajouté:
Code:
<div class="TitreCategorie">{catrow.tablehead.L_FORUM}</div>
Au milieu de ma balise d'image de tête de catégorie. Je lui ai mis un css pour le placer correctement.
Et j'ai supprimé la ligne:
Code:
<tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle">  </th>
      <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
  </tr>
Car en supprimant simplement l'image, on voyait toujours la couleur derrière.
Enfin bref, un soucis de plus réglé... lol!

Par contre, je voulais te demander si tu pouvais m'aider à faire une PA en code. J'aime le style d'onglet que tu as posté sur C2lar.
Mais je voudrais apprendre à la faire moi même.

Merci encore pour tous tes conseils et pour ton aide. Wink

_________________
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Saray
Duck President
Duck President
avatar

Messages : 352
Date d'inscription : 10/07/2012
Age : 27

MessageSujet: Re: Codage pour image au-dessus et en dessous des catégories   Dim 14 Oct - 9:31

Merci pour le logo Very Happy
Pour la demande de partenariat direction : Partenariat

Aucun soucis pour la PA Wink
Il suffit de me dire exactement ce que tu désires (si tu as une maquette c'est niquel sinon décrit point par point ^^)
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://actif-help.probb.fr
Shoki 鍾馗

avatar

Messages : 31
Date d'inscription : 08/10/2012
Age : 44

MessageSujet: Re: Codage pour image au-dessus et en dessous des catégories   Dim 14 Oct - 9:52

Je vais préparer une maquette. J'ouvrirai une nouveau post dès qu'elle sera prête.
Merci encore Saray. Sans toi, je n'y serai pas arrivé. Wink

_________________
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Saray
Duck President
Duck President
avatar

Messages : 352
Date d'inscription : 10/07/2012
Age : 27

MessageSujet: Re: Codage pour image au-dessus et en dessous des catégories   Dim 14 Oct - 19:51

Ok je verrouille donc celui-ci Wink

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://actif-help.probb.fr
Contenu sponsorisé




MessageSujet: Re: Codage pour image au-dessus et en dessous des catégories   

Revenir en haut Aller en bas
 
Codage pour image au-dessus et en dessous des catégories
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» [Phanta] Commande d'un tableau d'accueil pour mettre dans un widget du portail
» Vol au dessus ... d'une photo aerienne
» Problème avec l'image au dessus des derniers messages [résolu]
» Insérer une image/du texte au-dessus/en dessous des catégories
» Tableau de partenaires avec effet Zoom

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Actif'Help :: Aide à la naissance :: Codage-
Sauter vers: