Image de titre de catégorie disposée sur l'image de haut de catégorie Bouton_activeImage de titre de catégorie disposée sur l'image de haut de catégorie Bouton_hoverImage de titre de catégorie disposée sur l'image de haut de catégorie Fb-hoverImage de titre de catégorie disposée sur l'image de haut de catégorie Fb-active
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
Image de titre de catégorie disposée sur l'image de haut de catégorie EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
Image de titre de catégorie disposée sur l'image de haut de catégorie EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Image de titre de catégorie disposée sur l'image de haut de catégorie EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Image de titre de catégorie disposée sur l'image de haut de catégorie EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Image de titre de catégorie disposée sur l'image de haut de catégorie EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Image de titre de catégorie disposée sur l'image de haut de catégorie EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Image de titre de catégorie disposée sur l'image de haut de catégorie EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Image de titre de catégorie disposée sur l'image de haut de catégorie EmptySam 11 Fév 2023, 06:04 par Krager

-28%
Le deal à ne pas rater :
-28% Machine à café avec broyeur à grain MELITTA Purista
229.99 € 318.99 €
Voir le deal

Partagez
 

Image de titre de catégorie disposée sur l'image de haut de catégorie

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Whiteberry
Whiteberry
{ Membre }
{ Membre }

Messages : 129



Image de titre de catégorie disposée sur l'image de haut de catégorie Empty
Bonjour ou bonsoir!
J'ai un petit problème au niveau des images de catégories, je sais que le titre de mon sujet n'est pas clair alors voici les explications What a Face (et voici le lien vers le forum ayant le problème).
J'ai réussi à mettre une image (toujours la même) en haut ainsi qu'une autre en bas de mes catégories. Maintenant j'essaye de mettre l'image du titre de la catégorie (ici "L'empire Romain") par dessus mon image du haut de catégorie, ce que je ne comprends pas comment faire. ^^' J'ai lu tous les tutos sur les images en haut et en bas des catégories, pourtant aucun de spécifie quelque chose là-dessus... Bref, si quelqu'un pourrait m'expliquer, ce serait très apprécié Love
J'ai utilisé la fonction "rechercher", malgré le bon nombre de sujets avec comme titre "image haut de catégories", je n'en ai pas trouvé qui puisse m'aider, je suis désolée si je suis passée à côté d'un sujet qui réponde à ma question Embarassed

Voici mon template index_box
Spoiler:

Ainsi que le CSS correspondant
Spoiler:

Merci d'avance à ceux qui se pencheront sur mon problème! Image de titre de catégorie disposée sur l'image de haut de catégorie 577704309
MessageSujet: Image de titre de catégorie disposée sur l'image de haut de catégorie   Image de titre de catégorie disposée sur l'image de haut de catégorie EmptyMer 18 Juil 2012, 00:48
Revenir en haut Aller en bas
Doare
Doare
{ Spécialiste }
{ Spécialiste }

Féminin Messages : 544



Image de titre de catégorie disposée sur l'image de haut de catégorie Empty
Hellow. Smile

Pour un résultat optimal, je vais te proposer d'intégrer tes hauts et bas de forums par le biais de DIV, plutôt que des images dans des tableaux. Tu n'as pas mal fait, ce sera juste moins compliqué à gérer. De plus, quand tu voudras changer de design, tu n'auras pas besoin d'aller modifier les images dans le HTML. Le style, on le laisse au CSS. Wink

Première étape donc, les hauts et bas de catégories :
Pour le haut... rendez-vous par ici :
Code:
<div class="categorie">
    <table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td><img src="http://nsa30.casimages.com/img/2012/05/16/120516081214352439.png" /></td></tr></table>
Remplace toute la TABLE par ceci :
Code:
  <div class="haut-categorie"></div>

Pour le bas... on part à la fin du template :
Code:
<!-- BEGIN tablefoot -->
  </table>
    <table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td>
      <img width="800" height="300" src="http://nsa29.casimages.com/img/2012/05/19/120519040630785081.png" alt="" style="margin-top:-22px !important;"></td></tr></table>
<img src="{SPACER}" alt="" height="5" width="1" />
  </div>
<!-- END tablefoot --><!-- END catrow -->
Supprime la dernière TABLE :
Code:
    <table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td>
      <img width="800" height="300" src="http://nsa29.casimages.com/img/2012/05/19/120519040630785081.png" alt="" style="margin-top:-22px !important;"></td></tr></table>
Et remplace par ceci :
Code:
  <div class="bas-categorie"></div>
