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

3 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

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

Message par Ocarina Mer 28 Déc 2011 - 21:41

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 Smile


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.





Dernière édition par Ocarina le Ven 30 Déc 2011 - 17:44, édité 3 fois
avatar

Ocarina
****

Féminin
Messages : 278
Inscrit(e) le : 28/10/2011

Ocarina a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur, via le CSS pour une fiche de présentation.

Message par Psyaliah Mer 28 Déc 2011 - 22:00

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 Very Happy
Psyaliah

Psyaliah
Membre habitué

Féminin
Messages : 1281
Inscrit(e) le : 22/12/2011

https://forum.forumactif.com/
Psyaliah a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur, via le CSS pour une fiche de présentation.

Message par Ocarina Mer 28 Déc 2011 - 22:09

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...
avatar

Ocarina
****

Féminin
Messages : 278
Inscrit(e) le : 28/10/2011

Ocarina a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur, via le CSS pour une fiche de présentation.

Message par Psyaliah Jeu 29 Déc 2011 - 0:21

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

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 ^^


Dernière édition par Psyaliah le Jeu 29 Déc 2011 - 1:20, édité 1 fois
Psyaliah

Psyaliah
Membre habitué

Féminin
Messages : 1281
Inscrit(e) le : 22/12/2011

https://forum.forumactif.com/
Psyaliah a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur, via le CSS pour une fiche de présentation.

Message par Ocarina Jeu 29 Déc 2011 - 0:57

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..??
avatar

Ocarina
****

Féminin
Messages : 278
Inscrit(e) le : 28/10/2011

Ocarina a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur, via le CSS pour une fiche de présentation.

Message par Psyaliah Jeu 29 Déc 2011 - 1:21

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.
Psyaliah

Psyaliah
Membre habitué

Féminin
Messages : 1281
Inscrit(e) le : 22/12/2011

https://forum.forumactif.com/
Psyaliah a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur, via le CSS pour une fiche de présentation.

Message par Scoubifitz Jeu 29 Déc 2011 - 2:57

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

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

Scoubifitz

Scoubifitz
Membre actif

Masculin
Messages : 3687
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur, via le CSS pour une fiche de présentation.

Message par Psyaliah Jeu 29 Déc 2011 - 12:07

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

Psyaliah
Membre habitué

Féminin
Messages : 1281
Inscrit(e) le : 22/12/2011

https://forum.forumactif.com/
Psyaliah a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur, via le CSS pour une fiche de présentation.

Message par Scoubifitz Jeu 29 Déc 2011 - 13:11

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
Scoubifitz

Scoubifitz
Membre actif

Masculin
Messages : 3687
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur, via le CSS pour une fiche de présentation.

Message par Ocarina Jeu 29 Déc 2011 - 14:22

Yep, merci Scoubifitz, je viens d'apprendre quelques choses (: Pour les balises <span class="titres">texte</span> c'est bon Smile Donc pour le fond c'est la même manière de fonctionné? Smile 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
avatar

Ocarina
****

Féminin
Messages : 278
Inscrit(e) le : 28/10/2011

Ocarina a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur, via le CSS pour une fiche de présentation.

Message par Psyaliah Jeu 29 Déc 2011 - 14:55

Oui pour le fond pareil ^^
Tu ajoute une
Code:
class="fond"
Psyaliah

Psyaliah
Membre habitué

Féminin
Messages : 1281
Inscrit(e) le : 22/12/2011

https://forum.forumactif.com/
Psyaliah a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur, via le CSS pour une fiche de présentation.

Message par Scoubifitz Jeu 29 Déc 2011 - 14:57

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 ! ^^
Scoubifitz

Scoubifitz
Membre actif

Masculin
Messages : 3687
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur, via le CSS pour une fiche de présentation.

Message par Ocarina Jeu 29 Déc 2011 - 20:47

Yep, merci à vous Very Happy Petite question pour Psyalhia Smile 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 (:
avatar

Ocarina
****

Féminin
Messages : 278
Inscrit(e) le : 28/10/2011

Ocarina a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur, via le CSS pour une fiche de présentation.

Message par Invité Jeu 29 Déc 2011 - 21:12

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.
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur, via le CSS pour une fiche de présentation.

Message par Ocarina Jeu 29 Déc 2011 - 21:39

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

Ocarina
****

Féminin
Messages : 278
Inscrit(e) le : 28/10/2011

Ocarina a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur, via le CSS pour une fiche de présentation.

Message par Psyaliah Jeu 29 Déc 2011 - 21:57

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

Psyaliah
Membre habitué

Féminin
Messages : 1281
Inscrit(e) le : 22/12/2011

https://forum.forumactif.com/
Psyaliah a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur, via le CSS pour une fiche de présentation.

Message par Ocarina Jeu 29 Déc 2011 - 21:57

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

Ocarina
****

Féminin
Messages : 278
Inscrit(e) le : 28/10/2011

Ocarina a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur, via le CSS pour une fiche de présentation.

Message par Invité Ven 30 Déc 2011 - 10:28

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.
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur, via le CSS pour une fiche de présentation.

Message par Ocarina Ven 30 Déc 2011 - 13:29

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 ..
=/
avatar

Ocarina
****

Féminin
Messages : 278
Inscrit(e) le : 28/10/2011

Ocarina a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur, via le CSS pour une fiche de présentation.

Message par Invité Ven 30 Déc 2011 - 14:21

Assomé

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

Cordialement.
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur, via le CSS pour une fiche de présentation.

Message par Ocarina Ven 30 Déc 2011 - 14:31

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..
avatar

Ocarina
****

Féminin
Messages : 278
Inscrit(e) le : 28/10/2011

Ocarina a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur, via le CSS pour une fiche de présentation.

Message par Invité Ven 30 Déc 2011 - 15:04

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

Cordialement.
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur, via le CSS pour une fiche de présentation.

Message par Ocarina Ven 30 Déc 2011 - 15:05

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

Ocarina
****

Féminin
Messages : 278
Inscrit(e) le : 28/10/2011

Ocarina a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur, via le CSS pour une fiche de présentation.

Message par Invité Ven 30 Déc 2011 - 15:08

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.
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur, via le CSS pour une fiche de présentation.

Message par Ocarina Ven 30 Déc 2011 - 15:18

avatar

Ocarina
****

Féminin
Messages : 278
Inscrit(e) le : 28/10/2011

Ocarina a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur, via le CSS pour une fiche de présentation.

Message par Invité Ven 30 Déc 2011 - 15:45

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

Cordialement.
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur, via le CSS pour une fiche de présentation.

Message par Ocarina Ven 30 Déc 2011 - 15:51

[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
avatar

Ocarina
****

Féminin
Messages : 278
Inscrit(e) le : 28/10/2011

Ocarina a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur, via le CSS pour une fiche de présentation.

Message par Invité Ven 30 Déc 2011 - 16:12

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.
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de couleur, via le CSS pour une fiche de présentation.

Message par Ocarina Ven 30 Déc 2011 - 17:44

Yep, le code fonctionne merci (:
avatar

Ocarina
****

Féminin
Messages : 278
Inscrit(e) le : 28/10/2011

Ocarina a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum