Problème affichage du site

nolog · 29 Septembre 2007

Bonjour a tous

Voila j'ai un site en local qui s'affiche de la meme facon sur IE, firefox et opera; Quand je le met en ligne pour test :

chez le premier hebergeur ici ca s'affiche pareil qu'en localhost et sur le deuxieme la prob d'affichage sur IE et firefox

J'aimerais savoir d'ou cela peut provenir, merci d'avance

**iNCiTE Web** · 29 Septembre 2007

Tu nous as pas dit quel était le problème, donc je suppose que c'est la taille de la police ?

Tes fichiers de styles, index.css ne sont pas identiques sur les 2 serveurs ! commences déjà par mettre le même (il y a par exemple font-size:10px; dans un et pas dans l'autre...)

Ensuite on regarde à nouveau.

**Arlette** · 29 Septembre 2007

Quel est ton problème ?

Car pour le premier lien :

- Sous Firefox et IE je n'ai pas les adsenses

Pour le deuxième lien :

- Sous Firefox et IE j'ai les adsenses en début de page

Après c'est vrai que sous IE ton site n'est pas centré

**iNCiTE Web** · 29 Septembre 2007

Ah oui, sous IE7 le div central fait toute la largeur de la page :blushing:

Il faudrait nous en dire plus...

nolog · 29 Septembre 2007

En meme temps que j'attendais votre reponse j'ai trouve d'ou venais le soucis de la taille de police, mais ce qui m'embête c'est + le cops de la page qui n'est plus centré et prend tout la largeur (c'est moche non?)

concernant les adscence je viens de me lancer (qdepuis hier ) donc pas encore rempli le formulaire..etc d'ailleurs si vous avez des conseils ou des liens utiles dessus(posts, tuto..) je suis preneur merci

j'essai de suite de mettre la meme css

je suis IE6 et c'est pareil : div central fait toute la largeur de la page

Modifié 29 Septembre 2007 par nolog

nolog · 29 Septembre 2007

J'ai telechargé la css depuis le site "ok" pour la charger sur le deuxieme -> vider le cahe + refresh : :nonono: idem

pas d'idées !! sur la source de la diffence entre les deux serveur question affichage de la div centrale

en suivant le tuto de monique cela me donne :

Erreurs
URI : [url="http://renopro-services.xdir.fr/index.css"]http://renopro-services.xdir.fr/index.css[/url]
24 #en_tete Erreur lors de l'analyse grammaticale. - VALIGN=CENTER 
161 #corps2 La propriété scrollbar-face-color n'existe pas. : #b22222 
162 #corps2 La propriété scrollbar-arrow-color n'existe pas. : #6699cc 
163 #corps2 La propriété scrollbar-track-color n'existe pas. : #e9e9e9 
164 #corps2 La propriété scrollbar-highlight-color n'existe pas. : #000000 
165 #corps2 La propriété scrollbar-shadow-color n'existe pas. : #ffffff 
166 #corps2 La propriété scrollbar-3dlight-color n'existe pas. : #c0c0c0 
167 #corps2 La propriété scrollbar-darkshadow-color n'existe pas. : #c0c0c0 

↑ Top

Avertissements (1)
URI : [url="http://renopro-services.xdir.fr/index.css"]http://renopro-services.xdir.fr/index.css[/url]
133  La même couleur est utilisée en tant que couleur et couleur de fond dans les deux contextes #corps li et #corps a 

↑ Top

Votre feuille de style CSS validée :
body { 
width : 760px;
margin : auto;
margin-top : 20px;
margin-bottom : 20px;
background-image : url("images/carre.jpg");
} 
#en_tete { 
width : 756px;
height : 100px;
background-image : url("images/ban.jpg");
background-repeat : no-repeat;
margin-bottom : 10px;
text-align : center;
border : 2px solid black;
} 
dl, dt, dd, ul, li { 
margin : 0;
padding : 0;
list-style-type : none;
} 
#corps dl { 
float : left;
width : 12em;
margin : 0 1px;
} 
#corps dt { 
cursor : pointer;
text-align : center;
font-weight : bold;
background : #b22222;
border : 1px solid gray;
} 
#corps dd { 
border : 1px solid gray;
} 
#corps li { 
text-align : center;
background : #fff;
} 
#corps li a, #menu dt a { 
color : #000;
text-decoration : none;
display : block;
height : 100%;
border : 0 none;
} 
#corps li a:hover, #menu dt a:hover { 
background : #eee;
} 
#menu { 
float : left;
width : 120px;
font-size : 12px;
font-family : arial;
} 
.element_menu { 
background-color : #030142;
background-image : url("images/motif.png");
background-repeat : repeat-x;
padding-left : 17px;
border : 2px solid black;
margin-bottom : 20px;
} 
.element_menu2 { 
background-color : #030142;
background-image : url("images/motif.png");
background-repeat : repeat-x;
color : white;
border : 2px solid black;
margin-bottom : 20px;
} 
.element_menu h4 { 
color : #0079f2;
font-family : Arial, "Arial Black", "Times New Roman", Times, serif;
text-align : center;
} 
.element_menu ul { 
list-style-image : url("images/poing2.jpg");
padding : 0;
padding-left : 20px;
margin : 0;
margin-bottom : 5px;
} 
.element_menu a { 
color : gray;
text-decoration : none;
} 
.element_menu a:hover { 
color : #b3b3b3;
text-decoration : underline;
} 
#corps a { 
color : #ffffff;
text-decoration : none;
} 
#corps a:hover { 
color : #7cfc00;
text-decoration : none;
text-decoration : underline;
} 
#corps { 
margin-left : 8px;
margin-top : -10px;
margin-bottom : 10px;
height : 5px;
padding : 5px;
font-size : 12px;
font-family : arial;
color : gray;
background-repeat : repeat-y;
} 
#corps2 { 
overflow : auto;
margin-left : 0;
margin-bottom : 10px;
padding : 2px;
height : 500px;
color : #000000;
font-size : 12px;
font-family : arial;
background-image : url("images/brique.jpg");
background-repeat : repeat-y;
border : 2px solid black;
} 
#corps h1 { 
color : #b3b3b3;
text-align : center;
font-family : Arial, "Arial Black", "Times New Roman", Times, serif;
} 
#corps h3, h5 { 
height : 30px;
background-image : url("images/titre.png");
background-repeat : no-repeat;
color : #b3b3b3;
text-align : center;
} 
#corps2 h3 { 
color : #b3b3bb;
text-align : center;
} 
#pied_de_page { 
padding : 1px;
margin-top : 10px;
text-align : center;
font-family : arial;
font-size : 12px;
color : #ffffff;
background-color : #b22222;
background-repeat : repeat-x;
border : 2px solid black;
}

