Horripilant Décalage de Div

Bonsoir,

Me revoilou.
Problème de decalage(?) sur les 3 navigateurs (ie6, opera, mozilla)
les deux div du haut header et le menu sont l'un en dessous de l'autre.
le 3ème le div container décale vers le bas et à droite.
par quel prodige?

http://www.web2aconcept.fr/

*{
background-color:#CCCFD1;
text-align:center; 
background-image:url(images/bg.jpg);
background-repeat:repeat-x;
background-position:0% 0%;
margin:0; padding:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:small
}

#header,#menu,#container{ width:950px; margin-left:auto; margin-right:auto
}
#header {
background-image:url(images/header.jpg);
background-repeat: no-repeat ;
background-position:50% 0%;  
height:291px
}
#menu { 
background-image:url(images/menu.jpg); 
background-repeat: no-repeat ;
background-position:50% 0%; 
height:52px;
}
#container{ 
background-image:url(images/bg_tableau.jpg);
background-repeat: no-repeat ;
background-position:50% 0%; 
height:352px;
}

Tous ces div bien mesurés avec une règle à pixels en alu sont pourtant strictement bien positionnés non? (j'ai verifié 120fois), pas de jaloux dans le css, ils sont tous traités avec la même considération.
Malgré de longues recherches, pas trouvé de raisons valables à tant de méchanceté...

kayorn
webmaster rempli de doute.

Bonjour kayorn,

Effectivement c'est pas net mais, par ailleurs, cet effet donne une impression de relief. Comme s'il y avait une rainure, c'est pas vilain. Mais j'imagine que ce n'est pas du tout le but recherché.

Ce que je constate et dont tu ne parles pas, c'est que en haut à droite de ton en-tête on voit une ligne verticale gris clair qui, sans doute, est la séparation entre ton image de fond et sa répétition

background-repeat:repeat-x;

.
Peut-être chercher dans ce coin là. Border, border-collapse ou quelque chose comme ça.

A+
DonVtt

bonjour donvtt,

merci pour la réponse
c'est vrai qu'on pourrait s'en contenter mais c'est un peu génant de subir.

pour le trait vertical mais border-collapse ne donne rien. il exite à la limite du header à droite mais pas à gauche...
autre misère, les liens du menu s'affichent dans ie6 et pas dans les autres.
j'ai pas fini , j'aurais mieux fait de partir avec un tableau.

kayorn

Re mevoici,

Comme je te le disais plus haut, je ne suis ni web ni master...et encore moins les deux réunis.

J'ai essayé plein de choses avec tes codes mais sans résultat.
Puis je me suis souvenu que j'avais déjà eu ce problème. Ça se situait au niveau des découpes dans Photoshop.

J'ai donc essayé avec ton logo. Ouvert dans photoshop et rogné un peu l'image à droite, sauver pour le web en jpeg et ... ça marche. Enfin juste pour la ligne à droite.

Mais bon, là, ton image est rognée c'est pas le but.
Je n'ai pas réussi à piquer ta barre de menu pour tester le décallage.

Regarde un peu au niveau des découpes puis quand tu enregistres pour le web essayes ces 3 formules:
"Toutes les tranches"-"toutes les tranches utilisateur"-"toutes les tranches sélectionnées".

Je me souviens que cette petite bordure indésirable décalait la disposition de mes éléments. Donc peut-être que cette bordure est la source du décalage.

A+
DonVtt

salut et merci de t'occuper de mon pb.

je n'utilise pas les tranches. je pars d'un index total et je découpe en selectionnant d'après des guides fixes
d'ailleurs j'ai testé ; je fais un montage des 3 jpeg l'un en dessous de l'autre dans une autre zone de travail, il n'y a aucun décalage.
j'essaye avec l'option "afficher cadre de selection" pour voir si les centres des 3 calques sont alignés ---> ça confirme ques les tailles sont identiques et les centres alignés.

ça serait sur Ie6 je comprendrais mais là, on a les 3 en même temps.
donc, il y a sûrement un bug. mais où... seul un king des bugs css pourrait nous donner une piste mais il doit être sur un autre forum...


/*/*/*/*

halte! mea culpa, mea maxima culpa...
1/ j'avais 2 jpg qui étaient identiques et bien sûr, je m'acharnais à corriger le mauvais...
l'url du background-image pointait évidemment sur un autre qui bien sûr se gardait bien de
me le faire savoir.

2/ pour la ligne verticale du haut/droite, dans mon psd , j'avais pas remarqué que le
calque du dégradé vertical n'allait pas tout contre le bord droit de la zone de travail
et de ce fait, laissait voir un pixel de l'arrière-plan...

/*/*/*/*

Par contre toujours la même question ourquoi ne voit-on pas le menu sauf sur IE6... mystère... c'est vraiment un boulot de jobard...
Modifié par kayorn (28 Apr 2009 - 22:08)

Hello,

Je ne suis pas très sûr de comprendre de quoi il est question ici
Je ne vois aucun menu et cela sur aucun des navigateurs que j'utilise et pour cause : il n'y en a pas sur la page que je consulte actuellement
Les codes ont-ils été modifié entre temps ou deviens-je fou ?
code html :

<body>
<!-- banniere -->
<div id="header"></div>
<!-- fin banniere -->

<!-- menu -->
<div id="menu"> 
[#blue]Il s'agit ici d'une division portant un identifiant prénommé menu
Il ne s'agit pas d'un [url=http://www.alsacreations.com/tuto/lire/574-Creer-des-menus-simples-en-CSS.html][#red]menu (ceci est un lien)[/#][/url]
Entre parenthèse la div ne semble pas très utile :
<ul id="menu"> fonctionnera tout aussi bien [/#] [cligne] 

</div>
<!-- fin menu -->

<!-- container principal -->
<div id="container"></div>
<!-- fin container principal -->


<div id="footer"></div>
</body>
</html>

Code css :

[#red][b]#menu[/b][/#] { 
	background-image:url(images/menu.jpg); 
	background-repeat: no-repeat ;
	background-position:50% 0%; 
	height:42px;
	padding-top:10px;
	}

/* menu */
[#red][b]#menu_horizontal[/b][/#] {
	list-style: none ;
	margin: 0 ;
	padding: 0 ;
	}
#menu_horizontal li {
	display: inline ;
	margin-right: 1px ;
	color: #fff;
	}
