Aligement de texte sous une image

Bonsoir,

Je me résous à poster pour avoir un petit peu d'aide.

Je souhaite aligner un texte horizontalement et verticalement sous un logo qui est cliquable.

Mon code se présente comme ceci :
XHTML :

<div id="header">
    <h1><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name') ?>"><span><?php bloginfo('name'); ?></span></a></h1>
    <cite class="description"><span><?php bloginfo('description'); ?></span></cite>
</div>

CSS :

#header {
	padding: 0;
	margin: 0 auto;
	width: 100%;
	height: 190px;
	background: url('images/log0.png') no-repeat center top; /* image size 510x177 */
}
#header h1 {
	margin: 0 auto 0 auto;
	padding: 0;
}
#header h1, #header h1 a {
	width: 514px;
	height: 112px;
	display: block;
}
#header h1 a span {
	display: none;
}
cite.description  {
	font-weight: bold;
}

J'ai déjà parcourus Comment-centrer-verticalement-un-element-.html et pas mal d'autres pages du site mais je ne trouve pas donc si quelqu'un peu m'aider !!!

Ce que je souhaite sur ma page c'est que ça donne ceci, avec le L qui porte le E :
http://img144.imageshack.us/img144/782/510pxpelllogosvgcw8.jpg
Modifié par Merimac (15 Sep 2008 - 02:33)

Bonjour,

Tout d'abord une petite question : pourquoi opter pour l'emploi d'une balise <cite> ?
Ta phrase d'accroche n'est pas une citation, si ?

A la place, j'opterais pour un bête paragraphe.
Et puis tant qu'on y est, je me passerais aussi du <span> inutile.

A partir de là, il ne reste plus qu'à jouer avec les marges internes et externes du paragraphe pour placer la baseline au bon endroit.
Modifié par Cygnus (15 Sep 2008 - 17:53)

Merci pour cette première réponse.
En effet ma phrase d'accroche n'est pas une citation.
Sinon pour ce qui est du SPAN je l'ai mis pour pouvoir ensuite masquer le titre de mon site

#header h1 a span {display: none;}

par l'affichage d'une image.

Ensuite pour ce qui est des marges, je vais faire quelques essais en appliquants à

#header p { margin-top: yyy; margin-left: XXX; margin-right: XXX;}

Mais est-ce que de cette façon mon texte restera toujours au même endroit sous mon image, même lorsque l'on redimensionne le navigateur ? Et est-ce que ceci sera compatible avec FF2/FF3/IE6/IE7 ?



@Modo : Je ne l'ai pas fait dans mon premier post, mais merci énormément pour ce forum, ce site, vos informations et votre aide... Ce n'est pas la première fois que je vous lis depuis quelques années, mais c'est la première fois que je vous le dis , c'est l'émotion
Modifié par Merimac (15 Sep 2008 - 12:41)

a écrit :
Mais est-ce que de cette façon mon texte restera toujours au même endroit sous mon image, même lorsque l'on redimensionne le navigateur ? Et est-ce que ceci sera compatible avec FF2/FF3/IE6/IE7 ?

Oui c'est bon pas de souci à priori, c'est bien avec les marges intérieures que tu dois placer ton élément

Par contre pour ton display:none sur l'élément h1, c'est une très mauvaise idée ! Ne serait-ce que parce que google pourrait te suspecter d'utiliser cette technique pour référencer des mots clés sans les afficher..

Hum...
A la relecture, je suis un peu dubitative par la méthode employée...

En l'état, ton h1 contient... un lien vide.
Pour plus d'information, je te conseille cet article : Remplacement d'images : halte au display none !

Voici une solution qui me semblerait plus correcte :

<h1>
  <a href="..." title="..."><?php bloginfo('name'); ?></a>
  <span><?php bloginfo('description'); ?></span>
</h1>

h1 {
  margin: 0;
  padding: 0;
  height: 190px;
  background: url('log0.png') no-repeat center top; /* image size 510x177 */
}

h1 a {
  margin: 0;
  padding: 0;
  text-indent: -5000px;
  font-size: 1px;
  line-height: 1px;
  text-decoration: none;
}

h1 span {
  display : block;
  margin-left : 150px; /* ici la valeur qui permet d'aligner la baseline sur le logo */
  text-align : center;
}

Hello,
Je suis en train de me remettre à l'ouvrage avec les indications que vous m'avez donnez... pour le moment le placement de mon texte sous mon image ce fait parfaitement sous FF3 mais sous IE ça ne marche pas donc je me creuse encore un peu la citrouille pour trouver, et reviendrais vers vous pour vous dire ce qu'il en est ce soir.

Merci à vous, et pour l'information à propos du display : none.

C'est SUPER,

a écrit :
I'm pretty like the CSS.

avec :

h1 span {
	display : block;
	margin-top : 80px; /* ici la valeur qui permet d'aligner la baseline sur le logo */
	margin-left : 250px; /* ici la valeur qui permet d'aligner la baseline sur le logo */
	text-align : center;
	font-size: 14px;
}

J'ai réussis, vous avez réussis à me faire placer mon texte comme je le souhaitais sous mon image .

Par contre vous avez aussi réussis à faire sauter le lien que j'avais mis sur mon logo mais je vais creuser ma citrouille pour résoudre ça...(cependant si certains on une idée... )

Waouh...
Je suis très fatiguée.

Bon cette fois, je crois avoir compris

<h1>
  <a href="..." title="..."><img src="log0.png" alt="<?php bloginfo('name'); ?>" width="510" height="177" /></a>
  <span><?php bloginfo('description'); ?></span>
</h1>

h1 {
  margin: 0;
  padding: 0;
  text-align : center;
}

h1 a img {
  border : none;
}

h1 span {
  display : block;
  margin : 80px 0 0 250px; /* ici la valeur qui permet d'aligner la baseline sur le logo */
  text-align : center;
}

C'est mieux comme ça ?
Modifié par Cygnus (15 Sep 2008 - 17:53)