Image de fond pour Onglet

3 participants

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

Résolu Image de fond pour Onglet

Message par Queen Of Rebellion♫ Jeu 10 Fév 2011 - 15:17

Bonjour !

J'ai réussit à mettre mes catégories sous onglet, mais mon problème est à présent d'y mettre une image de fond, ou du moins, que ça ai l'air d'onglet x)

Voilà mon forum
Pour mes onglets, je n'ai que le texte... Comment faire ? x)

Merci à ceux qui m'aideront, où qui tenterons de m'aider !! ;D


Dernière édition par Queen Of Rebellion♫ le Jeu 10 Fév 2011 - 19:18, édité 1 fois
Queen Of Rebellion♫

Queen Of Rebellion♫
Nouveau membre

Messages : 10
Inscrit(e) le : 26/12/2010

http://la-foret-de-laube.forumactif.com/
Queen Of Rebellion♫ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond pour Onglet

Message par chipie23 Jeu 10 Fév 2011 - 15:21

Bonjour, on ne peut pas voir le forum
chipie23

chipie23
***

Féminin
Messages : 187
Inscrit(e) le : 30/06/2010

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

Résolu Re: Image de fond pour Onglet

Message par Queen Of Rebellion♫ Jeu 10 Fév 2011 - 15:42

Ha, oui, j'avais oublié... Désolé ^^
Voilà une image :
Spoiler:
Queen Of Rebellion♫

Queen Of Rebellion♫
Nouveau membre

Messages : 10
Inscrit(e) le : 26/12/2010

http://la-foret-de-laube.forumactif.com/
Queen Of Rebellion♫ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond pour Onglet

Message par Anzu Jeu 10 Fév 2011 - 15:49


Bonjour,

Il nous faudrait la CSS associée à vos onglets Wink

Cordialement.
Anzu

Anzu
Membre actif

Féminin
Messages : 20685
Inscrit(e) le : 30/08/2007

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

Résolu Re: Image de fond pour Onglet

Message par Queen Of Rebellion♫ Jeu 10 Fév 2011 - 15:59

Ha x')
Je suis vraiment pas douée avec tous ces codes... Donc voilà, je sais pas si j'en ai oublié un peu ou non ^^'
Code:
.text {
color:#4D4110; /*Couleur du texte de vos onglets*/
cursor:pointer;
}

#cat_Hors Rpg,#cat_Terres Neutres,#cat_Meute,#cat_Clan,#cat_Tribu,#cat_Groupe,#cat_Bannis/*... à remplacer par le nom des onglets*/ {
padding-top:4px;
}

.spoiler_content { display: block; }
.hidden .spoiler_content { display: none; }

.cat_forum {
background-color: #CFAF63;
margin: auto;
margin-bottom:30px;
width:800px;
}

.onglet {
display:inline-block;
margin-top:30px;
text-decoration:none; !important
cursor:pointer;
}

.onglet li {
float:left;
list-style-type:none;
margin-bottom:-22px;
text-decoration:none; !important
cursor:pointer;
}

.onglet li:hover {
text-decoration:none; !important
cursor:pointer;
}

.onglet li a {
display:block;
text-decoration:none; !important
list-style-type: none;
cursor:pointer;
}

.onglet li a: hover {
text-decoration:none;
list-style-type:none;
cursor:pointer;
}

.onglet_actif {
background: url('URL_ONGLET_ACTIF') no-repeat; /*URL de l'onglet étant actif*/
width:100px; /*Largeur de l'onglet étant actif*/
height:50px; /*Hauteur de l'onglet étant actif*/
cursor:pointer;
}

.onglet_nactif {
background:url('URL_ONGLET_INACTIF') 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:pointer;
}

Heu, sinon, voilà tout mon code CSS ^^'
Code:
a { text-decoration: none; }

a.forumlink{
-moz-border-radius: 7px 7px 7px 7px;
background-color: #FFFFFF;
border-bottom: 5px double #5E857D;
color:#6A7B8F;
font-family: georgia;
font-size: 14px;
font-weight: lighter;
letter-spacing: 2px;
display:block;
text-align: center;
}


a.forumlink:hover{
color:rgb(170,170,170);
font-family: georgia;
font-size: 14px;
font-weight: lighter;
letter-spacing: 2px;
text-align: center;}

