28173 sujets

CSS et mise en forme, CSS3

Bonjour,

J'aimerais qu'une image se place toujours en bas à droite de l'écran.

J'ai essayer une variante que mpop ma donner mais je n'y arrive pas.

Je place la page en question ,ici.

Merci A+
Modifié par ali13 (10 Jul 2006 - 21:14)
Il faut placer l'image en position absolue :
img#basdroite {
	position: absolute;
	right: 0;
	bottom: 0;
}

Ensuite, le positionnement absolu dépend du plus proche ancêtre positionné de ton image. Si ton image est dans un bloc positionné (en absolu ou en relatif), c'est les limites de ce bloc qui vont servir de référent. Sinon, ce sont les limites de l'écran qui jouent ce rôle.

Petite subtilité : avec une page plus haute que la hauteur d'un écran, l'image positionnée en absolu relativement à l'écran se positionne d'abord, puis reste au même endroit sur la page même quand on fait défiler la page : du coup, l'image part vers le haut, et n'est plus bloquée en bas.

Théoriquement, on devrait pouvoir résoudre ça en utilisant le positionnement fixe, hélas pas implémenté par IE6.
Salut Ali,

Puisqu'il semble s'agir d'une image décorative, de fond, il conviendrait d'utiliser la propriété « background » prévue pour cela.

La placer ainsi en bas à droite est plutôt facile. Par exemple :
body {
background: #992225 url(/images/niveaux1/face02_n1.png) no-repeat fixed right bottom;
}
Background est une propriété raccourcie qui en regroupe plusieurs autres. La déclaration ci-dessus est équivalente à
body {
	background-color: #992225;
	background-image: url(/images/niveaux1/face02_n1.png);
	background-attachment: fixed;
	background-position: right bottom;
	background-repeat: no-repeat;
}
Merci pour vos réponses.

Mpop Ta solution est encore la bonne. Mais pourquois, la solutions de la page d'accueil ne se répette pas ici. j'aimais bien l'idée, et là pour le coup ont change d'idée.

Alan Je n'ais malheureusement pas ut de réussite avec ta solution. l'image ne se cale pas dans l'angle inférieur droite de l'écran. Merci quand mème.

A+
ali13 a écrit :
Alan Je n'ais malheureusement pas ut de réussite avec ta solution. l'image ne se cale pas dans l'angle inférieur droite de l'écran. Merci quand mème.


Cette solution fonctionne pourtant très bien... Voir ici
Oui je vois.

Je ne sais pas ce qui fait que sa ne fonctionne pas chez moi ?
Merci pour ton aide, je ne voulais pas mettre en doute ta solution.

Merci A+
Voila j'ais refait l'essai et sa marche. Je ne sais pas ce qui à empéché le bon fonctionnement. Mais bon maintenant me voila avec deux Solutions.

Merci a vous et A+