Problème d'affichage pour balise anchor avec spans

**miro_mtl** · 16/11/2010, 16h32

Bonjour à tous,

J'utilise un markup qui style des balises anchor sous forme de bouton. Chaque anchor contient en réalité 3 spans pour représenter un bouton avec du texte et une image. Mon problème est que dans certaines conditions, comme dans une cellule d'un tableau par exemple ou lorsque la page est redimensionnée très petite, un retour de ligne est forcé et le span de droite de mes boutons s'affiche sur la 2e ligne. La longueur d'un bouton est déterminé par le texte qu'il contient, je ne peux donc spécifier une valeur de width au départ.

Voici l'affichage désiré:

Voici le résultat non désiré:

J'ai remarqué que le problème survient entre autre si j'utilise un padding sur le div parent. Comment puis-je m'assurer de forcer un affichage sur une ligne peu importe les conditions et la dimension de la page?

Code html :

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

1
2
3
4
5
6
7
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<a href="some_page.aspx" id="A1" class="workLoadButton lockIcon" title="Some title">
<span class="nameOfbut">Some long key</span>
<span class="timeFrame color1">2,5</span>
<span class="clear"></span></a>

Code css :

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
span.clear{
	clear:both;
}
 
.clear{clear:both;}
 
a.workLoadButton{
	text-align:left;
	text-decoration:none;
	background:#ebebec;
	height:14px;
	line-height:14px;
	margin:5px;
	margin:1px;
	padding:0 0 0 18px;
	border:1px solid #b0b0b0;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	float:left;
}
 
a.lockIcon{
	background:#ebebec url(images/a_iconLock.gif) no-repeat -2px -1px;
	cursor:pointer;
}
 
.nameOfbut{
	font-size:11px;
	font-weight:bold;
	color:#757575;
	float:left;
}
 
.timeFrame{
	width:14px;
	float:left;
	font-weight:normal;
	font-size:10px;
	margin:0 0 0 4px;
	padding:0 6px 0 5px;
	line-height:15px;
	height:14px;
	color:#fff;
	border-left:1px solid #c6c6c6;
	border-top-right-radius:4px;
	border-bottom-right-radius:4px;
	-moz-border-radius-topright:4px;
	-moz-border-radius-bottomright:4px;
	-webkit-border-top-right-radius:4px;
	-webkit-border-bottom-right-radius:4px;
}
 
.timeFrame.color1{background:#ee3124;}

**scourjean** · 17/11/2010, 11h21

Tester sur FF, Chrome, IE7 et IE8, j'ai retiré beaucoup de chose qui était superflue. Et tu peux même retirer clear et autres css en commentaire.

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<style type="text/css">
	span.clear{
		clear:both;
	}
 
	.clear{clear:both;}
 
	a.workLoadButton{
		text-align:left;
		text-decoration:none;
		background:#ebebec;
		height:16px;
		line-height:14px;
		/*margin:5px;*/
		margin:1px;
		padding:0 0 0 18px;
		border:1px solid #b0b0b0;
		border-radius:5px;
		-moz-border-radius:5px;
		-webkit-border-radius:5px;
		float:left;
		min-width:110px;
		width:110px;
	}
 
	a.lockIcon{
		background:#ebebec url(images/a_iconLock.gif) no-repeat -2px -1px;
		cursor:pointer;
	}
 
	.nameOfbut{
		font-size:11px;
		font-weight:bold;
		color:#757575;
		line-height:14px;
		margin:1px 0px;
	}
 
	.timeFrame{
		width:14px;
		/*float:right;*/
		font-weight:normal;
		font-size:10px;
		/*margin:0px 0 0px 4px;*/
		padding:3px 8px 2px 7px;
		line-height:16px;
		height:14px;
		color:#fff;
		border-left:1px solid #c6c6c6;
		border-top-right-radius:4px;
		border-bottom-right-radius:4px;
		-moz-border-radius-topright:4px;
		-moz-border-radius-bottomright:4px;
		-webkit-border-top-right-radius:4px;
		-webkit-border-bottom-right-radius:4px;
	}
 
	.timeFrame.color1{background:#ee3124;}
</style>
<a href="some_page.aspx" id="A1" class="workLoadButton lockIcon" title="Some title">
<span class="nameOfbut">Some long key</span>
<span class="timeFrame color1">2,5</span>
</a>

**miro_mtl** · 17/11/2010, 20h03

Merci pour la réponse, ça règle mon problème de belle façon et simplement.

Il semble que l'attribut float:left sur les spans était une partie du problème ici. Pas évident toujours de saisir les nuances de combinaisons de propriétés CSS avec des éléments imbriqués.

Merci beaucoup.

Problème d'affichage pour balise anchor avec spans

CSS

Discussions similaires

Partager

Partager