Bonjour, 

J'aimerais Afficher mon texte Paiements sécurisés en majuscule et mettre en dessous en minuscule "Achetez sans aucun risque" puis un autre texte avec une  infos bulles dans  les reassurances de mon site internet, 

J'ai un fichier tpl :

<div class="reassurance">

<ul>

<li><i class="material-icons">lock</i> {l s="Paiements sécurisés" mod="l...."}</li>

<li><i class="material-icons">thumb_up</i> {l s="Satisfait ou remboursé" mod="l...."}</li>

<li><i class="material-icons">airport_shuttle</i> {l s="Livraison rapide et efficace" mod="l...."}</li>

</ul>

</div>

je ne sais pas comment faire  pour rajouter dans le fichier css 

la fonction  text-transform: uppercase; et text-transform: lowercase; et affiché la fonction de bulle  quand on survole le texte. 

pouvez vous me donner un code simple à integrer dans mes 2 fichiers ? 

en attendant de vous lire 

Merci à vous

Bonsoir

Je pense qu'il faut utiliser title="votre infobulle"

Bonjour,

Merci d'utiliser la mise en forme de code

Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: xml;">Votre code ici</pre>.

Bonsoir, voir https://openclassrooms.com/fr/courses/1087316-modifier-lapparence-dune-infobulle

mickaelfarre a écrit:

je ne sais pas comment faire  pour rajouter dans le fichier css 

la fonction  text-transform: uppercase; et text-transform: lowercase; et affiché la fonction de bulle  quand on survole le texte.

Comment cela, tu ne sais pas comment faire pour ajouté une ligne de code dans le fichier CSS??

AbcAbc6 a écrit:

Bonsoir, voir https://openclassrooms.com/fr/courses/1087316-modifier-lapparence-dune-infobulle

Le lien n'existe pas ...

Bonsoir , je suis en formation, si je s'aurais le faire je serais pas sur ce forum ^^,

mon texte est  Paiements sécurisés  "Achetez sans aucun risque"  

dans la ligne de mon fichier htlm : <li><i class="material-icons">lock</i> {l s="Paiements sécurisés Achetez sans aucun risque" mod="l...."}</li>

ce que je sais pas faire dans mon fichier css, c'est que je veux que le debut de mon texte soit en majuscule et que le achetez sans aucun risque soit en minuscule . , avec quel fonction puis-je cibler la fin de mon texte ? 

EN  gros j'aimerais que ça s'affiche sous cette forme avec le logo de la reassurance au dessus  : 

PAIEMENTS SECURISES

Achetez sans aucun risque

et ensuite rajouter une infos bulle , je sais que pour certains c'est une base, mais j'essaie de comprendre

Avez-vous suivis le cours HTML/CSS de ce site?

entourer votre texte de la balise <span> et attribuer lui une class.

<li><i class="material-icons">lock</i><span class="uppercase">{l s="Paiements sécurisés" mod="l...."}</span><br> Achetez sans aucun risque" mod="l...."}</li>

.uppercase {
		text-transform: uppercase; 
	}
	

Édit : voir exemple dans la doc https://developer.mozilla.org/fr/docs/Web/CSS/text-transform 

@Le Max De Culture  Bonsoir, bizarre que vous n'y avez pas accès , aucun problème pour moi. 

-
Edité par AbcAbc6 11 novembre 2018 à 21:41:11

J'ai suivi vos recommandations mes textes ne se mettent pas en minuscule tout reste en majuscule , voici mon code : 

mon fichier tpl

<div class="reassurance">
	<ul>
		<li><i class="material-icons">lock</i> <span class="paiementssecurises1">{l s="Paiements sécurisés" mod="lauthietopbar"} <br> <span class="paiementssecurises2">{l s="Achetez sans aucun risque" mod="lauthietopbar"} </li>
		<li><i class="material-icons">thumb_up</i> <span class="livraisonofferte1">{l s="Frais de Livraison Offerts!" mod="lauthietopbar"} <br> <span class="livraisonofferte2">{l s="dès 80€ en France Métropolitaine" mod="lauthietopbar"} </li>
		<li><i class="material-icons">fitness_center</i> <span class="prixcompetitifs1"> {l s="Des prix compétitifs et des offres fréquentes" mod="lauthietopbar"}</li>
	</ul>

</div>

Voici mon fichier css

.paiementssecurises1 {
        text-transform: uppercase;
    }
    
.paiementssecurises2 {
        text-transform: lowercase;
    }
	
.livraisonofferte1
	{
        text-transform: uppercase;
    }
	

.livraisonofferte2
	{
        text-transform: lowercase;
    }
		
	
.prixcompetitifs1
	{
        text-transform: uppercase;
    }
	

en attendant votre retour, merci

Hello,

Pour l'infobulle, un tooltip, ce tuto -> https://www.alsacreations.com/astuce/lire/1-comment-personnaliser-une-infobulle.html 

Ou un exemple fait par rhooomanu (de mémoire) :  https://jsfiddle.net/g55j4faL/7/ 

@mickaelfarre bonjour, votre code n'est pas valide, en HTML c'est <balise1><balise2>texte</balise2></balise1> c'est la base du langage.

Vous ne fermer jamais les balises <span>, donc normal que le style s'applique à tout le texte puisque vous ne lui dite pas ou il doit arrêter le style.

Je vous recommande plus que vivement la lecture du cours HTML/CSS de ce site. Et penser à passer votre code au validateur https://validator.w3.org/ 

Je compléterais par dire qu'une class est réutilisable à souhait, donc définir une class pour lowercase et une autre pour uppuercase et c'est tout pour la CSS. 

Bonjour, 

Je pense que les apprentis vont trop vite, on leur a souvent dit que le HTML/CSS était facile ou le parent pauvre, grosse erreur c'est la fondation d'un projet web  (je n'ai pas faite exception moi non plus)

Pourtant tout est expliqué clairement dans le cours, les id, class et même lien vers le validateur.

- Un id est unique par page, très utile pour un système d'ancrage.

- les class, on peut affecter la même class à plusieurs éléments html, on peut aussi les cumuler : <p class="couleur bordure font" >...</p>

D'ailleurs si on passe du côté du Javascript, affecter plusieurs class revient à avoir un tableau, un array() : donc on peut parcourir ces classes.

Ce  qui donne pour une class nommée "couleur" : couleur[0], couleur[1], couleur[2], couleur[3], couleur[], etc...  couleur.length

-
Edité par pipelette13 12 novembre 2018 à 11:36:30