28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Je commence de suite par dire que ce n'est pas du CSS orthodoxe...

Je souhaite faire en sorte que mon tableau fait d'une cellule unique (avec une image de fond et un texte) apparaisse au centre de l'écran (H et V).

Cela marche bien sous IE mais pas du tout sous Firefox en ce qui concerne l'alignement horizontal. C'est totalement aligné à gauche...

Voici le code de la page :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Association xx : Expertiser ses pratiques pour être un éco-humain</title>
<style type="text/css">
<!--
body {
	background-color: #CC6;
	text-align:center;
	padding:0;
	margin:auto;
}
.bienvenue {
	font-family: "Comic Sans MS", cursive;
	font-size:26px
}
-->
</style>
<link href="css/pied.css" rel="stylesheet" type="text/css" />
</head>

<body>
<table cellspacing="0" cellpadding="0">
  <tr class="verticAlign">
    <td onclick="window.location='accueil.html'" width="900" height="220" align="right" background="images/fondevalecoindex.jpg" class="bienvenue"> Bienvenue sur le site de l'Association xx</td>

  </tr>
</table>
</body>
</html>


Et le code css de verticAlign présent dans pied.css :
}
.verticAlign {   
  position:absolute;    
  
/* Centrer verticalement */  
  top: 50%;    
  margin-top: -100px;    
}  


Merci de vos lumières en la matière...
Modifié par 70156 (16 Jun 2009 - 19:00)
Salut,

Voir le lien que t'a proposé Heyoan. Par contre, je ne comprends pas bien l'intérêt de ce que tu veux faire ?

Pourquoi une table ?

Pourquoi des bouts de CSS dans le header, d'autres dans un fichier séparé, et encore d'autres directement dans la déclaration des objets ?
En effet, c'était idiot mais cela me rassurait d'avoir un petit tableau car je voulais superposer une image et du texte. Avec le tableau, je pouvais mettre l'image en image de fond et le texte par dessus.

Mais finalement, c'est plus simple avec le css clair et net.
Merci !