Résolu-Prb avec un Footer et 2 img calées à G et D + texte centré

Bonjour,

Je désir dans le div du "footer" (pied) de ma page avoir un image de fond (background) et 2 images réactives avec un lien (changement d'image quand le curseur de la sourie passe dessus ou quand on clique dessus) calées à gauche et droite du "footer" et un texte centrée.
Sachant que tout doit être sur un ligne !
Donc pour réaliser cela j'ai 4 images qui sont :
pour l'image de gauche :
image1G et image2G (état a:hover et a:link)
pour l'image de droite :
image1D et image2D (état a:hover et a:link)
J'ai une image de fond avec une taiile de 740px x 20px
J'ai un texte à centrer : [#]voici le texte à centrer
donc j'ai le code suivant au niveau de ma page XHTML :

<div id="pied">
<address>
<a href="http://monLien.html"><img id="imgLeft" src="images/image1G.png" alt="Description" width="51" height="18" /></a>
<p>voici le texte à centrer</p> 
<a href="http://monLien.html"><img id="imgRight" src="images/image1D.png" alt="Description" width="51" height="18" /></a>
</address>
</div>

et mon code CSS

#pied {
	position: relative;
	width: 740px;
	height: 20px;
	padding: 1px;
	background: url(../images/fond.png) no-repeat;
	color: #FFF;
}

#pied p {
	margin: 0;
	padding: 0; /* supprime l'espace au dessus et au dessous */
}

#TexteBas {
	margin: 2px 0;
	text-align:center;
}	

#imgLeft a:hover {
	float: left;
	padding: 0;
	background-image: url(../images/image2G.png) no-repeat;
	background-position: left center;
}

#imgRight a:hover {
	float: right;
	margin: 2px 0;
	background: url(../images/image2D.png) no-repeat;
}

Mais l'éffet désiré n'est pas obtenu
et de cette mannière, mes images ne permute pas lorsque le curseur de la sourie est dessus et le texte se retrouve en desous

Merci de votre aide.
Modifié par Gobelin (02 Aug 2006 - 01:45)

Bonjour,

L'élément <address> ne peut pas contenir d'éléments <p>, ni d'autres éléments de type bloc. Le code doit d'abord être modifié avant de régler le problème CSS.

Bien vue Laurent, alors, j'ai changé pour lélément "<span>"(Conteneur en ligne. Utilisé pour appliquer un style localement) et cela correspond bien à mon texte.
ce qui donne :

<div id="pied">

<address>

<a href="http://monLien.html"><img id="imgLeft" src="images/image1G.png" alt="Description" width="51" height="18" /></a>

<span>voici le texte à centrer</span> 

<a href="http://monLien.html"><img id="imgRight" src="images/image1D.png" alt="Description" width="51" height="18" /></a>

</address>

</div>

Merci pour ton poste
@++
Modifié par Gobelin (31 Jul 2006 - 21:11)

Salut Gobelin,

Si ton roblème est résolu, n'oublie pas de l'indiqué comme tel...

Bonsoir,

La correction étant faite:

Tu ne peux pas modifier une image de contenu HTML (tes éléments <img>) en modifiant leur background CSS : ce sont deux niveaux totalement différents du rendu.

Pour pouvoir modifier tes images au survol, le plus simple est de t'inspirer de la technique des "portes coulissantes":
http://pompage.net/pompe/portescoulissantes2/

Avec une accessibilité qui est loin d'être satisfaisante, hélas.

Bonsoir,

Je vais regarder ton lien laurent, mais entre temps, j'ai un autre prb qui se pose à moi, toujours pour réaliser mon pied de page, le problème est le suivant ( je met de coté pour le moment le changement d'image au survol du cursuer de la sourie), j'ai dans mon div (footer) un image de fond ( 740px x 20px) j'ai un texte centrer dedans et je souhaite mettre sur chaqu'un de ces bords un image ( jusqu'à là c'est possible )
pour réaliser cela je vais dans ma feuille de style paramétrer mon div à l'aide de id="pieds" comme ceux-ci :

#pied {
	position: relative; */ position dans le flux pour les 2 images à caler */
	width: 740px;
	height: 20px;
	padding: 1px;      /* marge interne pour que les images ne soit pas  au bord et pour bien les calées */
	background: url(../images/basPied.png) no-repeat; /* l'image de fond */
	color: #FFF; /* couleur pour le texte */
	text-align: center; /* centre le texte */
	padding-bottom: 8px; /* marge avec le bas du navigateur */
}

