Problème de positionnement d'image

**BnA** · 06/03/2007, 12h04

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** · 06/03/2007, 12h11

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** · 06/03/2007, 12h14

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** · 06/03/2007, 13h36

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** · 06/03/2007, 16h22

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** · 06/03/2007, 16h29

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)...

**XtoX** · 06/03/2007, 16h41

Il existe tout un tas de paramètre pour aligner une image (ou tout autre élément html) via la propriété css vertical-align... Il existe de subtiles différences entre toutes les valeurs que peut prendre cet attribut, tu devrait pouvoir trouver ton bonheur.

**Candygirl** · 06/03/2007, 16h58

Envoyé par 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)...

En fait en mettant ton a en display:block, ton lien est cliquable sur toute sa surface, et donc aussi l'image. En fait ça rend toute ta zone bleue cliquable.

**BnA** · 06/03/2007, 17h47

Y'a du progrès...

Par contre, mon image est en arrière-plan... J'ai essayé avec un z-index à 100 (pour être sûr), mais que dalle...

Pfff impression de tourner en rond moi...

**Mahefasoa** · 06/03/2007, 21h09

Salut,

Envoyé par BnA

Y'a du progrès...

Par contre, mon image est en arrière-plan... J'ai essayé avec un z-index à 100 (pour être sûr), mais que dalle...

Pfff impression de tourner en rond moi...

Je ne sais pas si c'est moi qui ne comprend rien! Tu peux jouer sur le z-index autant de fois que tu veux mais cela ne change rien car l'image est devenu le background (fond) de ton balise a (lien).
Je crois avoir compris que le lien et l'image (qui est d'ailleurs cliquable) donnent à peu près le même résultat mais sous deux présentation différentes? Non? Si c'est le cas, la solution de CandyGirl ne répond pas à ton besoin.
Tu veux un lien et une image côte à côte.

**Candygirl** · 06/03/2007, 22h17

J'ai peut-être rien compris non plus

Il me semble, d'après ce code de départ:

Code html :

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

<a href="#" onClick="show('span1-1','lien1-1','titre1-1');return(false)" id="lien1-1" class="txt_deroulant"><span id="titre1-1"><h1>Communication &amp; Vocabulaire<img src="images/get_pdf.gif" alt="Get PDF" class="pdf" /></h1></span></a>

Que le texte et l'image sont compris dans le même lien, d'où ma proposition avec l'image de fond... le texte et l'image sont cliquables les deux, la seule différence c'est que toute la zone bleue, entre deux et autour, est cliquable aussi.

Autrement,

Envoyé par BnA

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.

Si tu mets l'images en float:right, alors celle-ci doit être placée avant ton texte dans ton html pour éviter qu'elle ne figure au-dessous:

Code html :

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

<a href="#" onClick="show('span1-1','lien1-1','titre1-1');return(false)" id="lien1-1" class="txt_deroulant"><img src="images/get_pdf.gif" alt="Get PDF" class="pdf" /><span id="titre1-1">Communication &amp; Vocabulaire</span></a>

**BnA** · 07/03/2007, 08h59

Chère CandyGirl, tu viens de faire de moi un homme heureux!

Un grand merci, ça fonctionne correctement. Je n'ai plus qu'à peaufiner légèrement le positionnement, mais ça marche!

Problème de positionnement d'image

Positionnement en CSS

Discussions similaires

Partager

Partager