[Noob] Pb avec le HTML 4.01 Transitional

Pb avec le HTML 4.01 Transitional [Noob] - HTML/CSS - Programmation

Marsh Posté le 04-03-2003 à 18:35:22    

Slt !
 
J'arrive pas à corriger les erreurs que le W3C me trouve alors voici mon pb :
 

Citation :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 
<style type="text/css">
 img#verti {
  vertical-align: middle
 }
</style>
</HEAD>
<BODY>
<IMG SRC="images/email.gif" ID="verti" ALT="Email" />
<IMG SRC="images/email.gif" ID="verti" ALT="Email" />
</BODY>
</HTML>


 

Citation :

Line 11, column 6: end tag for "HEAD" which is not finished (explain...).  
  </HEAD>
        ^
Line 14, column 32: ID "VERTI" already defined (explain...).  
  <IMG SRC="images/email.gif" ID="verti" ALT="Email" />
                                  ^
Line 13, column 32: ID "VERTI" first defined here (explain...).  
  <IMG SRC="images/email.gif" ID="verti" ALT="Email" />


 
Un ch'ti peu d'aide serait le bienvenue :)

Reply

Marsh Posté le 04-03-2003 à 18:35:22   

Reply

Marsh Posté le 04-03-2003 à 18:36:29    

Dans un document XML, les ID sont uniques. Utilise plutot le concept de class qui correspond plus à ce que tu cherches.


---------------
brisez les rêves des gens, il en restera toujours quelque chose...  -- laissez moi troller sur discu !
Reply

Marsh Posté le 04-03-2003 à 18:44:36    

J'vais voir de ce côté, merci :)
 
Et pour le column 6: end tag for "HEAD" which is not finished ?

Reply

Marsh Posté le 04-03-2003 à 18:46:02    

*Syl* a écrit :

Et pour le column 6: end tag for "HEAD" which is not finished ?


 
 content="text/html;
 
Le guillemet est pas fermé


---------------
brisez les rêves des gens, il en restera toujours quelque chose...  -- laissez moi troller sur discu !
Reply

Marsh Posté le 04-03-2003 à 18:49:00    

kadreg a écrit :


 
 content="text/html;
 
Le guillemet est pas fermé


Non, non ça c'est juste ;)  
 
content contient "text/html; charset=iso-8859-1"


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 04-03-2003 à 18:50:13    

gm_superstar a écrit :


Non, non ça c'est juste ;)


 
mairde
 
[:neowen]


---------------
brisez les rêves des gens, il en restera toujours quelque chose...  -- laissez moi troller sur discu !
Reply

Marsh Posté le 04-03-2003 à 18:55:07    

C'est bon pour le head, j'avais pas mis de title :sweat:

Reply

Marsh Posté le 04-03-2003 à 18:57:02    

pour faire plus propre :
 
<style type="text/css"><!--
img#verti {
 vertical-align: middle
}
//--></style>
 
idem pour le javascript éventuelle, pour pas que le validateur ou le browser ne tente d'interprêter ça comme du html


Message édité par antp le 04-03-2003 à 18:58:18
Reply

Marsh Posté le 06-03-2003 à 11:26:58    

kadreg a écrit :

Dans un document XML, les ID sont uniques. Utilise plutot le concept de class qui correspond plus à ce que tu cherches.

J'ai essayé d'utiliser le concept de classes mais ça s'aligne pas verticalement.. :sweat:  
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  5. <title>test</title>
  6. <style type="text/css">
  7. .verti
  8. {
  9. vertical-align: middle;
  10. }
  11. </style>
  12. </HEAD>
  13. <BODY>
  14. <div class="verti">
  15. <IMG SRC="images/email.gif" ALT="Email" />Test<BR />
  16. <IMG SRC="images/email.gif" ALT="Email" />Test
  17. </DIV>
  18. </BODY>
  19. </HTML>

J'ai essayé différement trucs comme mettre div.verti, mettre les div seulement autour du texte, ... mais rien ne marche :cry:

Reply

Marsh Posté le 06-03-2003 à 11:29:58    

Tu veux faire quoi ? Que les images soient centrées dans la page ?


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 06-03-2003 à 11:29:58   

Reply

Marsh Posté le 06-03-2003 à 11:34:57    

Non, en fait, j'ai un tableau avec une image + texte dans chaque cellule et je voudrais que le texte soit centré verticalement dans la cellule pour faire propre (pour l'image : pas besoin, taille de la celulle = la taille de l'image)..

Reply

Marsh Posté le 06-03-2003 à 11:39:52    

Dans ce cas, il faut appliquer vertical-align à la cellule.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 06-03-2003 à 11:40:57    

C'est un truc que j'ai déjà dû faire, je reteste et dis quoi.. :)

Reply

