28173 sujets

CSS et mise en forme, CSS3

[resolu] Pas trouvé de solutions pour texte sur fond coloré

Bonjour,

Je tourne en rond pour trouver la bonne méthode pour permettre à un rédacteur -sous RTE TinyMce - de réaliser un texte (qualifiable de sous-titre) sur fond coloré tq sur l'image jointe.
upload/5763-texte-coul.gif
(heu c'est zarbi l'insertion de mon image là ..non ?)

Le pb vient du fait que le texte doit prendre 100% de la largeur du container (display:block) mais comme il y a du jaune ET du gris ce n'est pas le même 'objet'
et on voit que le but est d'avoir de la couleur 'qui dépasse' autour des lettres à droite et à gauche.. donc un simple backgroung-color ne convient pas directement.

Une table ? hmm. les débordements haut et bas sont limités -on frôle les caractères -
Je n'ai pas su refaire ca non plus en tableau..

Utiliser une image de fond ?.. mais quid des variation de tailles de fonte dans ce cas..
Passer par un "texte-to-image" snippet ...?

A la limite une fois la solution créée dans une page modèle, le rédacteur pourrait se contenter de dupliquer la page sans avoir à bricoler lui -même .pour recréer ce titre.. On peut donc envisager des solutions mises en place en html (et non pas en laissant faire Tiny mce).

Toute suggestion serait la bienvenue

Merci
Modifié par elz64 (28 Jun 2007 - 14:14)
En css ça doit être gérable avec un 
<h2><span>Papier</span> couché blanc...</h2>

A voir si ton rédacteur à la possibilité de marquer (avec le span) le mot qui devra apparaître en jaune.
merci.

mais comment faire pour les espaces avant et après les caractères ?

si on met du padding right+left je crains que les zones jaunes puissent varier en fonction de la longueur de tetxte gris..

enfin effectivement l'insertion d'une banniere span ds un H ou autre span est une bonne piste
<nicolas> a écrit :
Tu dois pouvoir régler les espacements avec les margin et padding du span non?

Oui. padding-left, padding-right, et margin-right.
Attention par contre à ne pas mettre de padding au titre (jouer sur la hauteur de ligne si besoin).
Florent V. a écrit :

Attention par contre à ne pas mettre de padding au titre (jouer sur la hauteur de ligne si besoin).

Tiens, pourquoi?
Bon, c'est de l'expérimental, mais voici un exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Test</title>
	<style type="text/css">
	h2 {
		background: black;
		color: white;
		overflow: hidden; /* évite le dépassement du span (à cause de ses padding verticaux, voir plus loin) */
		line-height: 1.5em;
		width: 100%; /* Correctif (HasLayout) pour IE6 : corrige un léger dépassement du span, qui se produit même avec une overflow:hidden */
	}
	h2 span {
		background: orange;
		color: black;
		padding: 0 10px 0 15px;
		margin-right: 5px;
		text-align: bottom;
	}
	/* Ajustement nécessaire lorsque la hauteur de ligne est plus importante que la taille de la fonte */
	h2 span.test {padding-top: 10px; padding-bottom: 10px;}
	</style>
</head>

<body>

<h2><span>Ceci</span> est un titre sans padding verticaux sur le span</h2>
<h2><span class="test">Ceci</span> est un titre avec padding verticaux sur le span</h2>

</body>
</html>


C'est un peu bricolé.
Théoriquement, les navigateurs ne devraient pas avoir besoin de padding-top et padding-bottom sur le span, au contraire ! Ça marche bien dans IE6 et Opera sans ça, mais Firefox a du mal à tomber juste et on se retrouve parfois avec un ou deux pixels noirs en dessous ou au dessus du span orange. Argh.

Là, soit on laisse Firefox se débrouiller, soit on y va au correctif relativement bourrin.
Le correctif bourrin, c'est rajouter du padding en haut et en bas du span. Ça ne modifie pas la position du span ni l'espace qu'il occupe sur la ligne (contrairement à ce qui se passe avec une image plus ou moins haute dans une ligne de texte), mais ça étend le span verticalement tout de même. Ensuite, un overflow: hidden sur le h2 permet de rogner ce qui dépasse.

Problème : maintenant c'est IE6 qui râle (IE7 est ok), et fait dépasser un bout du span. Comme beaucoup de problèmes de « dessin des éléments » avec IE, ça se règle avec un peu de HasLayout (le width: 100%, ou toute largeur en pixels ou en pourcentages fera l'affaire).

Voilà, ça marche partout.

Et puis, à la réflexion, dès qu'on s'éloigne de la hauteur de ligne par défaut (en faisant line-height: 1em ou line-height: 1.4em par exemple), le span ne correspond plus à la hauteur du h2, donc autant mettre en place ces correctifs d'emblée.

Pour la saisie du hN avec span dedans par le rédacteur... là je passe la main.
Quoique, une idée :
<h2><i>Ceci</i> est un titre</h2>

Ça ne devrait pas être trop dur de dire au rédacteur de mettre le premier mot en italiques (dans TinyMCE...), et que ça apparaitra non pas en italiques mais avec une couleur de fond différente (ou autre chose suivant les évolutions de la charte graphique...).

Après, pour le CSS, on remplace le span par un i, et on n'oublie pas de faire font-style: normal pour ne pas avoir d'italiques.
Benjamin D.C. a écrit :
Attention par contre à ne pas mettre de padding au titre (jouer sur la hauteur de ligne si besoin).

Tiens, pourquoi?
Disons que ça n'est pas rédhibitoire, mais si on met du padding-top et padding-bottom au titre, il faudra compenser d'autant sur le span.
Houlà!

Ben ca bouge là!

Bon merci de ces -finalement pas si simples - suggestions

Pour le span 'dedans' oui c'est le +simple pour Tiny, car on y met les styles perso que l'on veut (liste déroulante 'styles' (et ca se colle en span tout le temps, ce qui là est ce qu'on cherche)

Je regarde ca.

Merci Smiley biggrin
Benjamin D.C. a écrit :
edit: tiens, c'était mon 1000e post. Smiley smile

C'était il y a un peu plus de trois heures... et il y a dix posts. Smiley lol

Edit :
upload/2043-benj10posts.png
Si j'en crois l'image, tu as dix messages sur le forum. (Ah non, ça ne compte pas en binaire ?)
Modifié par Florent V. (28 Jun 2007 - 16:06)
Florent V. a écrit :

C'était il y a un peu plus de trois heures... et il y a dix posts. Smiley lol

Ouaip... plus que 5947 posts sans que tu n'écrives et je te rattrape, une broutille quoi. Smiley biggol
Sujet clos
Aller à