croyez vous que ca peut venir de la :smhair1:

Modifié 1 Octobre 2007 par captain_torche

nolog · 29 Septembre 2007

:nonono:

En essayant avec la css validée et propsée par le lien ci-dessus >> idem

si quelqu'un a idée n'hesitez pas Merci

nolog · 29 Septembre 2007

la solution pour que la div centrale ne prend pas tt la page:

xdir qui me mettait mon site comme dans un frame (quand on affiche les différentes pages c'est toujours la même adresse et non les adresses des pages peut-être que le js de pub annulait les propriétés du body et mettait width=100%)

ce qui fait que comme "corps2" n'avait pas de taille définie, il se mettait aussi à 100%

donc en personalisant le width de ma div centrale c'est a moitie bon car elle n'est tjrs pas centrée mais elle ne prend plus deja toute la page

si qulqu'un voit comment faire pour la centrer :thumbsup:

**iNCiTE Web** · 29 Septembre 2007

Le style doit être :

- un width défini (en px ou %)

- margin-left: auto et margin-right: auto

- text-align: center

nolog · 1 Octobre 2007

salut seb

en appliquant tes conseils certe le site est centre maintenant sur IE6 sauf le menu

et pour firefox et opera le mnu est centre mais tout decalé :?:

ma feuille de style:

body 
{ 
font: 12px, Arial;
width : 760px;
text-align : center;
margin-top : 20px;
margin-bottom : 20px;
background-image : url("images/carre.jpg");
margin-left: auto;
margin-right: auto;

} 
#en_tete { 
width : 756px;
height : 100px;
background-image : url("images/ban.jpg");
background-repeat : no-repeat;
margin-bottom : 10px;

border : 2px solid black;

} 
dl, dt, dd, ul, li { 

padding : 0;
list-style-type : none;
} 
#corps dl { 
float : left;
width : 12em;

} 
#corps dt { 
cursor : pointer;
font-weight : bold;
background : #b22222;
border : 1px solid gray;
} 
#corps dd { 
border : 1px solid gray;
} 
#corps li { 

background : #fff;
} 
#corps li a, #menu dt a { 
color : #000;
text-decoration : none;
display : block;
height : 100%;
border : 0 none;
} 
#corps li a:hover, #menu dt a:hover { 
background : #eee;
} 
.12
{
font-size: 12px; 
}
#menu { 
float : left;
width : 120px;


} 

.element_menu { 
background-color : #030142;
background-image : url("images/motif.png");
background-repeat : repeat-x;
padding-left : 17px;
border : 2px solid black;
margin-bottom : 20px;
} 
.element_menu2 { 
background-color : #030142;
background-image : url("images/motif.png");
background-repeat : repeat-x;
color : white;
border : 2px solid black;
margin-bottom : 20px;
} 
.element_menu h4 { 
color : #0079f2;

} 
.element_menu ul { 
list-style-image : url("images/poing2.jpg");
padding : 0;


margin-bottom : 5px;
} 
.element_menu a { 
color : gray;
text-decoration : none;
} 
.element_menu a:hover { 
color : #b3b3b3;
text-decoration : underline;
} 
#corps a { 
color : #ffffff;
text-decoration : none;
} 
#corps a:hover { 
color : #7cfc00;
text-decoration : none;
text-decoration : underline;
} 
#corps { 

margin-top : -10px;
margin-bottom : 10px;
height : 5px;

color : gray;
background-repeat : repeat-y;
} 
#corps2 { 
width : 760px;
overflow : auto;

margin-bottom : 10px;
padding : 2px;
height : 500px;
color : #000000;
background-image : url("images/brique.jpg");
background-repeat : repeat-y;
border : 2px solid black;

} 
#corps h1 { 
color : #b3b3b3;


} 
#corps h3, h5 { 
height : 30px;
background-image : url("images/titre.png");
background-repeat : no-repeat;
color : #b3b3b3;

} 
#corps2 h3 { 
color : #b3b3bb;
text-align : center;
} 
#pied_de_page { 
width : 760px;
padding : 1px;
margin-top : 10px;
color : #ffffff;
background-color : #b22222;
background-repeat : repeat-x;
border : 2px solid black;
}

merci d'avance de ton coup de main

http://renopro-services.xdir.fr/

Modifié 1 Octobre 2007 par captain_torche
Lorsque tu postes des codes longs, merci d'utiliser la balise CODEBOX, qui n'étire pas indéfiniment la page. j'ai édité tes deux messages en ce sens. (captain_torche, modérateur)

**iNCiTE Web** · 1 Octobre 2007

Les margin auto doivent être pour le div qui contient le menu et le contenu, pas pour le body...

nolog · 1 Octobre 2007

:clap: sincerement merci pour tes efforts pour m'aider a avoir un affichage correct sur IE & firefox donc j'ai essaye d'appliquer le margin-left et right a la div corps contenant le menu rien n ' y fait j'ai crée une div appelée page qui englobe le menu et le corps de la page a laquelle j'ai appliquée le margin-left..

idem :IMSTP1: j'ai meme dans la page index.htm pour test appliquer a l'ancienne <center>..</center> pareil

**iNCiTE Web** · 1 Octobre 2007

<center> faut oublier...

Ton menu est suivi tout de suite du corps à cause du float:left que tu appliques à "corps"

Tu dois appliquer une largeur (width) et le margin auto à tous les éléments que tu veux centrer dans la page.

nolog · 2 Octobre 2007

salut seb

Bonne nouvelle ta derniere directive a porter ces fruits ce :pissed: de site est enfin centré du moins sur IE sur firefox c'est d'une laideur mais bon c'est deja ca merci beaucoup :thumbsup: si t'as une banniere pour la pub de ta boite je pourrais la mettre sur mes sites si ca te dit

http://www.codenav.fr

Modifié 2 Octobre 2007 par nolog

**iNCiTE Web** · 2 Octobre 2007

Je ne vois pas la différence sur FF, il y a toujours le float:left quivient tou décaler...

Au fait, tu as l'intention de prendre un hébergement avec nom de domaine je suppose ?

nolog · 2 Octobre 2007

Je ne vois pas la différence sur FF, il y a toujours le float:left quivient tou décaler...----->qd je l'enleve ca me chamboule l'affichage du menu ca me rend fou

Au fait, tu as l'intention de prendre un hébergement avec nom de domaine je suppose ?----->oui d'ailleurs je pense que c'est ca qui va me permettre un affichage coherent sur ie FF car qd je le met sur un repertoire cachée du site codenav c'est ok donc c'est bien xdir qui m'oblige a tout reparametrer dans tout les cas merci encore a toi

Connexion

Problème affichage du site

Sujets conseillés

nolog

iNCiTE Web

Arlette

iNCiTE Web

nolog

nolog

nolog

nolog

iNCiTE Web

nolog

iNCiTE Web

nolog

iNCiTE Web

nolog

iNCiTE Web

nolog

Veuillez vous connecter pour commenter

Parcourir

Activité