par
MainMa » 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 :
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>
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à.
J'ai beau à chercher, je ne trouve pas de solution :roll:. 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]<!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>[/code]
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à. :wink:
