Webmaster Hub > Décalage d'un DIV

Version complète: sur le forum Webmaster Hub : Décalage d'un DIV

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

Clown1981

mardi 12 août 2008 à 02:14

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

mardi 12 août 2008 à 03:11

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

mardi 12 août 2008 à 09:18

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

réso:1440/900

TrocWeb

mardi 12 août 2008 à 09:29

je pense qu'il parle de cela

ici

Clown1981

mardi 12 août 2008 à 18:05

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

mardi 12 août 2008 à 20:45

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

Clown1981

mercredi 13 août 2008 à 00:09

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

mercredi 13 août 2008 à 01:46

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

mercredi 13 août 2008 à 09:49

bonjour,
essaie de mettre ça en css :

CODE

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

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

CODE

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

.......
}

en html quelque chose de bizarre :

enlever ce

CODE

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

CODE

à 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

mercredi 13 août 2008 à 17:55

Je vais essayer ça ce soir en rentrant!

Je te tiens au courant.

Merci.

Clown1981

vendredi 22 août 2008 à 00:34

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.

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.