Aller au contenu

Fond de page web dégradé

Pascal_B

Par Pascal_B
dans (X)HTML et CSS

 Partager

Sujets conseillés

Pascal_B

Pascal_B

Posté
Posté

Bonjour,

J'ai crée un petit site que je voudrais modifier avec un fond de page en couleur dégradée. J'y suis parvenu mais il faut que la ligne <!-- saved from url=(0022)http://internet.e-mail -->" qui était déjà présente sur certains de mes fichiers html figure en tête de page.

Hélas, avec cette ligne, les liens vers les fichiers word ou pdf ne fonctionnent plus. Si je supprime la ligne, les liens refonctionnent, mais plus de fond dégradé.

Ma question: Que faut-il pour une page en couleur dégradée avec des liens vers pdf, doc, ... qui fonctionnent?

Un grand merci à celle ou celui qui m'apportera la solution

Pascal

Pascal_B

Pascal_B

Posté
  • Auteur
Posté (modifié)

Je viens de télécharger la page d'accueil du site chez l'hébergeur pour voir, et là, ça marche! alors que sur les postes, ça ne marchait pas! Bon, on va en rester là puisque le problème n'existe plus. Je joins quand même un exemple si cela t'intéresse.

Merci encore. adresse du site: http://juralacs-meteo.site.voila.fr

Voici l'html d'exemple avec un lien vers un pdf (à toi de le rerouter vers un pdf de ton poste) Là, il ne marche pas, mais si tu supprimes la ligne <!-- saved from url=(0022)http://internet.e-mail -->, le lien fonctionne, mais le fond devient blanc.

<HTML>
<HEAD><TITLE>CARTES</TITLE></HEAD>

<!-- saved from url=(0022)http://internet.e-mail -->

<BODY style="FILTER:
progid:DXImageTransform.Microsoft.GRADIENT(startColorstr=#3485FF
,endColorstr=#FF9900 ,gradientType=0" bgColor=#ffffff scroll=yes>
<a href="Comment_ca_marche.pdf">lien pdf</a>
</TABLE>
</BODY>
</HTML>

Modifié par Pascal_B
captain_torche

captain_torche

Posté
Posté

Je viens de voir ;)

Malheureusement, ça ne fonctionne que sur Internet Explorer (le navigateur par défaut de Windows).

Les personnes qui, comme moi, naviguent sur ton site avec un autre navigateur (Chrome, Opera, Safari, Firefox ...) ne le verront malheureusement pas.

On pourrait envisager d'utiliser une image au format PNG pour faire cet effet de dégradé, cela fonctionnerait partout.

Dis-moi si tu es intéressé par cette méthode !

Pascal_B

Pascal_B

Posté
  • Auteur
Posté

Je viens de voir ;)

Malheureusement, ça ne fonctionne que sur Internet Explorer (le navigateur par défaut de Windows).

Les personnes qui, comme moi, naviguent sur ton site avec un autre navigateur (Chrome, Opera, Safari, Firefox ...) ne le verront malheureusement pas.

On pourrait envisager d'utiliser une image au format PNG pour faire cet effet de dégradé, cela fonctionnerait partout.

Dis-moi si tu es intéressé par cette méthode !

Pourquoi pas une image, mais il ne faut pas d'effet mosaïque, ce que j'avais eu en essayant rapidement. Comment est la page sans internet explorer (blanche?), est-ce que les liens fonctionnent?

Et pourquoi pas un image-background en dégradé tout simplement ?

N'étant pas un "pro", qu'est ce qu'un background, est-ce simple à mettre en oeuvre?

captain_torche

captain_torche

Posté
Posté

Sous les autres navigateurs, effectivement, le fond est blanc.

Ma solution et celle de zaebas sont parfaitement identiques (et relativement simple à mettre en oeuvre) :

