Discussion :

[Nooka]

Ma webdesigner m’ayant abandonné en plein développement pour des raisons familiales, je me vois obligé de finir seul mon site internet alors que mes connaissances en programmation et ergonomie sont plutôt limitées. J’ai réalisé une maquette que vous pouvez voir ci-joint. La « vague » horizontale est au format PNG transparent, le fond est un dégradé gris vertical en JPG de 1200*3 pixels.

Mon problème est que j’ai du mal à adapter la largeur de mon design aux différents navigateurs. J’ai assigné des dimensions bâtardes de 1257*768 à la maquette pour qu’elle s’adapte à IE7 sans que le browser n’affiche des « ascenseurs » verticaux et horizontaux. Malheureusement sous Firefox, j’ai un espace vide à droite, là où se trouve la barre de défilement sur IE7…

J’ai essayé ce script, ce qui me centre parfaitement le designe sous Firefox mais le décale vers la droite sous IE7 !

Code :

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

1
2
3
4
5
6
7
8
body {
margin-left:5%; 
margin-right:5%; 
}
div#global {
margin-left:auto;
margin-right:auto;
max-width:1000px;

Bref, je patauge un peu là…

[SPKlls]

Pour le dégradé tu peux créer une image de la hauteur de ton dégradé, c'est à dire de la couleur la plus claire à la couleur la plus foncée (ou inversement) de 1px de large.
Ensuite tu l'attribues en background avec un repeat et tu ajoutes la couleur la plus foncée que tu appliques sur ton body.
Et ensuite tu crées ton image de 'vague' en png ou gif transparent et que tu positionnes simplement à l'aide de la propriété 'position: absolute' dans un div/conteneur principale.

[Nooka]

Pour ce qui est du dégradé c'est bon (voir mon post initial). Je vais essayer ta solution pour la vague, en espérant que je réussisse à maîtriser ces paramètres "position absolute"...

Merci en tout cas !

[Rakken]

La « vague » horizontale est au format PNG transparent

Fait juste attention que ca passe correctement sous ie6. Mine de rien, ce navigateur est encore beaucoup trop répandu pour pouvoir l'ignorer (quelque chose comme 20% des visiteurs je crois).

[Nooka]

Malheureusement oui, encore trop répandu IE6. Mais j'ai réglé le problème au moyen d'un petit artifice en javascript