#menu_horizontal li a {				
	color: #000 ;
	size:120%;				
	padding: 11px 50px ;
	text-align: center ;
	text-decoration: none ;
	}
#menu_horizontal li a:hover, [#red][b]#nav[/b][/#] li a:focus, #nav li a:active {			
	text-decoration: underline ;
	}
				
/* fin menu */

menu, menu_horizontal ou nav ?
En plus d'être absent du code html, il semble que cela soit un peu confus quant à l'appelation d'origine incontrôlée de ce menu

Revoir à tête reposée le code de ce menu me semble être un bon début, non ?
Bon courage,
Cdt,
Sylvain

je dois être fatigué... j'avais pas mis de html en ligne mais en local uniquement...
maintenant,ça a l'air d'aller.

<!-- menu -->
<div id="menu">
<ul id="menu_horizontal">
	<li><a href="#" title="aller lien 1">lien 1</a></li>
	<li><a href="#" title="aller lien 2">lien 2</a></li>
	<li><a href="#" title="aller lien 3">lien 3</a></li>
	<li><a href="#" title="aller lien 4">lien 4</a></li>
	<li><a href="#" title="aller lien 5">lien 5</a></li>
</ul>
</div>
<!-- fin menu -->

la css temporaire:

/* menu */
#menu_horizontal {
				list-style: none ;
				margin: 0 ;
				padding: 0 ;
				}
			#menu_horizontal li {
				display: inline ;
				margin-right: 1px ;
				color: #fff ;
				
				}
			#menu_horizontal li a {				
				color: #000 ;
				size:120%;				
				padding: 11px 50px ;
				text-align: center ;
				text-decoration: none ;
				}
			#menu_horizontal li a:hover, #nav li a:focus, #nav li a:active {
				
				text-decoration: underline ;
				}

/* fin menu */



menu, menu_horizontal ou nav ?
En plus d'être absent du code html, il semble que cela soit un peu confus quant à l'appelation d'origine incontrôlée de ce menu
[code]

pompé sur un site spécialisé mais mal modifié!

merci

Ouch le CSS qui fait peur:

[#red][b]*[/b][/#]{
background-color:#CCCFD1;
text-align:center; 
background-image:url(images/bg.jpg);
background-repeat:repeat-x;
background-position:0% 0%;
margin:0; padding:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:small
}

Lectures indispensables:
http://www.alsacreations.com/astuce/lire/36-reset-css.html
http://www.alsacreations.com/astuce/lire/654-feuille-de-styles-de-base.html

Florent V. a écrit :
Ouch le CSS qui fait peur:

[#red][b]*[/b][/#]{
background-color:#CCCFD1;
text-align:center; 
background-image:url(images/bg.jpg);
background-repeat:repeat-x;
background-position:0% 0%;
margin:0; padding:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:small
}

merci pour cette info, à force de recopier les css des autres, on avance pas!
je dois harmoniser pour ma page ou la garder telle quelle? (j'ai pas eu trop le temps de lire l'article)
je m'y mets dès que possible