Mauvaise position du texte sur une image.

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Mauvaise position du texte sur une image.

Message par Elliot. le Mer 30 Mai 2012 - 19:53

Bonsoir !

Cela fait déjà un moment que je cherche sans parvenir à trouver une réponse à ma question c'est pourquoi je viens (une nouvelle fois) vers vous =) J'ai donc encore un petit problème, un réglage que je n'arrive pas à corriger, voici une image pour illustrer ce "probème" :



Comme vous pouvez le voir, le texte est situé trop haut mais impossible d'y remédier par le biais du CSS scratch (ou alors, je ne connais pas le code). Du coup, j'imagine qu'il faut toucher au Template et là, j'atteins mes limites ^^' Pourriez-vous m'expliquer où est ce que je peux modifier la position de cette partie du forum ?

Un grand merci d'avance et bonne soirée !

Cordialement

Elliot.


Dernière édition par Elliot. le Mer 30 Mai 2012 - 21:34, édité 1 fois

Elliot.
**

Messages : 51
Inscrit(e) le : 20/06/2011

Elliot. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mauvaise position du texte sur une image.

Message par Invité le Mer 30 Mai 2012 - 20:43

Bonsoir,

Sans votre template et votre CSS, pas facile de savoir. Votre texte s'aligne tout en haut, avez-vous essayé de mettre un "padding-top" important, de 8 ou 10px, dans votre CSS?
Dans le template, la cellule du tableau contenant votre dernier message doit être en valign="top", essayez de mettre valign="middle".

Bien sincèrement.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mauvaise position du texte sur une image.

Message par Elliot. le Mer 30 Mai 2012 - 20:58

Pff je suis débile, effectivement le "padding-top" fonctionne très bien, je m'entêtais avec un "margin-top" qui ne fonctionnait pas du tout... bounce
Merci beaucoup !

Je profite du message parce que j'ai ce même problème, j'aimerai baisser les noms des forums, ce qui donnerait sur l'image "le règlement" à cheval sur la description du forum, j'ai bien essayé le padding-top mais ça ne fonctionne pas dans ce cas là :S

Voici mon template 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}<br />
         {CURRENT_TIME}<br />
         </span>
         <!-- END switch_user_logged_in -->
         <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
         <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
         <!-- END switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
   </tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<div align="center" width="752px" border="0"><img src="http://img15.hostingpics.net/pics/845063hautclonne1.png" /></div>
<table align="center" class="forumline" width="706px" 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:155px;"></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">
         
      </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}>
                      <table height="50" width="100%"><tr><td><div><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div></td><td width="8px"></td><td  width="25%"class="sousfo"><span class="gensmall" > <span class="gensmall" id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span><script type="text/javascript">
    jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,' ')).removeAttr('id');
    </script></span>
</td></tr></table>

     
      </td>
      
      <td class="row3 over" align="center" valign="middle" height="50">
        <div class="cat3"><span class="gensmall">{catrow.forumrow.LAST_POST} <div style="float: center;"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div></span></div>
   
         
         
          </td>
   </tr>
   <!-- END forumrow -->
   <!-- BEGIN catfoot -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
   </tr>
   <!-- END catfoot -->
   <!-- BEGIN tablefoot -->
</table><div align="center" width="752px" border="0"><img src="http://img15.hostingpics.net/pics/828983bascolonne1.jpg"/></div><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

puis mon CSS (qui est vraiment bordélique, navrée)

Code:
*/ PAGE D ACCUEIL */

.contenupa {
background-color:
#E8E89F;
text-align: justify;
}

.titrePA {
color:
#FA8228;
font-family: arial;
font-size: 20px;
font-style: italic;
font-weight: 700;
position: relative;
top: 10px;
}

.menu {
font-family: georgia;
font-size: 22px;
font-style: italic;
text-shadow: 0px 0px 2px #fff;
text-align: center;}

