Imprimer la Page

Forum-webmaster

Technique - programmation => HTML / CSS / XHTML => Message commencé par: Bluely le le 02-11-2010 a 13:40:59

Titre: Problème d'affichage sur IE 6
Posté par: Bluely le le 02-11-2010 a 13:40:59

Bonjour,

Je viens ici en dernier recours, ne sachant pas quoi faire. J'ai réalisé un site qui s'affiche très bien sur firefox et ie 7 et ie 8, sauf en ie6.
Sur ie 6, toute la structure du site a disparu. Il n'y a que le conteneur (la div qui contient tout) qui est bien en place, centré à l'écran.
J'ai l'impression qu'il n'ya pas d'autre div car tout s'affiche à la suite.
Je n'ai plus de float. Et surtout le contenu avec les images ne sont pas centrés dans la div conteneur et s'affiche sur toute la largeur de l'écran.
Je précise que je n'ai pas utilisé de position relative ou absolue.
Que dois-je faire pour améliorer l'affichage?
Merci pour votre aide.

Titre: Re:Problème d'affichage sur IE 6
Posté par: lgm243 le le 02-11-2010 a 16:25:58

adresse web ?

Titre: Re:Problème d'affichage sur IE 6
Posté par: Bluely le le 02-11-2010 a 16:35:08

Le site n'est pas encore en ligne. dsl
Mais j'ai vraiment besoin d'aide. En fait il n'y a même plus de mise en page ni de style en ce qui concerne le texte, les images et la structure.

merci

Titre: Re:Problème d'affichage sur IE 6
Posté par: lgm243 le le 02-11-2010 a 16:37:26

peu pas t'aider si tu montres pas le code html et css

Titre: Re:Problème d'affichage sur IE 6
Posté par: Bluely le le 02-11-2010 a 16:48:27

Alors voici les codes :)

html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>As.clic</title>
<meta name="description" content="" />

<link rel="stylesheet" type="text/css" href="css/asclic.css"/>

</head>

<body>
<div id="conteneur">
   <div id="contenu">

      <div id="header">
      <a href="index.html"><img src="images/logo4.png" alt= "logo As.clic" width="336" height="163"/> </a>
      <div id="horaires">
      <p>Disponible de
      <br />9h à 20h
<br />7 jours sur 7</p>

      </div>


      </div>


         <div id="menu">
<ul>
<li class="en_cours"><a href="index.html">Accueil</a></li>
<li><a href="#">Prestations</a>
<ul>
<li><a href="secretariat.html">Secrétariat</a></li>
<li><a href="organisation.html">Organisation</a></li>
</ul>
</li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>


      <div id="presentation">
         <div id="bienvenue"><img src="images/bienvenue.jpg" alt= "Bienvenue" width="380" height="261"/> </div>
         <div id="quoi"><span class="sous-titre"><img src="images/styloDeco.png" alt= "puce" width="20" height="20"/> AS.CLIC c’est quoi ?</span>
<p>Une professionnelle dans le domaine du secrétariat qui vous propose de <span class="texte_couleur">prendre en charge</span> vos tâches administratives, d’<span class="texte_couleur">organiser</span> vos déplacements et <span class="texte_couleur">faciliter</span> votre quotidien de chef d’entreprise.</p><p>Les prestations peuvent se faire ponctuellement ou régulièrement.
Le télétravail est une solution rentable et efficace quand on n’a pas les moyens de rémunérer une secrétaire à mi-temps ou à plein temps.</p>
<br />

</div>
<div class="cleaner"></div>

<div id="pourquoi"><span class="sous-titre"><img src="images/styloDeco.png" alt= "puce" width="20" height="20"/> Pourquoi faire appel à AS.CLIC ?</span>
<p>- Pour sa compétence, son professionnalisme, sa flexibilité, son expérience.
<br />- Pour vous faire gagner du temps et de l’argent.
<br />- Pour vous éviter les coûts liés à l’embauche d’une secrétaire.
<br />- Pour que vous puissiez gérer vos périodes de baisses ou de surcharges d’activités.
<br />- Plus économique que du personnel intérimaire.
<br />- Pour maîtriser vos dépenses.
<br />- Pour ne payer que la prestation commandée.</p>
<span class="macaron"><img src="images/garantie.png" alt="garantie" width="160" height="214SS"/></span>
      </div>

      </div>



      <div id="exemples">
      <span class="sous-titre2">Quelques exemples de missions :</span>
