28172 sujets

CSS et mise en forme, CSS3

[Résolu]Centrer un design extensible

Bonjour, j'ai un gros problème avec mon design, j'ai cette image de fond, je voudrais qu'elle soit centrée et que de chaque coté il y est à droite cette image et gauche celle ci et que ces deux images se répétent (la première sur la gauche, et la seconde sur la droite) pour que le fond soit extensible selon la taille du navigateur. J'ai essayer plein de truc et rien ne marche.

Si vous pouviez m'aiguiller sur des solutions !

D'avance merci !
Modifié par Math43 (11 Apr 2010 - 11:22)
Salut,

Personnellement j'opterai pour cela :

Tout d'abord, tu crées une seule image très large (1600px ?) comportant ton fond droit et ton fond gauche sur une proportion moitié moitié (dans laquelle tu peux laisser vide la partie qui correspond à la largeur minimale du site). Cette image tu l'utilise en background de <body>, alignée en haut et au centre.

En parallèle, tu utilise ton image de fond en background de ton conteneur que tu centreras avec des marges automatiques et une dimension minimale et maximale.
Je viens de faire ça en suivant les conseils de Mikachu

body
{
	background-image: url('../images/background-main.png');
	background-repeat: no-repeat;
	background-position: top center;
	margin:0 auto;
}

#main-content
{
	background-image: url('../images/background-content.png');
	background-repeat: no-repeat;
	margin-left: auto;
	margin-right: auto;
	max-width: 1400px;
	min-width: 1200px;
	height: 750px;
}


C'est exactement comme je voulais, merci Mikachu, par contre l'utilité d'une dimension maximale et minimale c'est quoi ?
La dimension minimale c'est pour éviter les dégradations si la fenêtre est trop petite, interdisant par exemple les colonnes de textes trop petites qui font passer des morceaux de mots ou lettres à la ligne, les chevauchements, etc., rendant la lisibilité pénible voir impossible. Cela permet dans ce cas de faire apparaitre une barre de défilement horizontale, dans ce cas plus tolérable même si inconfortable.

La dimension maximale c'est pour éviter qu'en cas d'agrandissement trop important dans les grandes résolutions, les lignes de textes deviennent trop longues, rendant la lisibilité pénible. Cela évite aussi parfois la déstructuration du site si des espaces se créent dans la mise en page entre les différents blocs.

Si tu as obtenu réponse à ta question, n'oublie pas d'indiquer que ton sujet est [Résolu] Smiley cligne
Sujet clos
Aller à