vertical-align: middle

[GoodTimes]

Bonjour,

Voici mon soucis

voilà mon div :

<div id="titre">English version  <img src="img/uk_dp.gif" alt="English version" /></div>

voilà mon css :

#titre {
	background: url("img/titre.gif") no-repeat;
	background-color: #000A74;	
	height: 27px;
	margin-left: 202px;	
	color: #ccc;	
	font-weight: bold;
	text-align: right;	
	vertical-align: middle;	
}

Le problème est que mon texte se cale bien à droite mais pas au millieu.

Il ne veut rien savoir avec ou sans image à côté.

Si je ne mets pas l'image du uk_dp english version se cale en TOP

Et avec l'image uk_dp est lui en TOP et english version se cale lui en bas de l'image bref là je sèche

Pour info le titre est une image car il y a une petite ombre qui rend un peu plus joli joli (comme la salade de fruit )

[Monique]

Bonjour GoodTimes,

Et bienvenue sur le Hub

A propos de vertical-align, les spécifications du W3C disent

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.

Je pense que le truc n°8 de la page 10 astuces CSS devrait te convenir.

[GoodTimes]

Merci Monique

effectivement line-height fonctionne dans le cas où je n'ai que du texte.

si je mets mon petit drapeau à côté hop mon texte est aligné en bas de mon drapeau

J'ai atteint le résultat voulu mais en bidouillant et j'en ai marre de bidouiller CE N'EST PAS PROPRE .

hhaaaaaaaa boudiou je teste sous firefox (ok) sous opéra (ok) sous netscape (ok) sous IE ( ) hhhhhaaa l'horreur, bon je crois que le texte English version sera en image

#barre_site_haut {
	background: url("img/barre_site_haut.gif") no-repeat;
	background-color: #000A74;	
	height: 27px;
}

#titre {
	background: url("img/titre.gif") no-repeat;
	background-color: #000A74;	
	height: 27px;
	margin-left: 202px;	
	text-align: right;	
}

#txt_version {
	color: #ccc;	
	width: 100%;
	height: 27px;
	line-height: 27px;
	font-weight: bold;
	position: absolute;
	text-align: right;
}

	<div id="barre_site_haut">
  <div id="txt_version">English version           </div>
  <div id="titre">
 	 <img src="img/uk_dp.gif" alt="English version" />	
  </div> 	 
	</div>

Autrement dit c'est AFFREUX AFFREUX AFFREUX

[Ernestine]

Oui, c'est particulièrement horrible

La propriété line-height aurait été impeccable s'il n'y avait pas eu une image, en plus du texte.

Cependant, je pense que tu peux atteindre ton résultat avec la propriété padding-top. Padding-top, ça définit l'espacement entre le haut du div et le premier élément. Ca marchera, puisque le height de ton div Titre est fixé

 height: 27px;
padding-top: 10px;

A toi d'ajuster le padding-top de façon à ce que l'ensemble image+texte soit bien centré verticalement.

Au plaisir,

Ernestine

PS : j'avoue, j'ai eu le même problème, et c'est Jan qui m'avait donné la solution

Modifié 18 Décembre 2004 par Ernestine

[Dan]

GoodTimes,

Pourrais-tu nous donner l'URL de ta page, qu'on aie les images pour tester ?

Sans celles-ci on peut difficilement visualiser ce qui se passe

Dan

[Dan]

J'ai fait quelques essais chez moi, et j'arrive bien à aligner les 2 éléments (Firefox et I.E.) si j'ajoute un style="vertical-align:middle" à l'image.

Pour les positionner précisément, il suffit de mettre 3 ou 4 points de padding-top au <div>

Dan

[GoodTimes]

ok je ne vais pas baisser les bras il y a toujours une solution

je vais suivre vos conseils merci

Pour ce qui est de l'URL ben je suis un peu embêtté car c'est un site en projet en cours de dev..... et je n'ai pas trop l'habitude de montrer mes projets avant ;-)

Mais dès que tout est en ligne je n'ésiterai pas à venir vous en faire la présentation

Ho j'allais oublié je me présente, je suis développeur Web Php Asp (5ans) de la Old school pour l'intégration HTML avec des <table> partout donc là je me fait violence pour suivre les directives du W3C et passé de l'un à l'autre ce n'est pas forcément évident.

çà m'amuse fortement

PS : mon projet en question est un projet perso pour mon assoc à but non lucratif et je fais çà pour passer mon temps aux assedics tout en rercherchant biensur un boulot

Modifié 18 Décembre 2004 par GoodTimes

[GoodTimes]

voilà c'est beaucoup plus propre

Vous en pensez quoi ?

#barre_site_haut {
background: url("img/barre_site_haut.gif") no-repeat;
background-color: #fff;
}

#titre {
	background: url("img/titre.gif") no-repeat;
	background-color: #000A74;	
	margin-left: 202px;	
	height: 27px;
}

#drapeau{
	background: right url("img/uk_dp.gif") no-repeat;
	height: 27px;
	line-height: 27px;
	color: #ccc;	
	font-weight: bold;
	text-align: right;
	padding-right: 35px;	
}

<div id="barre_site_haut">
         <div id="titre"><div id="drapeau">English version</div></div>
</div>

en gros j'aurai pu faire qu'une seule image et mettre English version style

<div id="barre_site_haut">English version</div>

Mais pour des questions de maintenance je préfère avoir 3 images une pour le logo à gauche une pour le titre et une pour le drapeau. De plus si je fais qu'une seule image il me faudra avoir la même plusieurs fois avec un drapeau différent donc voilà le pourquoi des plusieurs images et donc plusieurs DIV à moins que l'on puisse mettre plusieur background dans un seul DIV, j'ai essayé sans résultat.

[Ernestine]

Pas facile d'en penser quoi que ce soit quand on ne peut pas voir le résultat. Je comprends que tu ne veuilles pas montrer un site en construction, mais il aurait été bon de faire une page de brouillon avec juste ce passage, pour nous la montrer...

Là comme ça je trouve pas ça extra, vu que tu as plusieurs divs imbriqués les uns dans les autres... chose à éviter. Au pire, faire des divs de niveau 0 voire de niveau 1, mais arrivé au niveau 2 ça commence à se compliquer.

Tu as laissé tomber les tableaux, et c'est très bien, mais le but du tableless n'est pas de faire la même chose avec un support différent, c'est de faire autre chose...

A bientôt (avec cette fois-ci, j'espère, une petite url ),

Ernestine

Modifié 19 Décembre 2004 par Ernestine