- Télécharge l'image que j'ai jointe à ce message (Un dégradé du bleu au jaune, au format PNG pour conserver la qualité du dégradé. L'image ne fait qu'un pixel de large, on la répètera par CSS. Elle fait 1300 pixels de haut, pour s'afficher dans toutes les résolutions).

- Uploade la sur ton site (à la racine si possible)

- Rajoute dans ton code (entre les balises '<head>' et '</head>', le code suivant :

body {
 background: transparent url('degrade-bleujaune.png') repeat-x fixed left top;
}

- supprime l'attribut "style" de la balise "<body>".

post-11321-1254043996,33_thumb.png

meursault_f

meursault_f

Posté
Posté

Bonjour !

Je me permet de poster ici, afin d'éviter une redondance de questions équivalentes.

J'ai apprit sur ce même forum qu'il était possible donc de placer une image comme dégradé, mais également d'utiliser comme autre fond, la dernière couleur du dégradé pour éviter les effets de mosaïque.

Le soucis, c'est que je ne sais pas comment faire pour que les deux éléments soient affichés en meme temps. en effet, j'ai testé:

body
{
background: url(images/body_bg.jpg);
background-repeat:repeat-x;
background: #eeeeee;
}

et 

body
{
background: #eeeeee;
background: url(images/body_bg.jpg);
background-repeat:repeat-x;

}

Mais dans les deux cas, un seul des éléments fonctionne !

Je me retrouve donc soit avec une image coupée net et un fond blanc derrière, soit le fond #eeeeee unique .

J'vous remercie d'avance =)

captain_torche

captain_torche

Posté
Posté

C'est parce que la propriété "background" est une propriété raccourcie : elle sert à condenser la déclaration en y mettant tout.

Tu as donc deux solutions, utiliser la proporiété raccourcie, ou les propriétés "normales" :

body {
background: #EEE url('images/body_bg.jpg') repeat-x;
}
 ou 
body {
background: url(images/body_bg.jpg);
background-repeat:repeat-x;
background-color: #EEE;
}

Pascal_B

Pascal_B

Posté
  • Auteur
Posté

Sous les autres navigateurs, effectivement, le fond est blanc.

Ma solution et celle de zaebas sont parfaitement identiques (et relativement simple à mettre en oeuvre) :

- Télécharge l'image que j'ai jointe à ce message (Un dégradé du bleu au jaune, au format PNG pour conserver la qualité du dégradé. L'image ne fait qu'un pixel de large, on la répètera par CSS. Elle fait 1300 pixels de haut, pour s'afficher dans toutes les résolutions).

- Uploade la sur ton site (à la racine si possible)

- Rajoute dans ton code (entre les balises '<head>' et '</head>', le code suivant :

body {
 background: transparent url('degrade-bleujaune.png') repeat-x fixed left top;
}

- supprime l'attribut "style" de la balise "<body>".

post-11321-1254043996,33_thumb.png

Pour essayer, j'ai fait ce petit fichier, mais pas de fond dégradé. Mes compétences de débutant font que je ne peux résoudre la question tout seul. Voici le contenu du fichier; Où cela ne va-t-il pas?

<html>

<head>

<title>ESSAI</title>

<BODY background: transparent url('degrade-bleujaune.png') repeat-x fixed left top;

</head>

</BODY>

</HTML>

Merci

captain_torche

captain_torche

Posté
Posté

Au temps pour moi, je n'ai pas été assez clair ;)

Ton code ne fonctionne pas parce que l'attribut background, en HTML, ne sert si mes souvenirs sont bons qu'à mettre une couleur de fond.

Tu as donc deux solutions :

- Ou bien tu mets le code que je t'ai donné, entre les balises "<style type="text/css">...</style>", elles-mêmes entre les balises "<head>" et "</head>"

- Ou bien (solution à préférer), tu crées un nouveau fichier avec une extension en .css (comme styles.css, par exemple), dans lequel tu colles le contenu que j'ai donné, et tu l'appelles avec le code suivant : '<link rel="stylesheet" type="text/css" href="styles.css">', toujours entre les balises "<head>" et "</head>"

PotatoesJunky

PotatoesJunky

Posté
Posté

Ton code ne fonctionne pas parce que l'attribut background, en HTML, ne sert si mes souvenirs sont bons qu'à mettre une couleur de fond.

En HTML pur, dans le BODY:

- bckg-color affiche une couleur de fond

- background="URL" affiche bien une image en fond

Source ;)

Monique

Monique

Posté
Posté

- background="URL" affiche bien une image en fond

Oui mais l'attribut background est déconseillé !

La source citée était très complète en son temps, elle n'est plus à recommander comme référence aujourd'hui.

PotatoesJunky

PotatoesJunky

Posté
Posté

Monique, je suis tout-à-fait d'accord, il ne s'agissait que d'une rectification par rapport aux fonctions d'une balise HTML.

Qu'elle soit obsolète ou non est un autre débat :)

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...