Problèmes d'affichage des sujets Bouton_activeProblèmes d'affichage des sujets Bouton_hoverProblèmes d'affichage des sujets Fb-hoverProblèmes d'affichage des sujets 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
Problèmes d'affichage des sujets EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
Problèmes d'affichage des sujets EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Problèmes d'affichage des sujets EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Problèmes d'affichage des sujets EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Problèmes d'affichage des sujets EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Problèmes d'affichage des sujets EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Problèmes d'affichage des sujets EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Problèmes d'affichage des sujets EmptySam 11 Fév 2023, 06:04 par Krager

Le Deal du moment :
LEGO Icons 10331 – Le martin-pêcheur
Voir le deal
35 €

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

Problèmes d'affichage des sujets

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Aller à la page : 1, 2  Suivant
Xibition
Xibition
{ Membre }
{ Membre }

Féminin Messages : 115



Problèmes d'affichage des sujets Empty
Bonsoir, oui c'est encore moi silent Je reviens vers vous pour redemander de l'aide. Après avoir fait des catégories de rêves avec l'aide de 'Christa j'aimerais maintenant avoir des sujets de rêve Problèmes d'affichage des sujets 1779901633

Bref, j'ai déjà l'apparence que je veux sur mon forum (ou presque). Mais y'a quand même de graves erreurs que je ne sais pas fixer.. Une capture de ce que j'ai :
Spoiler:

Déjà je suis sûr que le template est pourri, je voulais essayer d'utiliser le positionnement relatif et absolu (comme 'Christa m'avait expliqué) mais là le template topic_list_box .. je me perds complétement. Et j'ai déjà essayé de suivre le décryptage du template sur CSSactif mais bon je n'ai rien pigé. pale

Donc ce que j'aimerais c'est centrer et le "publié par X" et la description du sujet, et les pages. Tous dans le même cadre. Et si possible une correction du template Problèmes d'affichage des sujets 577704309

Mon template :
Code:
<!-- BEGIN topics_list_box --><!-- BEGIN row --><!-- BEGIN header_table --><!-- BEGIN multi_selection -->
<script type="text/javascript">
function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
   var all_checked = true;
   for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
      if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
         all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
      }
   }
   document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
}
function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
   for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
      if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
         document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
      }
   }
}
</script>
<!-- END multi_selection -->

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      
<th colspan="{topics_list_box.row.header_table.COLSPAN}" align="center" nowrap="nowrap"> Sujets et statistiques  </th>

      <!-- BEGIN multi_selection -->
      <th align="center" nowrap="nowrap" width="20"><input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" /></th>
   <!-- END multi_selection -->
   </tr>
   <!-- BEGIN pagination -->
   <tr>
      <td class="row1" colspan="7" align="right"><span class="gensmall">{PAGINATION}</span></td>
   </tr>
   <!-- END pagination -->
   <!-- END header_table --><!-- BEGIN header_row -->
   <tr>
      <td class="row3" colspan="{topics_list_box.row.COLSPAN}"><span class="gensmall"> <b>{topics_list_box.row.L_TITLE}</b></span></td>
   </tr>
<!-- END header_row -->

