[résolu]Image dans la description des forums Bouton_active[résolu]Image dans la description des forums Bouton_hover[résolu]Image dans la description des forums Fb-hover[résolu]Image dans la description des forums 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
» Fiche de Présentation RPG
[résolu]Image dans la description des forums EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
[résolu]Image dans la description des forums EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
[résolu]Image dans la description des forums EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
[résolu]Image dans la description des forums EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
[résolu]Image dans la description des forums EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
[résolu]Image dans la description des forums EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
[résolu]Image dans la description des forums EmptySam 11 Fév 2023, 06:04 par Krager

» Vos partenaires dans le footer
[résolu]Image dans la description des forums EmptyMar 07 Fév 2023, 08:40 par Oxtran

-28%
Le deal à ne pas rater :
Brandt LVE127J – Lave-vaisselle encastrable 12 couverts – L60cm
279.99 € 390.99 €
Voir le deal

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

[résolu]Image dans la description des forums

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://not-yet.net/
* Luce
* Luce
{ Membre }
{ Membre }

Féminin Messages : 37



[résolu]Image dans la description des forums Empty
    Bonjour bonjour ^^ !
    Je suis actuellement en train de (ré?)apprendre le CSS et après maintes et maintes manoeuvres, j'arrive enfin à donner la forme souhaiter à mon forum [résolu]Image dans la description des forums 1688815589
    Toutefois il reste quelques petits soucis que je n'arrive pas à résoudre toute seule et je serais très reconnaissante à qui pourra m'aider Smile.

    Puisqu'une image est plus parlante qu'un long discours, le problème en image :
    https://i.servimg.com/u/f43/14/73/13/17/captur24.png
    Comme vous pouvez le voir, je souhaite placer une image pour chaque 'forum' mais ces dernières ne rentrent pas correctement dans le cadre que j'ai ajouté… j'ai pourtant bien essayé de modifier la taille du cadre (la partie "padding" surtout) mais je ne trouve pas ça très joli.
    Au final, je préfèrerais sortir tout simplement l'image de ce cadre et l'affichée seule sur la gauche, dans le même alignement que le cadre. Un peu comme ici :
    https://i.servimg.com/u/f43/14/73/13/17/captur25.png

    Je joins le code CSS correspondant à cette partie si cela vous serait utile.
    Code:
    /*--- Cette partie correspond à la description du forum ---*/
    .forum-description {
          margin: auto;
          padding: 40px;
          color: #BFA491;
          border: double #BFA491;
          -moz-border-radius: 2px;
          -webkit-border-radius: 2px;
          width: 80%;
          font-size: 12px;
    }
     
    /*--- Cette partie correspond à l'onglet "X messages dans X sujets" ---*/
    .forum-stats {
       
          font-size: 10px;
          font-style: italic;
          height: 14px;
          left: 280px;
          padding: 3px;
          position: relative;
          text-align: center;
          width: 200px;
    }
     
    /*--- Cette partie correspond à l'affichage des sous-forums ---*/
    .forum-sousforum {
          color: #BFA491;
          border: 1px solid #BFA491;
          border-top: 0px !important;
          -moz-border-radius-bottomleft: 2px;
          -moz-border-radius-bottomright: 2px;
          -webkit-border-bottom-right-radius: 2px;
          -webkit-border-bottom-left-radius: 2px;
          border-bottom-right-radius: 2px;
          border-bottom-left-radius: 2px;
          margin: auto;
          padding: 4px;
          color: #BFA491;
          width: 85%;
          text-align: center;
          height: 14px;
          font-size: 11px;
    }

    Mon index-box est également modifié en conséquence, si vous en avez besoin je peux le fournir sans souci!
    Merci à ceux qui se pencheront sur mon problème pour m'aider, ce serait très gentil et je suis encore une grande débutante donc m'aider pas à pas serait le mieux [résolu]Image dans la description des forums 73120010
