28172 sujets

CSS et mise en forme, CSS3

[résolu] étrange: comportement height inatendue

Bonjour tout le monde,

Nouveau sur le forum……

Je me suis récemment mis au css, un peu par envie, pas mal par besoin.

Lors de mes recherches et du coup de mes découvertes, j'ai pu comprendre petit à petit qu'on pouvait appliquer un background dégradé et j'ai même trouvé des générateur de code pour ça.

Jusque là aucun problème. Mais il a fallut que l'envi de prenne de faire un background dégradé qui ne suive pas les scroll……

En cherchant, j'ai donc trouvé la fonction "height: 100%;".

Je n'ai pas pu réussir tout de suite sa mise en œuvre !!!

Voici les code correspondant à mon fond dégradé :

le html :

<body>
<div align="center" id="global">
<div>
ici plein de chose qui remplissent ma page.
</div>
</div
</body>


le css :

html, body {
margin: 0px;
padding-top: 0px;

	height: 100%;
	/*background-color: #cdd7e8;*/
	background: -moz-linear-gradient(
	        bottom,
	        #cdd7e8 70%,
			#ffffff 100%
	    );
	/*-moz-background-size: 100% 100%;
	-webkit-background-size: 100% 100%;*/
	background: -webkit-gradient(linear, left bottom, left top, color-stop(0.7, #cdd7e8), color-stop(1, #ffffff));
	
}
#global{
	height: 100%x;
	
	padding-top:160px ;
	background: -moz-linear-gradient(
	        bottom,
	        #cdd7e8 40%,
			#ffffff 100%
	    );
	-moz-background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	background: -webkit-gradient(linear, left bottom, left top, color-stop(0.4, #cdd7e8), color-stop(1, #ffffff));
	background-attachment: fixed;
}



Cela fonctionne, mais il ya une "bizzarerie" :

dans "#global {
height: 100%x;
…
…
}"

je ne comprend pas ce que viens faire le "x" après le "%" et pourtant sans celui-ci ça ne fonctionne pas, le dégradé prend la taille de la fenêtre du premier chargement.

il faut aussi savoir que ce "x" est une erreur de saisie de ma part puisque j'avais commencé par faire un background de 3000px, mais ça ne me plaisait pas puisqu'il générer des scroll d'emblée. j'ai donc effacé 3000px pour le remplacé par 100% et j'ai oublié d'effacer le x.

Je m'exprime surment assez mal et assez longuement, je remercie donc ceux qui ont pu lire jusqu'ici et remercie encore plus, d'avance, ceux qui auront compris et encore, encore, encore, plus ceux qui pourraient une donner une explication !!!.

Merci

[F]
Modifié par Laser (31 Aug 2010 - 07:43)
Salut,
premièrement vire ton x après le %. Si ca ne marche plus, ca vient d'ailleurs!
Sinon, si j'ai bien compris, tu veux un fond dégradé qui ne scroll pas si le contenu est plus grand que la hauteur de la fenêtre? Si c'est bien cela, ajoute fixed dans les background, comme ca:

background: -moz-linear-gradient( 
            bottom, 
            #cdd7e8 70%, 
            #ffffff 100% 
        ) fixed;


C'est tout.
Merci vdo93,

J'avais laisser mon x mais bon, je sentais bien que c'était pas très joli-joli.

Le fixed fonctionne très bien : j'adopte.

Une nouvelle question sur mes déboire avec les css dans la journée.

[f]
Sujet clos
Aller à