<!-- BEGIN topic -->
{topics_list_box.row.END_TABLE_STICKY}
   <tr>
      <!-- BEGIN single_selection -->
      <td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20"><input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></td>
      <!-- END single_selection -->
      <td class="{topics_list_box.row.ROW_FOLDER_CLASS}" align="center" valign="middle" width="20"><img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" /></td>
      <!-- BEGIN icon -->
      <td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20">{topics_list_box.row.ICON}</td>
      <!-- END icon -->
         <td class="{topics_list_box.row.ROW_CLASS}" onmouseover='this.className="row2"' onmouseout='this.className="{topics_list_box.row.ROW_CLASS}"' width="100%">
        <table width="100%">
        <tr>
       
        <td> 
        <div class="topictitle">
            {topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}
          <h2 class="topic-title"><div style="margin-left: -80px;" class="titredessujets">
        <div class="vuerep"> <img src="http://icons.iconarchive.com/icons/pixelmixer/basic/16/bubble-icon.png"></img> {topics_list_box.row.REPLIES}<br />
          <img src="http://icons.iconarchive.com/icons/itzikgur/my-seven/16/Favorities-icon.png"></img> {topics_list_box.row.VIEWS}</div><br /> 
            <a class="topictitle1" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>  <!-- BEGIN switch_description -->
        <span class="genmed">
            <br />
            {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
        </span>
        <!-- END switch_description -->
            <br /><span class="sujetext"> • publié par <strong>{topics_list_box.row.TOPIC_AUTHOR}</strong>.</span>  </div>
            </h2>
 
        </div>
         
     
        <span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span>
        <span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>
        </td>
       
     
       
        </tr>
        </table>
       
      </td>
         
         

<!-- BEGIN multi_selection -->
      <td class="row2" align="center" valign="middle"><span class="postdetails"><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></span></td>
   <!-- END multi_selection -->
   </tr>
   <!-- END topic --><!-- BEGIN no_topics -->
   <tr>
      <td class="row1" colspan="{topics_list_box.row.COLSPAN}" align="center" valign="middle" height="30"><span class="gen">{topics_list_box.row.L_NO_TOPICS}</span></td>
   </tr>
   <!-- END no_topics --><!-- BEGIN bottom -->
   <tr>
      <td class="catBottom" colspan="{topics_list_box.row.COLSPAN}" valign="middle">
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                                  <td align="right"> <span class="gensmall">{PAGINATION}</span></td>
               <td align="right"><a href="#top">{L_BACK_TO_TOP}</a> </td>
            </tr>
         </table>
      </td>
   </tr>
<!-- END bottom --><!-- BEGIN footer_table -->
</table><!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer --><!-- END row --><!-- END topics_list_box -->

Lien vers un sujet : http://pooop-s.forumgratuit.org/f1-reunion-des-graphistes
Merci d'avance I love you
MessageSujet: Problèmes d'affichage des sujets   Problèmes d'affichage des sujets EmptyMer 15 Aoû 2012, 20:52
Revenir en haut Aller en bas
http://www.dexx-creative-studio.fr
DexX
DexX
{ Membre }
{ Membre }

Masculin Messages : 57



Problèmes d'affichage des sujets Empty
Bonjour,

Est-ce que tu peux me montrer le code CSS de la class : sujetext

Amicalement,
DexX
MessageSujet: Re: Problèmes d'affichage des sujets   Problèmes d'affichage des sujets EmptyJeu 16 Aoû 2012, 09:20
Revenir en haut Aller en bas
Xibition
Xibition
{ Membre }
{ Membre }

Féminin Messages : 115



Problèmes d'affichage des sujets Empty
oui la voilà :
Code:
.sujetext {
color: #6375D1;
font-size: 11px;
font-weight: normal;
letter-spacing: 2px;
}

Merci Very Happy
MessageSujet: Re: Problèmes d'affichage des sujets   Problèmes d'affichage des sujets EmptyJeu 16 Aoû 2012, 09:41
Revenir en haut Aller en bas
http://www.dexx-creative-studio.fr
DexX
DexX
{ Membre }
{ Membre }

Masculin Messages : 57



Problèmes d'affichage des sujets Empty
Alors je ne sais pas exactement ce que tu souhaites, mais dans ta class CSS :

Code:
titredessujets

Rajoutes :

Code:
text-align: center;

Amicalement,
DexX
MessageSujet: Re: Problèmes d'affichage des sujets   Problèmes d'affichage des sujets EmptyJeu 16 Aoû 2012, 09:46
Revenir en haut Aller en bas
Xibition
Xibition
{ Membre }
{ Membre }

Féminin Messages : 115



Problèmes d'affichage des sujets Empty
Coucouu, oui c'est bien centré mais si vous allez voir ici, le texte se met au dessus de l'icone du sujet. voilà ce que je voudrais avoir normalement :
Spoiler:

C'est à peu près le même affichage pour l'instant, mais il me reste quelques détails. Comme l'icone du sujet qui devra être au dessus d'un cercle. Je ne sais pas si c'est clair, mais y'a un cercle blanc puis l'icone au dessus comme sur le schéma. Problèmes d'affichage des sujets 1779901633
MessageSujet: Re: Problèmes d'affichage des sujets   Problèmes d'affichage des sujets EmptyJeu 16 Aoû 2012, 09:58
Revenir en haut Aller en bas
http://www.dexx-creative-studio.fr
DexX
DexX
{ Membre }
{ Membre }

Masculin Messages : 57



Problèmes d'affichage des sujets Empty
Vous aimeriez que cette icône :

Problèmes d'affichage des sujets 662128annonce

Soit à l'intérieur d'un cercle blanc ?
MessageSujet: Re: Problèmes d'affichage des sujets   Problèmes d'affichage des sujets EmptyJeu 16 Aoû 2012, 10:03
Revenir en haut Aller en bas
Xibition
Xibition
{ Membre }
{ Membre }

Féminin Messages : 115



Problèmes d'affichage des sujets Empty
Oui voilà, un cercle au dessous de l'icône. Et les deux au dessus du corps du sujet x) (en gris sur le schéma)
MessageSujet: Re: Problèmes d'affichage des sujets   Problèmes d'affichage des sujets EmptyJeu 16 Aoû 2012, 10:16
Revenir en haut Aller en bas
http://www.dexx-creative-studio.fr
DexX
DexX
{ Membre }
{ Membre }

Masculin Messages : 57



Problèmes d'affichage des sujets Empty
D'accord, je vais regarder.

Sinon pour pas que la description de votre annonce ne s'affiche dessus l'icône, rajoutez dans la balise :

Code:
genmed

Ceci :

Code:
padding-right: 150px;

Le chiffre peut-être modifié, c'est selon votre envie.

Pour le cercle, si ce sont des icônes que vous créez vous même, le plus simple, je pense, et de rajouter graphiquement (avec photoshop par exemple), le cercle bleu dont vous souhaitez.

Sinon, je ne vois pas votre demande, peut-être avec un dessin plus clair ^^ (Si ce n'est pas trop vous demandez ^^).

Sinon pour créer un cercle en HTML / CSS, il faut faire comme cela :

Code HTML :

Code:
<div class="votre_cercle"></div>

Code CSS :

Code:
.cercle {
width: 50px;
height: 50px;
background-color: #5697DB;
border: 1px solid #5697DB;
-webkit-border-radius: 25px;
-khtml-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
}

Si vous comprenez pas le code CSS, demandez moi, je vous expliquerais les différentes actions de chaque balises.

Amicalement,
DexX
MessageSujet: Re: Problèmes d'affichage des sujets   Problèmes d'affichage des sujets EmptyJeu 16 Aoû 2012, 10:26
Revenir en haut Aller en bas
Xibition
Xibition
{ Membre }
{ Membre }

Féminin Messages : 115



Problèmes d'affichage des sujets Empty
Merci Very Happy Au fait le genmed ça ne marche pas, ça fait bouger tout les textes du forum. Et sinon pour le cercle, le cercle blanc sera en html/css comme dans votre exemple, et l'icône c'est une image biensur. Le problème c'est que je ne sais pas comment placer le cercle blanc dans le template. Problèmes d'affichage des sujets 1779901633
MessageSujet: Re: Problèmes d'affichage des sujets   Problèmes d'affichage des sujets EmptyJeu 16 Aoû 2012, 10:39
Revenir en haut Aller en bas
http://www.dexx-creative-studio.fr
DexX
DexX
{ Membre }
{ Membre }

Masculin Messages : 57



Problèmes d'affichage des sujets Empty
Voici le template avec l'emplacement du cercle, il ne vous reste plus qu'à créer la class CSS "cercle" avec le code que je vous ai donné.

Code:
<!-- BEGIN topics_list_box --><!-- BEGIN row --><!-- BEGIN header_table --><!-- BEGIN multi_selection -->
<script type="text/javascript">
function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
  var all_checked = true;
  for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
      if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
        all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
      }
  }
  document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
}
function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
  for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
      if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
        document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
      }
  }
}
</script>
<!-- END multi_selection -->

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr>
     
<th colspan="{topics_list_box.row.header_table.COLSPAN}" align="center" nowrap="nowrap"> Sujets et statistiques  </th>

      <!-- BEGIN multi_selection -->
      <th align="center" nowrap="nowrap" width="20"><input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" /></th>
  <!-- END multi_selection -->
  </tr>
  <!-- BEGIN pagination -->
  <tr>
      <td class="row1" colspan="7" align="right"><span class="gensmall">{PAGINATION}</span></td>
     <div id="cercle"></div>
  </tr>
  <!-- END pagination -->
  <!-- END header_table --><!-- BEGIN header_row -->
  <tr>
      <td class="row3" colspan="{topics_list_box.row.COLSPAN}"><span class="gensmall"> <b>{topics_list_box.row.L_TITLE}</b></span></td>
  </tr>
<!-- END header_row -->

<!-- BEGIN topic -->
{topics_list_box.row.END_TABLE_STICKY}
  <tr>
      <!-- BEGIN single_selection -->
      <td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20"><input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></td>
      <!-- END single_selection -->
      <td class="{topics_list_box.row.ROW_FOLDER_CLASS}" align="center" valign="middle" width="20"><img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" /></td>
      <!-- BEGIN icon -->
      <td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20">{topics_list_box.row.ICON}</td>
      <!-- END icon -->
          <td class="{topics_list_box.row.ROW_CLASS}" onmouseover='this.className="row2"' onmouseout='this.className="{topics_list_box.row.ROW_CLASS}"' width="100%">
        <table width="100%">
        <tr>
       
        <td> 
        <div class="topictitle">
            {topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}
          <h2 class="topic-title"><div style="margin-left: -80px;" class="titredessujets">
        <div class="vuerep"> <img src="http://icons.iconarchive.com/icons/pixelmixer/basic/16/bubble-icon.png"></img> {topics_list_box.row.REPLIES}<br />
          <img src="http://icons.iconarchive.com/icons/itzikgur/my-seven/16/Favorities-icon.png"></img> {topics_list_box.row.VIEWS}</div><br /> 
            <a class="topictitle1" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>  <!-- BEGIN switch_description -->
        <span class="genmed">
            <br />
            {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
        </span>
        <!-- END switch_description -->
            <br /><span class="sujetext"> • publié par <strong>{topics_list_box.row.TOPIC_AUTHOR}</strong>.</span>  </div>
            </h2>
 
        </div>
         
     
        <span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span>
        <span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>
        </td>
       
     
       
        </tr>
        </table>
       
      </td>
         
         

<!-- BEGIN multi_selection -->
      <td class="row2" align="center" valign="middle"><span class="postdetails"><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></span></td>
  <!-- END multi_selection -->
  </tr>
  <!-- END topic --><!-- BEGIN no_topics -->
  <tr>
      <td class="row1" colspan="{topics_list_box.row.COLSPAN}" align="center" valign="middle" height="30"><span class="gen">{topics_list_box.row.L_NO_TOPICS}</span></td>
  </tr>
  <!-- END no_topics --><!-- BEGIN bottom -->
  <tr>
      <td class="catBottom" colspan="{topics_list_box.row.COLSPAN}" valign="middle">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                                  <td align="right"> <span class="gensmall">{PAGINATION}</span></td>
              <td align="right"><a href="#top">{L_BACK_TO_TOP}</a> </td>
            </tr>
        </table>
      </td>
  </tr>
<!-- END bottom --><!-- BEGIN footer_table -->
</table><!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer --><!-- END row --><!-- END topics_list_box -->

Amicalement,
DexX
MessageSujet: Re: Problèmes d'affichage des sujets   Problèmes d'affichage des sujets EmptyJeu 16 Aoû 2012, 10:43
Revenir en haut Aller en bas
Xibition
Xibition
{ Membre }
{ Membre }

Féminin Messages : 115



Problèmes d'affichage des sujets Empty
Rien ne s'affiche ! No
MessageSujet: Re: Problèmes d'affichage des sujets   Problèmes d'affichage des sujets EmptyJeu 16 Aoû 2012, 10:54
Revenir en haut Aller en bas
http://www.dexx-creative-studio.fr
DexX
DexX
{ Membre }
{ Membre }

Masculin Messages : 57



Problèmes d'affichage des sujets Empty
Envoie un moyen de te contacter rapidement (Skype, MSN, Facebook), peut importe.

Je suis au travail, donc je ne peux pas trop t'aider. Du moins, pas comme je le pourrais.

Je finis à 17h. Donc à 17h30, je pourrais regarder cela avec toi.

Amicalement,
DexX
MessageSujet: Re: Problèmes d'affichage des sujets   Problèmes d'affichage des sujets EmptyJeu 16 Aoû 2012, 11:04
Revenir en haut Aller en bas
Xibition
Xibition
{ Membre }
{ Membre }

Féminin Messages : 115



Problèmes d'affichage des sujets Empty
D'accord ce n'est pas grave, j'attends Smile
MessageSujet: Re: Problèmes d'affichage des sujets   Problèmes d'affichage des sujets EmptyJeu 16 Aoû 2012, 11:08
Revenir en haut Aller en bas
http://enaevolare.fr
'Christa
'Christa
Lostmindy
Lostmindy

Féminin Messages : 2856



Problèmes d'affichage des sujets Empty
Hello !

J'ai un peu de mal à comprendre ce que tu as codé au juste XD (et à partir de là, toutes mes explications partiront du principe que tu voulais faire du positionnement relatif et absolu mais que tu n'avais toujours pas compris qu'il fallait mettre un position:relative et position:absolute pour que ça marche è_é)

La partie "importante", si j'ai bien suivi, c'est celle ci :
Code:
<div class="topictitle">
                  {topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}
                 <h2 class="topic-title"><div style="margin-left: -80px;" class="titredessujets">
                <div class="vuerep"> <img src="http://icons.iconarchive.com/icons/pixelmixer/basic/16/bubble-icon.png"></img> {topics_list_box.row.REPLIES}<br />
                 <img src="http://icons.iconarchive.com/icons/itzikgur/my-seven/16/Favorities-icon.png"></img> {topics_list_box.row.VIEWS}</div><br /> 
                   <a class="topictitle1" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>  <!-- BEGIN switch_description -->
                <span class="genmed">
                  <br />
                  {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
                </span>
                <!-- END switch_description -->
                   <br /><span class="sujetext"> • publié par <strong>{topics_list_box.row.TOPIC_AUTHOR}</strong>.</span>  </div>
                  </h2>
          
                </div>
               
                <span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span>
        <span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>
Toute cette section est placée dans une cellule de tableau, et on peut déjà constater que l'icone de sujet n'en fait pas partie, ce qui explique déjà pourquoi tu as du mal à t'en dépétrer. Dans l'idéal, il te faudrait te débarrasser de tout le tableau, et non pas en rajouter un x_x

Je ne sais pas si tu te rends compte mais on a tout le sujet (titre, description, vues, etc) à l'intérieur d'un titre ! (D'ailleurs DexX je ne comprends pas que tu n'ait pas signalé cette horreur) Regarde, en faisant un code indenté :
Code:
<div class="topictitle">
   {topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}
   <h2 class="topic-title">
      <div style="margin-left: -80px;" class="titredessujets">
         <div class="vuerep">
            <img src="http://icons.iconarchive.com/icons/pixelmixer/basic/16/bubble-icon.png"></img>
            {topics_list_box.row.REPLIES}<br />
            <img src="http://icons.iconarchive.com/icons/itzikgur/my-seven/16/Favorities-icon.png"></img> {topics_list_box.row.VIEWS}
         </div>
         <br /> 
         <a class="topictitle1" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a> 
         
         <!-- BEGIN switch_description -->
         <span class="genmed">
            <br />
            {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
         </span>
         <!-- END switch_description -->
         <br />
         <span class="sujetext"> • publié par <strong>{topics_list_box.row.TOPIC_AUTHOR}</strong>.</span> 
      </div>
   </h2>
</div>
On voit bien que tout le contenu de ton code est inclus à l'intérieur d'une balise <h2>, c'est MAUVAIS.

En passant, je te signale que la balise <img> est une balise orpheline, elle n'a pas de balise fermante </ img>, ça veut dire qu'on met le slash à la fin, comme ça :
Code:
<img src="URL_IMAGE" alt="texte alternatif" />

Bon, pour rectifier ton code, il serait bien de commencer par en faire quelque chose de plus propre.

Pour commencer, pourquoi toute la partie qui se charge de l'affichage d'un sujet est elle inclue dans une balise qui s'appelle "topictittle" (titre du topic en français) ?

Ensuite les bouts de codes utiles dont tu as besoin sont :

Le titre d'un sujet :
Code:
   <h2 class="topic-title">
{topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}
      <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
   </h2>

La description d'un sujet
Code:
<!-- BEGIN switch_description -->
<div class="genmed DescSujet">
   {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
</div>
<!-- END switch_description -->
Si tu regardes bien le span est devenu un div et j'ai rajouté une classe, je trouve ça plus pratique.

Ta boite avec les vues et les réponses :
Code:
<div class="vuerep">
   <img src="http://icons.iconarchive.com/icons/pixelmixer/basic/16/bubble-icon.png" /> {topics_list_box.row.REPLIES}
   <br />
   <img src="http://icons.iconarchive.com/icons/itzikgur/my-seven/16/Favorities-icon.png" /> {topics_list_box.row.VIEWS}
</div>

La pagination et autres liens importants
Code:
<span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span>
<span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>

Le nom de l'auteur
Code:
<div class="sujetext"> • publié par <strong>{topics_list_box.row.TOPIC_AUTHOR}</strong>.</div>
(Oui j'ai remplacé le span par un div, ça permettra aussi de se débarrasser du saut de ligne juste avant)

L'icone de sujet
Je vais pas me compliquer la vie, plus haut dans ton code tu as cette partie :
Code:
<img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" />

Tu la supprimes, pour commencer, et le code dont tu auras besoin pour afficher l'icone de sujet sera donc :
Code:
<div class="IcoSujet">
   <img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" />
</div>

Maintenant, il ne te reste plus qu'à jouer aux légos comme pour les catégories, et faire quelque chose comme ça :
Code:
<div class="UnTopic">
   ICONE DE SUJET (positionné en absolu)
   
   <div class="ContenuTopic">
      LE TITRE
      
      LA DESCRIPTION
      
      L'AUTEUR
      
      LA PAGINATION
   </div>
   
   LA BOITE DES VUES ET REPONSES (positionné en absolu)
   
</div>
Avec la classe .UnTopic en positionnement relatif, avec ton fond jaune à bordures bleues et arrondies.
Et la classe .ContenuTopic, la classe .IcoSujet (que j'ai mentionnée plus haut) et la classe .vuerep en positionnement absolu.

(En principe c'est simple, tu prends des boites et tu les places soit l'une dans l'autre (balises imbriquées), soit l'une à côté de l'autre, soit l'une sur l'autre (positionnement absolu). Moi ça me semble évid*SCHPAFF!!* oui, oui, j'arrête de frimer U_U)

Bon courage x)

(Comme la dernière fois, je te conseille d'abord d'essayer de coder la mise en page dans une page HTML à part avant de la mettre en pratique, ne serait ce que pour ajuster le positionnement au pixel près. N'oublie pas de mettre un fond de couleur flashy pour t'aider à positionner les blocs @_@)


Avec les fonds on voit bien où sont les blocs les uns par rapport aux autres, après il sera toujours temps de retirer lesdits fonds. Et comme d'hab : pas de CSS dans le HTML, utilise toujours des classes.
MessageSujet: Re: Problèmes d'affichage des sujets   Problèmes d'affichage des sujets EmptyVen 17 Aoû 2012, 15:42
Revenir en haut Aller en bas
Xibition
Xibition
{ Membre }
{ Membre }

Féminin Messages : 115



Problèmes d'affichage des sujets Empty
Christaaaaaa toujours là pour me sauver Calins

Merci beaucoup pour les détails, c'est bon pour l'affichage des sujets. Par contre je me rend compte que les derniers messages ne sont plus là Rire J'ai du les supprimer à force de bidouiller.. Cependant j'aime l'affichage des sujets comme ça, donc le fait d'ajouter les derniers messages dans le corps va faire un peu chargé. Est ce possible de le mettre dans une infobulle quand on survol sur l'icône du sujet ?

J'ai essayé et ça décale, voici le template avec l'infobulle que j'ai essayé :




Et le css de l'infobulle :


MessageSujet: Re: Problèmes d'affichage des sujets   Problèmes d'affichage des sujets EmptyVen 17 Aoû 2012, 19:34
Revenir en haut Aller en bas
http://enaevolare.fr
'Christa
'Christa
Lostmindy
Lostmindy

Féminin Messages : 2856



Problèmes d'affichage des sujets Empty
Bon XD On parle de cette partie je crois bien :

Code:
 <div class="InfobulleTopic"><div class="IcoSujet">
  <img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" />
    </div><div class="BulleTopic"><span class="postdetails">{topics_list_box.row.LAST_POST_TIME}<br />{topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</span>
    </div></div>

JE te conseille de la transformer comme ceci :
Code:
<div class="cercletopic"></div>
<div class="IcoSujet">
   <img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" />
   <div class="BulleTopic">
      <span class="postdetails">{topics_list_box.row.LAST_POST_TIME}<br />{topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</span>
    </div>
</div>

Et dans ton CSS, à la place de .InfobulleTopic .BulleTopic (par exemple), tu mettras .IcoSujet .BulleTopic

Par contre le code que tu as utilisé est un peu bizarre et je suis un poil à la bourre là donc j'y vais rapidement. Je pense que tu as oublié de positionner ton infobulle (pour tester, essaie de coder de façon à ce que l'infobulle soit tout le temps là, puis seulement ensuite cache la). Et comme elle n'est pas cachée par défaut (display:none) mais juste transparente (opacity:0) même si elle est invisible, elle est toujours là, d'où le décalage (normalement le position:absolute devrait régler ce détail).
MessageSujet: Re: Problèmes d'affichage des sujets   Problèmes d'affichage des sujets EmptySam 18 Aoû 2012, 05:10
Revenir en haut Aller en bas
Xibition
Xibition
{ Membre }
{ Membre }

Féminin Messages : 115



Problèmes d'affichage des sujets Empty
Bonjour Very Happy

D'accord par contre je n'ai pas compris pour le css Embarassed
MessageSujet: Re: Problèmes d'affichage des sujets   Problèmes d'affichage des sujets EmptySam 18 Aoû 2012, 12:29
Revenir en haut Aller en bas
http://enaevolare.fr
'Christa
'Christa
Lostmindy
Lostmindy

Féminin Messages : 2856



Problèmes d'affichage des sujets Empty
Heu, mon explication précipitée ? XD

Techniquement, c'est toi qui as utilisé un CSS chelou pour ton infobulle, moi je ne sais pas trop quoi te dire, il fait beaucoup trop chaud pour cogiter @x@

En fait de ce que j'ai pu lire de ton CSS, par défaut l'infobulle est cachée car elle a une opacité de 0 (elle est donc transparente). Puis quand on survole le bloc, elle apparait.

Mais contrairement aux infobulles où on utilise "display:none"; elle est toujours là même si elle est invisible, et donc elle prend de la place. Je pense donc que c'est de là que vient le "décalage" dont tu parles.

Déjà pour commencer faudrait que tu la positionnes en absolu, comme ça elle sera par dessus le reste U.U
MessageSujet: Re: Problèmes d'affichage des sujets   Problèmes d'affichage des sujets EmptySam 18 Aoû 2012, 12:41
Revenir en haut Aller en bas
Xibition
Xibition
{ Membre }
{ Membre }

Féminin Messages : 115



Problèmes d'affichage des sujets Empty
D'accord donc là j'ai changé le css, voilà ce que j'ai mis :

Code:
.IcoSujet .BulleTopic{
position: absolute;
background-color: #000000;
padding: 5px;
left: -1000px;
visibility: hidden;
color: #FFFFFF;}

 
.IcoSujet:hover .BulleTopic{
visibility: visible;
top: 70px;
left: 35px;
width: 150px ;
color:#FFFFFF;
border: 1px solid #000;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;}


Mais ça décale encore plus maintenant x)
MessageSujet: Re: Problèmes d'affichage des sujets   Problèmes d'affichage des sujets EmptySam 18 Aoû 2012, 12:57
Revenir en haut Aller en bas
http://enaevolare.fr
'Christa
'Christa
Lostmindy
Lostmindy

Féminin Messages : 2856



Problèmes d'affichage des sujets Empty
*regard noir* Ton forum porte bien son adresse è_é

Montre moi ce que tu fais sur une page HTML à part que je puisse au moins voir en live ce que ça donne ;_;
MessageSujet: Re: Problèmes d'affichage des sujets   Problèmes d'affichage des sujets EmptySam 18 Aoû 2012, 12:59
Revenir en haut Aller en bas
Xibition
Xibition
{ Membre }
{ Membre }

Féminin Messages : 115



Problèmes d'affichage des sujets Empty
c'est pas beau à voir lol, voilà ce que ca donne : http://pooop-s.forumgratuit.org/f1-reunion-des-graphistes

EDIT : Ah au fait j'ai compris .. j'ai supprimé la partie .UnTopic du template Embarassed
Et si j'aimerais ajouter les tables autour des sujets ? je dois les positionner dans quelle partie du template ? Rolling Eyes
MessageSujet: Re: Problèmes d'affichage des sujets   Problèmes d'affichage des sujets EmptySam 18 Aoû 2012, 13:05
Revenir en haut Aller en bas
http://enaevolare.fr
'Christa
'Christa
Lostmindy
Lostmindy

Féminin Messages : 2856



Problèmes d'affichage des sujets Empty
Comment ça des tables autour des sujets ? Tu trouves pas que c'est assez encombrant comme ça ? O.o
MessageSujet: Re: Problèmes d'affichage des sujets   Problèmes d'affichage des sujets EmptySam 18 Aoû 2012, 16:08
Revenir en haut Aller en bas
Xibition
Xibition
{ Membre }
{ Membre }

Féminin Messages : 115



Problèmes d'affichage des sujets Empty
Ce sera plus joli avec l'entete et le footer (genre les images qu'on met en haut et en bas), comme pour les catégories Rolling Eyes
MessageSujet: Re: Problèmes d'affichage des sujets   Problèmes d'affichage des sujets EmptyDim 19 Aoû 2012, 11:36
Revenir en haut Aller en bas
http://enaevolare.fr
'Christa
'Christa
Lostmindy
Lostmindy

Féminin Messages : 2856



Problèmes d'affichage des sujets Empty
Me r'voilà.

Alors pour rajouter un en-tête et un footer... Tu pourrais utiliser une structure de ce genre :
Code:
<div class="EnTeteTopics"></div>
<div class="CorpsTopics"> (contenu des topics etc...)</div>
<div class="PiedTopics"></div>

En plaçant les balises autour du tableau, donc avant la première balise <table ...> et après la dernière balise </table>

Après c'est juste un peu de CSS, c'est à dire une image de fond et une hauteur pour les en-tête et pied de tableau, et une couleur de fond voire rien du tout pour la classe centrale, c'est à voir.
MessageSujet: Re: Problèmes d'affichage des sujets   Problèmes d'affichage des sujets EmptyVen 24 Aoû 2012, 11:20
Revenir en haut Aller en bas
Xibition
Xibition
{ Membre }
{ Membre }

Féminin Messages : 115



Problèmes d'affichage des sujets Empty
Coucou, désolée du retard , et merci beaucoup c'est parfait ! Problèmes d'affichage des sujets 2176505670
MessageSujet: Re: Problèmes d'affichage des sujets   Problèmes d'affichage des sujets EmptyLun 27 Aoû 2012, 10:28
Revenir en haut Aller en bas
Contenu sponsorisé




Problèmes d'affichage des sujets Empty
MessageSujet: Re: Problèmes d'affichage des sujets   Problèmes d'affichage des sujets Empty
Revenir en haut Aller en bas
 

Problèmes d'affichage des sujets

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

 Sujets similaires

-
» trois problèmes ><
» Problèmes Onglets
» Problèmes de couleurs
» Plusieurs problèmes
» Problèmes de titres

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