Discussion :

[polothentik]

Salut,

Je cherche soit un bon tutoriel, soit une bonne explication !

Je voudrais comprendre comment il est possible de réaliser une feuille css liée à une page html qui permettrait d'avoir le 'body' centré et sur les côtés 2 marges "différentes" qui ne défilent pas avec la page générées à partir d'un motif horizontal simple.

La marge pourrait être étirées dans la largeur pour s'adapter à diverses résolutions possibles !

Pour mieux comprendre ce que je souhaite réaliser :

http://www.deezer.com/

Merci d'avance

[pop_up]

C'est pas dur.

Dans ton body, tu fait un conteneur de la largeur que tu désires, et tu mets ceci pour la marge :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 margin: 0 auto;

le résultat sera un centrage automatique. Aprés il suffit d'appliquer une image de fond à ton body pour avoir un motif de fond

[polothentik]

OK pour le centrage et la fixation de la largeur de la page, ce n'est pas vraiment là que se situe mon problème !

Je souhaite avoir 2 motifs différents qui composent mes marges extérieures de pages et non pas un seul background ! De plus, si la résolution change je veut avoir la garantie que ces marges vont s'étirer !!

Un ptit tour ici et vous verrez mieux de quoi je parle :

http://www.deezer.com/

Merci

[pop_up]

2 motifs différents qui composent mes marges extérieures

Si tu parles bien de deezer alors tu dois parler du motif d'ombrage noir qui apparait de chaque coté.

Si tu parles bien de ce motif alors il est fait avec une seule image qui est sur le background du body. Et les marges s'étirent bien.

De plus j'ai l'impression de ne pas trop comprendre ce que tu entends par deux motifs différent car si tu consideres que l'exemple de deezer utilise deux motifs différents, alors il n'y a qu'un seul background.

Est ce que tu peux nous mettre le lien vers ton site de dev ou le code de ce que tu as fait avec l'image pour voir ton cas ?

[polothentik]

A l'heure actuelle, je n'ai pas encore attaqué le design, je m'y intéresse seulement...

Ce que j'entends par "2 motifs", c'est le fait d'avoir l'illusion une image inversée (similaire à un effet miroir) de part et d'autre de la partie de la page contenant les données. Le dégradé est inversé ! Mais il est vrai que les lignes inclinés ont l même orientation de part et d'autre de la page !

Ou alors, et la je valide ton explication, on a un seul background (body ou non !) et un effet de dégradé "noir vers transparent" est rajouté à la frontière entre la partie de la page contenant les données et le background !

Dans ce cas, comment faire ?

Merci

[pop_up]

Tu n'as qu'un seul background.

vas sur deezer (avec firefox de préférence).
clic droit sur le degradé noir puis > Afficher l'image de fond

clic droit sur l'image puis > Enregistrer l'image sous.

Ensuite, ouvre l'image avec ce que tu veux et la tu verras les deux dégradés à 500px et 1500px du bord gauche.

Par conséquent, si tu fais un conteneur de la même largeur que celui de deezer, tu peux dessiner les motifs que tu veux à la place de ses dégradés.

Dis moi si tout cela te suffit.