Geckozone

Je salue bien bas la communauté.
Suis tombé sur une page intéressante : https://developer.mozilla.org/fr/Utilis ... rad%C3%A9s
et j'ai tout de suite voulu appliquer ces chouettes dégradés sur quelques unes de mes pages ! En particulier celui-ci

background: -moz-linear-gradient(left, red, orange, yellow, green, blue);

mais en vertical (en tapant top au lieu de left)
mais ça ne marche pas ???
Si qqun peut dire pourquoi, il sera le bienvenu.
Jean

Bonsoir,

Chez moi ça marche. Une faute de frappe ?
Qu'as-tu fais exactement ? On peut voir dans le contexte du CSS ?

Bonjour Olivier et merci pour ta réponse.
Voici un bout de mon code CSS, la ligne en rouge pour avoir un arc-en-ciel dans le sens vertical (au lieu de gauche à droite comme il est proposé dans la page https://developer.mozilla.org/fr/Utilis ... rad%C3%A9s) :

body a{
text-decoration: none;}
body a img{
border:none;}
body{
background: -moz-linear-gradient(top, red, orange, yellow, green, blue);
}
Firefox m'affiche très bien le dégradé arc-en-ciel de gauche à droite mais voici ce qu'il me donne avec le code ci-dessus :

scan_06.JPG

Pour info j'ai updater mon Firefox vers la dernière version proposée, 3.6.12 [mais bizarrement menu >>>> ? À propos de Mozilla Firefox m'affiche toujours la 3.6.3]
Jean

Il manque pas un
background-repeat:no-repeat;

?

Que non, ça ne fait rien !
Mais j'ai trouvé quand même une façon de faire la même chose : Dessiner un bel arc-en-ciel avec les sept couleurs dimensions 3 pixels x la hauteur de son body. Enregistrer : arcenciel.jpg dans le dossier images.
Et coder le CSS :
body{
background-image: url("images/arcenciel.jpg");
}
et on a un bel arcenciel en fond de page. C'est pas terrible terrible mais cha fait toujours plaisir !
Jean

je marque le sujet résolu !

Hmmm, j'arrive à qqc de correct en spécifiant width: et float: pour body :

Code : Tout sélectionner

      body {
        background: background: -moz-linear-gradient(top, red, orange, yellow, green, blue); 
        width: 100%;
        float: left;
      }

Code complet du test :

Code : Tout sélectionner

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  <head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
    <title>Arc-en-ciel</title>
    <style type="text/css">
      body {
        background: grey;
        /*background-repeat: no-repeat;*/
        width: 100%;
        /*height: 750px;*/
        float: left;
      }
      div {
        width: 45%;
        height: 250px;
        clear: both;
        /*float: left;*/
        margin: 10px;
        border: 1px solid black;
        padding: 5px;
      }
      h1, h2 { text-align: center; }
      .top { background: -moz-linear-gradient(top, red, orange, yellow, green, blue); }
      .right { background: -moz-linear-gradient(right, red, orange, yellow, green, blue); }
      .bottom { background: -moz-linear-gradient(bottom, red, orange, yellow, green, blue); }
      .left { background: -moz-linear-gradient(left, red, orange, yellow, green, blue); }
    </style>
  </head>
  <body class="top">
    <h1>Création d'un fond arc-en-ciel</h1>
    <div class="top">
      <h2>De haut en bas…</h2>
      <p>Ça marche pour le <em>body</em> en spécifiant <em>width: 100%;</em> et <em>float: left;</em>.</p>
    </div>
    <div class="right">
      <h2>De droite à gauche…</h2>
    </div>
    <div class="bottom">
      <h2>De bas en haut…</h2>
    </div>
    <div class="left">
      <h2>De gauche à droite…</h2>
    </div>
  </body>
</html>

Mais je ne suis pas sûr que ce soit une solution « universelle »…

Le code suivant (dérivé de celui de FF_Olivier) semble fonctionner :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Arc-en-ciel</title>
    <style type="text/css">
      html {
        height: 100%;
        background-repeat:no-repeat;
        background-image: -moz-linear-gradient(top, red, orange, yellow, green, blue);
      }
    </style>
  </head>
  <body>
    <h1>Page avec un fond arc-en-ciel</h1>
    <p>blabla</p>
  </body>
</html>

Manifestement la hauteur du gradient est celle de l'élément sur lequel il est défini.
Sur l'exemple de 11:48, le gradient était probablement défini sur le <body>, celui-ci ne contenant qu'un seul paragraphe, sa hauteur était de quelques dizaines de pixels, d'où le gradient tout petit. Ici j'ai défini la hauteur du <html> à 100% (= tout le viewport), et le gradient s'adapte à cette hauteur.

FF_Olivier a écrit :Mais je ne suis pas sûr que ce soit une solution « universelle »…

De toutes façons c'est un "-moz-" donc pas universel du tout.

