Discussion :

[BnA]

Bonjour à tous!

Voici mon petit problème.

J'aimerais pouvoir aligner une image à droite, alors que le reste de mon text est à gauche.

Seulement, si je mets un "float:right;" dans ma classe correspondant à cette image, le positionnement foire.

Une image étant bien plus parlante, voici:



Ici, le positionnement horizontal est correct, mais il faudra que le logo "pdf" soit aligné à l'extrême droite de la zone bleue.



Ici par contre, c'est le positionnement vertical qui est correct. Ne manque plus que l'alignement horizontal, comme sur l'image précédente.

Voici mes codes HTML & CSS

Code :

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

1
2
3
4
5
6
7
8
9
 
<a href="#" onClick="show('span1-1','lien1-1','titre1-1');return(false)" id="lien1-1" class="txt_deroulant"><span id="titre1-1"><h1>Communication & Vocabulaire<img src="images/get_pdf.gif" alt="Get PDF" class="pdf" /></h1></span></a>
<div id="hiddenTxt">
<span id="span1-1" style="display:none">
 
...
 
</span>
</div>

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
 
/* CE CODE CORRESPONDANT A L'IMAGE 2 */
 
body {
	background-color:#E7F0FF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9pt;
	text-align:center;		
	}
 
#container{
	margin-left:auto;
	margin-right:auto;
	width:760px;
	border:1px black dashed;
	text-align : left;  	
	}
 
 
h5{
	font-size:10px;
	font-weight:bold;
	padding:1px;
	padding-left:60px;
	background-color:#D5E1EC;
	color: #3E6B92;
	margin:1px;
	height:15px;
	}
 
h4{
	font-size:11px;
	font-weight:bold;
	padding:2px;
	padding-left:45px;
	background-color:#B5CBDF;
	color: #3E6B92;
	margin:1px;
	height:15px;
	}
 
h3{
	font-size:12px;
	font-weight:bold;
	padding:3px;
	padding-left:30px;
	background-color:#8DB0CF;
	color: white;
	margin:1px;
	height:15px;
	}
 
h2{
	font-size:13px;
	font-weight:bold;
	padding:4px;
	padding-left:15px;
	background-color:#588AB8;
	color: white;
	margin:1px;
	height:15px;
	}
 
h1{
	font-size:14px;
	font-weight:bold;
	background-color:#3E6B92;
	color: white;
	padding:5px;
	margin:1px;
	}
 
table.studentProgress{
	width:100%;
	padding-left:75px;
	color: #3E6B92;	
	}
 
.percent{
	text-align:center;
	}
 
.titleCells{
	font-weight:bold;
	}
 
img{
	border:none;
	}
 
.pdf{
	float:right;
	}

Désolé pour l'opacité du code HTML, mais il s'agit en fait de menus en cascades...

J'espère en tous cas que vous pourrez m'aider à régler ce problème!

Merci d'avance!

[Dan_A]

Il faudrait d'abord utiliser du code valide car un élément de type block ne peut pas se trouver dans un élément inline.
Doit-on pouvoir cliquer sur l'image ?

[BnA]

Oui on doit pouvoir cliquer sur l'image afin de générer un fichier récapitulatif du menu (il s'agit en fait d'une arborescence de résultats) au format PDF.

Ensuite, pour ce qui est de la validité du code, je suppose que <IMG> est de type block, c'est bien ça?

Que me conseille-tu de faire alors??

[BnA]

Erf non, <IMG> est de type inline...

Tu parlais des balises <H1> et les suivantes, c'est bien ça?

Mais alors, que dois-je mettre à la place de la balise H1?

[Candygirl]

La balise h1 est à utiliser pour le titre le plus important de ta page.

Une façon assez simple de mettre ton image à la place voulue est de passer ton a en display:block et de mettre ton image en fond positionné au centre droite:

Code css :

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

1
2
3
4
.txt_deroulant {
  display:block;
  bakground: url(images/get_pdf.gif) no-repeat right center;
}

[BnA]

Le problème c'est que je dois pouvoir cliquer sur l'image.

Si elle est en background, je ne saurais pas (à moins que je ne me trompe)... Si quelqu'un pouvait confimer (ou infirmer)...