une classe a appliquer à ses titres

3 participants

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

Résolu une classe a appliquer à ses titres

Message par Alec Turner Dim 23 Jan 2011 - 16:21

Voila, j'a fait une petite recherche avant de poster et sans résultat

j'ai remarqué que certains forums créaient des classes qu'ils pouvaient appliquer à leurs titres etc/ Néanmoins je n'ai trouvé aucun tutoriel pouvant m"éclairer sur la marche à suivre?

j'ai tenté par moi-même mais ca ne fonctionne pas


Dernière édition par Alec Turner le Dim 23 Jan 2011 - 17:40, édité 1 fois
Alec Turner

Alec Turner
****

Féminin
Messages : 390
Inscrit(e) le : 17/03/2008

http://solemnyswear.keuf.net/
Alec Turner a été remercié(e) par l'auteur de ce sujet.

Résolu Re: une classe a appliquer à ses titres

Message par ge80 Dim 23 Jan 2011 - 16:31

Bonjour

Que voulez vous modifier ?

Avez vous un code de départ ?

cordialement
ge
ge80

ge80
Membre actif

Masculin
Messages : 16167
Inscrit(e) le : 08/10/2006

http://www.tsi80.net/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: une classe a appliquer à ses titres

Message par Alec Turner Dim 23 Jan 2011 - 16:41

non en fait j'aimerais appliquer a certaines parties de mes textes une mise ne page particulières sans devoir passer par tout plein de code

j'ai vu que sur certains forum ils mettaient

Code:
<divclass " exemple"> leur texte </div>

et cette classe donne une mise en forme au texte entre ses div

j'espère que je suis compréhensible?
Alec Turner

Alec Turner
****

Féminin
Messages : 390
Inscrit(e) le : 17/03/2008

http://solemnyswear.keuf.net/
Alec Turner a été remercié(e) par l'auteur de ce sujet.

Résolu Re: une classe a appliquer à ses titres

Message par ge80 Dim 23 Jan 2011 - 16:52

Oui, i tout à fait clair mais ma question est : que voulez vous comme mise en forme ?
Couleur, taille, fond image...

Avez vous un exemple en image pour illustrer ce que vous voulez faire ?
ge80

ge80
Membre actif

Masculin
Messages : 16167
Inscrit(e) le : 08/10/2006

http://www.tsi80.net/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: une classe a appliquer à ses titres

Message par Alec Turner Dim 23 Jan 2011 - 16:59

mmm oui je t'envoie cela par mp si tu permets au niveau des liens que je connais

ce que j'aimerais c'est qu'automatiquement mes textes soient mis en couleur et en majuscule et un peu plus grand
Alec Turner

Alec Turner
****

Féminin
Messages : 390
Inscrit(e) le : 17/03/2008

http://solemnyswear.keuf.net/
Alec Turner a été remercié(e) par l'auteur de ce sujet.

Résolu Re: une classe a appliquer à ses titres

Message par demeter1 Dim 23 Jan 2011 - 17:00

Rien de plus simple

Code:
<div class="nomdevotrediv">Votre Texte</div>
auquel tu appliques un css (à installer dans ta feuille de style)


par exemple

Code:
<div class="alec">Votre Texte</div>

avec pour css associé

Code:
.alec{
 color: #9BCD14;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
}
demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: une classe a appliquer à ses titres

Message par Alec Turner Dim 23 Jan 2011 - 17:06

j'avais déjà essayé ce système, j'ai réessayé le tiens et je n'ai aucun résultat mon texte reste identiquement le même
Alec Turner

Alec Turner
****

Féminin
Messages : 390
Inscrit(e) le : 17/03/2008

http://solemnyswear.keuf.net/
Alec Turner a été remercié(e) par l'auteur de ce sujet.

Résolu Re: une classe a appliquer à ses titres

Message par demeter1 Dim 23 Jan 2011 - 17:12

Pourrais tu nous mettre ton codage avec le css pour voir ce qui cloche .
demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: une classe a appliquer à ses titres

Message par ge80 Dim 23 Jan 2011 - 17:12

Dans ce cas vous avez un problème avec votre feuille de style.

elle ne doit pas être lue et il doit il y avoir une erreur.

Une version à tester

Dans votre CSS
Code:
.titre {
height: 80px;
background-color: rgb(118, 116, 106);
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
color:#fff;
}
.texte {
display: block;
text-shadow: rgb(0, 0, 0) 1px 1px 1px;
margin-left: -5px;
margin-right: -5px;
text-align: center;
font-size: 60px;
}
Valider

et code à mettre dans un message.
Code:
<div class="titre"> <span class="texte">titi</span></div>

Enregistrer votre message et un CTRL et F5 pour recharger votre style.



ge80

ge80
Membre actif

Masculin
Messages : 16167
Inscrit(e) le : 08/10/2006

http://www.tsi80.net/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: une classe a appliquer à ses titres

Message par Alec Turner Dim 23 Jan 2011 - 17:20

