Petit problème au niveau du CSS.

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

Résolu Petit problème au niveau du CSS.

Message par Leck Demonis le Mar 4 Déc 2012 - 22:02

Bonjour,
Voila j'ai un souci, je suis un débutant complet en codage, que ce sois css ou html. J'arrive cela dit à les lires et comprendre a peu près. Mais là ça me dépasse totalement.
J'ai voulu grace au css3 intégrer deux fond. Le premier un dégradé de couleur ce qui ne pose pas de souci. Le deuxième une image qui doit faire toute la longueur du forum (et être complété par le fond) et c'est la que ça coince.
Car je ne sais pas comment m'y prendre.

Voici le code du "gardient" :
Code:
background-image: linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
background-image: -o-linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
background-image: -moz-linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
background-image: -webkit-linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
background-image: -ms-linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);

background-image: -webkit-gradient(
   linear,
   left bottom,
   left top,
   color-stop(0.28, rgb(81,81,98)),
   color-stop(0.67, rgb(10,10,16))
);

et la le code de l'image

Code:
http://img4.hostingpics.net/pics/260004OnepieceRPGfond.png

J'ai essayer plusieurs "scénario" que j'ai vu sur le net mais aucun ne correspond, sois le souci est encore plus grand, sois ça ne donne pas le résulta que je veux.


Dernière édition par Leck Demonis le Mer 5 Déc 2012 - 19:37, édité 1 fois

Leck Demonis
Nouveau membre

Messages : 13
Inscrit(e) le : 04/12/2012

http://one-piece-rebirth.forumactif.com/
Leck Demonis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit problème au niveau du CSS.

Message par Hiroyuko le Mer 5 Déc 2012 - 8:12

Bonjour,

Je suis sur mon iPhone, je n'arriverai pas a te donner le code mais je t'explique tout de même.

Dans ton CSS, ne mets pas la propriété "background-image" mais juste "background". Ensuite, après les deux points, mets ton image, suivi d'une virgule et de ton dégradé puis ferme ta commande. Ça a fonctionné chez moi.
Bien sûr tu dois le faire pour chaque navigateur, comme dans ton code actuel.

Edit : Source

Hiroyuko

Hiroyuko
****

Masculin
Messages : 355
Inscrit(e) le : 04/04/2006

http://quidditch-game.rpg-board.net/
Hiroyuko a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit problème au niveau du CSS.

Message par Leck Demonis le Mer 5 Déc 2012 - 12:03

Code:
body {
  background-attachment:scroll;
        background: http://img4.hostingpics.net/pics/260004OnepieceRPGfond.png,linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
        background: -o-linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
        background: -moz-linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
        background: -webkit-linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
        background: -ms-linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
       
        background-image: -webkit-gradient(
          linear,
          left bottom,
          left top,
          color-stop(0.28, rgb(81,81,98)),
          color-stop(0.67, rgb(10,10,16))
        );
}

J'ai suivi ta description et j'ai compris ça. Mais sa ne donne absolument rien (un fond blanc sans image comme si aucun code n'était la).

j'ai également essayer une version background-image (au cas ou) et toujours un fond blanc sans image, sans dégradé. (mon fond de base n'a pas de couleur.)

Je tien à préciser que je n'ai rien touché aux templates du forum ainsi qu'au code css mise à part ce code.


Dernière édition par Leck Demonis le Mer 5 Déc 2012 - 12:16, édité 1 fois

Leck Demonis
Nouveau membre

Messages : 13
Inscrit(e) le : 04/12/2012

http://one-piece-rebirth.forumactif.com/
Leck Demonis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit problème au niveau du CSS.

Message par Hiroyuko le Mer 5 Déc 2012 - 12:12

