Discussion :

[ptitdje]

Hello tout le monde,

Petit souci chez moi et pas moyen de comprendre ce qu'il se passe. Fonctionne sous chrome.
css

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.presentation {
	visibility: hidden;
	position: absolute;
	left: -50px; top: 40%;
	width: 100%;
	transform: translateY(-50%);
	padding: px-to-rem(30px);
	background-color: rgba(#fff, 0.75);
	text-align: right;
 
 
	.title {
		margin-bottom: 0;
	}
 
	p {
		color: $light-blue-3ds-color;
		font-family: $app-font-family;
		font-size: px-to-rem(28px);
	}
}
#step1-screen {
	z-index: 11;
 
	.presentation .title {
		display : inline-block;
	}
 
	.presentation .num {
		content: url('../images/title1.png');
		margin-top: px-to-rem(26px);
		padding-left: px-to-rem(26px);
		float:right;
	}
 
	.presentation .p {
		display : inline-block;
	}
}

Code :

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

1
2
3
4
5
<div class="presentation">
						<span class="num"></span> 
						<h3 class="title">Blabla</h3>
						<p>Blablabla</p>
					</div>

Le but étant d'avoir un double titre de taille différente avec "1" entouré d'un cercle qui correspond au .png

Merci d'avance

[NoSmoking]

Bonjour,
ton code CSS me parait des plus farfelu, utilises tu un préprocesseurs CSS, si oui lequel ?

[ptitdje]

J'utilise sass

Je récapitule mon souci. J'ai une image à droite de 2 textes. J'ai donc .num ( mon image ) qui est en float:right et les deux textes en display:inline-block.

L'image s'affiche sous chrome bien à droite. Ne s'affiche pas sous firefox :/

Ce que je constate c'est une height nul. L'image fait 50x0 sous firefox. Même si je fixe une height et une width cela donne 50x50 mais aucun affichage. Pareil en rajoutant une position ou n'importe quelle fourberie.

Je suis perdu dans cet non-affichage.

[NoSmoking]

...cela donne 50x50 mais aucun affichage.

vérifie le format de l'image, essaie avec une image gif pour voir.

[Inikaam]

Bonjour ptitdje,

La propriété css "content" est destinée aux pseudos-éléments :before et :after, tous les navigateurs ne le traitent pas nécessairement sur des éléments normaux.

https://developer.mozilla.org/fr/docs/Web/CSS/content
http://stackoverflow.com/questions/1...irefox-browser

D'autre part, pourquoi utiliser content dans un span alors qu'une balise img aurait été cent fois plus pratique (surtout si l'url est en dur) ?

À défaut, je te suggère d'utiliser une div plutôt qu'un span, le span est un élément inline qui n'est pas approprié pour l'utilisation que tu en fais.