Centrage de texte avec une image en arriere plan

bonjour le forum

Mon problème m'avait l'air assez simple mais il se trouve que je n'en ai pas trouvé la solution...

J'ai une balise div qui me sert à écrire le titre de ma page de manière centrée. Jusque là pas de souci...

Le hic, c'est que je voudrais mettre un logo collé à gauche sans que cela ne change la position du texte.

J'ai donc défini la propriété css background-image de mon div pour y définir mon logo avec background-repeat : no-repeat.
Le problème, c'est que si le texte est trop court, mon image est rogné en bas...

Je ne suis pas sur que définir mon logo comme image de fond soit la meilleure solution mais c'est la seule manière que j'ai trouvée pour régler le problème de placement. Si j'utilise une balise img, ca me décalle le texte

Et les quelques essais que j'ai fait avec des propriétés overflow, inline m'ont donné une image qui s'affiche entière mais ce qui suit le div ne vas pas à la ligne et donc mon menu (le div d'après) se décalle à droite.

J'espère que mes explications ne sont pas trop embrouillée et je reste convaincu qu'il existe une solution simple (j'ai souvent tendance à chercher compliqué...)

Merci à tous ceux qui pourront m'apporter un élément de réponse

Tu pourrais donner un height et un width par défaut à ton div, qui seraient les mêmes que les dimensions de ton image de fond, ainsi ton div aurait toujours la taille au moins de ton image de fond.

oui, tu as raison

mais le truc que j'aurai du préciser surement, c'est que je génère ma page en php et qu'a priori l'image n'est pas défini.
Si je trouve une fonction en php qui me renvoie la hauteur de l'image, c'est gagné...
Quoique, il faudra aussi que j'ai la hauteur de ma zone de texte (on sait jamais...)

en ce qui concerne le width, c'est déjà fait, et c'est 100%

Ce qui me chagrine, c'est que je pensais vraiment pouvoir m'en tirer avec des block des floats et compagnie mais je n'arrive pas à centrer le text par rapport à la fenetre du naviguateur...

Code:

---

<div align="center"></div>

---

Ca ne marche pas ?
Ou tu veux dire en alignement central en vertical ?

Pour centrer un texte en vertical tu peux utiliser :

Code:

---

<div style="line-height:100px;">texte centré</div>

---

En précisant la hauteur de ton image :)

Et je pense qu'il y a un moyen de connaitre la hauter/largeur de ton image en php avec getimagesize

Salut,

Et en plaçant l'imge dans le div qui te sert pour le titre de ta page ? Tout positionnant cette image en position absolue.

html

Code:

---

<div id="titre"><img src="logo.jpg" alt="Mon logo" width="100" height="100">Mon titre</div>

---

css

Code:

---

1 2 3 4 5 6 7

#titre { text-align: center; } #titre img { position: absolute; left: 0px; }

---

Merci pour vos réponses

Pour l'alignement vertical, là c'est bon car je ne m'en préoccupe pas.

Ilood:
avec tes lignes, je me rapproche pas mal de la solution que je recherche, mais le souci est que même si je peux récupérer la hauteur de mon image grace à la fonction php que m'indique KiLVaiDeN, je trouve ca dommage d'être obligé de présumer de la taille de l'image...

en fait, le truc, si j'ai bien compris ce que j'ai lu a droite a gauche, c'est que dès que je postionne mon image "à la main", cet élément sort du flux de la page et peux donc mordre sur d'autres parties

C'est pour ca que j'avais parlé de background-image, mais en fait, c'est juste que je déplace le problème: au lieu d'être embété par mon imae qui mord sur le reste de la page, c'est le reste de la page qui m'embete et qui mord sur mon image...

Je travaille encore dessus pour essayer de trouver quelque chose de plus générique et sinon je me conteterai de mixer vos réponses en récupérant la taille de l'image par php.

Citation:

---

Envoyé par MasterOfChakhaL

[...]mais le souci est que même si je peux récupérer la hauteur de mon image grace à la fonction php que m'indique KiLVaiDeN, je trouve ca dommage d'être obligé de présumer de la taille de l'image...

---

Je ne comprends pas trop le problème concernant la taille de l'image.
Tu parles des propriétés width et height de la balise img :?:
Si c'est cela qui te gène tu n'es pas obligé de les mettre (elles permettent d'éviter au navigateur d'avoir à les calculer)
Donc

Code:

---

<div id="titre"><img src="logo.jpg" alt="Mon logo">Mon titre</div>

---

Fonctionnera quelque soit la taille de l'image.

Citation:

---

en fait, le truc, si j'ai bien compris ce que j'ai lu a droite a gauche, c'est que dès que je postionne mon image "à la main", cet élément sort du flux de la page et peux donc mordre sur d'autres parties
[...]

---

Oui. Mais la difficulté dans ton cas, c'est d'avoir une image de taille aléatoire.

Le problème (tel que je le percois) est que l'ensemble de mon div doit avoir pour hauteur le max de mon image ou du texte que je lui mets (n lignes)

En fait tu me donnes une solution pour caler le coin haut gauche de mon image tout en gardant le texte centré par rapport à toute la fenetre du naviguateur.

Le truc, c'est que la hauteur du block div est égale à la hauteur du texte (quelque soit l'image). Ce qui, si j'ai bien compris est dû au positionnement absolu (qui réglait la première partie de mon problème)

en fait, je ne suis pas sur, mais je crois que mon problème revient à poser deux éléments indépendamment l'un de l'autre puis un troisième (le reste de la page) dont la position (haut et gauche) dépend des deux premiers