28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous !

Pour le besoin d'une galerie photo et plus particulièrement pour créer un cadre autour d'une photo, j'aurais besoin de savoir si il est possible de positionner un background (en l'occurrence le cadre en png avec une transparence au milieu pour laisser apparaitre la photo) au dessus d'une img ?

Si oui, merci de me le signaler, sinon quelles sont les possibilités pour faire ça proprement ? Smiley biggrin

Merci !
Modifié par michtouariv (21 Dec 2007 - 12:00)
Sans répondre sur le fond (mais pour faire utile, je crois qu'on va te demander une page d'exemple en ligne) :

Je ne sais pas, mais j'ai l'impression à lire plusieurs sujets depuis quelque temps qu'il y a des gens qui, en toute innocence, tripotent parfois des choses très scabreuses avec les png, la transparence, les background et les img positionnées, ce qui aboutit à des considérations fascinantes sur la possibilité de dormir avec ceci au dessus ou en dessous de la couverture. Là où on peut faire simple.

Non ? Rassurez papy, svp Smiley cligne
Il n'y pas d'exemple...c'est une pensée pour un projet. Smiley smile

Je te rassure, ce n'est pas mon cas !
Si il n'y a pas de possibilités de faire ça correctement, je ne le ferais pas.

En revanche, j'essaye justement de trouver une technique (pas de bidouillage) que je serais susceptible de ne pas connaître pour créer ce genre d'effets, à savoir :

Je vais faire une galerie.
Des images vont donc être affichées les unes à côtés des autres.
Pour donner un effet sympa, j'aimerais avoir un contour pour chaque images.
Et pas un simple border en outset ou je ne sais quoi.
Juste un cadre autour de mon image (qu'elle qu'il soit)

Ca va comme réponse Smiley langue
Modifié par michtouariv (19 Dec 2007 - 16:04)
Il y a plus simple : quand tu donnes un padding à une img il «déborde»...

Donc si tu donnes un background blanc à ton img puis un padding de 10 pixel avec en plus un filet noir de 1 pixel, tu auras une photo avec un bord blanc de 10 pixels délicatement serti d'un filet noir de 1 pixel. C'est beau hein? Smiley cligne

Mais si tu veux faire des effets spéciaux...
En tout cas c'est possible et il y a plein de manière de le faire...

La solution de Patidou.
La solution qui consiste à placer chaque image dans une div avec un padding et un background qui serait le cadre, ce qui est la solution de patidou en plus compliqué Smiley lol
La solution qui consiste à venir placer un div au dessus d'une image, en css avec des positionnement relatifs, ou en javascript mais attention à ne pas rendre la chose monstrueuse pour les non javascripts.
Personnellement si j'avais à faire ça j'opterais surement pour un petit script PHP qui prend en paramètre une image et qui en fait une miniature a partir de cette image et d'une image en forme de cadre.

Et il y en a peut etre d'autres, à toi de choisir la solution qui te parait la moins scabreuse
Bonsoir à vous Smiley smile

Eventuellement tu peux voir ce que j'ai fais dans mes galeries, juste en css, les photos sont téléchargées sans aucun encadrement Smiley cligne

Laurent Denis a écrit :
Non ? Rassurez papy, svp Smiley cligne


Heuuuuuuuu ! Rassuré ? Smiley lol Smiley lol
Modifié par dominique (19 Dec 2007 - 17:39)
dominique a écrit :

Heuuuuuuuu ! Rassuré ? Smiley lol Smiley lol


Hum... C'est bien parce que c'est toi, pour l'instant. Sinon, je maintiens, une des dernières sottises à la mode est d'oublier qu'img génère une boîte CSS comme une autre.

Sgmlbl Smiley ravi
Je connais evidemment les bordures comme tu a fait dominique...
Mais j'aimerais faire un cadre plus "évolué"

C'est à dire avec une autre image...(que j'aimerais mettre en background puisque c'est juste pour la présentation...

La solution de Patidou est pas mal...de faire déborder...qu'en pensez vous ?
michtouariv a écrit :

La solution de Patidou est pas mal...de faire déborder...qu'en pensez vous ?

Ben heu… pas grand chose. C'est la solution de bon sens, point barre.
Si tu as des vignettes de 200x150px et 20px de bordure en image tout autour, tu peux faire une image de fond de 240x190px, et le tout est joué ainsi:
img.vignette {
padding: 20px;
background: url(images/bordure-vignette.png) no-repeat left top;
}


Laurent Denis a écrit :
Sgmlbl

ScroGneugneu Markup Language?