Problème gradient background

Problème gradient background Noter :

#1 truitas

Groupe : Actif
Messages : 37
Inscrit(e) : 09-juillet 08

Posté 01 août 2011 - 12:14

bonjour à tous,
j'ai in problème d'affichage de ma couleur de background en dégradé:
Sous firefox et chrome au lieu d'avoir un dégradé de haut en bas j ai une succession de lignes dégradées.
Sous IE 9 cela ne fonctionne pas.
Avez vous une solution? merci

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<style type="text/css">
body{	
background: #a1dbff; /* Old browsers */
background: -moz-linear-gradient(top, #a1dbff 0%, #cbebff 53%, #f0f9ff 100%);/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a1dbff), color-stop(53%,#cbebff), color-stop(100%,#f0f9ff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a1dbff 0%,#cbebff 53%,#f0f9ff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a1dbff 0%,#cbebff 53%,#f0f9ff 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #a1dbff 0%,#cbebff 53%,#f0f9ff 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a1dbff', endColorstr='#f0f9ff',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #a1dbff 0%,#cbebff 53%,#f0f9ff 100%); /* W3C */

    }
</style>

</body>
</html>

Ce message a été modifié par truitas - 01 août 2011 - 12:23.

randonnée et balade en Savoie et Haute-Savoie
séjours et weekend end raquettes

Haut

#2 captain_torche

Danacol / Orangina rouge

Groupe : Admin
Messages : 6 722
Inscrit(e) : 08-février 06
Genre:Homme
Localisation:Savigny / Orge

Posté 01 août 2011 - 13:19

C'est tout simplement parce que tu n'as rien dans ta page, et que ton body ne fait par conséquent que quelques pixels de haut.
Il faut l'agrandir en lui disant de prendre toute la hauteur, par exemple :

html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}

Vous avez rêvé cette nuit ? Partagez vos rêves sur l'Onironaute !
Bijoux fantaisie
Recherche nounou

Haut

#3 truitas

Groupe : Actif
Messages : 37
Inscrit(e) : 09-juillet 08

Posté 01 août 2011 - 16:30

merci beaucoup,
on ne sais jamais si ca peut servir quelques liens vers des générateurs css permettant de travailler les gradient, shadow, les box etc:

http://css3please.com/"

http://www.impressivewebs.com/css3-click-chart/"

http://westciv.com/tools/"

http://www.display-inline.fr/projects/css-gradient/"

http://gradients.glrzad.com/"

http://www.colorzilla.com/gradient-editor/"

http://www.css3files.com/gradient/"

randonnée et balade en Savoie et Haute-Savoie
séjours et weekend end raquettes

Haut

#4 Tomyweb

Groupe : Actif
Messages : 22
Inscrit(e) : 13-juillet 11
Genre:Homme

Posté 04 août 2011 - 19:19

Bonjour
tu peux t'inspirer sur Gradients glrzad, il y a le code detaille

creation site internet - creation site web

Haut

#5 truitas

Groupe : Actif
Messages : 37
Inscrit(e) : 09-juillet 08

Posté 05 août 2011 - 19:50

Tomyweb, le 04 août 2011 - 19:19, dit :

Bonjour
tu peux t'inspirer sur Gradients glrzad, il y a le code detaille

bonjour et merci tomyweb,
le site que tu recommandes et que j'avais mis en lien

ne propose pas la compatibilité pour les différentes versions des navigateurs.
J'ai utilisé:http://www.colorzill...radient-editor/

En plus de css-please mis dans le post précédent 2 sites excellents:
http://www.css3files.com/

Générateur de box très complet:
http://css3.mikeplate.com/

randonnée et balade en Savoie et Haute-Savoie
séjours et weekend end raquettes