MessageSujet: [résolu]Image dans la description des forums   [résolu]Image dans la description des forums EmptyMer 01 Aoû 2012, 14:27
Revenir en haut Aller en bas
http://not-yet.net/
* Luce
* Luce
{ Membre }
{ Membre }

Féminin Messages : 37



[résolu]Image dans la description des forums Empty
    Youhouuu j'ai finalement réussi en rajoutant très simplement
    Code:
    overflow : scroll;
    à mon code CSS, les images se retrouvent toutes très bien dans le cadre!
    Résultat en image :
    https://i.servimg.com/u/f43/14/73/13/17/captur26.png
    Toutefois j'ai encore besoin d'aide car j'aimerais rajouter une marge entre l'image et le texte de façon à ce qu'ils ne soient pas collés et ça je ne sais pas faire…

    J'edit encore, en rajoutant également
    Code:
    text-indent: 10px;
    à mon code CSS le texte ne se colle plus à l'image mais uniquement sur la première ligne, est-ce possible que cela s'applique sur toutes les lignes ?
MessageSujet: Re: [résolu]Image dans la description des forums   [résolu]Image dans la description des forums EmptyJeu 02 Aoû 2012, 12:54
Revenir en haut Aller en bas
Faucon
Faucon
{ Membre hyper-actif }
{ Membre hyper-actif }

Masculin Messages : 1757



[résolu]Image dans la description des forums Empty
Hello

Pourrais tu nous donner ton Template, s'il te plait ?

Merci
MessageSujet: Re: [résolu]Image dans la description des forums   [résolu]Image dans la description des forums EmptyJeu 02 Aoû 2012, 13:07
Revenir en haut Aller en bas
http://not-yet.net/
* Luce
* Luce
{ Membre }
{ Membre }

Féminin Messages : 37



[résolu]Image dans la description des forums Empty
Bien sûr! Mon index_box :

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}
 
        {CURRENT_TIME}
 
        </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>
 
        <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
 
        <!-- END switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
  </tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead --><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>
      <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></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>
 
            </span>
        </h{catrow.forumrow.LEVEL}>
 
<!-- [ DÉBUT DES MODIFICATIONS EFFECTUEES PAR LE FORUM DES FORUMS ] -->
 
      <div class="forum-stats">{catrow.forumrow.POSTS} messages, dans {catrow.forumrow.TOPICS} sujets.</div>
<div class="forum-description">
<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
</div>
<div class="forum-sousforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</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 -->
 
        </span>
      </td>
      <!-- BEGIN forum_link_no -->
      <td class="row3 over" align="center" valign="middle" height="50">
        <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>
 
<!-- [ FIN DES MODIFICATIONS EFFECTUEES PAR LE FORUM DES FORUMS ] -->
 
      <!-- END forum_link_no -->
      <!-- BEGIN forum_link -->
      <td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td>
      <!-- END forum_link -->
  </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 -->
MessageSujet: Re: [résolu]Image dans la description des forums   [résolu]Image dans la description des forums EmptyJeu 02 Aoû 2012, 13:18
Revenir en haut Aller en bas
Faucon
Faucon
{ Membre hyper-actif }
{ Membre hyper-actif }

Masculin Messages : 1757



[résolu]Image dans la description des forums Empty
Hello

Dans les descriptions de ton forum que tu as mis dans général > Forum > Catégorie & forums, tu as mis quoi ? Si tu as juste mis le texte, tu dois entourer le texte en faisant
Code:
<div class="NOM DE LA CLASSE">Texte</div>
et apres
Code:
NOM DE LA CLASSE {
padding: XXpx;
}

Es ce que cela marche ?
MessageSujet: Re: [résolu]Image dans la description des forums   [résolu]Image dans la description des forums EmptyJeu 02 Aoû 2012, 14:02
Revenir en haut Aller en bas
http://not-yet.net/
* Luce
* Luce
{ Membre }
{ Membre }

Féminin Messages : 37