Valide, publie, puis on va définir les tailles et les images de ces zones dans le CSS :
Code:
.haut-categorie, .bas-categorie {
  width:100%;
  height:300px;
}
.haut-categorie {
  background-image:url('http://nsa30.casimages.com/img/2012/05/16/120516081214352439.png');
}
.bas-categorie {
  background-image:url('http://nsa29.casimages.com/img/2012/05/19/120519040630785081.png');
}
.categorie .forumline {
  margin-bottom:0; /* annule l'espace entre les forums et le pied de catégorie */
}


Une bonne chose de faite ! Plus qu'à s'occuper de déplacer notre titre de catégorie, pour l'instant inclus dans le tableau du forum. Tu vas donc chercher cette partie, juste en-dessous de "haut-categorie" :
Code:
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
  </tr>
  </tr>
  <!-- END tablehead -->
En passant je fais remarquer qu'il y avait un "TR" en trop. Smile Mais comme on va se débarrasser de tout ça, on s'en fiche !
Dans cette partie est utilisée la variable {catrow.tablehead.L_FORUM}. C'est elle qui génère le titre de catégorie. Nous allons donc la conserver car nous allons la réutiliser. Copie-la, puis supprime la ligne entière :
Code:
  <tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
  </tr>
  </tr>
Fais attention à ne pas toucher à la balise TABLE, ni au commentaire. Smile

Ceci fait, on n'a plus qu'à coller notre variable où on le veut, soit dans "haut-categorie" :
Code:
  <div class="haut-categorie">
    {catrow.tablehead.L_FORUM}
  </div>
Valide et publie le template, et on en a fini avec lui.

Dans le CSS, on va faire deux choses :
- ajouter un "position:relative" à "haut-categorie" pour que le titre se positionne par rapport à lui :
Code:
.haut-categorie {
  position:relative;
  background-image:url('http://nsa30.casimages.com/img/2012/05/16/120516081214352439.png');
}
- et enfin positionner le titre :
Code:
.haut-categorie h2 {
  position:absolute;
  top:0; /* espace par rapport au bord haut */
  left:0; /* espace par rapport au bord gauche */
}

Voilà. A toi maintenant de régler en fonction de la position que tu souhaites donner au titre. A titre de rappel, tu as 4 propriétés à ta disposition : top, bottom, right, left. Tu as besoin d'une position verticale (top ou bottom) et d'une position horizontale (right ou left).

J'espère avoir été claire. Smile Si tu as le moindre souci, n'hésite pas à le faire savoir.
MessageSujet: Re: Image de titre de catégorie disposée sur l'image de haut de catégorie   Image de titre de catégorie disposée sur l'image de haut de catégorie EmptyMer 18 Juil 2012, 07:52
Revenir en haut Aller en bas
Whiteberry
Whiteberry
{ Membre }
{ Membre }

Messages : 129



Image de titre de catégorie disposée sur l'image de haut de catégorie Empty
Je te remercie de tout coeur pour ta rapidité de réponse, et puis ton explication (qui est d'ailleurs parfaitement claire)! Image de titre de catégorie disposée sur l'image de haut de catégorie 2176505670 Mon problème est résolu Image de titre de catégorie disposée sur l'image de haut de catégorie 3933776953 Encore une fois, un gros merci Calins
MessageSujet: Re: Image de titre de catégorie disposée sur l'image de haut de catégorie   Image de titre de catégorie disposée sur l'image de haut de catégorie EmptyMer 18 Juil 2012, 12:30
Revenir en haut Aller en bas
http://enaevolare.fr
'Christa
'Christa
Lostmindy
Lostmindy

Féminin Messages : 2856



Image de titre de catégorie disposée sur l'image de haut de catégorie Empty
Wow Doare, tu poutres *admirative*

Je classe le sujet !
MessageSujet: Re: Image de titre de catégorie disposée sur l'image de haut de catégorie   Image de titre de catégorie disposée sur l'image de haut de catégorie EmptyVen 20 Juil 2012, 09:37
Revenir en haut Aller en bas
Contenu sponsorisé




Image de titre de catégorie disposée sur l'image de haut de catégorie Empty
MessageSujet: Re: Image de titre de catégorie disposée sur l'image de haut de catégorie   Image de titre de catégorie disposée sur l'image de haut de catégorie Empty
Revenir en haut Aller en bas
 

Image de titre de catégorie disposée sur l'image de haut de catégorie

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

 Sujets similaires

-
» Titre de Catégorie dans une Image
»  Apposer le titre de catégorie sur l'en-tête de catégorie
» problème de catégorie (image sous la catégorie)
» Image lien sur titre de forum image
» problème catégorie haut & bas

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-

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