alignement

27 août 2006, 09:22

bonjour,
je n'arrive pas à centrer verticalement le texte dans la cellule... voici le code... quelqu'un peut-il me dire où ça "cloche"... merci...

Code : Tout sélectionner

	<HEAD>
		<style type="text/css">
			h1{font-style:	italic;
			     font-family:	times new roman;
			     color:		green;
			     font-size:	20px;
			     text-align:	center;
			  }
		#Positionnement{position:	absolute;
			          left:		50px;
			          top:		100px;
			          width:	200px;
			          height:	0px;
			          background-color:white;
			        }
		</style>
	</HEAD>
	<BODY>
<TABLE BORDER=2 BGCOLOR="#COCOCO" ALIGN=center BORDERCOLOR="red" CELLSPACING=4>
	<TR>
		<TD id="Positionnement"><h1>TITRE</h1></TD>
	</TR>
		</TABLE>
	</BODY>

27 août 2006, 09:35

salut

essaie d'enlever id "positionnement" au début de ton tableau car il le prend en premier donc c'est là dessus que ce base ton code pour faiire la mise en forme

car dans positionnement tu choisi de mettre ton txte à gauche

27 août 2006, 09:54

vertical-align: middle

Ça devrait résoudre ton problème

27 août 2006, 17:18

merci pour vos réponses... mais... pour cartfield, je n'ai pas de souci horizontalement... c'est verticalement que ça ne va pas... essai le code pour voir... pour Cyrano, j'ai beau essayer vertical-align: middle à toutes les sauces... rien à faire... mon texte reste scotché en haut de ma cellule... au secours... merci par avance...

27 août 2006, 18:46

Vire la marge externe autour du bloc H1.

D'autre part, positionner une cellule de tableau en absolute est complètement inutile.

Correction version HTML 4:

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!-- Date de création: 27/08/2006 -->
<head>
<style type="text/css">
<!-- 
h1{
    font-style:   italic;
    font-family:   times new roman;
    color:      green;
    font-size:   20px;
    text-align:   center;
    margin: 0;
}
#Positionnement{
    width:   200px;
    height:   0px;
    background-color:white;
    vertical-align: middle;
}
 -->
</style>
</head>
<body>
<table border=2 bgcolor="#COCOCO" align=center bordercolor="red" cellspacing=4>
  <tr>
    <td id="Positionnement"><h1>TITRE</h1></td>
  </tr>
</table>
</body>
</html>

Correction version XHTML 1.0 :

Code : Tout sélectionner

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<!-- Date de création: 27/08/2006 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<title></title>
<meta http-equiv="Content-language" content="FR-fr" xml:lang="fr" dir="ltr" />
<style type="text/css">
/* <![CDATA[ */
h1{
    font-style:   italic;
    font-family:   times new roman;
    color:      green;
    font-size:   20px;
    text-align:   center;
    margin: 0;
}
#Positionnement{
    width:   200px;
    height:   0px;
    background-color:white;
    vertical-align: middle;
}
/* ]]> */
</style>
</head>
<body>
<table border="2" bgcolor="#COCOCO" align="center" bordercolor="red" cellspacing="4" summary="">
  <tr>
    <td id="Positionnement"><h1>TITRE</h1></td>
  </tr>
</table>
</body>
</html>

Proposition en virant tout simplement la mise en page en tableau HTML :

Code : Tout sélectionner

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<!-- Date de création: 27/08/2006 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<title></title>
<meta http-equiv="Content-language" content="FR-fr" xml:lang="fr" dir="ltr" />
<style type="text/css">
#Positionnement{
    position: relative;
    width:   200px;
    top: 0;
    left: 50%;
    margin-left: -100px;
    background-color: #ccc;
    vertical-align: middle;
    border: 1px solid #f00;
    padding: 3px;
}
/* <![CDATA[ */
#Positionnement h1{
    font-style:   italic;
    font-family:   times new roman;
    color:      green;
    background-color: #fff;
    font-size:   20px;
    text-align:   center;
    margin: 0;
    border: 1px solid #000
}
/* ]]> */
</style>
</head>
<body>
<div id="Positionnement">
  <h1>TITRE</h1>
</div>
</table>
</body>
</html>

28 août 2006, 10:59

merci Cyrano... en ajoutant margin: 0px ou autre taille, mon texte se centre bien verticalement... a+...

18 mars 2007, 20:02

suis je le seul chez qui ça marche pas cet alignement centré ??

Code : Tout sélectionner

.titre {font-size : 12pt;
       color: #ffd;
       font-weight: bold;
       text-align: center;
       margin: 0px;
}

rien à faire j'ai farfouillé ce forum et essayé moultes choses ça bronche pas.

alignement

Qui est en ligne