[résolu]Image dans la description des forums Empty
Oui à la base j'avais simplement mis le texte et l'url de l'image dans la partie prévue pour.
J'ai testé ce que tu m'as donné mais ça ne marche pas… mais est-ce que tu as vu ma seconde requête ? J'avais réussi à faire une marge (enfin ça ressemblait juste à un alinéa au final) et j'aimerais que ça s'applique à toutes les lignes de la description mais je ne sais pas du tout si c'est possible.

En tout cas merci de cette réponse! (:
MessageSujet: Re: [résolu]Image dans la description des forums   [résolu]Image dans la description des forums EmptyJeu 02 Aoû 2012, 14:21
Revenir en haut Aller en bas
Melone
Melone
{ Modérateur }
{ Modérateur }

Féminin Messages : 805



[résolu]Image dans la description des forums Empty
Salut,
Donc si j'ai bien compris, sur la deuxième ligne de ton texte ça se recolle ?
On va faire "à peu près" la même procédure que Faucon.

On image que dans ta description de catégorie tu as un truc du genre :
Code:
<im src="lien de l'image"/> Texte blablala..

Ce que tu vas faire c'est de rajouter une div seulement au texte avec une class :
Code:
<im src="lien de l'image"/> <div class="texte_description">Texte blablala..</div>

Puis dans ton css, tu ajoutera ceci :
Code:
.texte_description {
margin: 0px 3px 0px 0px;
}

Cordialement,
MessageSujet: Re: [résolu]Image dans la description des forums   [résolu]Image dans la description des forums EmptyJeu 02 Aoû 2012, 14:30
Revenir en haut Aller en bas
http://enaevolare.fr
'Christa
'Christa
Lostmindy
Lostmindy

Féminin Messages : 2856



[résolu]Image dans la description des forums Empty
Une classe, bon dieu, pas une class !

Sinon pour le problème en question - bonjour, au fait ^^ - la solution la plus simple me semble de rajouter une marge à l'image en elle même :
Code:
.forum-description img { margin-right : 15px }

Pour information la propriété text-indent est un alinéa, il est donc normal que ça "ressemble à un alinéa" XD
MessageSujet: Re: [résolu]Image dans la description des forums   [résolu]Image dans la description des forums EmptyVen 03 Aoû 2012, 08:17
Revenir en haut Aller en bas
http://not-yet.net/
* Luce
* Luce
{ Membre }
{ Membre }

Féminin Messages : 37



[résolu]Image dans la description des forums Empty
    Ahah alors c'était aussi simple! Je te remercie Christa, et pour ton code (ça marche très bien, c'est parfait *___*) et pour ta précision pour text-indent mouahah (je débute :'D)

    [résolu]Image dans la description des forums 3933776953 Problème réglé, vous pouvez classer!
MessageSujet: Re: [résolu]Image dans la description des forums   [résolu]Image dans la description des forums EmptyVen 03 Aoû 2012, 08:51
Revenir en haut Aller en bas
pamina
pamina
{ Membre actif }
{ Membre actif }

Féminin Messages : 1170



[résolu]Image dans la description des forums Empty
Merci Luce d'avoir signalé le résolu.
Je classe, donc. Very Happy
MessageSujet: Re: [résolu]Image dans la description des forums   [résolu]Image dans la description des forums EmptyVen 03 Aoû 2012, 13:26
Revenir en haut Aller en bas
Contenu sponsorisé




[résolu]Image dans la description des forums Empty
MessageSujet: Re: [résolu]Image dans la description des forums   [résolu]Image dans la description des forums Empty
Revenir en haut Aller en bas
 

[résolu]Image dans la description des forums

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

 Sujets similaires

-
» /RESOLU/ Dissocier la description et l'image d'un forum dans le template
» Description des sous-forums s'affichant dans le cadre de la description du forum.
» [Résolu] Affichage des forums, sous-forums : remplacer l'image par un texte
» [résolu]Insérer une image différente entre les sous forums et la description du forum
» Englober description et sous-forums dans un seul cadre

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 | Forum gratuit | Informatique et Internet | Internet