Changement de couleur, via le CSS pour une fiche de présentation.

[Ocarina]

B'soir
J'ai une fiche de présentation, et je suis en train de faire le futur design du forum. Une membre m'à fait la remarque suivant : pourquoi dans ton formulaire ne pas mettre des

Code:

<div class>

avec un code couleur =/ Sauf que je ne sais pas comment présenter tout ça, voici ma fiche en capture


J'aimerais donc savoir comment mettre en

Code:

<div class>

les couleurs, donc la en bleu dans mon CSS..
Donc dans mon CSS j'aimerais avoir une

Code:

<div class>

associé à u e couleur, donc quand je mettrais mon futur design, je changerais la couleur via le

Code:

<div class>

et toutes les fiches de présentations ayant ce

Code:

<div class>

changeront de couleur...

Merci.

[Psyaliah]

Coucou, pour faire ca, il faut simplement que tu associes un nom à la classe de tes "divs".
Par exemple pour le div principale, qui gère la couleur du fond il aura la forme:

Code:

<div class="fond">Ton contenu</div>

Et dans ton css personnalisé tu mettras:

Code:

.fond {
background-color: #000000;
}

Pour la couleur de fond blanche par exemple, code à modifier à ta convenance suivant la couleur que tu souhaites

[Ocarina]

Merci (:
Pour le texte, tout est décalé, tout revient à la la ligne même quand je met <div class=color>texte</div> :S
En faite, voici mon code
Donc pour le fond, je ne sais pas comment faire pour placer le div :S Ensuite, pour les chose entre balise

Code:

[color]

soit il reviennent à la ligne, soit tout est coloré.. Je vous donne donc le code d'origine qui est de moi...

[Psyaliah]

Simple petit soucis au niveau de ton code, tu avais déja un code pour le fond placé ailleurs, je l'ai supprimé

et les "</br>", pas touche c'est pour les retours à la ligne ^^
Je t'ai enlevé la balise couleur et gras de tes titres de lignes, et je t'ai ajouté une classe à la place, il suffira donc d'écrire entre, tu repéreras vite, mais je me suis dit que si tu changes le fond, tu devras aussi changer ça, et qu'a la fin ça fait long ^^ Donc j'ai pris le temps de tout remplacer, et donc ton CSS ressemblera à ca:



Dis moi si c'est bon ^^

[Ocarina]

Oui, c'est bon, merci (: Pouvez vous éditez votre message svp et enlever le deuxième code? .. Si je met ce span partout sur mon forum, sa marchera aussi..??

[Psyaliah]

Il est en caché, seul toi peut voir le message.
Et oui, tant que tu as la classe "Titres" dedans, tout ce qui sera entre ces balises sera en gras et dans la couleur donnée.

[Scoubifitz]

.../...
et les "</br>", pas touche c'est pour les retours à la ligne ^^
.../...

Juste pour info : </br> n'existe pas ... <br /> existe ...

[Psyaliah]

Ce que j'ai fait fonctionne, et les balises </br> existent si.

[Scoubifitz]

bonjour,

petit cours d'HTML ...

</br> serait donc une balise fermante ?

il faudrait à ce moment là écrire <br></br> (ouverture-fermeture de la balise "br") ?

<br> est utilisé en HTML , et est en cours d'abandon au profit de <br /> , une balise utilisée en xHTML , une balise auto-fermante , tout comme la balise <img ... /> ou la balise <input ... />

la plus belle démonstration de ce que j'avance est de visualiser le code source de cette page (ou de n'importe quelle autre) et de vérifier les retours à la ligne ...

Amicalement,
Scoubifitz

[Ocarina]

Yep, merci Scoubifitz, je viens d'apprendre quelques choses (: Pour les balises <span class="titres">texte</span> c'est bon Donc pour le fond c'est la même manière de fonctionné? Car là je suis en train d'éditer tout les sujets avec mon compte fondateur (dont les présentation) comportant les codes plus haut et je ne veux pas trop passer 3 heures dessus xD

[Psyaliah]

Oui pour le fond pareil ^^
Tu ajoute une

Code:

class="fond"

[Scoubifitz]

imaginons un texte entouré d'une balise "div" ayant pour class "prez" (présentation) ...

et que dans ce texte on rajoute des BBalises "b" pour mettre en gras ...

ce qui donnerait :

Code:

