[résolu][div][background] Répeter un background un nombre défini.

Bonjour,

Voilà j'aimerais faire ceci en css : http://kermarec.eu/jauge.jpg

Pour faire cela, j'ai pensé faire 2 divs l'une dans l'autre :
- Div1 : Fond blanc et d'une taille fixe
- Div2 : Dans Div1, fond bleu et d'une taille fixée en JS

Jusqu'ici tout fonctionne

Mon problème est d'arriver à écrire le texte sur ces 2 divs.
- Si j'écris dans la bleu (div2), le texte risque de me fausser la taille de la div2.
- Si j'écris dans la blanche, le texte décalle la div2 plus bas.
edit : Je pensais mettre la Div2 de la même taille que la Div1 pour écrire dedans, mais du coup limiter le repeat-x à un certain nombre.

Avez vous une solution à me proposer ?
Peut être ai-je choisi la mauvaise dès le début.
Merci d'avance pour votre aide
Modifié par YanK34 (06 Jul 2006 - 10:11)

Salut,
as tu essayé de positionné ta div1 en absolute, et de mettre ton texte dans une div3, de même taille que ta div1; avec un background transparent; et superposée à div1.

Un code un peu comme ça (je n'ai pas mis la div2 en css)

	*****LE CSS*****
#div1{position: absolute; background:#ff0000; top:0; bottom:0; width:100px; height:100px }
#div3{position: absolute; ; top:0; bottom:0; width:100px; height:100px }


*****LE HTML*****
<div id="div1"><div2></div2></div><div id="div3">[i]ici ton texte: 180MO/250Mo[/i]</div>
	</body>

Essai et n'hésite pas si il y a un souci, à+
Modifié par coccimaster (05 Jul 2006 - 16:45)

Bonjour coccimaster,
Merci, je pense que je vais peut être faire ceci.

En fait je ne voulais pas trop passer mes divs en « absolute ».
Je débute en CSS, j'avoue que j'ai toujours les anciennes habitudes du temps ou je découpais les interfaces pour les mettre dans des tableaux.
Le « absolute » doit inconsciemment me faire peur.

« Absolute » fonctionne bien dans tous les navigateurs, ou je dois m'attendre à de petites surprises ?

Salut Yank,

As-tu essayé de faire une seule image en PNG bien optimisé ? A mon avis le résultat peut être une image très légère et ça t'éviterait de recourir à ce genre de bidouille pas très jojo.
Si la proportion entre la partie gauche et droite varie, dans ce cas tu laisses un peu de jeu de chaque côté, et ensuite tu règles ça via background-position en décalant comme souhaité.

Salut Alan,
En fait j'ai appliqué la solution de coccimaster.

Si j'ai choisi cette façon de faire c'est que je ne voulais pas générer une image à partir du serveur.
Là j'ai 2 images de 1px de large que je répète en background. Vu que le but est de faire marcher toute une interface en AJAX, je préfère cette solution. Je demande simplement au serveur l'espace utilisé et je calcul la taille de ma div bleu en JS.

Merci à vous 2.
Modifié par YanK34 (05 Jul 2006 - 18:12)

Ok Yank,

Si tu considères le sujet comme résolu, n'oublie pas de le marquer comme tel en ajoutant dans le titre le tag [résolu] (pour cela il faut éditer le premier message de la discussion et modifier le titre)

A +
Modifié par Alan (05 Jul 2006 - 18:49)