Discussion :

[Mister Paul]

Bonjour,

j'ai créé un style de titre pour les titres de mes pages.

Code :

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

1
2
3
4
5
6
7
 
	.titre_paragraphe {
	font-size: 12.5px;
	font-weight: bold;
	color: #CC0000;
	padding-bottom: 15px;
	}

Comme j'aimerais un interlignage plus important après ce titre alors j'ai mis un padding-bottom, mais ça ne passe pas avec mes span class :

Code html :

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

<span class="titre_paragraphe">mon titre</span>

Pourquoi ?

Ah…*pour préciser : je n'ai pas la main pour faire passer mes styles dans des DIV car je passe par TinyMCE 2.0 pour éditer mes pages dans Joomla. Et visiblement il n'applique les styles qu'avec "span class".

Comment faire, alors ?

Merci pour l'aide.
Paul

[Bisûnûrs]

Tu ne peux vraiment pas changer les balises de tes titres ? L'idéal serait que tu mettes un h1 ou un h2 (à voir jusque h6 en fonction de l'importance du titre dans la page).
Si tu ne peux vraiment pas changer de balise, essaie de mettre un display:block sur ce span.

[Mister Paul]

Merci pour ta réponse.
J'ai mis display:block dans le span. J'irai aussi revoir les h1, h2, etc… Je peux intervenir dessus.

Par contre dans le même genre d'idée :
j'utilise TinyMCE 2.0 donc comme éditeur. J'ai un style permettant de faire un effet d'ombre à une image :

Code :

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

1
2
.sig_thumb {float:left;margin:0px 10px 10px 10px; padding:0px; background:url(shadowAlpha.png) no-repeat bottom right !important; background:url(shadow.gif) no-repeat bottom right;}
.sig_thumb img {display:block; position:relative; background:#FFF; border:1px solid #ccc; margin:-5px 5px 5px -5px; padding:4px;}

Le problème c'est que, si j'ai bien compris, ce code ne marche qu'avec un DIV (car c'est le DIV qui récupère l'image d'ombre en background) et malheureusement quand j'applique un style à une image avec TinyMCE 2.0, il l'est de cette manière :

Code :

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

<img class="sig_thumb" src="

et non

Code :

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

<div class="sig_thumb">

Comment faire ?

[Bisûnûrs]

Rajouter le div toi-même à la main ?

Là ton problème provient de l'utilisation du logiciel, et ne plus du CSS en lui-même. N'utilisant pas ce type de logiciel, je ne pourrai pas t'aider.

[Maxoo]

Que nenni !!

Tu as fais une erreur de style css.
pour

Code :

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

<img class="sig_thumb" src="

il faut écrire en css :

Code :

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

1
2
.sig_thumb {float:left;margin:0px 10px 10px 10px; padding:0px; background:url(shadowAlpha.png) no-repeat bottom right !important; background:url(shadow.gif) no-repeat bottom right;}
img.sig_thumb {display:block; position:relative; background:#FFF; border:1px solid #ccc; margin:-5px 5px 5px -5px; padding:4px;}

Mais fait gaffe aux dépendances ...
en gros img.sig_thumb à aussi les propriétés de .sig_thumb

[Mister Paul]

Maxoo effectivement je vois maintenant l'ombre en background, mais elle n'est pas décalée : elle est dans le cadre (cf image)

Pour l'instant je n'arrive pas à avoir le rendu de ce code pour

Code :

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

<img class="sig_thumb" src="

[c_s_s]

Bonjour,

Je n'ai pas tout suivi, mais pourquoi tu ne mets pas un div autour de ton image ?
Pourquoi tu mets la classe sig_thumb dans ton image directement ?

[Mister Paul]

Ben c'est justement le problème :
je n'ai pas la main pour faire ça dans Joomla avec TinyMCE 2.0 car il me met les styles seulement de cette façon…

Une ruse pour faire avoir ce rendu ?

[c_s_s]

Bah tu peux faire quoi ? Ajouter une classe sur une image tu peux le faire ?

[Mister Paul]

oui, je peux faire ça :

Code :

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

<img class="sig_thumb" src="

On n'était pas loin avec le code corrigé par Maxoo, mais ça ne fonctionnait pas pour le background (cf mon message du 27/11/2008 11h29).

[c_s_s]

Tu peux faire comme ça, par exemple :

Code css :

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

1
2
3
4
.shadow {
	background:url(ombre.gif) no-repeat bottom right;
	padding:0 5px 5px 0;
}

Code html :

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

<img src="image.jpg" class="shadow" alt="" />

Ex exemple en ligne

L'ombre n'est pas parfaite, mais si toutes tes images font la même taille, il y a moyen de créer un background qui s'adaptera parfaitement.

[Mister Paul]

Ben oui mais non (enfin : sauf erreur )

J'ai effectivement le code que tu indiques ici :

Code :

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

1
2
.sig_thumb {float:left;margin:0px 10px 10px 10px; padding:0px; background:url(shadowAlpha.png) no-repeat bottom right !important; background:url(shadow.gif) no-repeat bottom right;}
img.sig_thumb {display:block; position:relative; background:#FFF; border:1px solid #ccc; margin:-5px 5px 5px -5px; padding:4px;}

Mais j'obtiens l'ombre à l'intérieur du cadre fait par le border…

(malheureusement mes images ne sont pas de la même taille…)

[c_s_s]

J'ai effectivement le code que tu indiques ici :

Code :

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

1
2
.sig_thumb {float:left;margin:0px 10px 10px 10px; padding:0px; background:url(shadowAlpha.png) no-repeat bottom right !important; background:url(shadow.gif) no-repeat bottom right;}
img.sig_thumb {display:block; position:relative; background:#FFF; border:1px solid #ccc; margin:-5px 5px 5px -5px; padding:4px;}

Je n'ai jamais parlé de ce code là, tu dois confondre.

Je te proposais quelque chose sans aucun rapport avec les messages précédents.

Relis mon message, il est vraiment tout simple.

[Mister Paul]

Euh… tout ce que je voulais dire c'est quand dans le code que j'ai collé dans mon dernier message il y a celui que tu indiques. En tous cas :
background:url(ombre.gif) no-repeat bottom right;

Mais ce que je n'arrive pas, ce n'est pas à obtenir une ombre. C'est de l'avoir autour du cadre. Je n'arrive à l'avoir qu'à l'intérieur du cadre…

[Maxoo]

ce que tu appelles ton cadre, c'est ton élément qui fait un cadre grâce au border:1px ...
Ton cadre est limité par cette bordure, or tu veux une ombre autour de cette limite. Ce n'est pas possible. C'est pour cela qu'il faut un div qui a la bordure, et l'image dedans qui a l'ombre. tu comprends ?

[Mister Paul]

snif…

[c_s_s]

Mister Paul, j'ai l'impression que tu confonds la photo et l'élément image (img).

Regardes le schéma ci dessous :



La photo = bloc gris clair
La marge interne = bloc gris foncé
Elémént image = bloc gris clair + blox gris foncé


Dans l'exemple que je te donne, je mets un "background" sur l'élément image.

Comme ton élément image contient une photo, on ne devrait normalement pas voir le "background" (caché par la photo).

Pour voir le background, il faut donc agrandir l'élément image (mais pas la photo dedans) en ajoutant une marge interne (padding).
Maintenant que l'élément image est plus grand que la photo contenue dans l'élément image, on peut voir le background.

L'ombre qu'on voit est donc simplement ce background qui apparaît derrière la photo.

Si tu ajoutes une bordure sur l'élément image, ça ne va pas juste ajouter une bordure sur la photo, ça va ajouter une bordure autour de "photo + background".


Il n'y a pas moyen de rajouter une bordure juste sur la photo en CSS avec tes contraintes.

La seule façon serait de mettre la bordure sur la photo avec ton logiciel de retouche.
Sinon il faut te passer de bordure.

[Mister Paul]

(re)snif…

Mais Merci quand même !

[Maxoo]

...

C'était pas assez clair mon message ?

[c_s_s]

Oups, je ne l'avais pas vu.