est- ce cet effet qui devait apparaitre ge?

essai
Alec Turner

Alec Turner
****

Féminin
Messages : 390
Inscrit(e) le : 17/03/2008

http://solemnyswear.keuf.net/
Alec Turner a été remercié(e) par l'auteur de ce sujet.

Résolu Re: une classe a appliquer à ses titres

Message par ge80 Dim 23 Jan 2011 - 17:25

Oui cela ressemble mais avec le choix des couleurs ceci n'est pas évident.
je refais une version plus claire.
Modifier le code en feuille css

Code:
.titre {
height: 80px;
background-color:#7FB6EC;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
color:#000;
}
.texte {
display: block;
text-shadow: rgb(0, 0, 0) 5px 5px 5px;
margin-left: -5px;
margin-right: -5px;
text-align: center;
font-size: 60px;
}
ge80

ge80
Membre actif

Masculin
Messages : 16167
Inscrit(e) le : 08/10/2006

http://www.tsi80.net/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: une classe a appliquer à ses titres

Message par Alec Turner Dim 23 Jan 2011 - 17:28

ah je ne vois pas de changement, il doit y avoir qque chose qui bloque dans ma css
Alec Turner

Alec Turner
****

Féminin
Messages : 390
Inscrit(e) le : 17/03/2008

http://solemnyswear.keuf.net/
Alec Turner a été remercié(e) par l'auteur de ce sujet.

Résolu Re: une classe a appliquer à ses titres

Message par ge80 Dim 23 Jan 2011 - 17:30

demeter1 a écrit:Pourrais tu nous mettre ton codage avec le css pour voir ce qui cloche .

Comme l'avez détecté demeter1 Wink

Code:
---------------- catégories--------------------------

Grosse erreur !

Code:
/* ---------------- catégories-------------------------- */
ge80

ge80
Membre actif

Masculin
Messages : 16167
Inscrit(e) le : 08/10/2006

http://www.tsi80.net/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: une classe a appliquer à ses titres

Message par Alec Turner Dim 23 Jan 2011 - 17:31

désolé démeter je n'avais pas vu >-<