Je vais placer à l'aide du css mes deux images (51px x 18px), pour réaliser un placement comme je souhaite, je vais me servire du positionnement flottant avec la déclaration float pour chaque image, ce qui donne :

#imgLeft {
	position:absolute; /* permet de se libérer du flux */
	float: left; /* place l'image à gauche */
}
#imgRight {
	position:absolute; /* permet de se libérer du flux */
	float: right; /* place l'image à droite */
}

logiquement cela devrait fonctionner et placer correctement les 2 images, et pourtant non, j'ai bien l'image de gauche bien placer, mais pas l'image de droite, au lieu d'être placé à droite sur la même ligne, elle se place à gauche sous cette ligne.

Bonjour,

Positionnement absolue et float sont incompatibles. Seul le positionnement absolu est appliqué, et le float est ignoré.

Tu dois ne peux utiliser qu'une seule des deux méthodes à la fois.

Bonjour,

OK donc j'ai supprimé mon élément position de mes 2 images ce qui donne

#imgLeft {

	float: left; /* place l'image à gauche */

}

#imgRight {


	float: right; /* place l'image à droite */

}

maintenant l'image de gauche est toujours bien calée, mais l'image de droit est bien calée à droite mais sur la ligne en dessous.
Pourquoi elle ne se cale pas sur la même ligne ?
Modifié par Gobelin (01 Aug 2006 - 14:39)

Pour ce qui concerne le code de ma page html pour la présentation de 2 images calées sur les bords gauche et droite sur une image d'arrière plan et un texte au centre ce qui donne le code suivant :

<!-- Pied -->
<div id="pied">
<a id="imgLeft" href="http://www.monlien.com"><img src="images/imgG.png" alt="lien 1" width="51" height="18" /></a>
<span id="TexteBas">mon texte<b>centré</b>sur l'image d'arrière plan</span>
<a id="imgRight" href="http://www.monlien2.com"><img src="images/imgD.png" alt="lien 2" width="51" height="18"/></a>
</div>

résultat j'ai l'image de droite qui est calée sur la ligne du dessous à droite, je n'arrive pas à pouvoir la calée sur la même ligne.
Poutrant on peut calé plusieurs éléments sur un même ligne si l'on utilise l'élément "float". Leur parent est le div id pied ce qui donne :

#pied {
	position: relative;
	width: 740px;
	height: 20px;
	padding: 1px;
	background: url(../images/basPied.png) no-repeat;
	color: #FFF;
	text-align: center;
	margin-bottom: auto;
	padding-bottom: 20px !important;
}

Modifié par Gobelin (01 Aug 2006 - 22:08)

Bonjour,

Mettre dans le code html les deux éléments flottants *et* ensuite le texte du genre:

<div id="pied" style="text-align:center;">
	<img style="float:left;" alt="" src="monimage.png" height="50" width="50" />
	<img style="float:right;" alt="" src="monimage2.png" height="50" width="50" />
	<p>mon texte centré sur l'image d'arrière plan</p>
</div>

j'ai trouvé en faisant ainsi :

code page :

<!-- Pied -->
<div id="pied">
<a id="imgLeft" href="http://www.monlien.com"><img src="images/imgG.png" alt="lien 1" width="51" height="18" /></a>
<a id="imgRight" href="http://www.monlien2.com"><img src="images/imgD.png" alt="lien 2" width="51" height="18"/></a>
<span id="TexteBas">mon texte<b>centré</b>sur l'image d'arrière plan</span>
</div>

Et mon code en CSS

/*  ------------------------------------------
/*  Footer
/*  ------------------------------------------
*/
#pied {
	position: relative;
	width: 740px;
	height: 20px;
	padding: 1px;
	background: url(../images/ArrierePlan.png) no-repeat;
	color: #FFF;
	text-align: center;
}

#TexteBas {
	padding: 3px;
	margin: auto;
}	

#imgRight {
	float: right;
	width: 51px;
	margin-right: 1px;
}

#imgLeft {
	float: left;
	width: 51px;
	margin-left: 1px;
}

img {border: none;}

Et voilou
Modifié par Gobelin (01 Aug 2006 - 22:15)

maintenant ne reste plus qu'a voir comment changer une des image de coté lorsque le curseur de la sourie passe dessus ou lors d'un clique.

@++

Voilà j'suis arrivé à faire ce que je souhaité.
J'ai utilisé la méthode d'image réactive (rollover) sans javascript décrite sur ce site ici :
http://css.alsacreations.com/Construction-de-menus-en-CSS/Une-image-reactive-rollover-sans-javascript[/url]

Merci de vos conseils à tous