Positionnement d'images avec une balise A

Version imprimable

Voir 40 message(s) de cette discussion en une page

06/07/2006, 15h14
Seth77

Positionnement d'images avec une balise A

Slu

j'ai deux image et j'aimerais les colles, j'ai mis :

border="0" height="10" width="14"

pour chaque image...
les images sont dans des balises A.

voila le resultat :

http://img441.imageshack.us/img441/7...shot0016yc.jpg
06/07/2006, 15h17
KiLVaiDeN

mets les dans un div, de hauteur double de la taille de tes images, et de largeur égale à la taille de l'image : ça devrait les mettre l'une en dessous de l'autre. et sinon, ajouter un <br /> entre les deux.
06/07/2006, 15h26
Seth77

ben il y a deja un <br/> entre les deux sinon elle serraient l'une a cote de l'autre ...
06/07/2006, 15h27
KiLVaiDeN

Pas si ta cellule qui les contient est trop petite.

Essaie avec un div sizé.. 8O
06/07/2006, 15h52
fabricew59

l'idee du div est bonne.

tu places ta premiere image en flottant a droite et la seconde tu lui mets clear:right

comme ca inutile de mettre un <BR/>
07/07/2006, 10h27
MasterOfChakhaL

l'espacement vien surement de la hauteur de ligne utilisée...

tu peux définir line-height:0; sur cette zone.

Voici mon code CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
	.small_up {				
		border: 1px solid red;
		height:10px;
		width:14px;
		display:block;
	}
 
	.small_down {
 
		border: 1px solid red;
		height:10px;
		width:14px;
		display:block;
	}

le HTML :

Code:

1
2
3
4
5
6
7
8
9
<td valign="middle" align="center">
 <a href="javascript:update_qte('quantite',1);" class="small_up"> 
  <img src="{IMG_AUG}" alt="Ajouter" border="0" height="10" width="14"> 
 </a>
 
 <a href="javascript:update_qte('quantite',-1);" class="small_down">     
  <img src="{IMG_RED}" alt="Retirer" border="0" height="10" width="14"> 
 </a>
</td>

voici le resultat sous FF :
http://img223.imageshack.us/img223/2...shot001np8.jpg
et sous IE :
http://img223.imageshack.us/img223/2...shot002re6.jpg

8O 8O

19/07/2006, 15h30
KiLVaiDeN

Tu as un souci avec les espaces d'identation, c'est à cause d'eux je pense que tout est décalé.

Enlève les déjà pour commencer, ça devrait aller mieux.

Et puis ma solution te plait pas ?

En gros, qq chose du style :

Code:

<div style="height:20px"><a href="#"><img src="imagesPlus.gif" height="10" border="0"></a><br><a href="#"><img src="imagesMoins.gif" height="10" border="0"></a></div>
19/07/2006, 15h56
Seth77

Citation:

Envoyé par KiLVaiDeN

Tu as un souci avec les espaces d'identation, c'est à cause d'eux je pense que tout est décalé.

Enlève les déjà pour commencer, ça devrait aller mieux.

Et puis ma solution te plait pas ?

En gros, qq chose du style :

Code:

<div style="height:20px"><a href="#"><img src="imagesPlus.gif" height="10" border="0"></a><br><a href="#"><img src="imagesMoins.gif" height="10" border="0"></a></div>

marche bien sous FF mais sous IE il y a toujours un espace entre les 2 images!