En fait tu te trompes pour l'image, il faut écrire comme ceci :
Code:
body{
background:url(http://img4.hostingpics.net/pics/260004OnepieceRPGfond.png), linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
background:url(http://img4.hostingpics.net/pics/260004OnepieceRPGfond.png), -o-linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
background:url(http://img4.hostingpics.net/pics/260004OnepieceRPGfond.png), -moz-linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
background:url(http://img4.hostingpics.net/pics/260004OnepieceRPGfond.png), -webkit-linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
background:url(http://img4.hostingpics.net/pics/260004OnepieceRPGfond.png), -ms-linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
}

Pour l'image il faut mettre "url()".

Hiroyuko

Hiroyuko
****

Masculin
Messages : 355
Inscrit(e) le : 04/04/2006

http://quidditch-game.rpg-board.net/
Hiroyuko a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit problème au niveau du CSS.

Message par Leck Demonis le Mer 5 Déc 2012 - 12:34

ça ne fonctionne toujours pas. Et sa l’élargie le forum. (le fond du forum est toujours blanc.)

Je sais pas si ça aide mais je suis en PhpBB3. (et sa me dérange pas de changé étant donner que je n'ai pas de design mit en place pour le moment)

PS : D'ailleurs autre problème, je sais pas si c'est lié, mais quand j'actualise la page tout bug rien n'est plus a sa place c'est laid etc. il faut que j'actualise 2 ou 3 fois pour retrouvé le design de base du forum (donc l'actuel).

Leck Demonis
Nouveau membre

Messages : 13
Inscrit(e) le : 04/12/2012

http://one-piece-rebirth.forumactif.com/
Leck Demonis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit problème au niveau du CSS.

Message par Hiroyuko le Mer 5 Déc 2012 - 13:19

Je pense que j'ai dû oublier les ", donc entoure tes images par des guillemets.
Code:
url("lien_image")
Dis-moi quoi Wink

Hiroyuko

Hiroyuko
****

Masculin
Messages : 355
Inscrit(e) le : 04/04/2006

http://quidditch-game.rpg-board.net/
Hiroyuko a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit problème au niveau du CSS.

Message par Leck Demonis le Mer 5 Déc 2012 - 13:57

Fond de forum blanc...
Voici le lien : http://onepiecerpg.creer-forum.com/
Comment ça tu pourras constaté que rien ne ce fait :s.

Leck Demonis
Nouveau membre

Messages : 13
Inscrit(e) le : 04/12/2012

http://one-piece-rebirth.forumactif.com/
Leck Demonis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit problème au niveau du CSS.

Message par Hiroyuko le Mer 5 Déc 2012 - 14:22

Je te croyais sans problème quand tu me le disais.

Sur mon forum, mon code gradient fonctionne sur les catégories. Par contre j'ai testé ton code sur mon forum test et effectivement ça ne marche pas.
Je me demande s'il est applicable sur le body, même si ça me parait bizarre que ça n'aille pas. Je vais faire des tests et je te tiens au courant.

Hiroyuko

Hiroyuko
****

Masculin
Messages : 355
Inscrit(e) le : 04/04/2006

http://quidditch-game.rpg-board.net/
Hiroyuko a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit problème au niveau du CSS.

Message par Leck Demonis le Mer 5 Déc 2012 - 14:29

Merci beaucoup pour ton aide [même si elle n’aboutit pas à une solution par la suite].

Leck Demonis
Nouveau membre

Messages : 13
Inscrit(e) le : 04/12/2012

http://one-piece-rebirth.forumactif.com/
Leck Demonis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit problème au niveau du CSS.

Message par Hiroyuko le Mer 5 Déc 2012 - 15:16

Alors je voulais te dire que j'ai essayé mon code avec ton image sur mon forum "principal" et ça marche niquel (juste que j'ai gardé mes couleurs). J'ai copié et collé ce code sur mon forum test et là... il ne s'est rien passé, ça n'a pas marché. Donc je ne comprends pas pourquoi sur l'un de mes forums ça fonctionne et pas sur l'autre.

Je continue à chercher et te tiens au courant, mais si quelqu'un a une idée...


EDIT : Dis-moi, dans l'option "optimiser votre CSS", tu as coché "non"? apparemment ce serait ça qui poserait problème, mais je n'en suis pas certain à 100%

Hiroyuko

Hiroyuko
****

Masculin
Messages : 355
Inscrit(e) le : 04/04/2006

http://quidditch-game.rpg-board.net/
Hiroyuko a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit problème au niveau du CSS.

Message par Leck Demonis le Mer 5 Déc 2012 - 15:34

En retirant "optimiser votre CSS" l'image apparait, mais elle ce duplique (mosaique), n'est pas centrer et ce répète.

Avec le code, je place comment et où le code suivant ?

Code:
background-position: center;
background-attachment: scroll;
background-repeat: no-repeat;

Leck Demonis
Nouveau membre

Messages : 13
Inscrit(e) le : 04/12/2012

http://one-piece-rebirth.forumactif.com/
Leck Demonis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit problème au niveau du CSS.

Message par Hiroyuko le Mer 5 Déc 2012 - 15:39

En fait, il te suffit d'écrire ces choses après ton image. C'est-à-dire;
Code:
url(IMAGE) no-repeat center scroll

Normalement ça devrait bien te le faire Wink

Hiroyuko

Hiroyuko
****

Masculin
Messages : 355
Inscrit(e) le : 04/04/2006

http://quidditch-game.rpg-board.net/
Hiroyuko a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit problème au niveau du CSS.

Message par Leck Demonis le Mer 5 Déc 2012 - 15:45

Code:

body{
  background: url("http://img4.hostingpics.net/pics/260004OnepieceRPGfond.png") no-repeat, center, scroll;
        background:url("http://img4.hostingpics.net/pics/260004OnepieceRPGfond.png"), linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
        background:url("http://img4.hostingpics.net/pics/260004OnepieceRPGfond.png"), -o-linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
        background:url("http://img4.hostingpics.net/pics/260004OnepieceRPGfond.png"), -moz-linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
        background:url("http://img4.hostingpics.net/pics/260004OnepieceRPGfond.png"), -webkit-linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
        background:url("http://img4.hostingpics.net/pics/260004OnepieceRPGfond.png"), -ms-linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
        }
Voila ce que j'ai mit et sur mon forum tu as le résulta. (t’inquiète pas, je modifierait pas sans que tu es vu)

Leck Demonis
Nouveau membre

Messages : 13
Inscrit(e) le : 04/12/2012

http://one-piece-rebirth.forumactif.com/
Leck Demonis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit problème au niveau du CSS.

Message par Hiroyuko le Mer 5 Déc 2012 - 15:56

Essaye ça :
Code:
  background: url("http://img4.hostingpics.net/pics/260004OnepieceRPGfond.png") no-repeat center fixed;
        background:url("http://img4.hostingpics.net/pics/260004OnepieceRPGfond.png") no-repeat center fixed, linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
        background:url("http://img4.hostingpics.net/pics/260004OnepieceRPGfond.png") no-repeat center fixed, -o-linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
        background:url("http://img4.hostingpics.net/pics/260004OnepieceRPGfond.png") no-repeat center fixed, -moz-linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
        background:url("http://img4.hostingpics.net/pics/260004OnepieceRPGfond.png") no-repeat center fixed, -webkit-linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);
        background:url("http://img4.hostingpics.net/pics/260004OnepieceRPGfond.png") no-repeat center fixed, -ms-linear-gradient(bottom, rgb(81,81,98) 28%, rgb(10,10,16) 67%);

Tu dois mettre les attributs après chaque image (j'ai corrigé). Et je t'ai fixé le fond, sinon tu perds le bas. Sinon tu mets "scroll" à la place de "fixed".

Hiroyuko

Hiroyuko
****

Masculin
Messages : 355
Inscrit(e) le : 04/04/2006

http://quidditch-game.rpg-board.net/
Hiroyuko a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit problème au niveau du CSS.

Message par Leck Demonis le Mer 5 Déc 2012 - 16:05

Yeh ! ça avance, mais le résulta est pas top top XD.
Je viens de comprendre que je doit ajouté cette image"http://img15.hostingpics.net/pics/210530suitefond.png" en repeat-y a la suite de celle que j'ai deja. Et que je doit ajouté la couleur #515162 après mon dégradé pour que ça face "jolie". Malheureusement la aussi jsuis bloqué (tu as saisi que j'avais que des notions a comprendre le codage et non pas a le bidouillé ^^").

Leck Demonis
Nouveau membre

Messages : 13
Inscrit(e) le : 04/12/2012

http://one-piece-rebirth.forumactif.com/
Leck Demonis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit problème au niveau du CSS.

Message par Hiroyuko le Mer 5 Déc 2012 - 16:15

Le problème c'est que tu ne peux pas (à ma connaissance) mettre autant d'images et de dégradés. Tu peux au maximum faire une image + un dégradé, ou deux dégradés différents (je ne sais pas si on sait commencer à une distance donnée...) mais deux images appliquée sur le body, c'est pas possible me semble-t-il.

Par contre, au lieu de te casser la tête concernant les deux dégradés, enlève le dégradé de ton image (donc les deux côtés) et tu gardes le code du dégradé. Je pense que tu auras déjà un meilleur effet.

Par contre, le problème c'est pour le bas de l'image qui ne sera pas à la taille de tous les écrans (si ton image est trop petite par exemple...)

Essaye la première idée (modifier ton image) pour le dégradé. Et dis-moi ce que ça donné Wink

Hiroyuko
****

Masculin
Messages : 355
Inscrit(e) le : 04/04/2006

http://quidditch-game.rpg-board.net/
Hiroyuko a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit problème au niveau du CSS.

Message par Leck Demonis le Mer 5 Déc 2012 - 16:25

Au niveau de l'image elle même sa rend mieux. Merci du conseil. Mais pour le reste maintenant c'est compliquer.
En gros je veux avoir un résulta égale a cette image : http://img15.hostingpics.net/pics/596101fondgant.png
Mais en codage sur mon forum. j'ai déjà vu sur un autre forum que c'était possible comme effet.

Leck Demonis
Nouveau membre

Messages : 13
Inscrit(e) le : 04/12/2012

http://one-piece-rebirth.forumactif.com/
Leck Demonis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit problème au niveau du CSS.

Message par Hiroyuko le Mer 5 Déc 2012 - 16:37

Pourrais-tu me montrer le forum en question par MP que j'aille voir?

Car il se pourrait que l'image soit en fait mise en bannière, avec une image de fond répétée sur le body non?

Pour ma part, j'ai un fond blanc en allant sur ton forum, en dessous de ton image (alors que sur mon test c'était nickel). As-tu ajouté/modifié du code que je t'ai donné?

Sinon ajoute ceci au code que je t'ai donné pour essayer :
Code:
background-image:url(image_à_répéter) repeat-y center;
J'ai testé chez moi, ça a l'air de fonctionner...

EDIT : En fait non, c'est juste ton image de base qui est très haute ^^
Je vais rentrer chez moi là, j'essaye de revenir t'aider quand j'y suis Wink
Et je crois avoir la solution ^^ Je viens de repenser à un autre des forums que j'ai fait, je verrai dès que je rentre pour te passer le code Very Happy


Hiroyuko

Hiroyuko
****

Masculin
Messages : 355
Inscrit(e) le : 04/04/2006

http://quidditch-game.rpg-board.net/
Hiroyuko a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit problème au niveau du CSS.

Message par Leck Demonis le Mer 5 Déc 2012 - 16:44

J'ai ajouté ce que tu m'as dit ça ne fonctionne pas.
Sinon oui j'avais ajouté des truck, mais je les aient supprimé (tu peux voir le résulta sur mon forum avec ton codage sans modification.)

Le MP avec le lien du forum va être envoyer dans quelque instant.

Edite : Ok c'est noté, merci de ton aide Smile. je patiente.

Leck Demonis
Nouveau membre

Messages : 13
Inscrit(e) le : 04/12/2012

http://one-piece-rebirth.forumactif.com/
Leck Demonis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit problème au niveau du CSS.

Message par Hiroyuko le Mer 5 Déc 2012 - 19:12

Me revoilà. Merci pour le lien.



Hiroyuko

Hiroyuko
****

Masculin
Messages : 355
Inscrit(e) le : 04/04/2006

http://quidditch-game.rpg-board.net/
Hiroyuko a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit problème au niveau du CSS.

Message par Leck Demonis le Mer 5 Déc 2012 - 19:39

Dernier poste pour remercier Hiroyuko pour ses bons conseils.

Leck Demonis
Nouveau membre

Messages : 13
Inscrit(e) le : 04/12/2012

http://one-piece-rebirth.forumactif.com/
Leck Demonis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit problème au niveau du CSS.

Message par Hiroyuko le Mer 5 Déc 2012 - 19:41

Pas de problème.

Bonne soirée,

Hiroyuko

Hiroyuko
****

Masculin
Messages : 355
Inscrit(e) le : 04/04/2006

http://quidditch-game.rpg-board.net/
Hiroyuko a été remercié(e) par l'auteur de ce sujet.

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


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