Bonjour à tous,
Avant toute chose, je tiens à dire que je débute totalement dans le css et que mon problème est très certainement très con.

J´ai fait quelques recherches pour essayer de le résoudre, mais j´avoue ne pas trop savoir ce que je dois taper pour trouver une solution...

Voilà donc mon problème :
Je veux positionner une image au milieu horizontal d´une page, et, en dessous, deux autres qui seront de chaque côté de la première image, formant ainsi comme une sorte de triangle.

J´y arrive,mais, le problème, c´est que, lorsque je réduit ma fenêtre, la première image reste au milieu de celle-ci, et les deux autres restent à la même distance du bord (en %) que lorsque la page est en plein écran. Donc, au final, les deux images du dessous se superposent.

J´aimerais que, lorsque je réduis ma page, toutes les images restent à leur place d´origine, m´obligeant ainsi à défiler dans la page pour les voir si ma fenêtre est trop petite.

Voici ma css :

------
p
{
text-align: center;
top: 100px;
}
body
{
background-color: #181818;
}
div
{
position: absolute;
top: 50%;
left: 25%;
}
div2
{
position: absolute;
top: 50%;
right: 25%;
}
div3
{
position: absolute;
top: 15%;
left: 5%
}
div4
{
position: absolute;
bottom: 0px;
right: 4px;
color: #f08d00;
font-family: Arial, "Arial Black", "Times New Roman";
font-style: bold;
}
a
{
text-decoration: none;
color: #f08d00;
font-style: bold;
}
----

Voilà. En relisant ma css, je me suis aperçu qu´il était finalement logique que les deux images du dessous bougent en fonction du redimensionnement de la fenêtre...
Mais, dans ce cas, comment faire pour qu´elles restent immobiles ?

Merci d´avance.

Je crois avoir une solution pour ça mais dans ce cas là pour tes images, faut pas du CSS entier ^^ Certaines de tes balises Html doivent se changer aussi

Ajoute-moi à tes contacts msn pour que je fasse des essais et être sûr de moi car le dire sans pouvoir le prouver ...

Mon adresse : DarK-Killer-57@hotmail.fr

Tu peux faire tes essaies et poster ici, ça pourra servir à d´autres.

Je ne vois pas trop ton truc mais si c´est ce que je pense :

<p id="pyramide">
<img src="img1" alt="" id="img1" />
<img src="img2" alt="" id="img2" />
<img src="img3" alt="" id="img3" />
</p>

1. pyramide {

text-align:center;
position:relative;
top:50%;
}

1. pyramide #img1 {

display:block;
}

1. pyramide #img2 {

margin:0 largeur_img1px 0 0;
}

non testé

Deepblue : "non testé"

Tu vois, donc c´est pas sûr que ça marche !
Moi, j´aimerais essayer avec les pages déjà préparées pour voir si ma méthode fonctionne et si ça marche pas, je pourrais réessayer

sauf que d´habitude je test, la je precise que je ne l´ai pas fais