28173 sujets

CSS et mise en forme, CSS3

Background fixe en hauteur, mais adaptable en largeur

Bonjour,

Je viens d'aller faire un tour sur zen garden, je pense que tout le monde connait ici.

Et j'adore ce style :
http://www.csszengarden.com/?cssfile=/203/203.css&page=0

Ce que j'aimerais savoir, c'est comment l'image en background : "the beauty of css design" reste fixe verticalement (même si on utilise l'ascenseur le contenu monte ou descend, mais l'image reste fixe).
Par contre, elle se re-dimensionne horizontalement, pour s'adapter à la nouvelle taille de la fenêtre si on "démaximise" ?

Est ce que c'est uniquement du css ou du javascript?

Je cherche ardemment à "reproduire ce design, mais sans succès Smiley bawling
Si quelqu'un connaît l'astuce et s'il pouvait me la communiquer et me l'expliquer, je lui en serait reconnaissant.

Merci d'avance
Modifié par crazyjojo (24 Nov 2007 - 00:48)
Bonsoir crazyjojo,

Si tu regardes le code source, tu te rendras compte qu'il n'y a pas de javascript sur cette page (ni sur les autres a priori ) Smiley cligne

Comme tu le sais certainement, CssZenGarden a la particularité d'utiliser le même code (x)html, la subtilité réside donc dans la mise en forme via les feuilles de style, ils ont eu la délicate attention de placer un lien vers cette feuille de style pour chaque page qui figure sur ce site...
View This Design's CSS

Tu pourras y trouver l'nformation suivante concernant l'élément qui t'interesse :

#extraDiv1{
	position:fixed;
	top:0;
	width:37px;
	height:433px;
	left:50%;
	margin-left:-235px;
	background:url(pics/the_beauty.gif) no-repeat top left;
	}
* html #extraDiv1{
	position:absolute;
	}

Et voilou le tour et joué Smiley smile

Cdt,
Sylvain
Modifié par 6l20 (24 Nov 2007 - 01:03)
Merci Sylvain,

Pour ta réponse rapide, pourtant, j'avais fait une recherche dans le code en recherchant le mot cle "the_beauty", j'ai du mal tapé!! Car je n'ai rien trouvé, alors je me suis dit que c'était le code exemple mais de base.

Encore merci, grace à toi, je vais pouvoir aller dormir
Je confirme,
je n'avais pas trouvé car j'avais cliqué sur "download css file" et pas "View This Design’s CSS"

Demain je décortique la feuille de style pour faire un belle mise en page
Allez sur ce je vais me coucher
Sujet clos
Aller à