vertical-align : je n'arrive pas à faire ce que je veux avec.

vertical-align : je n'arrive pas à faire ce que je veux avec. - HTML/CSS - Programmation

Marsh Posté le 03-08-2005 à 12:36:45    

Bijour !
 
Alors, aujourd'hui, j'ai un petit problème.
 
J'ai une structure HTML qui ressemble à ceci :
 

Code :
  1. <span><img src="" alt=""/> mon texte bidon</span>


 
et grosso modo le css ressemble à ceci  

Code :
  1. span { display: block; height: 22px; }


 
Pour l'instant, l'image et le texte se colle en haut du span (il est en display: block), laissant ainsi un trou entre le texte et le bas du span, mais je voudrais que l'image et le texte s'aligne au milieu, en hauteur du span.
 
J'ai donc voulu utilisé la propriété vertical-align: middle, mais étrangement, ça ne marche pas.
Je pensais que ça venais du navigateur (IE 5.5), mais non, ça ne vient pas de là.
 
Je me trompe de propriété ? Pour l'instant, je peux utilisé des margins-top, ou padding-top, mais ça fait plus cache misère qu'autre chose.
 
 
Merci  :bounce:


Message édité par zapan666 le 03-08-2005 à 12:37:40

---------------
my flick r - Just Tab it !
Reply

Marsh Posté le 03-08-2005 à 12:36:45   

Reply

Marsh Posté le 03-08-2005 à 12:42:33    

vertical-align sert a aligner des elements inline les uns par rapport aux autres ou a aligner verticalement le contenu d'un element de types table-cell et derivés.
 
Tu vas devoir jouer sur des marges negatives et le placement relatif !
 
position: relative;
top: 50%;
margin-top: -1em;
 
par exemple...

Reply

Marsh Posté le 03-08-2005 à 12:52:26    

afbilou a écrit :

vertical-align sert a aligner des elements inline les uns par rapport aux autres ou a aligner verticalement le contenu d'un element de types table-cell et derivés.
 
Tu vas devoir jouer sur des marges negatives et le placement relatif !
 
position: relative;
top: 50%;
margin-top: -1em;
 
par exemple...


Pour être plus précis, vertical-align aligne le texte sur ses lignes, l'unique exception étant les cellules de tables :o


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 03-08-2005 à 15:11:40    

afbilou a écrit :

vertical-align sert a aligner des elements inline les uns par rapport aux autres ou a aligner verticalement le contenu d'un element de types table-cell et derivés.
 
Tu vas devoir jouer sur des marges negatives et le placement relatif !
 
position: relative;
top: 50%;
margin-top: -1em;
 
par exemple...


bah en fait, non, ça va pas ça (le relative + top) car pour cela, il faudrait que mon texte soit  encore dans un conteneur, et c'est pas le cas...Il sert a quoi le margin-top en négatif ?  
 

masklinn a écrit :

Pour être plus précis, vertical-align aligne le texte sur ses lignes, l'unique exception étant les cellules de tables :o


bah justement, en parlant de table...
 
En fait, tout ce bordel, c'est pour un tableau (oui, ce sont de données tabulaires...)
En fait, j'ai une entête de tableau sur chaque ligne, contenant le nom du personne. Le nom de cette personne est dans le span, ce span prend une certaine place dans la cellule selon certain caractéristiques de la personne (bref, ça fait comme un diagramme en baton horizontal)
 

Citation :


+----+-----------------+
|      | Blabla            |
+----+----+------------+
|            | Blabla2     |
+---------+------------+
  |              |
  |              +----> <span>
  +----> <th>


 

Code :
  1. <tr><th><span class="niveau0">Balabla</span></th>....</tr>
  2. <tr><th><span class="niveau1">Balabla</span></th>....</tr>


Pour faire le décalage, je fais juste un nmargin-left sur le span (via les niveau0, niveau1, etc), mais niveau hauteur, c'est "assez" haut, du coup le texte colle en haut (et moi, j'veux qu'il soit au milieu)
 
Je peux peut être m'en sortir en applicant les rêgles CSS des tableaux sur mon span ?


Message édité par zapan666 le 03-08-2005 à 15:12:39

---------------
my flick r - Just Tab it !
Reply

Marsh Posté le 03-08-2005 à 15:14:24    

pourkoi tu as des span dans tes TH ? tu peux pas style les TH directement ?

Reply

Marsh Posté le 03-08-2005 à 15:18:54    

gatsusat a écrit :

pourkoi tu as des span dans tes TH ? tu peux pas style les TH directement ?


bah je fais comment mon effet de décalage sans aussi ? (ouais, parce que je mets une bordure sur mes <span>, ainsi qu'une couleur de fond)
 
(sinon, oui, un padding-right aurait suffit :P)


---------------
my flick r - Just Tab it !
Reply

Marsh Posté le 03-08-2005 à 16:43:25    

zapan666 a écrit :

bah je fais comment mon effet de décalage sans aussi ?


[:petrus75]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 03-08-2005 à 16:47:31    


Je ne sais faire qu'avec un span, ou avec une image invisible, au choix [:petrus75]
 
- c'est pour un intranet, hein -
- ste vieille excuse bidon -
 
en fait, ça ressemble plutôt à ça :  
 

Citation :


+     +-----------------+
       | Blabla            |
+     +----+------------+
              | Blabla2    |
+           +------------+
  |              |
  |              +----> <span> avec bordure
  +----> <th> sans bordure


Message édité par zapan666 le 03-08-2005 à 16:50:16

---------------
my flick r - Just Tab it !
Reply

Marsh Posté le 03-08-2005 à 17:46:02    

J'ai un peu du mal à conceptualiser stu veux [:petrus75]
 
th, c'est un header, un titre, c'est quoi ces machins "blabla" là [:petrus dei]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Sujets relatifs:

Leave a Replay

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