C'est le fameux coup du falait tout ecrire sur la meme ligne.
En effet, je ne sais pas pourquoi mais defois le fait de tout ecrire sur une ligne arrive a enlever des espace incomprehensibles :aie:
Donc il faut qu'il n'u ait ni espace ni retout a la ligne entre ta balise a et img.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 .small_up, .small_down { background: #0ee; height: 10px; width: 14px; clear:both; float:left; margin-bottom: 1px; } .small_down { background: #ee0; } a img { border:0; }
Code:

1 2 3 4 5 6 7 <table><tr> <td><input type="text" name="toto" /></td> <td> <a href="javascript:update_qte('quantite',1);" class="small_up"><img src="{IMG_AUG}" alt="Ajouter" height="10" width="14"></a> <a href="javascript:update_qte('quantite',-1);" class="small_down"><img src="{IMG_RED}" alt="Retirer" height="10" width="14"></a> </td> </tr></table>

Citation:
Envoyé par masu
C'est le fameux coup du falait tout ecrire sur la meme ligne.
En effet, je ne sais pas pourquoi mais defois le fait de tout ecrire sur une ligne arrive a enlever des espace incomprehensibles :aie:
Donc il faut qu'il n'u ait ni espace ni retout a la ligne entre ta balise a et img.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 .small_up, .small_down { background: #0ee; height: 10px; width: 14px; clear:both; float:left; margin-bottom: 1px; } .small_down { background: #ee0; } a img { border:0; }
Code:

1 2 3 4 5 6 7 <table><tr> <td><input type="text" name="toto" /></td> <td> <a href="javascript:update_qte('quantite',1);" class="small_up"><img src="{IMG_AUG}" alt="Ajouter" height="10" width="14"></a> <a href="javascript:update_qte('quantite',-1);" class="small_down"><img src="{IMG_RED}" alt="Retirer" height="10" width="14"></a> </td> </tr></table>
merci marche aussi..mais toujours le meme prob chez IE :
http://img134.imageshack.us/img134/9...shot001qs6.jpg

19/07/2006, 16h05
KiLVaiDeN

Et bien c'est compréhensible : étant donné que le langage utilisé est de l'HTML, et que le contenu dans un TD peut être n'importe quoi ( des balises, du texte ) alors un espace est pris en compte; il n'est pas considéré comme un espace d'identation.

Pour palier à ces problèmes, ils ont instauré que les espaces consécutifs, si ils étaient sécables ( pour créer un espace non-sécable il faut utiliser   ) seront considérés comme un seul. Mais ça n'empêche pas que l'espace est toujours là !

Enfin pour revenir au problème, j'imagine que si tu enlève le <BR /> ça devrait aller mieux, mais je ne suis pas sûr.

Grr !! J'ai tester avec IE6 ca marchais :/
Bon peu etre une histoire de DTD
Moi j'ai un entete de XHTML 1.0 Transitional
Code:

1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

19/07/2006, 16h10
Seth77

Citation:

Envoyé par KiLVaiDeN

Et bien c'est compréhensible : étant donné que le langage utilisé est de l'HTML, et que le contenu dans un TD peut être n'importe quoi ( des balises, du texte ) alors un espace est pris en compte; il n'est pas considéré comme un espace d'identation.

Pour palier à ces problèmes, ils ont instauré que les espaces consécutifs, si ils étaient sécables ( pour créer un espace non-sécable il faut utiliser   ) seront considérés comme un seul. Mais ça n'empêche pas que l'espace est toujours là !

Enfin pour revenir au problème, j'imagine que si tu enlève le <BR /> ça devrait aller mieux, mais je ne suis pas sûr.

8O mais je n'ai pas de BR entre mes deux A.....
19/07/2006, 16h12
KiLVaiDeN

8O je parle de mon exemple.......
19/07/2006, 16h21
Seth77
Citation:
Envoyé par masu

Grr !! J'ai tester avec IE6 ca marchais :/
Bon peu etre une histoire de DTD
Moi j'ai un entete de XHTML 1.0 Transitional

Code:

1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
oulala c pire ........

moi j'avais :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

et j'ai mis :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

cela ne change rien ....
19/07/2006, 16h40
masu

en dtd XHTML transitionel
ca marche sous IE6 FF1.5.04

en passant en HXTML strict
fonctionne toujour sous IE6 mais plus sous FF1.5.04

j'avaoue qu'il y a des choses qui m'echapent :aie:
19/07/2006, 16h49
Seth77

Citation:

Envoyé par masu

en dtd XHTML transitionel
ca marche sous IE6 FF1.5.04

en passant en HXTML strict
fonctionne toujour sous IE6 mais plus sous FF1.5.04

j'avaoue qu'il y a des choses qui m'echapent :aie:

ah ben au moins je ne suis pas le seul ... :mouarf:
19/07/2006, 16h50
KiLVaiDeN

Hey dis donc Seth, j'ai pas l'impression que tu as experimenté beaucoup... 8O
19/07/2006, 17h03
Seth77

Citation:

Envoyé par KiLVaiDeN

Hey dis donc Seth, j'ai pas l'impression que tu as experimenté beaucoup... 8O

pourquoi ? :?

j'ai tente plusieurs trucs et chaque fois il y a un soucis ...

oui c'est vrai je n'ai pas beaucoup d'experience en CSS ... et disons qu'il n'y a pas beaucoup d'outils pour bien verifie le resultat ..mis a part la Dev Tools sous FF ...

Voir 40 message(s) de cette discussion en une page