image de taille variable, avec bordures et centrée en css =)

[grumff]

Grumff se remet au dev web, épisode 2. =)

J'ai une image (uploadée par l'utlisateur, donc dont je ne connais pas la taille à l'avance), qui doit être centrée et entourée d'une bordure.
Alors est-ce que l'un de vous connait une solution propre en css qui passe sous IE 6/7 ?

Pour l'instant pour la bordure, j'ai utilisé la méthode à la con qui consiste à encadrer l'image de 12 div (j'exagère à peine) dans lesquels on met les images de fond et un padding pour que ça colle à l'image.
Évidemment, pour coller à l'image on doit avoir des div en float left.
Manque de chance, après on veut la centrer, et centrer un float:left, il parait que c'est impossible, donc on l'a dans l'...

Pour l'instant j'hésite entre les méthodes suivantes :
1) générer en php des style="width:xxxx" pour fixer les dimensions de l'image et de ce qui l'entoure, ça règlerait les problèmes, mais c'est casse burne et il parait que mettre des attributs style c'est moche.
2) La méthode w3schools, allez voir la source du site, vous comprendrez : mettre des jolis tableaux, parce qu'en l'état actuel des choses, le css c'est de la merde en boite.
3) jouer avec du display:table, parce que le tableau déguisé en css, c'est la classe. Et pour IE, on arrange ça pour faire sauter au moins l'ombre, ça passera à peu prêt, ce sera moche, mais de ttes façons sous IE tout est moche. =)

Bon la dernière solution a ma préférence aujourd'hui (bien que la 2...). Mais si vous avez mieux, je prends.

 

[grumff]

(remplacez bordure par ombre dans le post précédent)

 

[Anonyme]

Pour l'ombre, c'est possible en css3 (et avec un filtre pour IE).

Pour centrer, il suffit de donner des marges auto:

img.center {margin: auto;}

Note: la dernière version d'Opera (10.5) reconnaît la css3 standard.

 

[grumff]

Le margin:auto ne marche pas sur un float:left, donc pas avec ma méthode pour les ombres.
Quand aux ombres css3, d'une part c'est pas définitif dans le standard, c'est même en suspend pour l'instant, d'autre part ça passe que sous Safari et FF (donc pas Opera par exemple), et de ttes façons ce n'est pas assez souple pour mon utilisation.

 

[Anonyme]

Le margin:auto ne marche pas sur un float:left, donc pas avec ma méthode pour les ombres.

Là je ne comprend pas bien, tu fais flotter l'image à gauche et en même temps tu veux qu'elle soit centrée.

Ou alors l'image est dans un conteneur à gauche et dans ce conteneur elle est centrée?

Quand aux ombres css3, d'une part c'est pas définitif dans le standard, c'est même en suspend pour l'instant, d'autre part ça passe que sous Safari et FF (donc pas Opera par exemple), et de ttes façons ce n'est pas assez souple pour mon utilisation.

Je te rassure tout de suite: la propriété box-shadow est bien approuvée par le w3c, d'ailleurs Opera l'utilise en natif. Il suffit d'ajouter (ou non) une classe à l'image pour mettre une ombre. Je ne vois pas où est le manque de souplesse.

 

[grumff]

Là je ne comprend pas bien, tu fais flotter l'image à gauche et en même temps tu veux qu'elle soit centrée.

Ou alors l'image est dans un conteneur à gauche et dans ce conteneur elle est centrée?

L'image est dans un bloc en float:left, le fait d'avoir un float:left fait que le conteneur qui l'entour prend la taille de l'image, et en mettant un padding sur le div conteneur, on peut mettre une image de fond qui va occuper la zone du padding. En empilant quelques div on peut pauffiner l'effet en mettant l'ombre sur autant de côté qu'on le veut et en plaçant d'autres images dans les coins, bref c'est la technique de base qu'on trouve sur tous les sites web. Et on a donc des div en float:left qui encadrent l'image.

Je te rassure tout de suite: la propriété box-shadow est bien approuvée par le w3c, d'ailleurs Opera l'utilise en natif. Il suffit d'ajouter (ou non) une classe à l'image pour mettre une ombre. Je ne vois pas où est le manque de souplesse.

Bah, de toute évidence, ça a été retiré des dernières versions d'Opera, et mis en standby par le w3c :

This module previously defined a ‘box-shadow’ property. This feature has been removed from this module for further discussion, and should reappear in another CSS module (or a later version of this module) in the near future.

http://www.w3.org/TR/css3-background/
Ensuite, le manque de souplesse ? Tu te fiches de moi ? Il fait rien ce tag, c'est une vague couleur de fond qu'on fait dépasser avec des bords carrés. Pas de possibilité d'utiliser des images ou des dégradés. Même les propriétés spécifiques à IE sont plus fournies que ça. Bref, ça sert à dessiner un rectangle sous une image quoi.

 

[Anonyme]

La version 10.1 d'Opera ne reconnaît pas la propriété mais la version 10.5 (en beta mais qui devrait sortir incessamment sous peu) la reconnaît.

Pour ce qui est du w3c, il arrive fréquemment qu'on retire provisoirement une propriété de la doc officielle le temps de discuter d'un point ou l'autre mais celle-ci va rester : tout les navigateurs (à part IE) la reconnaissent.

De toutes façons tu voulais un truc pour faire des ombres, c'est exactement ce qu'il te faut, pour le reste, tu peux aussi donner une image (et/ou couleur) de fond à un <img> et faire un débord en ajoutant un padding.

 

[grumff]

Ouais, sauf que comme je l'ai dis, la taille de l'image n'est pas connue. Donc avec un padding juste sur l'image, ça ne marche pas, mis à part en css3 (et je suis même pas sur que ces aspects là soient implémentés dans un seul navigateur), je pourrais pas mettre 3 motifs sur 3 côtés plus une image dans chaque angle.

 

[Niconemo]

avec un jquery ?

 

[grumff]

S'il doit traiter une 30aine d'image en javascript au chargement de la page ? Mouais, je préfère éviter pour l'instant. Je crois que je vais rester sur ma solution 3.