Discussion :

[Federico_muy_bien]

Salut à tous !!!

J'ai un petit (j'espere) probléme de positionnement d'image. Je veux creer un pied de page avec 4 images rectangulaires.





Jusque là tout va bien le probléme se pose avec la 4eme image :


Et oui elle a une hauteur plus grande !!! Ce que je voudrais c'est aligner le petit rectangle qui lui a la meme hauteur que pour les 3 autres images. Je ne peux pas la fixer en absolute car j'ai un element juste au dessus qui bouge. Ma question est comment je peux décaler cette image par rapport aux autres de quelques pixel verticalement ... ?

Merci à ceux qui prendront du temps pour me répondre ...

[E.Bzz]

Bonjour,

Ma question est comment je peux décaler cette image par rapport aux autres de quelques pixel verticalement ... ?

margin-top ?

A+

[Federico_muy_bien]

Salut !!!
Merci de ta réponse ! Mais j'ai déjà testé avant et tout ce qui est margin et padding n'ont aucun effet donc c'est peut etre là que le bas blesse.

Je vais mettre le code XHTML et CSS :
Par ajax du contenu est ajouté quand clic sur un li.

Code HTML :

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
 
<div id="onglets">
	    <ul>
		<li><a href="accueil.html"><span>Accueil</span></a></li>
		<li><a href="formation.html"><span>Formation</span></a></li>
		<li><a href="actuellement.html"><span>Actuellement</span></a></li>
		<li><a href="interet.html"><span>Centres d'inter&ecirc;ts</span></a></li>
		<li><a href="liens.html"><span>Liens</span></a></li>
	    </ul>
	</div>
 
	<div id="valide">
		<a href="http://www.passeralinux.fr/" title="Passez &agrave; Linux - une alternative &agrave; Windows, libre et gratuite">
			<img src="../images/gnu-linux.png" 
			alt="Linux" /></a>
 
		<a href="http://validator.w3.org/check?uri=referer">
			<img src="../images/w3c_valid_xhtml.gif" title="Site conforme aux recommandations du W3C XHTML"
			alt="Valide XHTML" />
		</a>
		<a href="http://jigsaw.w3.org/css-validator/check/referer">
			<img src="../images/w3c-css.gif" title="Site conforme aux recommandations du W3C CSS"
			alt="Valide CSS" />
		</a>
		<a href='http://www.mozilla.com/en-US/?from=sfx&amp;uid=0&amp;t=456'>
			<img src='../images/get_firefox_mini.png' title="Pour une navigation plus sure et plus rapide"
				alt="Telecharger Firefox" /></a>
	</div>

Code CSS :

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

1
2
3
4
5
6
 
div#valide {
	margin : 10px 0 ;
	text-align : center ;
	padding : auto ;
}

Quand je fais un margin ou un padding dans le div, il s'en fout. C'est a dire avec firebug si je regarde le contour de la div#valide c'est bon et le margin de l'image gnu dépasse le contour de la div. Comme si l'image ne faisait pas partie de la div ... Je sais pas si vous me comprenez ??

Je vais mettre ces 4 images sur une page vierge pour voir si le probléme vient du contenu placé plus haut

EDIT : Alors j'ai copier que la div#valide donc celle avec les 4 images et le probléme est le meme. Impossible de faire descendre l'image gnu de quelques pixel pour qu'il soit aligné avec les autres. Un margin sur l'image prend effet sur la div ...

[Bisûnûrs]

Tu rencontres le problème de fusion des marges (faire une recherche pour plus d'infos). Tu peux mettre un margin-top sur ton image en question, mais en rajoutant un overflow:hidden sur le div parent, ça devrait fonctionner.

[E.Bzz]

Tu peux mettre un margin-top sur ton image en question,

+1

je parlais bien de l'image elle-même et non du div. Sinon ça décale toutes les images de 10px et je suppose que le problème reste le même ...
Et margin-top, pas margin ...

A+

[Federico_muy_bien]

Salut Bisûnûrs !

Toujours aucun effet !! J'ai aussi essayé un padding de 1px sur le parent qui peut aussi annuler cet effet mais pas d'effet. Je me suis fait une page avec seulement ma div en question pour etre sur que le reste ne viennent pas interférer.

Code html :

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
 
<div id="valide" style="padding:1px;overflow:hidden">
			<a href="http://www.passeralinux.fr/" title="Passez &agrave; Linux - une alternative &agrave; Windows, libre et gratuite">
				<img src="../images/gnu-linux.png" style="margin-top:60px;"
				alt="Linux" /></a>
 
			<a href="http://validator.w3.org/check?uri=referer">
				<img src="../images/w3c_valid_xhtml.gif" title="Site conforme aux recommandations du W3C XHTML"
				alt="Valide XHTML" />
			</a>
			<a href="http://jigsaw.w3.org/css-validator/check/referer">
				<img src="../images/w3c-css.gif" title="Site conforme aux recommandations du W3C CSS"
				alt="Valide CSS" />
			</a>
			<a href='http://www.mozilla.com/en-US/?from=sfx&amp;uid=0&amp;t=456'>
				<img src='../images/get_firefox_mini.png' title="Pour une navigation plus sure et plus rapide"
					alt="Telecharger Firefox" /></a>
		</div>

Le overflow et le margin-top decalent l'ensemble des images ...

[Federico_muy_bien]

TROUVE !!!!!!!!!!!!!!!!!!!

Alors je vais bien expliquer pour si jamais quelqu'un rencontre le probléme. Avec ce que vous m'aviez dit j'ai appliquer le margin-top et tout descendait

J'ai utilisé firebug et j'ai eu la revelation :


Vous voyez pas ??



L'image gnu se décale seule vers le bas mais les autres images par default se mettent au plus bas de la div .... donc je pouvais descendre tant que je voulais le gnu les autres allaient suivre !!! SOLUTION ? monter les autres !!!

Code html :

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
 
<div id="valide" style="padding:1px;overflow:hidden">
			<a href="http://www.passeralinux.fr/" title="Passez &agrave; Linux - une alternative &agrave; Windows, libre et gratuite">
				<img src="../images/gnu-linux.png"
				alt="Linux" /></a>
 
			<a href="http://validator.w3.org/check?uri=referer">
				<img src="../images/w3c_valid_xhtml.gif" title="Site conforme aux recommandations du W3C XHTML" style="margin-bottom:6px;"
				alt="Valide XHTML" />
			</a>
			<a href="http://jigsaw.w3.org/css-validator/check/referer">
				<img src="../images/w3c-css.gif" title="Site conforme aux recommandations du W3C CSS" style="margin-bottom:6px;"
				alt="Valide CSS" />
			</a>
			<a href='http://www.mozilla.com/en-US/?from=sfx&amp;uid=0&amp;t=456'>
				<img src='../images/get_firefox_mini.png' title="Pour une navigation plus sure et plus rapide" style="margin-bottom:6px;"
					alt="Telecharger Firefox" /></a>
		</div>

Merci a vous pour m'avoir aidé !!

[Bisûnûrs]

Essaie de rajouter un vertical-align:top sur les autres images, tout en gardant le margin-top sur la première.

[MounsS]

Bonjour à tous,

J'ai rencontré le même problème...

Voici ce qui m'a sauvé

CSS:

Code :

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

1
2
3
4
img#tonimage{
      position : relative;
      top : 15px;
}

J'espère que ça en aidera d'autres ;-)