<div class="prez">tout va bien , c'est un texte long ... [b]Lorem ipsum dolor sit amet,[/b] consectetur adipiscing elit. Vestibulum sodales ornare lorem. Donec rhoncus interdum nunc, in suscipit risus elementum id. Suspendisse commodo justo purus. Ut quis lectus sed tellus commodo placerat nec ac massa. Maecenas non augue erat, sed pellentesque justo. Aliquam dapibus porttitor justo, at congue elit placerat vitae. Pellentesque pulvinar venenatis accumsan. Sed venenatis, mi vitae facilisis pellentesque, mi tellus fermentum nunc, et congue lacus lectus nec tortor. Curabitur eu neque eros. Morbi ac mi quis magna scelerisque rutrum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla lobortis lectus non porttitor. Sed iaculis arcu id mi consectetur sed molestie nisl imperdiet.</div>

maintenant on va dire dans le CSS que toutes les BBalises "b" (ou balises "strong" en HTML) vont avoir leur propre style ...

en clair , dans le CSS :

Code:

.prez strong{
color:#B0A6E3; /* pour changer la couleur du texte en gras */
background-color:#00f; /* pour changer le fond du texte en gras */
}

à partir de là tous les textes entourés par la balise <div class="prez"> , et qui ont du texte en gras , auront leur propre style ! ^^

[Ocarina]

Yep, merci à vous Petite question pour Psyalhia Comment faire pour que les deux élément du fond (bordures et la couleur du fond) soit dans une seule class et unique class? Sinon tout marche, juste cette question à vous poser (:

[Invité]

Bonsoir,

En complément des réponses apportées par Psyaliah et Scoubifitz, je vous invite à lire ce tutoriel:
> https://forum.forumactif.com/t301866-le-css-comment-ca-marche .

Cordialement.

[Ocarina]

Lu, Re-lu et re-re lu et je ne comprends pas pour mettre le fond et la bordure dans la même "div" =/

[Psyaliah]

Il faut que ajoute le CSS de la bordure dans le CSS de classe "fond".

[Ocarina]

Oui mais je n'ai pas compris pour "présenter" :S Dans le Css..

[Invité]

Bonjour,

Dans votre code d'origine, vous avez une "div style ..." Tout ce qui est après style poeut être mis dans le CSS et remplacé par une class.

Vous placez toutes les propriétés dans une paragraphe entre { et }:

Code:

{
propriété 1;
propriété 2;
propriété 3;
propriété 4;
}

Chaque propriété correspond à un élément de votre fiche "border" pour les contour, "background" pour le fond ...
Vous choisissez un nom pour votre class, mot court et qui représente bien à quoi le code correspond ( comme ça c'est plus facile pour s'en souvenir), pour l'exemple on va choisir fiche_prez. Dans votre code Html, vous remplacer toute la partie de votre div entre style= et justify" par class="fiche_prez". Et dans votre feuille de style CSS, vous ajoutez .fiche prez devant votre paragraphe.


Cordialement.

[Ocarina]

Le soucis est que j'ai déjà placé mon span class partout su mon forum et que j'y ai mis beaucoup de temps, elles servent pour changer la couleur ..
=/

[Invité]

Je ne comprends plus rien du tout, que cherchez vous à obtenir comme résultat exactement?

Cordialement.

[Ocarina]

Et bien, là j'ai mis en

Code:

<span class="Titres">texte</span>

et dans un autre span je cherche à mettre la couleur et le fond de ma présentation..

[Invité]

Dans ce cas, il vous faut une class différente par éléments différents : la class "Titres" pour les titre avec juste la couleur et la class Titres2 pour couleur + fond.

Cordialement.

[Ocarina]

Oui, justement je sais qu'il faut une deuxième classe mais je ne sais pas comment la présenter dans le CSS.. :S

[Invité]

De la même manière que l'autre:

Code:

.nom de la class{
propriété 1;
propriété2;
propriété3;
}

En l'occurrence:

Code:

.Titres2{
background-color: #ff0000;
border: 1px solid #000;
padding: 3px;
margin; 2px;}

Cordialement.

[Ocarina]

[Invité]

Les span sont toujours dans les div , sinon ça ne fonctionne pas .

Cordialement.

[Ocarina]

[url=http://test--design.forumgratuit.org/t23-fiche-prez]trululu (a) Sa fonctionne *w* En revanche, le "Ҩ nom, prénom(s) Ҩ " sont entourés d'un "cadre" et ne sont pas en bleu et je n'arrive pas à réparé :S

[Invité]

Au début du code, dans cette partie:

Code:

<font style= "font-size: 22pt; font-family: arial; LETTER-SPACING: -4px;"><span class="Titres2">Ҩ  [i]nom[/i], prénom(s)  Ҩ </span></font>

Enlevez le 2 .

Cordialement.

[Ocarina]

Yep, le code fonctionne merci (: