Sujet Précédent Sujet Suivant

Mise en page de site Web

Technibureau Messages postés 110 Statut Membre -  
Technibureau Messages postés 110 Statut Membre -
Bonjour,

J'aurais bien voulu une aide si possible pour la mise en page de mon site pour une compatibilité avec Firefox et IE,
J'ai essayer plusieurs méthodes, mais apparemment elle ne sont pas les bonnes, n'ayant pas pu obtenir un réelle résultat.

Si quelqu'un peut m'aider ?!

En vous remercient d'avance,
Cordialement
A voir également:

2 réponses

Réponse 1 / 2
vignemail1 Messages postés 1262 Statut Contributeur 259
 
Le problème concernant la compatibilité, c'est le respect des standards web que réalisent certains navigateurs et pas d'autres. Si tu prends Firefox, IE7, Opera 9 et le dernier Safari, tu as un support très correct des standards. Par contre IE6 et antérieur ont un mauvais support des standards. Tu ne peux pas avoir une compatibilité complète, tu ne peux que choisir les navigateurs sur lesquel ton site devrait marcher. Tu peux essayer de trouver des statistiques de l'utilisation des navigateurs sur des sites qui ont pignon sur rue comme google. Sur www.w3schools.com, tu peux trouver ce genre de statistiques. Tu pourras ainsi voir qu'environ 25% utilise IE6, 25% IE7, 25% Firefox et le reste répartit sur les autres navigateurs comme Opera et Safari. Tu peux aussi trouver ce qu'on appelle des hack CSS pour IE qui te permettront de donner des attributs CSS spécifique selon le navigateur ce qui augmentera la compatibilité.
0
Réponse 2 / 2
Technibureau Messages postés 110 Statut Membre 8
 
Je vous joins mon CSS : 

<a href="https://imageshack.com/"><img src="http://img214.imageshack.us/img214/9226/screenshotwg5.png" border="0" alt="Image Hosted by ImageShack.us"/></a><br/><a href="http://g.imageshack.us/img214/screenshotwg5.png/1/"><img src="http://img214.imageshack.us/img214/screenshotwg5.png/1/w640.png" border="0"></a>


Et un sreenshot, on remarque sous IE que en rétrécissant le navigateur le site rétrécie lui bizarrement.

_______________________________________________________________________________________ 
html{
	background:url('../images/bg.jpg') repeat-y;
	background-position: center;
	background-color:#D1C3A9;
	page: auto;
	height: auto;
	max-height: 100%;
	max-width: 100%;
	min-height: 100%;
	min-width: 100%;
	left: 0%;
	right: auto;
	top: 0%;
	position: fixed;
}

body {
	color:#000000;
	font-family:Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size:70%;
	position:absolute;
	width: 100%;
	height: 100%;
	min-height: 100%;
	left: 0%;
	/*border: 1px solid #000f2a;*/
	max-height: 100%;
	max-width: 100%;
	min-width: 100.%;
	right: auto;
	top: 0%;
	}

div#conteneur {
	width: 72%;
	height: 100%;
	left: 14%;
	max-height: 100%;
	max-width: 70%;
	min-height: 100%;
	min-width: 70%;
	right: auto;
	top: 0%;
	border: 1px solid #000f2a;
	position: relative;
	visibility: visible;
	}
	
div#header {
	background:url('../images/header.jpg') no-repeat;
	width:100%;
	height:392px;
}

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');
}

_______________________________________________________________________________________

Merci,
cdt
0