Image fond pour les sous forum Bouton_activeImage fond pour les sous forum Bouton_hoverImage fond pour les sous forum Fb-hoverImage fond pour les sous forum Fb-active
AccueilForumÉquipe 
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Fiche de Présentation RPG
Image fond pour les sous forum EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Image fond pour les sous forum EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Image fond pour les sous forum EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Image fond pour les sous forum EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Image fond pour les sous forum EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Image fond pour les sous forum EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Image fond pour les sous forum EmptySam 11 Fév 2023, 06:04 par Krager

» Vos partenaires dans le footer
Image fond pour les sous forum EmptyMar 07 Fév 2023, 08:40 par Oxtran

Le Deal du moment : -45%
PC Portable LG Gram 17″ Intel Evo Core i7 32 Go ...
Voir le deal
1099.99 €

CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolusPartagez
 

Image fond pour les sous forum

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://rpg-km.forumactif.com/forum.htm
Wayumi
Wayumi
{ Membre }
{ Membre }

Féminin Messages : 88



Image fond pour les sous forum Empty
Bonjour pour mes sous forum j'aimerai encadré les lien avec un cadre et un fond en image... le problème c'est que le cadre on voit que la ligne de droite et de gauche :
Spoiler:
Et c'est pire quand je vais avec le curseur là on voit plus l'image mais juste la couleur du fond du forum :
Spoiler:

