Discussion :

[a066043]

Bonjour,
Voici mon problème. Mon site possède un bandeau avec une image (dans une balise img) et un texte qui doit venir s'insérer à un endroit précis par rapport à l'image.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div id="bandeau">
<img id="image"/>
<h1 id="texte">Le nom de mon site</h1>
</div>

Lorsque je fais les choses en format absolu, il n'y a pas de problème pour positionner le "texte" à l'endroit voulu.
Mon problème est que je cherche à faire cela avec un design extensible.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
#image{
width: 100%;/* Je ne met pas de height, de manière à conserver les proportions de l'image */
}
#texte{
left: 30%;
width: 40%; 
height: 25%;
font-size: 100%;
}

Le code écrit fait que la taille du texte n'est pas flexible. J'aurai besoin de quelque chose qui fasse en sorte que les proportions du block de mon texte restent constants, comme les proportions de l'image, ainsi que la font-size correspondante.
Il me reste toujours une solution de repli qui consisterai à créer une image avec le texte à l'intérieur de l'image, mais je ne souhaite pas en arriver à cette extrémité là.
Merci d'avance pour votre aide

[nadox]

Bonjour,
Tu ne peux pas le faire de cette façon-là.
Si la taille et le positionnement de tes éléments sont relatif(pourcentage) à la taille de l'élément conteneur, la taille de la police est relative à la taille de la police de l'élément conteneur... (et non à la taille/position de l'élément conteneur !)

La seule solution serais d'utiliser javascript pour modifier la taille de la police en fonction de la taille du conteneur. (enfin je ne voie que ça, mais peut-être que quelqu'un aurais une autre idée...)

[a066043]

Merci Nadox d'avoir regardé ma question,
Pour ce qui est du javascript, je ne suis pas très fan de ce genre de procédé. Je pense donc que je ne vais pas l'utiliser. Si je dois choisir, je mettrai plutôt mon texte dans l'image.
J'ai essayé de regarder dans CSS3 si certaines choses pouvaient répondre à mon besoin, mais je n'ai pas trouvé. D'un coté, il faut aussi dire que je connais très très mal CSS 3 et HTML5. Il se peut aussi qu'il existe des choses CSS 2 qui ne m'ait pas sauté aux yeux.
Donc, si un connaisseur pouvait me dire si quelque chose existe :
- Par exemple quelque chose qui permette de définir les proportions d'une boite (longueur = 3 * hauteur).
- Ou encore, quelque chose qui permette de définir qu'un texte doit tenir sur une ligne dont la longueur est fixée et qui adapte la taille de ce texte.