Centre une image dans une cellule ? Facile, me direz-vous. Un text-align:center; et hop !
Oui dans la plupart des cas mais je vous propose une colle CSS (qui d’ailleurs n’a peut-être pas de solution).
Voilà : J’affiche des images avec leur titre dans un tableau en 3 colonnes que j’obtiens avec le filtre |alterner
Mais je voudrais aussi appliquer une ombre à ces images, comme je le fais pour des blocs…
J’utilise donc les css ainsi
Comme pour avoir cette ombre décalée, il faut un float:left; mes images se retrouvent à droite et pas centrées.
J’ai beau essayer X choses pour la recentrer, elles restent à droite.
Bonjour Jean-Christophe, il me semble que le pb est simple, pourtant (enfin, je crois, il faudrait essayer …)
J’essaierais bien d’englober ters div dans un autre qui serait, elle, centrée (dans le css .centre{} ) …
J’avais essayé cette méthode mais je n’y suis pas arrivé
J’ai remis en ligne pour voir avec
et
.centrage{
width:100%;
margin: 0 auto;
}
Le 11 nov. 07 à 12:51, Jean-Christophe Villeneuve a écrit :
Bonjour
Centre une image dans une cellule ? Facile, me direz-vous. Un text-align:center; et hop !
Oui dans la plupart des cas mais je vous propose une colle CSS (qui d’ailleurs n’a peut-être pas de solution).
Voilà : J’affiche des images avec leur titre dans un tableau en 3 colonnes que j’obtiens avec le filtre |alterner
Mais je voudrais aussi appliquer une ombre à ces images, comme je le fais pour des blocs…
J’utilise donc les css ainsi
Comme pour avoir cette ombre décalée, il faut un float:left; mes images se retrouvent à droite et pas centrées.
J’ai beau essayer X choses pour la recentrer, elles restent à droite.
Ah bon, et as-tu essayé de centrer dans le td (apparemment tu utilises un tableau) ?
tout simplement ... Je suis à peu près sûr que cela devrait aller comme ça ...
C’est une méthode que j’ai essayé aussi. Tu as bien fait d’écrire « à peu près » En l’état actuel j’ai : - la propriété text-align:center; sur et sur dans le fichier CSS - align=« center » sur et dans le squelette - une div « centrage » autour de mon bloc à centrer avec en CSS width:100%; et margin: 0 auto; - une div « nettoyeur » juste après avec en CSS clear:both; (entre autres) Et pourtant le bloc avec son float:left; reste obstinément à gauche ! Que puis-je faire de plus ? Je crois qu’il va falloir que je choisisse entre ombre et centrage, pourtant, j’aurais vraiment aimé les 2 ! Une autre piste ?
Bonjour Jean-Christophe, il me semble que le pb est simple, pourtant (enfin, je crois, il faudrait essayer …)
J’essaierais bien d’englober ters div dans un autre qui serait, elle, centrée (dans le css .centre{} ) …
J’avais essayé cette méthode mais je n’y suis pas arrivé
J’ai remis en ligne pour voir avec
et
.centrage{
width:100%;
margin: 0 auto;
}
Le 11 nov. 07 à 12:51, Jean-Christophe Villeneuve a écrit :
Bonjour
Centre une image dans une cellule ? Facile, me direz-vous. Un text-align:center; et hop !
Oui dans la plupart des cas mais je vous propose une colle CSS (qui d’ailleurs n’a peut-être pas de solution).
Voilà : J’affiche des images avec leur titre dans un tableau en 3 colonnes que j’obtiens avec le filtre |alterner
Mais je voudrais aussi appliquer une ombre à ces images, comme je le fais pour des blocs…
J’utilise donc les css ainsi
Comme pour avoir cette ombre décalée, il faut un float:left; mes images se retrouvent à droite et pas centrées.
J’ai beau essayer X choses pour la recentrer, elles restent à droite.
On pourrait y arriver avec
.centrage{
width: la largeur de l’image+2px ;
margin: 0 auto;
}
Comme j’appelle pon image avec src=« #FICHIER|image_reduire{150,150} … »
Alors j’ai essayé dans le CSS
.centrage{
width: width: « #FICHIER|image_reduire{150,150} »;
margin: 0 auto;
}
ou même dans le squelette
mais bien sur ça marche pas, le résultat est comme si j’avais 100% ou rien de défini
Alors est-il possible de faire un width qui s’adapterait à l’image affichée ?
Bonjour Jean-Christophe, il me semble que le pb est simple, pourtant (enfin, je crois, il faudrait essayer …)
J’essaierais bien d’englober ters div dans un autre qui serait, elle, centrée (dans le css .centre{} ) …
J’avais essayé cette méthode mais je n’y suis pas arrivé
J’ai remis en ligne pour voir avec
et
.centrage{
width:100%;
margin: 0 auto;
}
Le 11 nov. 07 à 12:51, Jean-Christophe Villeneuve a écrit :
Bonjour
Centre une image dans une cellule ? Facile, me direz-vous. Un text-align:center; et hop !
Oui dans la plupart des cas mais je vous propose une colle CSS (qui d’ailleurs n’a peut-être pas de solution).
Voilà : J’affiche des images avec leur titre dans un tableau en 3 colonnes que j’obtiens avec le filtre |alterner
Mais je voudrais aussi appliquer une ombre à ces images, comme je le fais pour des blocs…
J’utilise donc les css ainsi
Comme pour avoir cette ombre décalée, il faut un float:left; mes images se retrouvent à droite et pas centrées.
J’ai beau essayer X choses pour la recentrer, elles restent à droite.
On pourrait y arriver avec
.centrage{
width: la largeur de l’image+2px ;
margin: 0 auto;
}
Comme j’appelle pon image avec src=« #FICHIER|image_reduire{150,150} … »
Alors j’ai essayé dans le CSS
.centrage{
width: width: « #FICHIER|image_reduire{150,150} »;
margin: 0 auto;
}
ou même dans le squelette
mais bien sur ça marche pas, le résultat est comme si j’avais 100% ou rien de défini
Alors est-il possible de faire un width qui s’adapterait à l’image affichée ?
---
Bon je fais des essais dans mon coin en PHP, langue nouvelle et ésotérique encore pour moi.
Quand je fais ça
J'avais essayé cette méthode mais je n'y suis pas arrivé
J'ai remis en ligne pour voir avec
<div class="centrage">
et
..centrage{
width:100%;
margin: 0 auto;
}
Le 11 nov. 07 à 12:51, Jean-Christophe Villeneuve a écrit :
Bonjour
Centre une image dans une cellule ? Facile, me direz-vous. Un text-align:center; et hop !
Oui dans la plupart des cas mais je vous propose une colle CSS (qui d'ailleurs n'a peut-être pas de solution).
Voilà : J'affiche des images avec leur titre dans un tableau en 3 colonnes que j'obtiens avec le filtre |alterner
Mais je voudrais aussi appliquer une ombre à ces images, comme je le fais pour des blocs..
J'utilise donc les css ainsi
Comme pour avoir cette ombre décalée, il faut un float:left; mes images se retrouvent à droite et pas centrées.
J'ai beau essayer X choses pour la recentrer, elles restent à droite.
On pourrait y arriver avec
..centrage{
width: la largeur de l'image+2px ;
margin: 0 auto;
}
Comme j'appelle pon image avec src="#FICHIER|image_reduire{150,150} ..."
Alors j'ai essayé dans le CSS
..centrage{
width: width: "#FICHIER|image_reduire{150,150}";
margin: 0 auto;
}
ou même dans le squelette
<div class="centrage" width="#FICHIER|image_reduire{150,150}">
mais bien sur ça marche pas, le résultat est comme si j'avais 100% ou rien de défini
Alors est-il possible de faire un width qui s'adapterait à l'image affichée ?
------------------------------------------------------------------------
Bon je fais des essais dans mon coin en PHP, langue nouvelle et ésotérique encore pour moi.
Quand je fais ça
Il faut partir du principe qu'on a jamais besoin de php dans un squelette, si ce n'est pour integrer un programme php externe sans se prendre la tete (et encore, les cas ou c'est la bonne strategie sont rares)
pourquoi pas #LARGEUR ou #FICHIER|image_reduire{150,150}|largeur tout simplement ?
Bonjour Jean-Christophe, il me semble que le pb est simple, pourtant
(enfin, je crois, il faudrait essayer ...)
J'essaierais bien d'englober ters div dans un autre qui serait,
elle, centrée (dans le css .centre{} ) ...
<div class="centre">
J'avais essayé cette méthode mais je n'y suis pas arrivé
J'ai remis en ligne pour voir avec
<div class="centrage">
et
..centrage{
width:100%;
margin: 0 auto;
}
Bonjour
Centre une image dans une cellule ? Facile, me direz-vous. Un
text-align:center; et hop !
Oui dans la plupart des cas mais je vous propose une colle CSS (qui
d'ailleurs n'a peut-être pas de solution).
Voilà : J'affiche des images avec leur titre dans un tableau en 3
colonnes que j'obtiens avec le filtre |alterner
Mais je voudrais aussi appliquer une ombre à ces images, comme je
le fais pour des blocs..
J'utilise donc les css ainsi
..ombre {
float:left;
background: url(../IMG/charte_generale/ombre.jpg) no-repeat
bottom right;
margin: 10px 0 10px 10px ;
padding: 0px;
}
..boite {
background: #99FF99;
border: green 1px solid;
position:relative;
bottom: 8px;
right: 8px;
}
Et dans le squelette
<div class="ombre">
<div class="boite">
<img src="image.jpg" />
</div>
</div>
Comme pour avoir cette ombre décalée, il faut un float:left; mes
images se retrouvent à droite et pas centrées.
J'ai beau essayer X choses pour la recentrer, elles restent à droite.
Pour ceux qui veulent s'amuser, c'est ici
On pourrait y arriver avec
..centrage{
width: la largeur de l'image+2px ;
margin: 0 auto;
}
Comme j'appelle pon image avec src="#FICHIER|image_reduire{150,150} ..."
Alors j'ai essayé dans le CSS
..centrage{
width: width: "#FICHIER|image_reduire{150,150}";
margin: 0 auto;
}
ou même dans le squelette
<div class="centrage" width="#FICHIER|image_reduire{150,150}">
mais bien sur ça marche pas, le résultat est comme si j'avais 100% ou
rien de défini
Alors est-il possible de faire un width qui s'adapterait à l'image
affichée ?
------------------------------------------------------------------------
Bon je fais des essais dans mon coin en PHP, langue nouvelle et
ésotérique encore pour moi.
Quand je fais ça
<?php
$taille = getimagesize($fichier);
$largeur = $taille[0];
echo "largeur :".$largeur;
?>
dans une
BOUCLE_docs(DOCUMENTS){id_article}{extension==jpg|png|gif}{0,1}>
j'obtiens juste
largeur :
Pourquoi n'ai-je- rien ? Où merdoie-je ?
Il faut partir du principe qu'on a jamais besoin de php dans un
squelette, si ce n'est pour integrer un programme php externe sans se
prendre la tete (et encore, les cas ou c'est la bonne strategie sont rares)
pourquoi pas #LARGEUR ou #FICHIER|image_reduire{150,150}|largeur tout
simplement ?
_______________________________________________
Tout à fait et si je peux m’en passer, j’en serais ravi.
Mais comment utiliser cette balise ou ce filtre dans un fichier CSS ?
Bonjour Jean-Christophe, il me semble que le pb est simple, pourtant
(enfin, je crois, il faudrait essayer ...)
J'essaierais bien d'englober ters div dans un autre qui serait,
elle, centrée (dans le css .centre{} ) ...
<div class="centre">
J'avais essayé cette méthode mais je n'y suis pas arrivé
J'ai remis en ligne pour voir avec
<div class="centrage">
et
..centrage{
width:100%;
margin: 0 auto;
}
Bonjour
Centre une image dans une cellule ? Facile, me direz-vous. Un
text-align:center; et hop !
Oui dans la plupart des cas mais je vous propose une colle CSS (qui
d'ailleurs n'a peut-être pas de solution).
Voilà : J'affiche des images avec leur titre dans un tableau en 3
colonnes que j'obtiens avec le filtre |alterner
Mais je voudrais aussi appliquer une ombre à ces images, comme je
le fais pour des blocs..
J'utilise donc les css ainsi
..ombre {
float:left;
background: url(../IMG/charte_generale/ombre.jpg) no-repeat
bottom right;
margin: 10px 0 10px 10px ;
padding: 0px;
}
..boite {
background: #99FF99;
border: green 1px solid;
position:relative;
bottom: 8px;
right: 8px;
}
Et dans le squelette
<div class="ombre">
<div class="boite">
<img src="image.jpg" />
</div>
</div>
Comme pour avoir cette ombre décalée, il faut un float:left; mes
images se retrouvent à droite et pas centrées.
J'ai beau essayer X choses pour la recentrer, elles restent à droite.
Pour ceux qui veulent s'amuser, c'est ici
On pourrait y arriver avec
..centrage{
width: la largeur de l'image+2px ;
margin: 0 auto;
}
Comme j'appelle pon image avec src="#FICHIER|image_reduire{150,150} ..."
Alors j'ai essayé dans le CSS
..centrage{
width: width: "#FICHIER|image_reduire{150,150}";
margin: 0 auto;
}
ou même dans le squelette
<div class="centrage" width="#FICHIER|image_reduire{150,150}">
mais bien sur ça marche pas, le résultat est comme si j'avais 100% ou
rien de défini
Alors est-il possible de faire un width qui s'adapterait à l'image
affichée ?
------------------------------------------------------------------------
Bon je fais des essais dans mon coin en PHP, langue nouvelle et
ésotérique encore pour moi.
Quand je fais ça
<?php
$taille = getimagesize($fichier);
$largeur = $taille[0];
echo "largeur :".$largeur;
?>
dans une
BOUCLE_docs(DOCUMENTS){id_article}{extension==jpg|png|gif}{0,1}>
j'obtiens juste
largeur :
Pourquoi n'ai-je- rien ? Où merdoie-je ?
Il faut partir du principe qu'on a jamais besoin de php dans un
squelette, si ce n'est pour integrer un programme php externe sans se
prendre la tete (et encore, les cas ou c'est la bonne strategie sont rares)
pourquoi pas #LARGEUR ou #FICHIER|image_reduire{150,150}|largeur tout
simplement ?
_______________________________________________
liste spip
- désabonnement :
Infos et archives :
Documentation de SPIP :
irc://irc.freenode.net/spip
FAQ :
Arf désolé, à force de ne plus utiliser les styles incorporés, je ne sais plus faire
Bonjour Jean-Christophe, il me semble que le pb est simple, pourtant
(enfin, je crois, il faudrait essayer ...)
J'essaierais bien d'englober ters div dans un autre qui serait,
elle, centrée (dans le css .centre{} ) ...
<div class="centre">
J'avais essayé cette méthode mais je n'y suis pas arrivé
J'ai remis en ligne pour voir avec
<div class="centrage">
et
..centrage{
width:100%;
margin: 0 auto;
}
Bonjour
Centre une image dans une cellule ? Facile, me direz-vous. Un
text-align:center; et hop !
Oui dans la plupart des cas mais je vous propose une colle CSS (qui
d'ailleurs n'a peut-être pas de solution).
Voilà : J'affiche des images avec leur titre dans un tableau en 3
colonnes que j'obtiens avec le filtre |alterner
Mais je voudrais aussi appliquer une ombre à ces images, comme je
le fais pour des blocs..
J'utilise donc les css ainsi
..ombre {
float:left;
background: url(../IMG/charte_generale/ombre.jpg) no-repeat
bottom right;
margin: 10px 0 10px 10px ;
padding: 0px;
}
..boite {
background: #99FF99;
border: green 1px solid;
position:relative;
bottom: 8px;
right: 8px;
}
Et dans le squelette
<div class="ombre">
<div class="boite">
<img src="image.jpg" />
</div>
</div>
Comme pour avoir cette ombre décalée, il faut un float:left; mes
images se retrouvent à droite et pas centrées.
J'ai beau essayer X choses pour la recentrer, elles restent à droite.
Pour ceux qui veulent s'amuser, c'est ici
On pourrait y arriver avec
..centrage{
width: la largeur de l'image+2px ;
margin: 0 auto;
}
Comme j'appelle pon image avec src="#FICHIER|image_reduire{150,150} ..."
Alors j'ai essayé dans le CSS
..centrage{
width: width: "#FICHIER|image_reduire{150,150}";
margin: 0 auto;
}
ou même dans le squelette
<div class="centrage" width="#FICHIER|image_reduire{150,150}">
mais bien sur ça marche pas, le résultat est comme si j'avais 100% ou
rien de défini
Alors est-il possible de faire un width qui s'adapterait à l'image
affichée ?
------------------------------------------------------------------------
Bon je fais des essais dans mon coin en PHP, langue nouvelle et
ésotérique encore pour moi.
Quand je fais ça
<?php
$taille = getimagesize($fichier);
$largeur = $taille[0];
echo "largeur :".$largeur;
?>
dans une
BOUCLE_docs(DOCUMENTS){id_article}{extension==jpg|png|gif}{0,1}>
j'obtiens juste
largeur :
Pourquoi n'ai-je- rien ? Où merdoie-je ?
Il faut partir du principe qu'on a jamais besoin de php dans un
squelette, si ce n'est pour integrer un programme php externe sans se
prendre la tete (et encore, les cas ou c'est la bonne strategie sont rares)
pourquoi pas #LARGEUR ou #FICHIER|image_reduire{150,150}|largeur tout
simplement ?
_______________________________________________
Nickel donc
Avec
Je résouds parfaitement mon problème.
Ouf
Et un grand merci à ceux qui m’ont aidé.