Aller au contenu

Décalage d'un DIV


Clown1981

Sujets conseillés

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;

}

Lien vers le commentaire
Partager sur d’autres sites

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...

Lien vers le commentaire
Partager sur d’autres sites

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.

Lien vers le commentaire
Partager sur d’autres sites

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?

Lien vers le commentaire
Partager sur d’autres sites

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 :thumbsup:

Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

  • 2 semaines plus tard...

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...