Bonjour,

J'ai un petit sousci avec ce code :

<div class="boite">
<a href="promo/Lampes-led.jpg">
<img class="image4" src="promo/Lampes-led_small.jpg" alt="promo" width="139" height="106" /></a>
<h2>Lampes Led<br />Aqualung FA&MI</h2>
<p>
<a href="http://aquadif.fr/Fr/Strasbourg/lampes/lampe_18T1.htm">
LED 18 T1</a><br />
<a href="http://aquadif.fr/Fr/Strasbourg/lampes/lampe_18T2.htm">
LED 18 T2</a><br />
<a href="http://aquadif.fr/Fr/Strasbourg/lampes/lampe_50T2.htm">
LED 50 T2</a><br />
</p>
<h3>18 T1 - Prix Promo 185€<br />
18 T2 - Prix Promo 280€<br />
50 T2 - Prix Promo 455€</h3>
<br /><br />
</div>

La partie en jaune correspond à une image à qui je voudrais donner une position par rapport
au cadre (div class="boite")

et je n'y arrive pas elle se décalle parceque j'ai mis "absolute" mais en mettant "relative" çà ne fonctionne pas non plus

voilà ma feuille de style :

.boite{ /* paramètres des boites */
align: left;
margin-bottom: 16px;
font-family : arial, helvetica, sans-serif;
width: 426px;
background: url('promo/milieu-bas.png') no-repeat center bottom; /* image de la partie cadre milieu et bas */
font-size: 90%; /* taille caractères de toute la boite */
padding-bottom:5px;
}
.boite h2 {
background: url('promo/haut.png') no-repeat center top; /* image de la partie cadre haut */
text-align: left;
padding-left:20px;
padding-right:20px;
padding-top: 20px;
padding-bottom:5px;
z-index:1;
}
h3{
text-align: center;
font-size : 140%; /* prix réduction dans bandeau */
line-height : 120%;
color: #ffc;
font-family : arial, helvetica, sans-serif;
background-color : #055786;
width: 420px;
padding-left:0px;
padding-right:0px;
}
h4{
text-align: center;
font-size : 120%; /* prix normal sous le bandeau */
font-weight: normal;
color: #000;
font-family : arial, helvetica, sans-serif;
width: 395px;
padding-left:20px;
padding-right:0px;
top: 10px;
}
.boite p {
margin: 10px 20px; /* marges dans les boites */
text-align: justify;

.image4 {
position: absolute; /* positionnement 4e image */
left: 67%;
margin-top: 20px;
}

Annonce visible tout au bas de --> cette page < --

Merci d'avance pour vos solutions

fennec. a écrit :
Bonjour,

et avec inherit ?

J'ai essayé en remplaçant "absolute" par "inherit"

et çà ne fonctionne pas non plus car l'image se met au dessus au lieu d'être à l'intérieur du cadre

Il faudrait que çà ressemble à çà:

Ben ça ressemble déjà à ça, non?

elle a écrit :

Ben ça ressemble déjà à ça, non?

Moi aussi , j'ai cette image nickel !!!! ( sous Firefox )

oui mais cela dépend de la config de l'écran
j'avais un 19 pouces là çà allait très bien, je suis passé à un 24 et là çà déborde

çà donne çà approximativement en plus ou moins débordant selon la config de l'écran:

visible sur cette page : http://aquadif.fr

gemopa a écrit :

oui mais cela dépend de la config de l'écran
j'avais un 19 pouces là çà allait très bien, je suis passé à un 24 et là çà déborde

Résolution d'écran, tu veux dire? Et si tu entoures tout ça (le bloc avec l'image) dans une div à dimensions fixes?

Bonsoir gemopa

Et si tu marges autrement:

.image4 {
position: absolute; /* positionnement 4e image */
padding-right:20px;
margin-top: 20px;
}

griggione a écrit :

Bonsoir gemopa

Et si tu marges autrement:

.image4 {
position: absolute; /* positionnement 4e image */
padding-right:20px;
margin-top: 20px;
}

mais là l'image se trouve en dehors mais à gauche

elle a écrit :

Résolution d'écran, tu veux dire?

J'ai un écran 24 pouces avec 1920x1200

elle a écrit :

Et si tu entoures tout ça (le bloc avec l'image) dans une div à dimensions fixes?

et c'est justement à quelque chose dans le genre que je pensais
mais je ne vois pas comment faire ?

ce code c'est pour la partie du cadre mileu et bas :

.boite{ /* paramètres des boites */
align: left;
margin-bottom: 16px;
font-family : arial, helvetica, sans-serif;
width: 426px;
background: url('promo/milieu-bas.png') no-repeat center bottom; /* image de la partie cadre milieu et bas */
font-size: 90%; /* taille caractères de toute la boite */
padding-bottom:5px;
}

ce code c'est pour la partie du cadre haut:

.boite h2 {
background: url('promo/haut.png') no-repeat center top; /* image de la partie cadre haut */
text-align: left;
padding-left:20px;
padding-right:20px;
padding-top: 20px;
padding-bottom:5px;
z-index:1;
}

çà me permet d'avoir un cadre qui s'agrandit d'après les annonces !

elle a écrit :

Résolution d'écran, tu veux dire? Et si tu entoures tout ça (le bloc avec l'image) dans une div à dimensions fixes?

J'ai compris ce que tu veux dire, il faut que je rajoute un DIV pour chapeauté le tout
je vais m'y attabler

merci @+

RE

Je dis peut-etre une bétise,mais j'aurais mis la boite dans une div id= et l'image dans une div class= pour éviter la position absolute.

griggione a écrit :

RE

Je dis peut-etre une bétise,mais j'aurais mis la boite dans une div id= et l'image dans une div class= pour éviter la position absolute.

Je n'y ai pas encore touché, pas le temp pour l'instant
mais c'est une idée à suivre de toute façon je ne risque rien d'essayer.

merci pour ton astuce