Discussion :

[lhpp]

Bonjour a tous,

Je créé actuellement la premiere page de mon site web. Cette page est constituée d'une div principale qui s'adapte a la taille de l'écran des utilisateurs.

Code CSS :

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
 
.contenu
{
    width: 93%;
    min-width:670px;
    height: 350px;
    margin: 0;
    margin-left: 3%;
    margin-right: 3%;
}
 
.entiere
{
    float: left;
    width: 100%;
    height: 350px;
    margin: 0;
    padding: 0;
}

Dans cette div, j'ai mis une image portant les mêmes propriétés de taille que la div. Cela a pour effet d'afficher une image prenant 100% de la place disponible. Lorsque la résolution change (par exemple sur un wide screen de portable), alors le site s'elargit et l'image aussi.

Code HTML :

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

1
2
3
4
 
<div class="contenu">
    <img class="entiere" src="mon_image_de_fond.jpg">
</div>

Ma question est la suivante :
Je souhaite faire en sorte que "mon_image_de_fond.jpg" puisse accueillir d'autres images (des boutons) donnant accès aux pages suivantes de mon site. J'ai essayé avec des attribut "float: left" par exemple, mais cela ne fonctionne pas ! (les images de boutons se retrouvent sous l'image de fond).

A savoir que pour conserver le fait que "mon_image_de_fond.jpg" garde la taille de la div la contenant, et qu'elle soit redimensionnée automatiquement suivant les résolutions, je ne peux (pense pas) l'inclure avec l'option "background-image".

Est ce donc possible de faire ce que je souhaite ?

Merci de vos réponses.

[Bisûnûrs]

Tu peux placer tes autres images en position absolue :

Code CSS :

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

1
2
3
4
5
#img1{
   position:absolute;
   top:100px;
   left:200px;
}

[lhpp]

merci pour ta solution ! Ca marche effectivement.
Par contre, cela fait un positionnement en rapport a la page. Comment est ce que je peux faire pour que mon image soit automatiquement centrée horizontalement quelque soit la résolution d'écran ?

[Bisûnûrs]

Tu mets la taille en pourcentage :

Code CSS :

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

1
2
left:50%;
margin-left:-20px; /* admettant que la taille de ton image fasse 40px */

[lhpp]

Merci beaucoup Bisûnûrs !
Ca marche impeccable.

[nico le noob]

Trop bien ta reponse direct et efficace t au top !!!