Une ligne de texte de 2 couleurs différentes

03 déc. 2011, 15:58

Bonjour à tous,

Je cherche à écrire une balise H1, par exmeple, avec deux couleurs différentes.

Ex : " Mon site web // entrer sur mon site "
il faudrait que le texte avant les // soit en bleu et le texte apres en rouge y compris les //

et que le processus s'adapte a toutes les balises "h1"

Faut-il que se soit en php ou en javascript ??

Si quelqu'un a une petite piste, je l'a prend.

Merci à tous pour votre aide et longue vie au forum

03 déc. 2011, 16:08

salut

le plus simple c'est deux span avec des couleurs différentes.

sinon pour tous ce qui est mise en forme => http://www.alsacreations.com

@+

03 déc. 2011, 16:25

Merci pour la rapidité de la réponse ...

En fait je suis sur le cms Drupal. Il me génère des titres automatiquement
Je vous voudrai automatiser les balises de ses titres en utilisant du php.

J espère que je suis assez clair dans ma demande ...

Merci

03 déc. 2011, 16:32

<html>
/* serait mieux dans un fichier à part nommé styles.css par exemple */
<style>
/* modification du comportement de la balise HTML*/
h1
{
		color:blue;
}
/* création d'un style suite*/
.suite
{
	color:red;
}
</style>
/* fin du serait mieux*/
/* et ajouter au début des pages à l'intérieur du head*/
<head>
	<LINK rel="stylesheet" href="styles.css" type="text/css">
</head>
<h1>Bonjour les gars <span class = 'suite'>// entrez librement</h1>

03 déc. 2011, 21:31

utilise les balises en ligne de type <span> et les CSS

<h1><span style="color: blue;">Mon site web</span> // <span style="color:red;">entrer sur mon site</span></h1>

03 déc. 2011, 23:05

utilise les balises en ligne de type <span> et les CSS
<h1><span style="color: blue;">Mon site web</span> // <span style="color:red;">entrer sur mon site</span></h1>

Il n'y a pas là-dedans l'ombre d'une CSS. De plus, une telle solution oblige à modifier toutes les occurrences de <h1>.

04 déc. 2011, 00:36

Hmmm euh comment dire : style="color: blue;". C'est pas une CSS ?
Ah bon ? Je pensais que cela s'appelait un style en ligne...
Il est vrai que je préfère la méthode par fichier "linké" mais pour bien présenter la chose, il faut mieux montrer le plus facile à savoir le style en ligne.

<h1><span class="blue">Mon site web</span> // <span class="red">entrer sur mon site</span></h1>

Et dans un fichier attaché par <link rel="stylesheet" type="text/css" href="style/style.css" /> à mettre entre <head> et </head>

Code : Tout sélectionner

.blue {
color : blue;
}

.red {
color: red;
}

Ce qui revient pour mon exemple au même...
De plus, je crois qu'il va être obligé de modifier tout ces <h1>
Le plus simple serait de mettre le texte dans une variable string et de faire un explode puis l'affichage à nouveau de la balise <h1>

<?php
$texte = "Mon site web // entrer sur mon site";
$tabTexte = explode ('//',$texte);
?>
<h1><span class="blue"><?php echo trim($tabTexte[0]); ?></span> // <span class="red"><?php echo trim($tabTexte[1]); ?></span></h1>

Après, plus dur, il peut aussi stocker la page dans la mémoire tampon avant de faire la sortie graphique avec ob_start(). Reprendre cette mémoire tampon avec ob_get_contents() puis retravailler toutes les balises <h1> générées qui possèdent deux "string" séparées par '//' en utilisant les REGEX et preg_replace. Ensuite il refait l'affichage avec un simple echo. Mais je pense que là c'est un peu dur pour quelqu'un qui ne connait pas les CSS...

04 déc. 2011, 11:23

Merci à tous, pour vos réponses

J'ai trouvé une solution a mon problème ...

Drupal c'est le top mais quand on gere le php c'est le top du top.
Bref, sans parler des modifs effectués dans drupal, la solution qui fonctionne pour moi est la suivante :

<?php	
	$i = strpos($output, "//");	
	if ($i === false) {		
		print "pas trouvé";
		print "<div class='yes'> $output </div>";
	} else {
		$txt1 = substr($output, 0,$i);
		$txt2 = substr($output, $i);
		print "<div class='yes'> $txt1 </div>";
		print "<div class='no'> $txt2 </div>";
	}	
?>

Encore merci et j'espere que ca pourra en aider quelques uns.

Flaow

Une ligne de texte de 2 couleurs différentes

Qui est en ligne