Centrer design site web (compatibilité naviga

Résolu/Fermé
Technibureau Messages postés 106 Date d'inscription jeudi 6 septembre 2007 Statut Membre Dernière intervention 5 août 2009 - 13 août 2008 à 07:39
Technibureau Messages postés 106 Date d'inscription jeudi 6 septembre 2007 Statut Membre Dernière intervention 5 août 2009 - 26 nov. 2008 à 16:11
Bonjour,

Je suis un peu perdu, je cherche à bien calibrer mon design de site, sans y parvenir. Cela a cause de la compatibilité entre IE et firefox.
Etant adepte de Firefox, j'ai réalisé mon site, en tenant compte de son design dans firefox, et pour ne rien caché, je l'avait hébergé directement en local, donc aucune faille apparente même dans IE.
Une fois en ligne, le site était impec' sous firefox, mais décalé vers la gauche sur IE.

Si vous avez pouvez m'aider,
Merci,

CSS :

_____________________________________________________________________________________________

html{
	background:url('../images/bg.jpg') repeat-y;
	background-position: center;
	background-color:#D1C3A9;
}

body {
	color:#000000;
	font-family:Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size:70%;
	position:absolute;
	width: 100%;
	height: 100%;
	min-height: 100%;
	left: 50%;
	margin-left: -50%; /* moitié de la largeur */
	/*border: 1px solid #000f2a;*/
}

div#conteneur {
	width:792px;
	height:auto;
	margin-left: 10%;

}
	
div#header {
	background:url('../images/header.jpg') no-repeat;
	width:100%;
	height:392px;
	border: 1px solid #000f2a;
}

div#date {
	position:absolute;
	margin-top:270px;
	margin-left:490px;
}

div#menu{
	width:27%;
	height:auto;
	float:left;
}

div#contenu{
	padding-left:2%;
	padding-right:2%;
}

div#menuforme {
	background:url('../images/m_footer.jpg') no-repeat bottom #FFFFFF;
	width:100%;
	height:auto;
	padding-bottom:10%;
	margin-bottom:10%;
	}

div#menuforme h2 {
	width:100%;
	height:auto;
	background:url('../images/h2_m.jpg') no-repeat;
	text-align:center;
	padding-top:10px;
	}

div#menuforme ul {
	padding-left:4px;
	padding-top:10px;
	height:auto;
	width:100%;
	border-left:2px solid #D2CDC4;
	border-right:2px solid #D2CDC4;
	}
	
div#menuformecentre {
	border-left:1px solid #D2CDC4;
	border-right:1px solid #D2CDC4;
}

div#menuforme li {
  height:15px;
  margin-bottom:3px;
  padding-left:18px;
  background:url('../images/li.jpg') no-repeat;
  }
  
div#menuforme lu {
height:15px;
margin-bottom:3px;
padding-left:18px;
background:url('../images/lu.jpg') no-repeat;
}

img { display:block; margin:0; padding:0; }
ul , li { margin:0; padding:0; list-style-type:none; }
a { color:#333333; text-decoration:none; font-weight:bold; }
a:hover { color:#D1C3A9; font-weight:bold; }
a img { border:0; }
h1 { text-align:left; margin:0; padding:0; font-size:150%; }
h2 { margin:0; padding:0; font-size:100%; }
h3 { margin:0; padding:0; font-size:120%; }
h4{ height:15px; font-size:12px; font-family:Verdana, Tahoma, Arial, Helvetica, sans-serif; margin:0px; padding-left:18px; background:url('../images/li.jpg') no-repeat; }
p { margin:0; padding:5px; }
div.clear { clear:both; }

div#centre {
	width:514px;
	height:auto;
	float:right;
}
	
div#centreheader {
	width:514px;
	height:19px;
	background:url('../images/h2_t.jpg') no-repeat;
	text-align:center;
	padding-top:3px;
}
	
div#centrecentre {
	width:513px;
	height:auto;
	background-color:#ffffff;
	text-align:justify;
}
	

div#centrefooter {
	background:url('../images/t_footer.jpg') no-repeat bottom #FFFFFF;
	width:514px;
	height:51px;
}

div#footer {
	width:100%;
	height:190px;
	background:url('../images/footer.jpg') no-repeat;
	clear:both;
	}

div#footer p {
        text-align:center;
}
        
div#admin {
	position:absolute;
	margin-top:-146px;
	margin-left:43px;
}

div#lien {
	position:absolute;
	margin-top:500px;
	margin-left:43px;
}

div#photo {
	position:absolute;
	margin-top:-150px;
	margin-left:180px;
}

div#visiteur {
	position:absolute;
	margin-top:240px;
	margin-left:135px;
}
div#contact {
	position:absolute;
	margin-top:80px;
	margin-left:330px;
}

div#news {
	text-align:center;
	margin:auto;
}

div#image{
	position:absolute;
	width:257px;
	height:280px;
	margin-top:-200px;
	margin-left:200px;
	background:url('../images/UCE.jpg');
}
_________________________________________________________________________________________
--

M@tt
A voir également:

4 réponses

Technibureau Messages postés 106 Date d'inscription jeudi 6 septembre 2007 Statut Membre Dernière intervention 5 août 2009 8
29 août 2008 à 13:33
BOnjour Jasen,

Je vais testé cela, et revient vers vous pour la réponse,

En vous remercient,
Site agréable à l'œil,

Cdt
1
Bonjour TechniBureau,
c'est marrant, j'ai connu la semaine dernière la même interrogation lors de la création de mon premier siteweb! L'éditeur HTML Wysiwyg que j'ai utilisé me propose de visualiser le résultat présumé avec plusieurs navigateurs, dont IE et FF. Constatant notamment que chez l'un et chez l'autre des différences notables s'opéraient (râh!), je me suis enquis du code HTML, et j'ai y intervenir par l'écriture de <p align="right"> et <div style="TEXT-ALIGN: right">
</div>
Ce qui a très certainement réglé le problème que vous évoquez. Egalement, certaines lignes de textes peuvent s'échapper de votre intention si vous ne leur dictez pas l'odre de s'écrire en <font face="Verdana"> </font> (verdana par exemple); en effet, si vous laissez trop de liberté aux navigateurs (...) dans le choix de la police de caractère, ils conviendront d'écrire une ligne en Times Roman, une autre en Trebuchet MS, ...et parfois en ce que vous pensiez!
A ce propos, est très utile de comparer systématiquement, avant de publier ou juste après, le résultat désiré aux résultats obtenus ...et de convenir d'un compromis. Vous constaterez bien vite que le peu d'originalité graphique des 99% des siteweb existants émarge d'une telle difficulté récurrente!
Pour conclure, je vous invite à jeter un coup d'oeil à ce que j'ai mis en ligne dernièrement: http://jeansentrais.net
Bonne recherche, et bonne solution.
0
Ah! j'oubliais de vous renseigner qu'il est amusant de saisir une capture de votre écran de siteweb (avec par ex. FireShot, module complémentaire de FF: c'est géant!) et de la publier sur la même page ...par un simple lien interne, et d'inviter vos visiteurs à comparer l'image png avec ce qu'ils voient de votre page sur leur écran! C'est ce que j'ai réalisé ici http://jeansentrais.net/jean_sentrais_09.htm sous le carré rose en haut à droite de la page. Cela est une façon conviviale d'engager un débat avec des visiteurs.
A +++
0
Technibureau Messages postés 106 Date d'inscription jeudi 6 septembre 2007 Statut Membre Dernière intervention 5 août 2009 8
26 nov. 2008 à 16:11
Impeccable problème résolue !
Cela venait de code php placer au dessus de la bannière Header

Cdt
0