Code:
---------------- bordures---------------------------
.bodyline{
border-top: 2px #4e6470 solid;/* modifie les bordures*/
border-bottom:2px #4e6470 solid;
border-right:  10px #4e6470 solid;
border-left:  10px #4e6470 solid;}

.bodylinewidth {
border-top: 0px solid;
border-bottom:0px  solid;
border-left: 0px solid;
border-right: 0px solid;
border-color: #none;
-moz-border-radius: 5px 5px 5px 5px
}


.forumline{
background-color:FABB47;
-moz-border-radius: 6px ;
border: 3pxFABB47 solid;

}






/* ------------------LIENS et UTILISATEURS  ------------------  */


a:link {text-transform: lowercase; letter-spacing: 2px;}
a:visited {text-transform: lowercase; letter-spacing: 2px;}
a:hover {text-transform: lowercase; letter-spacing: 2px;}
a:active {text-transform: lowercase; letter-spacing: 2px;}


/* ------------------FOND AVATAR ------------------  */
.fondavatar {
background-color : #0A0A0A;
border : 5px solid #271212 ;
-moz-border-radius: 5px 5px 5px 5px }


---------------- navigation---------------------------

.navtop {
top : 0px;
position : fixed ;
width : 100% ;
background-color :#000000;
border-bottom : 10px solid #FFDAB9;
}

---------------- justification automatique--------------------------

.postbody {
    display: block;
    text-align:justify;
    padding-left: 15px;
    padding-right: 15px;
}


/* ------------------CATEGORIE EN MAJUSCULES ------------------  */


h3.hierarchy .forumlink, h2.hierarchy .forumlink{
font-variant: small-caps;
}


/* ------------------LIENS SOUS FORUM ITALIQUE ------------------  */

.row1.over span.gensmall {font-style: italic !important;}





/* ------------------PSEUDO EN MINUSCULE / RETRAIT SOULIGNEMENT------------------  */


a {text-transform: lowercase ;}

a:hover {text-decoration: none !important;}




/* ------------------RETRAIT SOULIGNEMENT CONTOUR FORuM------------------  */


a {
outline: none;
}


/* ------------------SUPPRIMER LES SOULIGNEMENTS------------------  */

a {text-decoration: none;}




/* ------------------SOULIGNEMENT TITRE DES FORUMS------------------  */


a.forumlink{
display:block;
text-align: left;
background-color: none;
border-bottom: 1px dotted #271212;
}


---------------- soulignement pointillé--------------------------


u {
text-decoration: none;
border-bottom: 1px #FFE4C4 dotted;
}


---------------- opacite---------------------------

/* translucidité des images by BestRPG */
.imguser {border: none; opacity: 0.5; background-color: transparent;}
.imguser:hover {border: none; opacity: 1; background-color: transparent;}
.forumline img {border: none; opacity: 1; background-color: transparent;}
.forumline img:hover {border: none; opacity: 0.5; background-color: transparent;}


---------------- arrondir  bordures interieures---------------------------


textarea, .textarea.post, input.post {
-moz-border-radius:10px;
-webkit-border-radius: 10px;
}

---------------- suppression derniere modif par--------------------------

tr.post span.gensmall { display: none; }


---------------- descrip categorie--------------------------


.descri {
background:url("http://nsa20.casimages.com/img/2010/11/20/10112004520614248.png");
border-left: #FFBA00 2px solid;
border-right: #FFBA00 2px solid;
-moz-border-radius: 20px 20px 20px 20px;;
}




---------------- onglets--------------------------

.onglet
.onglet_actif {
background: url('http://i30.tinypic.com/rbl7jm.jpg') no-repeat; /*URL de l'onglet étant actif*/
width:150px; /*Largeur de l'onglet étant actif*/
height:50px; /*Hauteur de l'onglet étant actif*/
cursor:pointer;
}

.onglet_nactif {
background:url('[IMG]http://i27.tinypic.com/30mnv2d.jpg[/IMG]') no-repeat; /*URL de l'onglet étant inactif*/
width:100px; /*Largeur de l'onglet étant inactif*/
height:50px; /*Hauteur de l'onglet étant inactif*/
cursor}





---------------- catégories--------------------------

th {
-moz-border-radius-topleft: 30%;
-moz-border-radius-topright: 30%;
border-top-left-radius: 30%;
border-top-right-radius: 30%;
}



/* ------------------fiche de présentation------------------  */
 /* PRESENTATION PV By A[-]P sur Pub Rpg Design (www.pub-rpg-design.com)  */

  /* Cadre Avatar */
.imgch {
      -moz-border-radius: 50px;
      margin: 5px;
      background-color: #BEBEBE;
      padding: 10px;
      }

  /* Cadre Histoire et Link */
.storych {
      text-align: justify;
      background-color:#666666;
      -moz-border-radius: 50px;
      margin: 5px;
      padding: 20px;
      font-size:11px;

}

    /* Cadre caractère */

.storych1 {
      text-align: center;
      background-color:#666666;
      -moz-border-radius: 15px;
      margin: 5px;
      padding: 10px;
      font-size:11px;
      Height: 60px;
      font-family: Courier New;   

}

 /* Titre histoire et Link */

.titre {
      text-align: center;
      Border-bottom: 1px Dashed #000000;
      font-size:22px;
      font-family: Courier New;
}

/* ------------------PV-----------------  */


.blocs{
background-color : #60646e ;
border : 9px solid #000000 ;
 -moz-border-radius : 20px ;
width : 80% ;
padding : 3px ;
font-size : 11px ;
font-color : #ffffff ; }

.barres {
height : 5px ;
background-color : #000000 ;
margin : -3px ;}


/* ------------------Fond des catégories-----------------  */

td.row1{
    background-color: #none;
        background-image: url("none");
    }

td.row3{
background-color: #none;
background-image: url("none");
    }

---------------- titres---------------------------

.titre {
height: 80px;
background-color:#7FB6EC;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
color:#000;
}
.texte {
display: block;
text-shadow: rgb(0, 0, 0) 5px 5px 5px;
margin-left: -5px;
margin-right: -5px;
text-align: center;
font-size: 60px;
}
Alec Turner

Alec Turner
****

Féminin
Messages : 390
Inscrit(e) le : 17/03/2008

http://solemnyswear.keuf.net/
Alec Turner a été remercié(e) par l'auteur de ce sujet.

Résolu Re: une classe a appliquer à ses titres

Message par ge80 Dim 23 Jan 2011 - 17:33

Code:
---------------- navigation---------------------------

regarder toutes les erreurs de lignes en commentaires

Il faut !
Code:
/* ---------------- navigation--------------------------- */

---------------- titres---------------------------

Une bonne dizaine de lignes à corriger Wink
ge80

ge80
Membre actif

Masculin
Messages : 16167
Inscrit(e) le : 08/10/2006

http://www.tsi80.net/
ge80 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: une classe a appliquer à ses titres

Message par Alec Turner Dim 23 Jan 2011 - 17:38

aah merci à vous deux, je ne comprenais pas pq certains effets ne fonctionnaient pas ^-^ c'était bête

ce serait utile de retrouver ces petites astuces dans les tutos


Alec Turner

Alec Turner
****

Féminin
Messages : 390
Inscrit(e) le : 17/03/2008

http://solemnyswear.keuf.net/
Alec Turner a été remercié(e) par l'auteur de ce sujet.

Résolu Re: une classe a appliquer à ses titres

Message par ge80 Dim 23 Jan 2011 - 17:45

OK

Le fond est bien bleu maintenant.
Bon dimanche
Ge
victoire
ge80

ge80
Membre actif

Masculin
Messages : 16167
Inscrit(e) le : 08/10/2006

http://www.tsi80.net/
ge80 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