Les background de blocs ne coincident pas .

**soundlord** · 17/04/2008, 12h14

Bonjour à tous.
J'ai un problème pas évident à expliquer c'est pourquoi je vais tacher de vous l'illustrer en espérant que vous serez en mesure de m'aider.
mon css:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
body{
text-align:center;
background-color:#9c988c;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:14px;
}
#header{
	background-image:url(header_pianos.jpg);
	background-repeat:no-repeat;
	width: 900px;
	height:211px;	
	margin:0 auto 0 auto;
}
#center{
	background-image:url(center_pianos.jpg);
	width:900px;
	height:auto;	
	margin:0 auto 0 auto;
	background-repeat:repeat-y top;
}
#footer{
	width: 900px;
	height:54px;
	background-image:url(footer_pianos.jpg);
	background-repeat:no-repeat;
	margin:0 auto 0 auto;
}

mon code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title> Pianos - Clermont-Musique.fr - Magasin de musique à Clermont-Ferrand</title>
 
	<link href="pianos.css" rel="stylesheet" type="text/css"/>
</head>
<body>
	<div id="header">
	</div>
	<div id="center">
	</div>		
	<div id="footer">
	</div>
</body>
</html>

En étant bref le soucis est le suivant : le background de mon div footer ne s'aligne pas horizontalement avec le background du div center. ce qui niveau design n'est pas top.
voici le lien ou vous pourrez observer le problème
J'ajoute que je suis en train de réaliser la page et que par conséquent le contenu du div center est succeptible de changer, mais pas sa structure.Cela n'aura donc pas d'incidence sur le probleme en question.

Merci d'avance de votre aide.
cordialement,
Rafael.

**Candygirl** · 17/04/2008, 12h29

Hello,

Le problème devrait normalement venir de tes images. Ton image center_pianos a simplement un pixel de beige en plus sur la gauche raport à ton image footer_pianos.jpg

**soundlord** · 17/04/2008, 12h37

Envoyé par Candygirl

Hello,

Le problème devrait normalement venir de tes images. Ton image center_pianos a simplement un pixel de beige en plus sur la gauche raport à ton image footer_pianos.jpg

Bonne remarque ! J'ai cependant déjà exploré cette hypothèse sans succés.
ces imaghes sont "générées" sous photoshop et il n'est à priori pas possible qu'il y ai ce pixel supplémentaire (d'autant plus j'ai créé les tranches depuis des repères et non manuelement.

**LhIaScZkTer** · 17/04/2008, 12h34

Salut,

T'avais une image genéral que tu as découpé en 3 parties ?

Car pour moi tu as simplement mal découpé ton design

**soundlord** · 17/04/2008, 12h39

Envoyé par LhIaScZkTer

Salut,

T'avais une image genéral que tu as découpé en 3 parties ?

Car pour moi tu as simplement mal découpé ton design

c'est effectivement une image générale que j'ai découpé en trois tranches.
cependant comme expliqué dans mon précédent post je ne vois pas comment les images serait mal découpées.

**soundlord** · 17/04/2008, 12h49

Le problème vient peut être de photoshop !
j'ai effectivement importé footer_pianos et center_pianos dans photoshop pour les comparer et je m'appercoit que footer_pianos est à pein plus grand sur le coté droit.
les 2 images ont pourtant la meme dimension thérorique (900px de large)

en admetant que le soucis viennent de photoshop (et je sais je suis pas forcément au bon endroit pour parler de ça, mais c'est intimement lié), j'utilise la fonction exporter pour le web et j'exporte ainsi mes tranches.
Quelqu'un aurait il déjà rencontré ce type de problème avec la même méthode ?

merci à tous pour ces réponse fort rapides et merci d'avance pour les prochaines

**Candygirl** · 17/04/2008, 13h50

Ma première réponse n'était pas très pertinente, puisque s'il ne s'était agi que de 1px plus large sur le bord gauche, le décalage aurait été observé aussi sur la droite... ce qui n'est pas le cas.

Par contre il s'agit bien d'un problème d'images et pas de css. Ton centre avec son cadre semble avoir une largeur supérieur de 1px pour le footer, ces 1px sont compensés par 1px de moins de beige à gauche pour obtenir aussi une image de 900px.

Aucune idée sur les causes possibles si ton cadre est bien d'une pièce sur ton fichier photoshop; peut-être une déformation-réduction-agrandissement par erreur à un moment ou un autre?

**soundlord** · 17/04/2008, 14h01

Envoyé par Candygirl

Ma première réponse n'était pas très pertinente, puisque s'il ne s'était agi que de 1px plus large sur le bord gauche, le décalage aurait été observé aussi sur la gauche... ce qui n'est pas le cas.

Par contre il s'agit bien d'un problème d'images et pas de css. Ton centre avec son cadre semble avoir une largeur supérieur de 1px pour le footer, ces 1px sont compensés par 1px de moins de beige à gauche pour obtenir aussi une image de 900px.

Aucune idée sur les causes possibles si ton cadre est bien d'une pièce sur ton fichier photoshop; peut-être une déformation-réduction-agrandissement par erreur à un moment ou un autre?

merci encore de tes réponses.
Je suis tout à fait d'accord avec toi et mon cadre est bien d'une pièce sous photoshop.J'ai simplement l'impression que photoshop travaille mal ma tranche footer. Je me suis penché sur le problème et les images font bien la meme taille (largeur 900px). c'est au sein de mon image de footer qu'il y a déformation apres l'export de ma tranche. et je n'arrive pas à l'expliquer meme sur les forums destinés a ce logiciel.

Je ne sais pas si je peux poursuivre ce topic dans la mesure ou nous avons identifié que le probleme venait des images et non du css. J'avou cependant etre a court d'idées sur la question.

Les background de blocs ne coincident pas .

CSS

Vue hybride

Discussions similaires

Partager

Partager