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! | | | Problème de background [résolu] |  |
|  Vilebrequin 
{ Membre }
 Messages : 16
![Problème de background [résolu] Empty](https://2img.net/i/fa/empty.gif) | Bonjour/bonsoir! C'est jamais que la troisième que je viens vous embêter.... J'ai deux soucis, le premier est que je n'arrive pas à mettre une image de fond dans mon forum... je vous met tout le css. Parce que je ne comprend pas d'où ça vient... ><" Y aurait-il une option à cocher je sais pas où? - Code:
-
.navi{
position: fixed;
left: 0px;
top: 0px;
right: 0px;
z-index: 999;
width: 100%;
background-color:#000000;
background-repeat: no-repeat;
text-align: top-center;
padding : 10px;
border-bottom : 1px groove #3B3B3B;
}
.mainmenu {
font-size: 16px;
font-variant: small-caps;
color: #FEFEFE;
}
a.mainmenu {
text-decoration: none;
color: #FEFEFE;
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
a.mainmenu:hover {
text-decoration: none;
color: #7FC6BC;
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
/* Mise en forme du "bloc" qui contient le titre */
.TitreCategorie {
background: #000000; /*fond*/
/* Des coins arrondis */
border-radius:50px 50px 0 0;
-moz-border-radius:50px 50px 0 0;
-wekbit-border-radius:50px 50px 0 0;
width: 500px; /*largeur à modifier selon vos goûts*/
margin:auto; /* on centre le bloc */
padding:2px; /*espace entre la bordure et le texte*/
border:2px solid #7FC6BC;
border-bottom:0px;
}
/* mise en forme du titre lui-même */
.TitreCategorie h2 {
margin:0; /* le titre a des marges par défaut, pour éviter de 'casser' nos réglages, on remet à zéro ici */
text-align: center; /*alignement du texte par rapport au bloc qui le contient */
letter-spacing:2px; /* espacement entre les lettres */
font-variant:small-caps; /* texte en petites majuscules */
color:#FEFEFE; /* couleur du texte */
font-family: Geneva;
font-size:16px;
}
/* Largeur de la cellule du nombre de sujets */
.NbTopics { width:80px; }
/* Largeur de la cellule du nombre de messages */
.NbPosts { width:100px; }
/* Largeur de la cellule du dernier message posté */
.LastPost { width:150px; }
.blocProfil {
padding:5px; /* une marge entre la bordure et l'intérieur du bloc */
margin:5px; /* une marge entre la bordure et l'extérieur du bloc */
border:1px inherit #7FC6BC; /* la bordure */
background:#333333; /*une couleur de fond */
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
text-align: center;
}
.forumline {
-webkit-border-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius: 3px;
-moz-border-radius-bottomright: 3px;
border-radius: 3px;
border-bottom-right-radius: 40px;
background-image: none !important;
background-color: rgba(1, 0, 0, 1) !important;
border: 4px inherit rgba(102, 161, 255, 1);
}
.body {
background-position: top;
background-attachment: scroll;
background-image:url(http://i56.servimg.com/u/f56/18/74/62/13/pripya10.jpg)!important;
}
.bodylinewidth {
margin-bottom: 15px;
margin-top: 80px;
}
.bodyline {
background-color: rgba(0, 0, 0, 0.8);
}
td.row1, td.row2, td.row3, td.row3Right {
background-color: #000000;
}
a:hover {
color: #7FC6BC;
}
td.row3 {
background-color: #000000;
}
.bouton-profil {
cursor: pointer; /* curseur au survol */
margin: 2px 0; /* petite marge en haut et en bas */
padding: 2px; /* espacement entre le texte et la bordure */
text-align: center; /* centrage du texte dans le bloc */
/* -- mise en forme -- */
background: #333333; /* couleur de fond */
border: 3px ridge #7FC6BC; /* bordure */
color: #FEFEFE; /* couleur texte */
font-size: 11px; /* taille du texte */
font-variant: small-caps; /* effet petites majuscules */
font-weight: bold; /* effet gras */
letter-spacing: 2px; /* espace entre les lettres */
-webkit-border-radius: 40px;
-webkit-border-bottom-right-radius: 40px;
-moz-border-radius: 40px;
-moz-border-radius-bottomright: 40px;
border-radius: 40px;
border-bottom-right-radius: 40px;
}
.profil-cache {
border: 1px dashed #000000;
margin: 2px 0;
padding: 2px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
#accueil {
width:100%;
margin:auto;
}
.bienvenue {
float:right;
width:45%; /*Taille sur la PA*/
margin:2px;
}
.staff {
float:left;
width:53%;/*Taille sur la PA*/
}
.creation {
clear:both;
float:left;
width:33%;/*Taille sur la PA*/
margin:2px;
}
.forum {
float:left;
width:29%;/*Taille sur la PA*/
margin:10px;
}
.partenaires {
float:right;
width:30%;/*Taille sur la PA*/
margin:10px;
}
.partenaire {
float:right;
width:80%;/*Taille sur la PA*/
margin:10px;
}
.accueilh2 {
display:block;
border-bottom:3px solid #7FC6BC; /*Couleur des barres*/
text-align:right;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
color:#FEFEFE; /*Couleur des titres*/
}
.accueiltexte {
overflow: auto;
width:70%;
margin:auto;
font-size:11px;
font-family:"Verdana", cursive;
text-align:justify;
color:#FEFEFE; /*Couleur des textes*/
}
.infobulle{
position: relative;
z-index: 0;}
.infobulle:hover{
background-color: transparent;
z-index: 50;}
.infobulle span{
position: absolute;
background-color: #7FC6BC; /*Couleur de l'infobulle*/
padding: 5px;
left: -1000px;
visibility: hidden;
}
.infobulle span img{
border: 2px;
padding: 5px;}
.infobulle:hover span{
visibility: visible;
top: 70px;
left: 35px;
width: 100px ;
color:#FEFEFE; /*Couleur des textes*/
border: 1px #000000 dotted; /*Bordure*/
}
#chatbox_header .cattitle strong {
visibility: hidden;
}
#chatbox_header
.cattitle:before {
content: "Chatty the box. ";
}
/* ------------- FICHE PV-RPG
Créee par Orange de CSSActif (http://www.css-actif.com)
Merci de conserver cette mention par respect ----------- */
.cssactif_fiche, .cssactif_pv { /* Fond de la fiche */
background-color: #1D1D1D; /* Couleur de fond */
-webkit-border-radius: 20px; /* Bordures arrondies (voir: http://border-radius.com/) */
-moz-border-radius: 20px;/* Bordures arrondies (voir: http://border-radius.com/) */
border-radius: 20px;/* Bordures arrondies (voir: http://border-radius.com/) */
-webkit-box-shadow: 0px 0px 10px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
-moz-box-shadow: 0px 0px 10px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
box-shadow: 0px 0px 10px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
}
div.cssactif_fiche_header { /* En-tête avec image de fond */
background-repeat: none; /* Empêche la répétition de l'image du header */
background-position: top center; /* Postionne l'image du header en haut, au center */
height: 150px; /* Donne la hauteur en px du header, l'image de header devrait être même hauteur ou plus grande */
border-bottom: 15px double #4BB5C1; /* Bordure au bas du header: ÉPAISSEURpx STYLE #COULEUR (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#border-style) */
/* Bordures supérieures arrondies (voir: http://border-radius.com/) */
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
td.cssactif_pv_header { /* En-tête avec image de fond */
background-repeat: no-repeat; /* Empêche la répétition de l'image du header */
background-position: top center; /* Postionne l'image du header en haut, au center */
width: 200px; /* Donne la largeur de la bannière latérale (Largeur de l'avatar) */
height: 320px; /* Donne la hauteur en px du header, l'image de header devrait être même hauteur ou plus grande (Hauteur de l'avatar) */
border-right: 15px double #4BB5C1; /* Bordure côté du header: ÉPAISSEURpx STYLE #COULEUR (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#border-style) */
/* Bordures gauche arrondies (voir: http://border-radius.com/) */
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
text-shadow: 1px 1px 0px #000; /* Ombre du texte */
font-size: 10px; /* Taille du texte: TAILLEpx */
}
div.cssactif_pv_titre h1, div.cssactif_fiche_titre h1 { /* Titre prénoms & nom */
font-family: Georgia, "Times New Roman", Times, serif; /*Police du titre (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#forme_caracteres) */
font-size: 32px; /* Taille du texte: TAILLEpx */
text-shadow: 1px 1px 0px #000; /* Ombre du texte */
color: #00818A; /* Couleur du texte */
margin: 0; /* Supprime la marge par défaut de l'élément h1 */
text-align: right; /* Aligne le titre à droite */
text-transform: uppercase; /* Met le titre en majuscules */
}
div.cssactif_fiche_titre, div.cssactif_pv_titre { /* Titre + feat */
/* Positionne le titre "à cheval" sur la bordure */
position: relative;
top: -28px;
text-align: right; /* Aligne le texte à droite */
padding-right: 20px; /* Défifine une marge interne */
color: #CCCCCC; /* Couleur du feat */
}
.cssactif_pv h2, div.cssactif_fiche h2 { /* Sous-titres "Identité", "Opinions" etc. */
background-color: #111111; /* Couleur du fond des sous-titres */
border-color: #4BB5C1; /* Couleur de la bordure */
border-width: 1px 0px; /* Taille de la bordure: HAUT & BAS GAUCHE & DROITE */
border-style: solid; /* Style de la bordure */
-webkit-box-shadow: 0px 0px 3px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
-moz-box-shadow: 0px 0px 3px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
box-shadow: 0px 0px 3px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
text-align: center; /* Aligne le titre au centre */
text-transform: uppercase; /* Met le titre en majuscules */
font-family: Georgia, "Times New Roman", Times, serif; /*Police du titre (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#forme_caracteres) */
color: #7FC6BC; /* Couleur du titre */
margin: 0; /* Supprimer marge */
font-size: 20px; /* TAILLE DU TEXTE: TAILLEpx */
font-weight: normal; /*Épaisseur du texte */
text-shadow: 1px 1px 0px #000; /*Ombre du texte */
letter-spacing: 5px; /* Espacement des caractères */
}
.cssactif_pv_content, .cssactif_fiche_content { /* Contenu */
padding: 10px; /* Marge interne */
text-align: justify; /* Justifie le texte */
text-shadow: 1px 1px 0px #000; /*Ombre du texte */
}
.cssactif_pv em, .cssactif_fiche em { /* Libellés */
font-family: Georgia, "Times New Roman", Times, serif; /*Police du titre (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#forme_caracteres) */
color: #7FC6BC; /* Couleur du titre */
font-style: normal;
text-transform: uppercase;
}
div.bubblenew {
position: relative;
cursor:pointer; /*donne au curseur la forme de petite main, comme sur un lien*/
display: inline-block; /*Place les icones un à côté de l'autre */
margin: 10px; /* marge entre les icones */
border: 1px solid #333; /* bordure des icones */
-webkit-box-shadow: 0px 0px 5px 0px #000000; /* Ombre de l'icone (voir http://css3generator.com/ choix "Box-shadow") */
-moz-box-shadow: 0px 0px 5px 0px #000000; /* Ombre de l'icone (voir http://css3generator.com/ choix "Box-shadow") */
box-shadow: 0px 0px 5px 0px #000000; /* Ombre de l'icone (voir http://css3generator.com/ choix "Box-shadow") */
}
div.bubblenew img {
height: 50px;
width: 50px;
}
div.bubblenew div{
display: none; /* ceci masque l'infobulle */
}
div.bubblenew:hover {
background: none; /* correction d'un bug IE */
z-index: 500; /* on définit une valeur pour l'ordre d'affichage */
}
div.bubblenew:hover div{
display: block; /* ceci affiche l'infobulle */
position: absolute;
width: 300px; /* Largeur de l'infobulle */
top: 50px; /* on positionne notre infobulle */
left: 0px;
background-color: #1D1D1D; /* Couleur de fond */
-webkit-border-radius: 20px; /* Bordures arrondies (voir: http://border-radius.com/) */
-moz-border-radius: 20px;/* Bordures arrondies (voir: http://border-radius.com/) */
border-radius: 20px;/* Bordures arrondies (voir: http://border-radius.com/) */
-webkit-box-shadow: 0px 0px 10px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
-moz-box-shadow: 0px 0px 10px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
box-shadow: 0px 0px 10px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
border-left: 6px double #4BB5C1;
padding: 10px; /* marge interne de l'infobulle */
}
/* ------------- FIN FICHE PV-RPG */ autre soucis, je n'arrive pas à changer la couleur des chatbox et autre. Je n'arrive pas à savoir ce qu'il faut faire... Pour l'instant c'est gris clair mais j'aimerais que ça soit noir. dans la meme lignée... T.T (c'est pas fini) En mode Hover, les titres ne se mettent pas en bleu mais en rouge, j'ai pas là moindre idée de comment faire (une partie se met en bleu mais l'autre reste en rouge.) voici l'adresse du forum: Secret-circles merci d'avance! |
Dernière édition par Vilebrequin le Mar 25 Fév 2014, 13:46, édité 1 fois | |
| | | | Nihil 
{ Modérateur }
Messages : 1216
| Bonjour Vilebrequin  Ne t'inquiète pas, c'est normal d'avoir des questions, et puis après tout le forum ne meurt pas totalement juste grâce aux demandes d'aides ^^. Allez, attaquons nous à tes petits problèmes de code
- Citation :
- Le premier est que je n'arrive pas à mettre une image de fond dans mon forum...
En regardant ton CSS, je pense que tu parles de ce code ci qui ne marche pas : - Citation :
-
- Code:
-
.body {
background-position: top;
background-attachment: scroll;
background-image:url(http://i56.servimg.com/u/f56/18/74/62/13/pripya10.jpg)!important;
} Si oui, alors c'est normal, tu as simplement mis un point devant "body". Quand il y a un point, cela signifie que c'est une class. Or ici, tu veux styliser la balise body directement. Il faut donc remplacer ".body" par "body" tout simplement 
- Citation :
- autre soucis, je n'arrive pas à changer la couleur des chatbox et autre
Pour ce qui est de la chatbox, je t'invite à chercher "chatbox" dans la barre de recherche de CSSActif, il y a des des tutoriels / code tout faits pour t'aider
- Citation :
- En mode Hover, les titres ne se mettent pas en bleu mais en rouge, j'ai pas là moindre idée de comment faire (une partie se met en bleu mais l'autre reste en rouge.)
Pourrais tu me faire une screen du problème, je ne suis pas sûre de comprendre de quelles parties tu évoques exactement... Si je comprends bien, tu veux que au survol les titres de forum soient de la même couleur que les liens au survol ? Si oui, il te suffit de prendre cette partie là de ton CSS : - Code:
-
a:hover {
color: #7FC6BC;
} Et de la modifier pour obtenir ceci : - Code:
-
a:hover, a.forumlink:hover {
color: #7FC6BC;
} En ajoutant la virgule + mon sélecteur, maintenant la couleur de texte s'appliquera aux liens survolés ET aux liens de forum survolés. Sinon plus simplement tu peux vérifier quelles sont les couleurs mises dans le panneau d'administration pour les liens  PA > Affichage > Images et Couleurs > Couleurs -> Couleur du Lien survolé | | |
| | | | Vilebrequin
{ Membre }
Messages : 16
| Merci pour les bons conseils. J'ai encore une question cependant...
Est-ce que c'est normale que le background de mon forum se mette aussi dans ma cb...? °-°
En tout cas merci encore. :Dc'est la troisieme fois que tu me sors des soucis. *donne un cookie virtuel.* | | |
| | | | Nihil
{ Modérateur }
Messages : 1216
| - Citation :
- Est-ce que c'est normale que le background de mon forum se mette aussi dans ma cb...? °-°
L'image que tu as définies dans le css pour le body devient la même pour la chatobx ? J'avais déjà rencontré ce problème mais je n'arrive plus a me souvenir d'où ça venait ><. Essaye de mettre ceci dans ton CSS (en changeant par la couleur que tu veux) : - Code:
-
body.chatbox {
background: red;
} | | |
| | | | Vilebrequin
{ Membre }
Messages : 16
| J'ai essayé et ça ne marche pas. Rien ne bouge.^^" | | |
| | | | Nihil
{ Modérateur }
Messages : 1216
| Ah mais je suis bête, je pense savoir d'où vient le problème Dans ton code CSS pour le background du body, tu as un !important à un endroit : - Code:
-
background-image:url(http://i56.servimg.com/u/f56/18/74/62/13/pripya10.jpg)!important; } Il faut retirer le !important, c'est la cause du problème. En effet !important est utilisé pour "surpasser" les autres propriétés CSS pour la même propriété (background) qui pourraient être appliquées. Du coup, cela "surpasse" le fond normal de la chatbox ^^ (en effet, à la base la chatbox est une page elle aussi, avec elle aussi un body). | | |
| | | | Vilebrequin
{ Membre }
Messages : 16
| Ah oui! Ca marche! Merci! *l'ensevelie sous une montagne de cookie.* | | |
| | | | Nihil
{ Modérateur }
Messages : 1216
| *meurt tuée par les cookies* N'hésite pas à rajouter la mention "résolu" dans le titre dans ton message | | |
| | | | Vilebrequin
{ Membre }
Messages : 16
| Ah oui! Je fais ça toute suite. é_è non ne meurt pas. | | |
| | | | Contenu sponsorisé
| | | | | | | Problème de background [résolu] | |
|
Sujets similaires | |
|
| | Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|
![Problème de background [résolu] Bouton_active](https://2img.net/h/theme3.cssactif.com/ui/bouton_active.png)
![Problème de background [résolu] Bouton_hover](https://2img.net/h/theme3.cssactif.com/ui/bouton_hover.png)
![Problème de background [résolu] Fb-hover](https://2img.net/h/theme3.cssactif.com/facebook/fb-hover.png)
![Problème de background [résolu] Fb-active](https://2img.net/h/theme3.cssactif.com/facebook/fb-active.png)
![Problème de background [résolu] Logo](https://2img.net/h/theme3.cssactif.com/logo.png){kind=logo}