.imagepa {border: 3px #fff solid;}

.alattaque {color: #ffffff;
font-style: italic;
font-weight: bold;
font-size: 30px;
letter-spacing: -1px;
font-family: arial;
text-transform: lowercase;
margin-bottom: -10px;
}

hr {border: #fff 1px dashed;}
   
--------------------------


*/ categorie */

.sep{
border-right: 15px solid #fff;/*épaisseur style et couleur de la ligne*/
}

.titrecat {
margin-left: 150px;
margin-top: -100px;
width: 50px;
}

.sousfo{background-color: #E8E89F;
padding: 5px;
color: #D57C04;
text-transform: lowercase;
text-decoration: none;
font-size: 9px;
height:50px;
overflow:auto;}

.cat3 {
background-image: url('http://img15.hostingpics.net/pics/198046bulle.png');
background-position: top-center;
background-repeat: no-repeat;
line-height: 10px;
width: 130px;
margin: 5px;
height: 142px;
text-align: center;
  padding-top: 15px;
}

.description {
background-color: #E8E89F;
padding: 10px;
text-align: justify;
width: auto;
height: 50px;
overflow: auto;
border-left: 4px solid #D57C04;
border-right: 4px solid #D57C04;
color: #B0915B;
font-size: 11px;
-webkit-box-shadow: rgb(151, 148, 143) 0px 0px 4px;}

a.forumlink {
font-size: 30px;
letter-spacing: -2px;
font-family: arial;
text-transform: lowercase;
margin-left: 20px;
}

----------------------------------


*/ QEEL */

.col1, .col2, .col3 {
font-family: arial;
height: 240px;
text-align: justify;
border: none;
background: #transp;
padding: 10px;}


.col {background: #e8e89f; padding: 10px; text-align: justify; height: 250px;}
 
--------------------------------------------


#text_editor_iframe, input, select, textarea {background-color: #1C150C; border: 2px solid;}

.last-post-icon {margin-left: 20px; margin-top: 10px;}

.nameprofile {
font-family: Arial Black; font-weight: bold;
text-transform: uppercase;
font-size: 15px;
text-shadow: 2px 2px 0px #000;
}

.rang {color: #D8CDB1;}


.message {background-image:url('http://img4.hostingpics.net/pics/5947155895.jpg');  -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;  color: #826241; padding: 10px; }

.fond2, .presentation2 {padding: 20px; text-align: justify; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
background-color:#261D12;}


.titre1, .prenom {color: #FFF; text-align: center; font-weight: normal; font-family: georgia; font-size: 40px; letter-spacing: 1px; text-transform: lowercase; line-height: 30px;}

.fond1, .presentation1 {margin-top: 6px; margin-bottom: 6px; margin-right: 16px; margin-left: 16px; padding: 12px;
background-image:url('http://img4.hostingpics.net/pics/5947155895.jpg');
-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
background-color: #C3B18B;}

.soustitre1 {font-family: Georgia; font-size: 22px; font-style: italic; text-transform: lowercase; letter-spacing: -1px; text-align: center; padding: 5px; color: #C3B18B;}


.profil {display:block; color: #c3b18b; font-size: 12px; padding: 10px;
-moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px;
background-image: url('http://img4.hostingpics.net/pics/5947155895.jpg');}

.postdetails, .poster-profile  {color: #432711;}

.img2:hover {
opacity: 1;
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
}

.img2 {
opacity: 0.5;
filter: alpha(opacity=55);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
}
.code, .citation {padding: 10px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 0px 0px 10px #948463, 0px 0px 5px #948463 inset;
-moz-box-shadow: 0px 0px 10px #948463, 0px 0px 5px #948463 inset;
  border: 3px solid #FFFFFF;}


.forumline {border-top: none; }

.encadrement {padding: 5px; overflow: auto;
background-color : #F0E8D3;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 0px 0px 10px #948463, 0px 0px 10px #948463 inset;
-moz-box-shadow: 0px 0px 10px #948463, 0px 0px 10px #948463 inset;
  border: 3px solid #FFFFFF;}

.lienrapide {padding: 5px; text-shadow: 1px 1px 1px #8f5624;
margin: 2px;
  FONT-WEIGHT: bold;
text-align:center;
text-decoration: none !important;
font-family: georgia;
font-style: italic;
text-transform: lowercase;
font-size: 25px;
letter-spacing: 2px;}



a.gensmall, a.gensmall:hover {color: #D57C04; text-align: center; text-decoration: none;}


tr.post span.gensmall { display: none; }

A:link {text-decoration: none !important;}
A:visited {text-decoration: none !important;}
A:active {text-decoration: none !important;}
A:hover {text-decoration: none !important;}

.postbody {
    display: block;
    padding-left: 20px;
    padding-right: 20px;
    text-align:justify !important;
}


.mainmenu{
font-style:italic ;}


.groupes, .groupes2{
padding: 5px;
margin: 2px;
text-align:center;
text-decoration: none !important;
font-family: georgia;
font-style: italic;
text-transform: lowercase;
font-size: 16px;
letter-spacing: 2px;
}


Encore merci pour votre aide !

Elliot.
**

Messages : 51
Inscrit(e) le : 20/06/2011

Elliot. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mauvaise position du texte sur une image.

Message par Invité le Mer 30 Mai 2012 - 21:20

Essayez avec ce template:
Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
  <tr>
      <td valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <span class="gensmall">{LAST_VISIT_DATE}<br />
        {CURRENT_TIME}<br />
        </span>
        <!-- END switch_user_logged_in -->
        <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
        <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
        <!-- END switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
  </tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<div align="center" width="752px" border="0"><img src="http://img15.hostingpics.net/pics/845063hautclonne1.png" /></div>
<table align="center" class="forumline" width="706px" 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:155px;"></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">
       
      </td>
          <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
        <table height="50" width="100%"><tr><td><div class="titrefo"><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}></div>
                      <div><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div></td><td width="8px"></td><td  width="25%"class="sousfo"><span class="gensmall" > <span class="gensmall" id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span><script type="text/javascript">
    jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,' ')).removeAttr('id');
    </script></span>
</td></tr></table>
 
   
      </td>
     
      <td class="row3 over" align="center" valign="middle" height="50">
        <div class="cat3"><span class="gensmall">{catrow.forumrow.LAST_POST} <div style="float: center;"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div></span></div>
 
       
       
          </td>
  </tr>
  <!-- END forumrow -->
  <!-- BEGIN catfoot -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
  </tr>
  <!-- END catfoot -->
  <!-- BEGIN tablefoot -->
</table><div align="center" width="752px" border="0"><img src="http://img15.hostingpics.net/pics/828983bascolonne1.jpg"/></div><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
J'ai inclus les titres dans le tableau déjà présent dans le template et je les ai encadrés d'une div.
Ajoutez ensuite ceci dans votre CSS:
Code:
.titrefo{margin-bottom: -15px;}
Attention dans votre CSS, les commentaires se présentent comme ceci: /*commentaire*/ et pas */commentaire*/ Wink.

Bien sincèrement.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mauvaise position du texte sur une image.

Message par Elliot. le Mer 30 Mai 2012 - 21:35

Ca fonctionne parfaitement ! Merci beaucoup pour l'aide et les conseils Very Happy

Elliot.
**

Messages : 51
Inscrit(e) le : 20/06/2011

Elliot. a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum