28172 sujets

CSS et mise en forme, CSS3

[partiellement résolu] Aligner éléments dans pied de page

Tout va bien dans le positionnement de mon pied de page par rapport à la page elle-même, le problème est à l'intérieur de celui-ci.

En effet si mes images occupent toute la hauteur du pied de page, ce n'est pas le cas du texte qui s'affiche en bas du pied de page, hors j'aimerais centrer mon contenu.

http://img46.imageshack.us/img46/9017/pied.jpg
Le pied actuel


http://img46.imageshack.us/img46/3181/pied2.jpg
Le pied tel que j'aimerais qu'il apparaisse

Le code HTML:

<!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>Pied de page</title>
<link href="layoutpied.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page">
<div id="pied">
<span id=copyright> &copy; COPYRIGHTRIGHT</span>
<span alt="sitemeter" class="logos">
<a href="http://sm3.sitemeter.com/stats.asp?site=" target="_top">
<img src="http://sm3.sitemeter.com/meter.asp?site=" alt="Site Meter" border="0"/></a> </span>
<span alt="W3C CSS validation logo" class="logos"> <a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
            src="http://jigsaw.w3.org/css-validator/images/vcss"
            alt="CSS Valide !" /> </a> </span>
<span alt="date de mise à jour" id="time">dernière mise à jour le
  <!-- #BeginDate format:Fr1 -->1/06/09<!-- #EndDate -->
  </span> </div>
</body>
</html>


Le code CSS (un peu bricolé, mais je débute, merci de votre indulgence Smiley lol ):

@charset "utf-8";
/* CSS Document */

#page {
	width:900px;
	margin:0 auto;
	min-height: 1000px;
}
body {
	background-color: #CCC;
}
	
#pied {
	clear: both;
	width: 900px;
	height: 35px;
	background-image: url(../images/pied.png);
}
#copyright {
	margin: 18px;
	padding: 1px;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #CCCCCC;
	padding-right:150px;
}
#time {
	color: #CCCCCC;
	font-family: Georgia, "Times New Roman", Times, serif;
	padding-left:120px;
}
.logos {
	margin-top: 18px;
	text-align:center;
}


Merci d'avance pour les indices que vous voudriez bien me donner Smiley smile .
Modifié par Neossir (01 Jun 2009 - 17:04)
En jouant sur la propriété "vertical-align", j'ai trouvé l'attribut "super" qui résoud mon problème - j'avais déjà essayé sans succès l'attribut le plus logique, "middle", qui ne fonctionnait pas.

La définition de l'attribut "super" selon Raphael :

a écrit :
Alignement au-dessus de la ligne de base


Je dois avouer ne pas avoir bien compris pourquoi ça fonctionnait dans mon cas, ni ce qu'est exactement la "ligne de base".

Quelqu'un pour éclairer ma lanterne?

Sinon mon CSS me parait un peu tarabiscoté, une idée pour rendre ça un chouilla plus digeste? (je vous assure que j'ai pas mal galéré pour parvenir à ce résultat convenable visuellement, moins au niveau du code j'en conviens).
Sujet clos
Aller à