Bjr Olivier, Calimo.
OK merci, j'ai apprécié. Ai supprimé le no-repeat dans le code de Calimo et ça marche sans.
Mais je n'ai pas pu appliquer vos codes à ma page. Et j'ai finalement trouvé une solution perso que je transmet :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-utf8" />
	<title>De Tout et de Rien mais pas grand chose de Bien ?</title>
	<style type="text/css">
	body{background: -moz-linear-gradient(top, red, orange, yellow, green, blue); background-attachment: fixed;}

	#mapage{	position: absolute; width: 1000px; height: 1345px; top: 15px; left: 50%; margin-left: -502px; border: 8px solid #e3bf3d; background: #3c007e;
	font-family: rockwell, georgia, verdana, arial, "MS sans serif";}
	</style>
</head>
<body class="soleil">
<div id="mapage">
</div>
</body>
</html>

Merci pour votre intérêt
@+ Jean

jeanmarever a écrit :
Code : Tout sélectionner
	#mapage{	position: absolute; width: 1000px; height: 1345px; […]

NON !
En fixant la taille de la page en pixels, ça fonctionne bien sur ton écran, mais qu'en sera-t-il chez tes visiteurs ? Tu peux être sûr qu'ils n'auront pas la même résolution, la même taille de police… et que l'affichage sera horrible chez pas mal d'entre eux

La solution est de fixer la hauteur du <html> à 100% comme je l'ai fait précédemment, et d'appliquer le gradient sur celui-ci.

PS : quand tu définis une font-family, n'oublie pas de toujours terminer par une police générique ("serif", "sans-serif" ou "monospace") pour les visiteurs qui n'ont aucune des polices que tu as spécifiées.

Bonsoir calimo.
Ok j'ai bien compris et je vais me servir de ton code (pour mon backgrond primaire), merci.
Pour les dimensions de ma page (tu veux parler du width), j'avais pensé en trouvant ces infos : http://www.libstat.com/pages/resolution.htm qu'en codant une largeur de ma page à 980 par exemple (plutot que 1000 !) je pouvais satisfaire le plus grand nombre (80 %) des moniteurs. On ne peut satisfaire tout le monde ??
Ou alors comment faire ? Peux-tu encore me répondre ?
C'est en écoutant les autres qu'on peut s'améliorer plus rapidement !
Jean

jeanmarever a écrit :je pouvais satisfaire le plus grand nombre (80 %) des moniteurs.

80 ce n'est pas le plus grand nombre. Il reste 20% pour lesquels ça ne va pas : veux-tu vraiment te passer de 20% de tes visiteurs ?

jeanmarever a écrit :On ne peut satisfaire tout le monde ??

Bien sûr que si !
Si tu définis une taille en % (par exemple width: 100%) le bloc s'adaptera à la place disponible. Que l'utilisateur ait 600 * ou 2000 px de disponible, ta page prendra toute la largeur de l'écran. Un moyen tout simple de tester est de te procurer un grand moniteur et de redimensionner la fenêtre du navigateur (l'extension Web Developer donne un accès rapide aux résolutions les plus courantes). Tout site web devrait s'adapter à la résolution pour éviter l'effet timbre-poste (un site tout étroit dans un grand écran) et les barres de défilement (sur les petits écrans).

Tu voudras quand-même peut-être mettre des limites, par exemple pas moins de 600px et pas plus de 1200 : il y a les min-width et max-width qui sont là pour ça.

* de nos jours avec les smartphones 4'' c'est encore pire !

Merci pour ton intérêt calimo.
Je suis petit webmaster et je vais tespliquer !
Ok, pourcentage. J'y avais pensé, sans prétention, mais comme je n'ai pas trop de choses intéressantes à raconter, la page perso que j'ai concoctée comporte principalement des images, entre autre une bannière en slideshow javascript, deux blocs de 4 images avec des titres-liens, un diaporama cooliris, et j'ai pensé que mettre #mapage en pourcentage était difficile à faire avec de tels éléments ? J'ai rajouté au fur et à mesure de nouvelles choses et c'est un peu le foutoire. IL FAUT REPRENDRE ça du pied ! Ne perds quand même pas ton temps. Je vais poursuivre cahin caha mes essais de webmaster !!!
Salut bien
@+ Jean

Bonjour,

jeanmarever a écrit :
Code : Tout sélectionner
<meta http-equiv="Content-Type" content="text/html; charset=iso-utf8" />

Charset iso-utf8, ça n'existe pas, c'est utf-8 tout court et avec un tiret

.

Merci,
????
Surement une mauvaise frappe + un mauvais effacement + pas de relecture ! Mea culpa !
Jean

Geckozone

[Résolu] utilisation de dégradés en background

[Résolu] utilisation de dégradés en background

Re: utilisation de dégradés en background

Re: utilisation de dégradés en background

Re: utilisation de dégradés en background

Re: utilisation de dégradés en background

Re: [Résolu] utilisation de dégradés en background

Re: [Résolu] utilisation de dégradés en background

Re: [Résolu] utilisation de dégradés en background

Re: [Résolu] utilisation de dégradés en background

Re: [Résolu] utilisation de dégradés en background

Re: [Résolu] utilisation de dégradés en background

Re: [Résolu] utilisation de dégradés en background

Re: [Résolu] utilisation de dégradés en background

Re: [Résolu] utilisation de dégradés en background