cursor:url(http://pmsc.free.fr/C03/1039192821.ani),default;

#menu ul
{margin: 0px;
padding: 0px;
list-style-type: none;
text-align: center;}

#menu li
{float: left;
padding: 0px;
background-color: #99876e;}

#menu li a
{display: block;
width: 100px;
color: #000000; /* couleur du texte */
padding: 5px;
text-decoration: none;}

#menu li a:hover /* couleur du texte au passage de la souris */
{color: #ffffff;}

#menu ul li ul  /* cacher les sous-catégories */
{display: none;}

#menu ul li:hover ul
{display: block;}

#menu li:hover ul li
{float: none;}

#menu li ul
{position:absolute;}




a.mainmenu
{
background-color: #ffffff;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-radius: 140px;
}





body.chatbox {
background-image:url("http://i.imgur.com/bVAx7.png");
background-repeat:no-repeat;
background-position:center center;
}

/*------------------------------------------------*/

.text {
color:#4D4110; /*Couleur du texte de vos onglets*/
cursor:pointer;
}

#cat_Hors Rpg,#cat_Terres Neutres,#cat_Meute,#cat_Clan,#cat_Tribu,#cat_Groupe,#cat_Bannis/*... à remplacer par le nom des onglets*/ {
padding-top:4px;
}

.spoiler_content { display: block; }
.hidden .spoiler_content { display: none; }

.cat_forum {
background-color: #CFAF63;
margin: auto;
margin-bottom:30px;
width:800px;
}

.onglet {
display:inline-block;
margin-top:30px;
text-decoration:none; !important
cursor:pointer;
}

.onglet li {
float:left;
list-style-type:none;
margin-bottom:-22px;
text-decoration:none; !important
cursor:pointer;
}

.onglet li:hover {
text-decoration:none; !important
cursor:pointer;
}

.onglet li a {
display:block;
text-decoration:none; !important
list-style-type: none;
cursor:pointer;
}

.onglet li a: hover {
text-decoration:none;
list-style-type:none;
cursor:pointer;
}

.onglet_actif {
background: url('URL_ONGLET_ACTIF') no-repeat; /*URL de l'onglet étant actif*/
width:100px; /*Largeur de l'onglet étant actif*/
height:50px; /*Hauteur de l'onglet étant actif*/
cursor:pointer;
}

.onglet_nactif {
background:url('URL_ONGLET_INACTIF') 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:pointer;
}

.tstaff{font-size:1em;}

.thumbnail{position: relative;z-index: 0;}

.thumbnail:hover{background-color: transparent;z-index: 50;}

.thumbnail span{
position: absolute;
background-color: #99CCFF;
padding: 5px;
left: -1000px;
visibility: hidden;
color: #008080;}

.thumbnail span img{border: 1px groove;padding: 2px;}

.thumbnail:hover span{
visibility: visible;
top: 15px;
left: 25px;
width: 60;}

/* Essaie ^^ */

/* Profil Masqué */
.profilmasque /*c'est juste le css du bouton*/
{background-color: #dcd7c5;
border: 1px solid #615c52;
font-size: 12px; /*taille de la police*/
letter-spacing: 1px;
}

.profil1/*c'est le css de l'ensemble bouton+profil*/
{
width: 170px;
background-color: #dcd7c5;
border: none;
font-size: 12px;
letter-spacing: 2px;
text-shadow: 1px 1px 1px #000000;
}





/* page accueil*/

.name {
text-shadow: 1px 1px 2px #000000;
}

.cadre {
  border: 2px solid #615c52;
background-color: #dcd7c5;
-moz-border-radius:15px;
width: 35px;
height: 30px;
 padding: 5px;}


.navig {
text-decoration: none !important;
 text-align: center;
  border-left: 2px dashed #615c52;
  border-right: 2px dashed #615c52;
  border-bottom: 2px solid #615c52;
border-top: 1px solid #353232;
background-color: #dcd7c5;
-moz-border-radius:25px;
  color: #000;
  margin-left: 10px;
  margin-right:10px;
  margin-top: 5px;
  font-family: "arial";
}
.navig:hover {
text-decoration: none !important;
 text-align: center;
  border-left: 2px dashed #615c52;
  border-right: 2px dashed #615c52;
  border-bottom: 2px solid #615c52;
border-top: 1px solid #353232;
background-color: #fff9e6;
-moz-border-radius:25px;
  color: #000;
  margin-left: 10px;
  margin-right:10px;
  margin-top: 5px;
  font-family: "arial";
}

a:hover { cursor: nw-resize; font-variant: small-caps; text-decoration: none !important; letter-spacing : 2px; }

.contenu {
-moz-border-radius: 5px;
background-color: #b9b29b;
text-align: justify;
  padding: 5px;
  color: #000000;
  font-family: arial;
  font-size: 11px;
margin-right: 20px;
margin-left: 20px;
border-right: 5px solid #615c52;
border-left: 5px solid #615c52;
}

.title {
font-family: impact, serif; /* Possibilité de la changer */
font-size: 140%;
text-transform: uppercase;
border-bottom: 1px solid #6b5b62; /* A placer une couleur */
color: #000000;
text-align: left;
margin-right: 20px;
margin-left: 20px;
}


/* l'infobulle */

a.infobulle {
  position: relative;
}

a.infobulle span {
  display: none; /* ceci masque l'infobulle */
}
a.infobulle:hover {
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */

}
a.infobulle:hover span {
  display: inline; /* ceci affiche l'infobulle */
  position: absolute;

  white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */

  top: 5px; /* on positionne notre infobulle */
  left: 15px;
  padding: 5px;
  background: #F2E4E7; /* arrière-plan de l'infobulle */

  color: black; /* texte dans l'infobulle */
  padding: 3px;
  color: #000;
    font-family: "calibri", arial;

  /* bordures de votre infobulle*/
  border: 1px dotted #353232;
  -moz-border-radius:10px;
}




a { text-decoration: none !important; }

/* Détail ( titre,soustitre...)*/

.titre {
background-image: url(http://photomaniak.com/upload/out.php/i921400_iconecopie.png);
font-size:14px;font-weight: bold;text-align:center;
text-decoration: none !important;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomright: 5px;
margin-right: 20px;
margin-left: 20px;}

.description {
-moz-border-radius: 5px;
background-color: #cdc5b6;
border-right: 5px solid #615c52;
border-left: 5px solid #615c52;
text-align: justify;
}

.titres {
text-shadow: 1px 1px 2px #615c52;
}

.soustitres {
text-shadow: 1px 1px 2px #615c52;font-size:14px;font-weight: bold;border-bottom: 3px double #615c52;margin-left: 20px;
}


/* QEEL a faire*/

.statistiques{
border:0px;
background-image: url('http://photomaniak.com/upload/out.php/i921384_qeelcopie.png');
background-repeat: no-repeat;
background-position: center;
width: 800px;
height:350px;}

#qeel td.row1
{background: none;}

.groupes
{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
padding-bottom: 2px;
margin-left: 5px;
margin-right: 5px;
font-variant: uppercase;
text-shadow: 1px 1px 2px #070705;
  font-family: arial;
  font-size: 12px;
font-weight: bold;}



Queen Of Rebellion♫

Queen Of Rebellion♫
Nouveau membre

Messages : 10
Inscrit(e) le : 26/12/2010

http://la-foret-de-laube.forumactif.com/
Queen Of Rebellion♫ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond pour Onglet

Message par chipie23 Jeu 10 Fév 2011 - 19:02

Code:
.onglet_actif {
background: url('URL_ONGLET_ACTIF') no-repeat; /*URL de l'onglet étant actif*/
width:100px; /*Largeur de l'onglet étant actif*/
height:50px; /*Hauteur de l'onglet étant actif*/
cursor:pointer;
}

.onglet_nactif {
background:url('URL_ONGLET_INACTIF') 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:pointer;
}
background:url('URL_ONGLET_ACTIF/INACTIF') no-repeat; Remplacer ce qui est en rouge par le lien des images correspondantes
chipie23

chipie23
***

Féminin
Messages : 187
Inscrit(e) le : 30/06/2010

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

Résolu Re: Image de fond pour Onglet

Message par Queen Of Rebellion♫ Jeu 10 Fév 2011 - 19:15

Merci !! :DD
Queen Of Rebellion♫

Queen Of Rebellion♫
Nouveau membre

Messages : 10
Inscrit(e) le : 26/12/2010

http://la-foret-de-laube.forumactif.com/
Queen Of Rebellion♫ 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