Décalage d'un DIV

[Clown1981]

Bonjour

J'ai créé ma petite entreprise récemment. J'ai livré mon premier site il y a peu de temps. Mon programmeur m'a quitté et j'ai besoin d'aide.

Sur ce site, il se produit un bug quand je mets ma résolution à 1792 x 1334 et plus, PC ou MAC. Le problème qui se manifeste est le décalage à droite de DIV.

Le site web en question est le www.ctccollector.ca, si vous voulez bien le tester.

Voici le contenu intégral de mon fichier CSS.

De #header2_compteur jusqu'à #texte, tout se décale à droite.

Fait intéressant, si, dans mon naviguateur, je vais dans affichage pour changer la taille du texte, tout rentre dans l'ordre lorsque je grossis suffisamment les caractères.

Alors, voilà, mon client utilise une résolution très grande et il a noté ce problème. Comme je n'ai plus de programmeur pour le moment et que je n'ai pas fait de programmation moi-même depuis longtemps, un coup de main serait vraiment très apprécié.

J'attends votre aide avec impatience.

- François Laroche

Synerweb

CODE

a {

text-decoration : none;

}

a:hover {

color : silver;

}

.amenu {

color : white;

text-decoration : none;

}

A.objet_menu {

color : white;

}

#canvas {

width:891px

background-color:#fff;

background-image:url(../images/cth.gif);

margin-top:1%;

margin-bottom:1%;

float:left;

position:relative;

left:12%;

}

#header1 {

width:891;

height:123px;

background-image:url(../images/cta.gif);

BACKGROUND-REPEAT: no-repeat;

float:left;

}

#header2_compteur {

width:891px;

height:28px;

background-image:url(../images/ctb.gif);

BACKGROUND-REPEAT: no-repeat;

float:left;

}

#header3 {

width:891px;

height:2px;

background-image:url(../images/ctc.gif);

BACKGROUND-REPEAT: no-repeat;

float:left;

}

#header4_menu {

width:891px;

height:23px;

background-image:url(../images/ctd.gif);

BACKGROUND-REPEAT: no-repeat;

float:left;

left:20%;

}

#menu_content {

margin-left:125px;

}

#header5 {

width:891px;

height:81px;

background-image:url(../images/cte.gif);

BACKGROUND-REPEAT: no-repeat;

float:left;

}

#texte1_titre {

width:891px;

height:44px;

background-image:url(../images/ctf.gif);

BACKGROUND-REPEAT: no-repeat;

float:left;

}

#texte2 {

width:891px;

height:2px;

background-image:url(../images/ctg.gif);

BACKGROUND-REPEAT: no-repeat;

float:left;

}

#texte3_contenu {

width:891px;

background-image:url(../images/cth.gif);

BACKGROUND-REPEAT: no-repeat;

float:left;

}

#texte {

text-align:justify;

margin-left:40px;

margin-right:40px;

}

#footer1 {

width:891px;

height:25px;

background-image:url(../images/cti.gif);

BACKGROUND-REPEAT: no-repeat;

float:left;

}

#menu_item {

padding-right:40px;

font-weight: bold;

float:left;

}

#login {

width:110px;

float:left;

}

#table_item {

padding-bottom:10px;

}

#erreur {

color:red;

font-weight:bold;

float:left;

}

#connexion {

width:891px;

text-align:left;

float:left;

position:relative;

left:12%;

margin-bottom:5px;

}

#miniatures {

float:left;

padding-right:10px;

width:150px;

}

#photo {

padding-right:0px;

float:left;

}

#panier {

text-align:right;

font-weight:bold;

padding-bottom:5px;

}

#dropmenudiv{

position:absolute;

border:1px solid black;

border-bottom-width: 0;

font:normal 12px Verdana;

line-height:23px;

z-index:100;

}

#dropmenudiv a{

width: 100%;

display: block;

text-indent: 3px;

border-bottom: 1px solid black;

padding: 1px 0;

text-decoration: none;

font-weight: bold;

}

#dropmenudiv a:hover{ /*hover background color*/

background-color: white;

}

[Dudu]

Salut

Deux choses:

1. Est-ce possible d'avoir une capture d'écran, que l'on puisse voir de quoi il s'agit.

2. Parlons le même langage.

PC (j'imagine qu'il s'agit en fait de "Windows") et Mac: ce sont des plateformes.

Sur Internet, la notion de plateformes n'existe pas (elle n'existe que pour les logiciels). Parle nous plutôt de navigateurs, ce sera nettement plus approprié.

Donc quel(s) navigateur(s)s pose(nt) problème ? Internet Explorer, Firefox, Opéra, Safari, etc. ?

J'utilise Safari, et j'ai beau changer de résolution, je ne constate aucun problème de décalage...

[lorem_ipsum]

Site testé sur safari, ie6, ff, opéra est je ne vois aucun bug non plus.

réso:1440/900

Modifié 12 Août 2008 par lorem_ipsum

[TrocWeb]

je pense qu'il parle de cela

ici

Modifié 12 Août 2008 par TrocWeb

[Clown1981]

Bonjour

Exactement TrocWeb, c'est ce que mon client voit.

Il est vrai que je n'ai pas reproduit le problème avec d'autres navigateurs. Cependant, moi et mon client utilisons Firefox, dernière version.

[TrocWeb]

reste appuyer sur la touche Ctrl et fait aller ta molette de souris, tu pourra le reproduire même sous Firefox 3

[Clown1981]

Oui, TrocWeb, j'avais remarqué.

Je reproduit le problème avec Firefox 2.0 et IE 6.0.

Alors, comment puis-je régler ce problème sans avoir à changer la taille du texte sur le navigateur de mon client?

[TrocWeb]

je ne suis pas très calé dans ce genre de truc, je préfère laisser la place aux grands du Hub qui j'en suis sur, réglerons cela plus vite que tu ne le crois

[tictact]

bonjour,

essaie de mettre ça en css :

body {
	margin: 0 auto;
	color: #000;
	background-color: #ffffff;
}

il manque le " ; " après le width de canvas ;

#canvas {
  width:891px;
  background-color:#fff;
  background-image:url(../images/cth.gif);

 .......
}

en html quelque chose de bizarre :

enlever ce

<body text=black link=red vlink=red alink=green bgcolor=white topmargin=0 leftmargin=0 marginheight=0 marginwidth=0>

remplacer par <body> et utiliser les déclarations en css

  <LINK href="css/text.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" type="text/css" href="../css/text.css">

à enlever le 2ème link !

enfin, passer les <div id='menu_item'> en <div class='menu_item'> ( à changer en css .menu_item au lieu de #menu_item )

penser au Doctype !

c'est ce que j'ai vu et corrigé, ça marche chez moi avec ff3, safari, opéra et ie7

[Clown1981]

Je vais essayer ça ce soir en rentrant!

Je te tiens au courant.

Merci.

[Clown1981]

Bonjour tictact

Désolé du délai de ma réponse. J'avais beaucoup de travail.

Je voulais simplement te dire que tu as résolu mon problème.

Merci beaucoup.