Forums d'assistance et de discussion sur les logiciels produits par Mozilla ou créés à partir des technologies Mozilla. Ce site ne dépend pas de la fondation Mozilla et est maintenu par un collectif de bénévoles.
HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
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
Chez moi ça marche. Une faute de frappe ?
Qu'as-tu fais exactement ? On peut voir dans le contexte du CSS ?
openSUSE 12.2 - FF v24.0 FR - TB v24.0 FR ma config en détails - Décrivez la vôtre ici userContent.css : modifiez l'apparence et le contenu des sites visités !
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
La liberté n'est jamais accordée de bon gré par l'oppresseur; elle doit être exigée par l'opprimé (Martin Luther King).
Les convictions sont des ennemis de la vérité plus dangereux que les mensonges. (Nietzsche).
Native Mozillian.
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 !
<?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 »…
openSUSE 12.2 - FF v24.0 FR - TB v24.0 FR ma config en détails - Décrivez la vôtre ici userContent.css : modifiez l'apparence et le contenu des sites visités !
<!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 :
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
Charset iso-utf8, ça n'existe pas, c'est utf-8 tout court et avec un tiret .
openSUSE 12.2 - FF v24.0 FR - TB v24.0 FR ma config en détails - Décrivez la vôtre ici userContent.css : modifiez l'apparence et le contenu des sites visités !
