Span ne s'adapte pas à son contenu

NeraOne · 09/09/2011, 11h50

Bonjour à tous,

J'ai une image dans une SPAN, elle même dans une DIV. Cette image est alignée à gauche et il y a aussi du texte dans la SPAN. La taille de la SPAN prend en compte le texte mais pas l'image... du coup l'image dépasse de la SPAN et par conséquent de la DIV qui contient le tout. Le tout sous IE x seulement, tiens donc !

test.html (je vous ai simplifié le tout et le comportement est le même) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
	<head>
		<link rel="stylesheet" type="text/css" media="screen" href="./test.css" />
	</head>
	<body>
		<div class="conteneur">
			<span class="contenu">
				<img src = "./test.jpg" align="left"></img>
				<p>Ceci est du texte</p>
			</span>
		</div>
	</body>
</html>

test.css :

Code :

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

1
2
3
4
5
6
7
8
9
10
div.conteneur{
	overflow:hidden;
	border:1px solid red;
}
 
span.contenu{
	display: block;
	padding: 8px 8px 2px 8px;
	border:1px solid blue;
}

A savoir : je ne peux modifier que mes styles CSS, je n'ai pas accès au code généré, j'aurai bien viré la span mais pas possible...

Est-ce que vous avez une idée de comment je pourrais faire pour que cette SPAN se termine en dessous de l'image ?

Merci à tous !

anemone-clown · 09/09/2011, 13h09

Tu as essayé de changer le display : "block" en "inline-block" ? Avec IE, c'est un "point" sensible.

kdmbella · 09/09/2011, 14h10

il faut également voir si en jouant sur les dimensions de la DIV en mettant par exemple width='auto', on a une adaptation au contenu

Candygirl · 09/09/2011, 14h52

Bonjour,

As-tu bien correctement renseigné un doctype tout en haut de tes pages afin d'éviter le mode Quirks ?

eckerdecker · 12/09/2011, 18h11

le <span> est une balise html de type inline (je ne parle pas de css), il ne peut pas contenir un <p> qui est du type block, utilise un <div> à la place.

EDIT : au temps pour moi, tu ne peux pas modifier le css, mais le problème reste entier, ce <p> n'a rien à faire dans un <span>

09/09/2011, 13h09	#2
anemone-clown Nouveau Membre du Club Jef Ingénieur développement de composants Inscription : novembre 2007 Messages : 31 Détails du profil Informations personnelles : Nom : Jef Localisation : France, Meuse (Lorraine) Informations professionnelles : Activité : Ingénieur développement de composants Secteur : High Tech - Électronique et micro-électronique Informations forums : Inscription : novembre 2007 Messages : 31 Points : 29 Points : 29	Tu as essayé de changer le display : "block" en "inline-block" ? Avec IE, c'est un "point" sensible.
	00

09/09/2011, 14h10	#3
kdmbella Membre Expert Demazy Mbella Développeur Web Inscription : août 2010 Messages : 620 Détails du profil Informations personnelles : Nom : Demazy Mbella Localisation : Cameroun Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Produits et services télécom et Internet Informations forums : Inscription : août 2010 Messages : 620 Points : 1 470 Points : 1 470	il faut également voir si en jouant sur les dimensions de la DIV en mettant par exemple width='auto', on a une adaptation au contenu __________________ Trois personnes peuvent garder un secret si deux d'entre elles sont mortes. :Benjamin Franklin L'humanité se divise en trois catégories : ceux qui ne peuvent pas bouger, ceux qui peuvent bouger, et ceux qui bougent : Benjamin Franklin Le hasard, c'est le déguisement que prend Dieu pour voyager incognito: Albert Einstein bon je m'arrête là au risque de me faire buter
	00

09/09/2011, 14h52	#4
Candygirl Modératrice Inscription : juillet 2006 Messages : 1 529 Détails du profil Informations personnelles : Sexe : Âge : 40 Localisation : Suisse Informations forums : Inscription : juillet 2006 Messages : 1 529 Points : 1 869 Points : 1 869	Bonjour, As-tu bien correctement renseigné un doctype tout en haut de tes pages afin d'éviter le mode Quirks ? __________________ Les bons réflexes: avant de poser une question: règles \| faq \| tutoriels \| recherche clarté, politesse, vocabulaire et orthographe soignés = efficacité remercier ceux qui ont pris le temps d'aider et si c'est le cas
	00

12/09/2011, 18h11	#5
eckerdecker Membre actif Inscription : décembre 2009 Messages : 132 Détails du profil Informations personnelles : Âge : 27 Informations forums : Inscription : décembre 2009 Messages : 132 Points : 154 Points : 154	le <span> est une balise html de type inline (je ne parle pas de css), il ne peut pas contenir un <p> qui est du type block, utilise un <div> à la place. EDIT : au temps pour moi, tu ne peux pas modifier le css, mais le problème reste entier, ce <p> n'a rien à faire dans un <span>
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email