mettre bloc texte en bas a droite dans un td

mettre bloc texte en bas a droite dans un td - HTML/CSS - Programmation

Marsh Posté le 04-02-2015 à 09:39:55    

Bonjour, j'ai un texte dan un td qui s'affiche toujours en a gauche du td et je voudrais que ce bloc soit le plus en bas a droite j'ai essayé
le margin-top puis margin-left le bloc ne bouge pas je ne sais plus trop quoi faire si quelqu'un aurait une idée s'il vous plait?
 
Merci
 
Pour aider voila le le code html et le css :
<table align='center' style="width=94%">
    <tr>
        <td>
            <img border=0 src="toto" align=absmiddle><b>1670&nbsp;DOSSIERS</b>
        </td>
        <td align=right >    
            <span class="resultat_liste">
                <span class="inactive">Précedente</span>
                <span class="active">1</span>
                <a href="javascript:suivant('50');">2</a>
                <a href="javascript:suivant('100');">3</a>
                <a href="javascript:suivant('150');">4</a>
                <a href="javascript:suivant('200');">5</a>
                <a href="javascript:suivant('50');">Suivante</a>
            </span>
        </td>
    </tr>
</table>
/*pagination*/
.resultat_liste {font:16px Arial, Helvetica, sans-serif;}
.resultat_liste a {font-size:10px;color:black;margin:2px;padding:.2em .4em;font-weight:bold;text-decoration:none}
.resultat_liste a:hover {color:#bd88fe}
.resultat_liste span.inactive {font-size:10px;color:black;margin:2px;padding:.2em .4em;font-weight:bold;}
.resultat_liste span.active {background:#f4ebff;color:#bd88fe;font-weight:700;margin:2px;padding:.2em .4em}


Message édité par ns976 le 04-02-2015 à 09:46:46
Reply

Marsh Posté le 04-02-2015 à 09:39:55   

Reply

Marsh Posté le 04-02-2015 à 11:26:33    

Dans le <td>n mettre l'attribut valign à bottom et dans le css, mettre une règle sur le td qui va bien (ça nécessitera sans doute de définir un nom de style dans le <td class="nomdustyle"> ) avec text-align: right;


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 14-02-2015 à 12:42:00    

perso, je suis pas fan de ta mise en forme en tableau
 
tu peux astucieusement utiliser ensemble la propriété "display:inline-block;" pour placer tes controles a coté de l'image.
et associer positionnnement relatif et absolu pour gerer le placement en bas a droite.
 
ex :
 

Code :
  1. <div style="font-size:0;width:500px;height:300px;">
  2.          <span style="display:inline-block;width:300px;height:300px;font-size:12px;text-align:center;vertical-align:top;line-height:300px;">
  3.               <span style="vertical-align:middle;"><img src="toto.jpg" style="border:none;vertical-align:middle;width:100px;height:100px;"><span style="font-weight:bold;">1670&nbsp;DOSSIERS</span></span>
  4.          </span>
  5.          <span style="position:relative;display:inline-block;width:200px;height:300px;font-size:12px;text-align:center;vertical-align:top;">
  6.               <div style="position:absolute;bottom:0;right:0;">
  7.                     <span class="inactive">Précedente</span>
  8.                     <span class="active">1</span>
  9.                     <a href="javascript:suivant('50');">2</a>
  10.                     <a href="javascript:suivant('100');">3</a>
  11.                     <a href="javascript:suivant('150');">4</a>
  12.                     <a href="javascript:suivant('200');">5</a>
  13.                     <a href="javascript:suivant('50');">Suivante</a>
  14.               </div>
  15.          </span>
  16.     </div>


 
biensur ce n'est qu'une ebauche qui demande a etre améliorée et adaptée,
mais elle représente selon moi une bonne base
(de plus, compatible avec 99% des navigateurs)


---------------
Mon feedback
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed