Un DIV avec les propriété du SPAN, est-ce possible ?

salut à tous !

Alors voilà, je m'emèle un peu et j'ai besoin de votre aide !

Imaginons, que j'ai trois/quatre mots. Ces mots peuvent varier en longeur, il faut donc une largeur non fixe. Je voudrais afficher en fond un motif, mais sur une hauteur bien précise.

La balise SPAN permet d'afficher facilement un motif en arrière plan, mais on ne peut pas définir une auteur fixe. A l'inverese, le DIV permet de donner une valeur fixe à la hauteur mais ca ne peut pas "s'elargir" en fonction du texte contenu si vous voyez ce que je veux dire ...

Il y a t'il la possibilité de donner par un quelconque moyen une large fixe à une balise span ? Ou bien donner une largeur en fonction du contenu au DIV ? ou bien je suis entrain de faire n'importe quoi et il y a un moyen plus simple pour faire ca ? (à part le tableau ...).

Merci d'avance
Modifié par vin-moi (25 Oct 2005 - 22:01)

Bonjour.
Essaie toujours avec display:inline mais bon si tu mets du div à la place du span pour du contenu en ligne, il y a un problème de conception.
Essaie quand même à tout hasar de mettre une hauteur à ton span, ça marchait pour des liens alors pourquoi pas pour un span...

Hello,

Tu te heurtes à un problème. Prenons les choses dans l'ordre :

1- <div> c'est exactement un <span> mais en bloc, alors que <span> est en ligne
2- pour passer d'une structure à l'autre on applique la règle "display : block" ou "display : inline"
3- une balise en-ligne ne peut pas (sauf exceptions comme <img>) avoir de dimensions (hauteur, largeur)

Bref, pour se rapprocher de ta question :
- tu peux "transformer" ton <span> en <div> en lui appliquant la règle "display : block", mais dans ce cas, il se comportera comme un bloc c'est à dire en occupant toute la largeur disponible par défaut. Ce n'est pas ce que tu veux.

En fait, la solution est celle-ci : le seul moyen d'avoir un bloc à la taille de son contenu est de le positionner soit en absolu, soit en flottant.

QuentinC a écrit :
Essaie quand même à tout hasar de mettre une hauteur à ton span, ça marchait pour des liens alors pourquoi pas pour un span...

"height" s'applique sur des liens uniquement si ceux-ci sont déclarés en "display: block".
On peut éventuellement jouer avec line-height pour régler la hauteur d'un élément en-ligne... mais pour la largeur, voir message précédent

Merci beaucoup ! Un DIV avec l'attribut "display : inline" c'est exactement ce qu'il fallait ! Je vous remercie énormément !

Bonne soiré à vous deux

Bonjour,

Peut-être en nous donnant un contexte un peu plus précis, les membres du forum pourraient t'orienter vers les choix adéquats en terme de "balisage". Au delà des éléments neutres comme span (en ligne) et div (bloc) que tu envisages existe t-il des éléments plus appropriés en html ?

On peut pour des questions graphiques manipuler pour une restitution graphique sur écran la présentation d'élements qui sont de type bloc en "en ligne", et "en ligne" vers "bloc"; mais peut-être est-il utile de connaitre au préalable la nature de tous les éléments comme ce tutoriel te le récapitules: La structure des balises : bloc et en-ligne.

Eclaires-nous sur ton projet. Un lien serait un plus indéniable .

ok.

voilà ce que je voudrais faire :

http://www.depannetonpc.net/test.gif

en gros le DIV posant problème est le rouge. Il doit s'adapter à la longeur de la ligne tout en ayant une hauteur fixe à cause du dégradé en fond. Le DIV en vert englaube le rouge, et il y a une image pour faire l'angle. Et le bleu vient en dessous. (le tout est englaubé dans un div principal).

J'ai essayé le div avec le inline, ca fonctionne bien sous Opera et Firefox, mais avec Internet Explorer, il y a comme un margin à droite et en dessous du DIV ce qui laisse une marge entre le calque d'en dessous et l'image d'angle !



voilà ce que ca donne sous IE :

http://www.depannetonpc.net/test2.gif
Modifié par vin-moi (25 Oct 2005 - 23:14)

Finalement c'est OK je n'ai plus aucun problème concernant ca.

En revanche, j'ai un problème avec les float : left sous Internet Explorer.

Alors en gros :

j'ai un DIV principal.
Un grand DIV qui se trouve dans le DIV principal avec un margin-left de 10px par exemple (et un attribut clear : left).

Et deux DIV fesant environ 40% de la largeur du DIV principal avec un margin-left de 10px et un float : left pour qu'ils se positionne l'un à coté de l'autre.

Le problème est qu'avec le margin-left de 10px des petits cadres, bin les 10px sont décalé non pas par rapport au bord gauche du cadre principale, mais par rapport au bord gauche du grand DIV qui se trouve dedans, ce qui fait qu'il est donc decalé de 20px...

et ca le fait seulement sous IE, pas sous Firefox ni opera !

Si vous avez une idée, je suis là