Marsh Posté le 06-03-2003 à 11:49:05    

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  5. <title>test</title>
  6. <style type="text/css">
  7. .verti
  8. {
  9. vertical-align: middle;
  10. }
  11. </style>
  12. </HEAD>
  13. <BODY>
  14. <TABLE><TR>
  15. <DIV class="verti">
  16. <TD><IMG SRC="images/email.gif" ALT="Email" />Test</TD>
  17. </DIV>
  18. </TR></TABLE>
  19. </BODY>
  20. </HTML>


Ça marche pas ou j'm'y prends mal [:spamafote]


Message édité par *syl* le 06-03-2003 à 11:49:23
Reply

Marsh Posté le 06-03-2003 à 11:52:23    

Mais il sert à rien ton div. Applique ça au TD !


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 06-03-2003 à 11:57:02    

J'apprends par la méthode du try&fail, désolé :ange:  
 
Le div vient de tilter et j'ai appliqué le style au td comme ceci :

Code :
  1. <TABLE><TR><TD class="verti">
  2. <IMG SRC="images/email.gif" ALT="Email" />Test
  3. </TD></TR></TABLE>

Mais..c'est tjrs pas centré  :sweat:  
 
Où ai-je merdé encore ? :whistle:

Reply

Marsh Posté le 06-03-2003 à 12:02:10    

Ah oui. J'avais pas vu que l'image et le texte sont dans la même cellule. Dans ce cas applique ta classe à l'image.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 06-03-2003 à 12:07:04    

C'est le texte que je veux centrer, pas l'image..

Reply

Marsh Posté le 06-03-2003 à 12:14:00    

Reply

Marsh Posté le 06-03-2003 à 12:23:57    

Wé j'avais essayé au cas ou.. mais sans succès :'(

Reply

Marsh Posté le 06-03-2003 à 12:30:11    

Gniiiii ? Je viens de tester :
 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
  <HEAD>
    <META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>test</title>
    <style type="text/css">
  .verti
  {
     vertical-align: middle;
  }
    </style>
  </HEAD>
   
  <BODY>
   
    <TABLE>
      <TR>
        <TD><IMG "images/email.gif" class="verti"  ALT="Email" >Test</TD>
      </TR>
    </TABLE>
  </BODY>
</HTML>


 
Et ça marche. Le mot "Test" est bien centré verticalement par rapport à l'image (qui impose sa taille à la cellule)
 
Tu testes avec quoi ?


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 06-03-2003 à 12:37:09    

Oups désolé, j'avais merdé en faisant le copier/coller, j'avais oublié de retirer le point devant verti :pt1cable:  
On va mettre ça sur le coup de la faim, j'avais l'estomac creux depuis hier soir.. :sweat:  
 
Merci bcp pour ton aide :)
 
 :hello:

Reply

Marsh Posté le 06-03-2003 à 12:39:38    

Le système est qd même bizarre puisque j'applique le style qu'à l'image et non au texte :heink:

Reply

Marsh Posté le 06-03-2003 à 13:13:28    

En fait c'est normal quand on sait comment fonctionne vertical-align : http://www.yoyodesign.org/doc/w3c/ [...] ical-align
 

Citation :

Cette propriété agit sur le positionnement vertical à l'intérieur de la boîte de ligne des boîtes générées par un élément de type en-ligne. Les règles suivantes n'ont de sens que par rapport à un élément parent de type en-ligne, ou de type bloc si celui-ci génère des boîtes en-ligne anonymes ; elles sont inopérantes autrement.


 
Autrement dit vertical-align ne marche que dans 2 cas :
 
- Sur un élément de type en-ligne (ici l'image) à l'intérieur d'une boîte qui contient des éléments en ligne (un élément en-ligne est comparable à du texte et une image est considérée comme du texte : la preuve les smileys ici sont alignée sur la même ligne de base du texte)
Dans ton cas la boîte est anonyme c'est à dire qu'elle n'est pas représentée par un élément HTML ; mais elle existe, c'est celle qui contient l'image ainsi que le mot "Test". Si tu ajoutes un élément <span> autour de l'image et du mot elle ne sera plus anonyme mais elle sera comme une boîte normale qui contient des éléments en-ligne. Or ici c'est l'image qui impose la hauteur de la boîte (car elle est plus haute que le texte). Vertical-align permet de modifier l'alignement vertical à l'intérieur de cette boîte.
 
- Sur des cellules de tableaux (seul élément à ma connaissance qui génère des boîtes en-ligne anonymes.)
Dans ce cas vertical-align modifie l'alignement vertical de la boîte anonyme à l'intérieur de la cellule et non pas, comme dans le cas précédent, l'alignement vertical des éléments qui *sont* dans la boîte anonyme.
C'est pour ça que dans ton cas on ne peut pas appliquer vertical-align à la cellule car la cellule et la boîte anonyme font la même hauteur.
 
 
En espérant avoir été clair [:totoz]


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 06-03-2003 à 13:23:58    

mé keskidi [:totoz]  
 
C'est pas très clair dans mon esprit même après avoir lu ton post plusieurs fois mais bon, si un jour j'ai un autre pb d'alignement, j'irais relire ce post :jap: :)

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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