<p class="missions">Secrétariat, mailing, recouvrement de créances, organiser vos déplacements professionnels,
<br />présentation ou diaporama Powerpoint 2007, initiation formation Word 2007…</p>

<h3 class="missions"><strong>N'hésitez pas, profitez d’un service sur mesure pour ne vous occuper que de l’essentiel……
<br />VOTRE ENTREPRISE</strong></h3>

</div>

      <div id="services">
         <div id="secretariat"><a href="secretariat.html"><img src="images/servSecretariat2.png" alt= "Secrétariat" width="350" height="249"/> </a></div>
         <div id="organisation"><a href="organisation.html"><img src="images/servOrganisation2.png" alt= "Organisation" width="350" height="249"/> </a></div>
      </div>

      <div class="cleaner"></div>
      <div id="fond"></div>
      <div id="footer">
      <ul>
      <li><a href="mentions_legales.html">Mentions légales</a> | </li> <li><a href="cgv.html">CGV</a> | </li> <li><a href="contact.php">Contact</a></li> </ul></div>

   </div>
</div>

</body>

</html>

et css

Code:

body{
   margin:0px;
   padding:0px;
   font-family: Helvetica,Verdana, Arial, sans-serif;
   font-size:14px;
   color:#ffffff;
   background: #660033;
   line-height:20px;
   text-align:justify;
}

#conteneur{

margin-left:auto;
margin-right:auto;
width:1000px;
background-color: #caac6e;
background-image: url(../images/fondBois.jpg);
background-repeat: repeat;
behavior: url(../css/iepngfix.htc);

/* conteneur nécesaire pour avoir le dégradé*/

}

#contenu{
width:900px;
margin-left:51px;

}

#header img{
border:none;

}

a{
text-decoration:none;
}

img{
border:0px;
}

#horaires{
width: 200px;
height:195px;
padding-right: 50px;
float:right;
margin-top:-160px;
font-size:18px;
line-height:30px;
background-image:url(../images/postit.png);
background-repeat : no-repeat;
behavior: url(../css/iepngfix.htc);
text-align:center;
color:#330000;
font-weight: semi-bold ;
font-family: Verdana, Arial, Georgia, sans-serif ;
}

#horaires p{
margin-top: 50px;
padding:0px 15px;
}

#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
background-image:url(../images/fondMenu.png);
behavior: url(../css/iepngfix.htc);
font-size:16px;
height:42px;
margin-top:-5px;
margin-bottom:20px;
}

#menu li {
float:left;
margin:auto;
padding:0;
background-color:#660033;
}
#menu li a {
display:block;
width:100px;
color:white;
text-decoration:none;
padding:11px;
}
#menu li a:hover {
background-color:#330000;
}

#menu ul li.en_cours{
background-color:#330000;
}

#menu ul li ul {
display:none;

}

#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
float:none;

}
#menu ul li ul {
position:absolute;
}

#presentation{

width:900px;
text-align:justify;

}

a{
color:#ffffff;
text-decoration:underline;
}

#bienvenue{

width: 380px;
float: left;
padding:0px 15px 15px 15px;

}

#quoi{
background-image: url(../images/fondTexte.png);
behavior: url(../css/iepngfix.htc);
width: 440px;
float: right;
padding:20px 15px 15px 15px;
margin-top:10px;
margin-right:20px;
-moz-border-radius:10px;
-khtml-border-radius:10px;

}

.texte_couleur{
color:#660033;

}

#pourquoi{
background-image: url(../images/fondTexte.png);
behavior: url(../css/iepngfix.htc);
padding:20px 15px 15px 15px;

margin:0px 20px;
-moz-border-radius:10px;
-khtml-border-radius:10px;

}

.macaron{

float:right;
margin-top:-185px;
}

#exemples{

padding:40px 20px 30px 20px;
text-align:center;
line-height:20px;
}

#exemples ul{
padding-left:17px;
list-style:none;
margin:0px;
padding:0px;
}

.sous-titre{
font-size:20px;
font-weight:semi-bold;
color:#660033;

}
.sous-titre2{
font-size:20px;
font-weight:semi-bold;
color:#660033;
text-decoration: underline ;
}

.cleaner{
clear:both;
}

