Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1561 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  HTML/CSS : Centrage tableau bug

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

HTML/CSS : Centrage tableau bug

n°2109259
C501
ID PSN : Ur-501
Posté le 02-11-2011 à 11:46:14  profilanswer
 

Bonjour à tous,
 
Une question assez simple surement, mais je débute.  
 
J'ai un tableau, avec dans chaque case une image (à gauche) + un texte. Mon but est de centrer ce texte verticalement r/r à l'image à gauche, ou au moins à la case. J'ai testé le valign="middle" et vertical-align: middle mais ca ne sert à rien.  
 
Un avis ? C'est un site commercial assez simple, unipage.  
 
Mon code :

Code :
  1. .tablecenter
  2.  {
  3.   background-color: rgb(235,235,235);
  4.   margin-left: auto; margin-right: auto;
  5.   width: 85%;
  6.  }
  7.  .indication
  8.  {
  9.   text-align: center;
  10.   font-size: small;
  11.   font-style: italic;
  12.   color: rgb(100,100,100);
  13.  }
  14.  .contacts
  15.  {
  16.   width: 70%;
  17.  }
  18.  .icone
  19.  {
  20.   float: left;
  21.  }


 
 

Code :
  1. <tr>
  2.   <td><img src="tableau.png" alt="Impression sur toile, différents formats, Pêle-Mêle ou photo unique" class="icone" /> <div class="inter"><abbr title="Impression sur toile, différents formats, Pêle-Mêle ou photo unique">Tableau</abbr> <br /> <em> à partir de 60€</em></div></td>
  3.   <td><img src="plaquebox.png" alt="Plaque métallique, avec photo et les informations de votre choix" class="icone" /><div class="inter"><abbr title="Plaque métallique, avec photo et les informations de votre choix">Plaque de Box</abbr> <br /><em> à partir de 60€</em></div> </td>
  4.  </tr>


 
Merci à tous


Message édité par C501 le 02-11-2011 à 11:46:43

---------------
Sleep is overrated...
mood
Publicité
Posté le 02-11-2011 à 11:46:14  profilanswer
 

n°2109272
olivthill
Posté le 02-11-2011 à 12:14:37  profilanswer
 

Comment est défini le CSS de la classe inter ?
 
Pourquoi utiliser la balise abbr pour autre chose que des abréviations ?
 
Peut-être faudrait-il un span au lieu d'un div.

n°2109275
C501
ID PSN : Ur-501
Posté le 02-11-2011 à 12:18:41  profilanswer
 

C'est une tentative desépérée pour recentrer. Ca a marché un long moment, ca n'est plus le cas.  
 

Code :
  1. .inter
  2.  {
  3.   padding-top: 25%;
  4.  }


 
 
Pour le abbr, l'idée est d'activer une description de l'objet de façon plus originale. C'est peu habituel je m'en doute.
 
Le div ne me sert qu'à activer le inter.  shame on me je sais [:c501]  


---------------
Sleep is overrated...
n°2109277
olivthill
Posté le 02-11-2011 à 12:24:35  profilanswer
 

Non, pas de raison d'avoir honte. C'est la méthode habituelle d'encapsuler des trucs dans des div ou des span pour obtenir le formatage voulu. Et puis ce qui compte, c'est le résultat.
 
Là, je ne sais pas très bien. Peut-être que le milieu devrait se faire par rapport au td plutôt que par rapport au div ou au span, ou bien il faudrait que le div ou le span ait la hauteur correspondante au td, ou encore il faudrait que le div ou span contienne l'image pour qu'il ait une hauteur suffisante. Pour le savoir, on pourrait tester en mettant un background de couleur.

n°2109282
C501
ID PSN : Ur-501
Posté le 02-11-2011 à 12:37:32  profilanswer
 

Avec un background dans .inter, la case est entièrement remplie.

 

Avec vertical-align: middle; le texte s'accole en haut à droite des images.


Message édité par C501 le 02-11-2011 à 12:39:12

---------------
Sleep is overrated...
n°2109555
niko59480
O_o'
Posté le 03-11-2011 à 13:58:16  profilanswer
 

tu as essayé en définissant une hauteur et une largeur à ta div.inter?
il ne peut pas se centrer si son conteneur n'as pas de taille fixe.
utiliser un div ou un span en display:block; revient à la même chose.


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  HTML/CSS : Centrage tableau bug

 

Sujets relatifs
Compter le nombre de doublons d'un tableau[C] Modifier un tableau existant ... pour bouger un pion !
Aligner 2 tableau et une Image sur la meme ligneRecuperer resultat d'un select dans un tableau
tableau et formulaire[Résolu] Gestion d'un Top10 en %hash et de la "casse"
[KSH] Soucis avec un tableaubalise TABLE : espace créé au dessus du tableau
[Aide] trie d'un tableau par dateCentrage de tableau en CSS
Plus de sujets relatifs à : HTML/CSS : Centrage tableau bug


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR