Un cas problèmatique de positionnement de trois éléments sur
Posté : 10 août 2007, 00:56
J'ai beau à chercher, je ne trouve pas de solution 
. Voilà le problème :
Sur une même ligne sont positionnés trois objets. Tout d'abord, tout à gauche se trouve une zone d'une largeur fixe (100 pixels) et avec un arrière plan spécifique. Puis vient le texte d'une largeur inconnue et avec un arrière plan transparent. Finalement, la ligne est terminée par une zone avec encore une fois un arrière plan spécifique. Cette dernière zone commence là où se termine le texte et se prolonge jusqu'à la fin de la page (ou plus précisément de l'élément parent).
On ne peut pas faire ça :
car dans la premier cas, la zone du texte se trouve par dessus l'arrière plan de la zone de droite, et dans le deuxième cas la zone de droite ne se prolonge pas suffisamment à droite.
Est-ce que quelqu'un a une idée comment faire ?
Remarque : bien entendu, il n'est pas question d'utiliser ni du JavaScript (pour calculer dynamiquement la largeur de la zone de droite par exemple) ni des tables, ni les position:absolute. Voilà.
. Voilà le problème :Sur une même ligne sont positionnés trois objets. Tout d'abord, tout à gauche se trouve une zone d'une largeur fixe (100 pixels) et avec un arrière plan spécifique. Puis vient le texte d'une largeur inconnue et avec un arrière plan transparent. Finalement, la ligne est terminée par une zone avec encore une fois un arrière plan spécifique. Cette dernière zone commence là où se termine le texte et se prolonge jusqu'à la fin de la page (ou plus précisément de l'élément parent).
On ne peut pas faire ça :
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<div style="float:left; background:red; width:100px;">100 pixels</div>
<div style="float:left; padding:0 10px;">Text of undefined size</div>
<div style="background:lime;">Right</div>
<div style="float:left; background:red; width:100px;">100 pixels</div>
<div style="float:left; padding:0 10px;">Text of undefined size</div>
<div style="float:left; background:lime;">Right</div>
</body>
</html>Est-ce que quelqu'un a une idée comment faire ?
Remarque : bien entendu, il n'est pas question d'utiliser ni du JavaScript (pour calculer dynamiquement la largeur de la zone de droite par exemple) ni des tables, ni les position:absolute. Voilà.
C'est ce que j'ai fait avant, sauf que maintenant j'ai besoin, comme je l'ai dit, d'un arrière plan transparent pour le texte (car derrière le texte, il y a une image).