.missions{
color:#330000;
}

#services{
height:250px;

}

#secretariat{
float:left;
padding:20px 40px;

}

#organisation{
float:right;
padding:20px 40px;

}
#fond{
background-image: url(../images/fond.png);
behavior: url(../css/iepngfix.htc);
margin-top:-270px;
height:270px;
margin-bottom:-14px;
}

*******Page Contact*******/

#conteneur_formulaire{
width:900px;
}

#colGauche_formulaire{
width:360px;
float:left;
margin: 0px 15px;
}

#intro_formulaire{
font-size:15px;
font-weight:bold;
color:#330000;
padding:0px 20px;
line-height:26px;
text-align:center;

}

#intro_formulaire img{
float:left;
padding-right:20px;
}

#intro_formulaire p{
padding-top:30px;

}

.soulignage{
text-decoration:underline;
}

.infosTitre{
font-weight:bold;
}

#coordonnees{
text-align:center;
line-height:20px;
color:#330000;
background-image: url(../images/fondTexte.png);
padding: 15px ;
-moz-border-radius:10px;
-khtml-border-radius:10px;
border-radius: 10px;
behavior: url("css/PIE.htc");
-webkit-box-shadow: #000 0px 0x 15px;
-moz-box-shadow: #000 0px 0px 15px;
box-shadow: #000 0px 0px 15px;

}
#coordonnees a {
color:#330000;
}

#formulaire{
width:450px;
float:right;
background-image: url(../images/fondTexte.png);
margin: 0px 15px;
padding: 15px ;
-moz-border-radius:10px;
-khtml-border-radius:10px;
border-radius: 10px;
behavior: url("css/PIE.htc");
-webkit-box-shadow: #000 0px 0x 15px;
-moz-box-shadow: #000 0px 0px 15px;
box-shadow: #000 0px 0px 15px;

}

fieldset{
border: 4px double #660033;
}

legend{
color:#660033;
font-size:18px;
}

small{
color:#000000;
}

#erreur{
background-color:#660033;
padding-left:15px;
color:white;
}

/*******Page Prestations*******/
#prestations{
width:500px;
background-image: url(../images/fondTexte.png);
padding:15px;
margin:0px 20px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
float:right;
}

.fil_Ariane{
margin-top: -20px;
padding-left:20px;
}

.deco_prestations{
margin-left:20px;
padding-top:15px;
margin-bottom:20px;
}

h4{
margin:0;
color:#330000;
text-decoration:underline;
}

h5{
margin:0;
color:#330000;
}

.bt_contact{
background-image: url(../images/bt_contact.png);
background-repeat:no-repeat;
width:250px;
height:238px;
padding:5px 30px;
color:white;
margin:0px 20px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
text-align:center;

}

.intitule{
font-family:georgia, serif;
font-weight:bolder;

}

/*******Page Footer*******/
#footer{

width:900px;
height:30px;

background-color:#6d3e3e;
text-align:right;
}

#footer ul {
padding:5px 15px;
}
#footer ul li{
display:inline;
text-decoration:none;
color:#330000;
}

#footer ul li a{
color:#330000;
}

/*******Page Mentions Légales*******/

#mentions, #cgv{
background-image: url(../images/fondTexte.png);
padding:15px;
margin:0px 20px;
-moz-border-radius:10px;
-khtml-border-radius:10px;

}

Merci

Titre: Re:Problème d'affichage sur IE 6
Posté par: Pad le le 03-11-2010 a 12:09:46

tu devrais commencer à abandonner IE6, ça te fera gagner du temps et ça obligera les gens qui ont encore une daube pareil à changer ou mettre à jour leur navigateur ;)

Titre: Re:Problème d'affichage sur IE 6
Posté par: Bluely le le 03-11-2010 a 15:01:07

Oui c'est sûr! Mais le problème est que les prestations que proposent ce site ont pour cible les entreprises, et je crois savoir que ce sont surtout les entreprises qui utilisent cet abominable navigateur. J'ai donc besoin que le site soit compatible ie6.
J'ai vraiment besoin d'aide. Svp

Titre: Re:Problème d'affichage sur IE 6
Posté par: Pad le le 03-11-2010 a 15:41:21

le plus simple pour nous, serait d'avoir le site sous les yeux et non pas 1000 lignes de code et pas savoir quoi rechercher !