Et voici mon code CSS :
Code:
a.forumlink:hover {
text-decoration: none;
background-image:url(http://img148.imageshack.us/img148/4075/barresousforum2.jpg);
border-bottom: 1px solid #2c5068d;
border-right: 1px solid #2c5068;
border-top: 1px solide #2c5068;
border-left: 1px solid #2c5068;
}

a.forumlink {
background-image: url(http://img201.imageshack.us/img201/4477/barresousforum1.png);
border-bottom: 1px solid #2c5068d;
border-right: 1px solid #2c5068;
border-top: 1px solide #2c5068;
border-left: 1px solid #2c5068;
}

Pouvez vous m'aidez sil vous plait...


Dernière édition par Wayumi le Mer 16 Fév 2011, 17:19, édité 1 fois
MessageSujet: Image fond pour les sous forum   Image fond pour les sous forum EmptyMer 16 Fév 2011, 15:07
Revenir en haut Aller en bas
http://internationale-lpp.com/
Fire-Fly
Fire-Fly
{ Membre actif }
{ Membre actif }

Féminin Messages : 429



Image fond pour les sous forum Empty
Salut Smile Bon, ton CSS a des erreurs donc on va commencer par essayer d'arranger ça et on verra après Wink

le voici corrigé:

Code:

a.forumlink:hover {
border: 1px solid #2c5068;
text-decoration: none;
background-image:url(http://img148.imageshack.us/img148/4075/barresousforum2.jpg);
}

a.forumlink {
border: 1px solid #2c5068;
background-image: url(http://img201.imageshack.us/img201/4477/barresousforum1.png);
}

Si tu regardes, au niveau de ta bordure, comme tout est pareille pour chaque côté, tu peux simplement utilisé la méga propriété 'border' qui couvre les 4 côtés sans caprices Wink

Ensuite, regarde dans ton css original, dans t'a 'border-bottom', tu as rajouté un 'd' à la fin de ta couleur, donc elle a maintenant 7 caractères, et donc n'est pas une couleur Razz C'est normal que de cette façon elle n'apparaisse pas! Wink

Pour ton arrière plan, réessaie quand même et dit moi si ça fonctionne car sur mon forum test, tout est parfait, donc si ça ne fonctionne pas pour toi, tu pourrais me fournir la totalité de ton CSS?

Merci Smile
MessageSujet: Re: Image fond pour les sous forum   Image fond pour les sous forum EmptyMer 16 Fév 2011, 16:39
Revenir en haut Aller en bas
http://rpg-km.forumactif.com/forum.htm
Wayumi
Wayumi
{ Membre }
{ Membre }

Féminin Messages : 88



Image fond pour les sous forum Empty
Pour le cadre c'est bon... Et ça fonctionne pas pour l'image... Bon je vais donner mon css (un gros bordel xD). Euh aussi non j'ai remarqué sur firefox les coin son arrondit est-il possible qu'ils ne soient pas arrondis?
Code:
a { text-decoration: none; }

.forumline{border:2px solid #212229;
}

u {
text-shadow: 0px 0px 2px #111111;
}
.ombre {
text-shadow: 0px 0px 2px #111111;
}

span.taille
{
font-size: 14px;
background-color: #253f6b;
border-bottom: 4px double #09507d;
border-top: 2px double #09507;
-moz-border-radius: 10px ;
border-right: 5px solid #09507d;
-moz-border-radius: 10px ;
border-left: 5px solid #09507d;
display:block;
text-align: center;
font-variant: small-caps
}

.bord{
font-size: 12px;
}
span.infobulle {
  position: relative;
  cursor:pointer; /*donne au curseur la forme de petite main, comme sur un lien*/
}

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

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

 top: 0px; /* on positionne notre infobulle */
  left: 15px;

  background: #0b5679; /* arrière-plan de l'infobulle */

  color: #c7dae2; /* texte dans l'infobulle */
white: 150px; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
  font-size: small;

  padding: 3px;

 /* bordures de votre infobulle*/
  border: double 4px #2b7699;
border-left-width:2px;
border-right-width:2px;
-moz-border-radius : 4px;
border-radius : 4px;

padding-left: 4px;
padding-right: 4px;
padding-top: 2px;
padding-bottom: 2px;}

.quote {
background-color: #f7f9ff; /* couleur blanc du fond */
border:4px #535353 double; /* bordure blanche en traits peu épais */
-border-radius: 3px; /* tous les côtés sont arrondis */
-moz-border-radius: 4px; /* tous les côtés sont arrondis */
-webkit-border-radius: 4px; /* tous les côtés sont arrondis */
color: ##F94B6E; /* couleur du texte blanche */
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
padding-bottom: 2px;
}

.code {
background-color: #ffffff; /* couleur blanc du fond */
border:1px  solide #51c678e; /* bordure blanche en traits peu épais */
-border-radius: 4px; /* tous les côtés sont arrondis */
-moz-border-radius: 4px; /* tous les côtés sont arrondis */
-webkit-border-radius: 4px; /* tous les côtés sont arrondis */
color: ##F94B6E; /* couleur du texte blanche */
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
padding-bottom: 2px;
}

.spoiler_closed{
background-color: #ffffff; /* couleur blanc du fond */
border:1px #1c678e dashed; /* bordure blanche en traits peu épais */
-border-radius: 3px; /* tous les côtés sont arrondis */
-moz-border-radius: 4px; /* tous les côtés sont arrondis */
-webkit-border-radius: 4px; /* tous les côtés sont arrondis */
color: ##F94B6E; /* couleur du texte blanche */
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
padding-bottom: 2px;
}

.spoiler_content{
background-color: #ffffff; /* couleur blanc du fond */
border:1px #1c678e dashed; /* bordure blanche en traits peu épais */
-border-radius: 3px; /* tous les côtés sont arrondis */
-moz-border-radius: 4px; /* tous les côtés sont arrondis */
-webkit-border-radius: 4px; /* tous les côtés sont arrondis */
color: ##F94B6E; /* couleur du texte blanche */
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
padding-bottom: 2px;
}

/*catégorie arrondit*/

a.forumlink:hover {
border: 1px solid #2c5068;
text-decoration: none;
background-image:url(http://img148.imageshack.us/img148/4075/barresousforum2.jpg);
}

a.forumlink {
border: 1px solid #2c5068;
background-image: url(http://img201.imageshack.us/img201/4477/barresousforum1.png);
}

/*template index_box*/

.mystats_fa{
    padding: 5px;
    float:right;
  font-family: verdana;
  font-size: 10px;
  font-weight: bold;
}

/*Template Nom utilisateur*/
.johian a {
font-weight: bold;
}

a.forumlink:link, a.forumlink:visited {
font-family: georgia;
text-transform : uppercase;
text-align: center;
font-size: 100%;
border-bottom: 5px solid #couleur;
color: #couleur;
letter-spacing: 1px;
display: block;
-moz-border-radius:10px;
}

a.forumlink:hover, a.forumlink:hover:visited {
background-image: url("url de votre image");
color: #couleur;
text-align: center;
display: block;
border-bottom: 5px solid #couleur;
-moz-border-radius:10px;
}
a:hover{text-transform:uppercase;}

a{text-decoration:none !important;}
a:hover{font-weight:bold;}
.banane {
text-transform: uppercase;
}

.banane:hover {
text-transform: none;
letter-spacing: 4px;
}

a.forumlink {
text-shadow: 1px 1px 1px #;
}


a.forumlink:hover, a.forumlink:hover:visited {
text-shadow: 1px 1px 1px #;
}
.ombreb {
text-shadow: 1px 1px 1px #00000;
font-family: times new roman;
font-style: italic;
font-size: 20px;
}

/*soulignement pointiller*/

a {
text-decoration: none !important;
}

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

a {
text-shadow: #F 0px 0px 1px;
}

.postbody a
{
text-shadow: none;
}

body { cursor: crosshair }
a:hover { cursor:pointer; /*donne au curseur la forme de petite main, comme sur un lien*/ }

.postdetails.poster-profile a img
{
border: 3px SOLID #416488; /*La bordure*/
-webkit-border-radius: 6px;
-webkit-border-radius: 6px;
-webkit-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;}

/*Arrondir les bord des messages*/
textarea.post, input.post {
-webkit-border-radius: 10px;
-moz-border-radius:10px;}
.bodyline {
-webkit-border-radius: 10px;
-moz-border-radius:10px; }
input,textarea, select {
-webkit-border-radius: 9px;
-webkit-border-radius: 9px;
-webkit-border-radius: 9px;
-webkit-border-radius: 9px;
-moz-border-radius-bottomleft:9px;
-moz-border-radius-bottomright:9px;
-moz-border-radius-topleft:9px;
-moz-border-radius-topright:9px;}
.navi {
background-color: #164570; /*FOND*/
border: 1px solid #164570;
text-shadow: 1px 1px 1px #FFFFF; /*OMBRAGE*/
padding: 3px; /*ESPACER DES BORDS*/
-border-radius: 5px; /* tous les côtés sont arrondis */
-moz-border-radius: 5px; /* tous les côtés sont arrondis */
-webkit-border-radius: 5px; /* tous les côtés sont arr
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
padding-bottom: 2px;
}
a:link {text-decoration: none;}
a:hover{text-decoration: none !important;}
a { text-decoration: none; }
a:link { text-decoration: none; }
a:hover { text-decoration: none; }
MessageSujet: Re: Image fond pour les sous forum   Image fond pour les sous forum EmptyMer 16 Fév 2011, 16:45
Revenir en haut Aller en bas
http://internationale-lpp.com/
Fire-Fly
Fire-Fly
{ Membre actif }
{ Membre actif }

Féminin Messages : 429



Image fond pour les sous forum Empty
Euuh en théorie si tu as pas mis -moz-border-radius c'est pas supposé êtres arrondis, mais si ta bordure est épaisse alors oui j'ai remarqué que firefox a tendance a faire à sa tête, et pour ça non malheureusement, rien à faire :/

Je vais te faire un petit ménage dans ton CSS, je te reviens Wink
MessageSujet: Re: Image fond pour les sous forum   Image fond pour les sous forum EmptyMer 16 Fév 2011, 16:47
Revenir en haut Aller en bas
http://internationale-lpp.com/
Fire-Fly
Fire-Fly
{ Membre actif }
{ Membre actif }

Féminin Messages : 429



Image fond pour les sous forum Empty
Pardon du double-post!

Code:

/* Forum et contenu */
.forumline {
border: 2px solid #212229;
}

body {
cursor: crosshair
}

.bodyline {
-webkit-border-radius: 10px;
-moz-border-radius:10px;
}

/* Soulignement */
u {
text-shadow: 0px 0px 2px #111111;
}

.ombre {
text-shadow: 0px 0px 2px #111111;
}

span.taille {
font-size: 14px;
background-color: #253f6b;
border-bottom: 4px double #09507d;
border-top: 2px double #09507;
-moz-border-radius: 10px ;
border-right: 5px solid #09507d;
-moz-border-radius: 10px ;
border-left: 5px solid #09507d;
display:block;
text-align: center;
font-variant: small-caps;
}

.bord{
font-size: 12px;
}

/* INFOBULLE */

span.infobulle {
position: relative;
cursor:pointer; /*donne au curseur la forme de petite main, comme sur un lien*/
}

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

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

top: 0px; /* on positionne notre infobulle */
left: 15px;

background: #0b5679; /* arrière-plan de l'infobulle */

color: #c7dae2; /* texte dans l'infobulle */
white: 150px; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
font-size: small;

padding: 3px;

 /* bordures de votre infobulle*/
border: double 4px #2b7699;
border-left-width:2px;
border-right-width:2px;
-moz-border-radius : 4px;
border-radius : 4px;

padding-left: 4px;
padding-right: 4px;
padding-top: 2px;
padding-bottom: 2px;
}

/* FIN INFOBULLE */

/*Citation*/
.quote {
background-color: #f7f9ff; /* couleur blanc du fond */
border: 4px double #535353 ; /* bordure blanche en traits peu épais */
-border-radius: 4px; /* tous les côtés sont arrondis */
-moz-border-radius: 4px; /* tous les côtés sont arrondis */
-webkit-border-radius: 4px; /* tous les côtés sont arrondis */
color: #F94B6E; /* couleur du texte blanche */
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
padding-bottom: 2px;
}

/* Balise Code */
.code {
background-color: #ffffff; /* couleur blanc du fond */
border:1px  solide #51c678e; /* bordure blanche en traits peu épais */
-border-radius: 4px; /* tous les côtés sont arrondis */
-moz-border-radius: 4px; /* tous les côtés sont arrondis */
-webkit-border-radius: 4px; /* tous les côtés sont arrondis */
color: #F94B6E; /* couleur du texte blanche */
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
padding-bottom: 2px;
}

/* Spoiler inactif */
.spoiler_closed{
background-color: #ffffff; /* couleur blanc du fond */
border:1px dashed #1c678e ; /* bordure blanche en traits peu épais */
-border-radius: 4px; /* tous les côtés sont arrondis */
-moz-border-radius: 4px; /* tous les côtés sont arrondis */
-webkit-border-radius: 4px; /* tous les côtés sont arrondis */
color: #F94B6E; /* couleur du texte blanche */
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
padding-bottom: 2px;
}

/* Spoiler ouvert */
.spoiler_content{
background-color: #ffffff; /* couleur blanc du fond */
border:1px dashed #1c678e ; /* bordure blanche en traits peu épais */
-border-radius: 4px; /* tous les côtés sont arrondis */
-moz-border-radius: 4px; /* tous les côtés sont arrondis */
-webkit-border-radius: 4px; /* tous les côtés sont arrondis */
color: #F94B6E; /* couleur du texte blanche */
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
padding-bottom: 2px;
}

/*catégorie arrondit*/

/* Liens des forums */
a.forumlink {
border: 1px solid #2c5068;
background-image: url(http://img201.imageshack.us/img201/4477/barresousforum1.png);
font-family: georgia;
text-transform : uppercase;
text-align: center;
font-size: 100%;
letter-spacing: 1px;
display: block;
}

/* Liens des forums lorsque ta souris passe dessus */
a.forumlink:hover {
border: 1px solid #2c5068;
text-decoration: none;
background-image:url(http://img148.imageshack.us/img148/4075/barresousforum2.jpg);
text-align: center;
display: block;
}

/*template index_box*/

.mystats_fa {
padding: 5px;
float:right;
font-family: verdana;
font-size: 10px;
font-weight: bold;
}

/*Template Nom utilisateur*/

.johian a {
font-weight: bold;
}

.banane {
text-transform: uppercase;
}

.banane:hover {
text-transform: none;
letter-spacing: 4px;
}

.ombreb {
text-shadow: 1px 1px 1px #00000;
font-family: times new roman;
font-style: italic;
font-size: 20px;
}

.postbody a{
text-shadow: none;
}

.postdetails.poster-profile a img{
border: 3px solid #416488; /*La bordure*/
-webkit-border-radius: 6px;
-webkit-border-radius: 6px;
-webkit-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
}

/*Arrondir les bord des messages*/
textarea.post, input.post {
-webkit-border-radius: 10px;
-moz-border-radius:10px;
}


input,textarea, select {
-webkit-border-radius: 9px;
-webkit-border-radius: 9px;
-webkit-border-radius: 9px;
-webkit-border-radius: 9px;
-moz-border-radius-bottomleft:9px;
-moz-border-radius-bottomright:9px;
-moz-border-radius-topleft:9px;
-moz-border-radius-topright:9px;
}

.navi {
background-color: #164570; /*FOND*/
border: 1px solid #164570;
text-shadow: 1px 1px 1px #FFFFF; /*OMBRAGE*/
padding: 3px; /*ESPACER DES BORDS*/
-border-radius: 5px; /* tous les côtés sont arrondis */
-moz-border-radius: 5px; /* tous les côtés sont arrondis */
-webkit-border-radius: 5px; /* tous les côtés sont arr */
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
padding-bottom: 2px;
}


/* LIENS DANS LE FORUM */
a:hover {
text-decoration: none !important;
text-transform: uppercase;
font-weight:bold;
}

a {
text-decoration: none;
text-shadow:  0px 0px 1px #ffffff;
}

Le voici tout beau tout propre Wink

Je peux quand même te faire un petit conseil, fait attention quand tu ajoutes de class comme par exemple, j'ai retrouvé au moins 5x 'a' et 'a:hover', il serait idéal que tu les regroupes comme ça, moins de chance de se perdre Wink
Le problème venait d'ailleurs de là, tu avais 2 fois 'forumlink' et 'forumlink:hover', les navigateurs en font ce qu'ils veulent Wink

Dit moi si ça marche!
MessageSujet: Re: Image fond pour les sous forum   Image fond pour les sous forum EmptyMer 16 Fév 2011, 17:16
Revenir en haut Aller en bas
http://rpg-km.forumactif.com/forum.htm
Wayumi
Wayumi
{ Membre }
{ Membre }

Féminin Messages : 88



Image fond pour les sous forum Empty
Merci pour ce petit nettoyage, je ferai plus attention ^^". Merci et ça marche =D.
MessageSujet: Re: Image fond pour les sous forum   Image fond pour les sous forum EmptyMer 16 Fév 2011, 17:18
Revenir en haut Aller en bas
Psycho
Psycho
Psychopathe
Psychopathe

Féminin Messages : 3407



Image fond pour les sous forum Empty
Hello (:
L'icône résolu est cochée donc je classe =D
MessageSujet: Re: Image fond pour les sous forum   Image fond pour les sous forum EmptyMer 16 Fév 2011, 17:21
Revenir en haut Aller en bas
Contenu sponsorisé




Image fond pour les sous forum Empty
MessageSujet: Re: Image fond pour les sous forum   Image fond pour les sous forum Empty
Revenir en haut Aller en bas
 

Image fond pour les sous forum

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Image "sous" le fond du forum
» Une image de fond pour les profils
» image de fond pour le QEEL.
» Image de fond pour une fiche
» Problème avec mon image de fond de forum

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-
ChatBox
:
AccueilAccueil  RechercherRechercher  Dernières imagesDernières images  Connexion  S'enregistrerS'enregistrer  

Partenaires Or

← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit