problème d'affichage sous IE

16 octobre 2006 à 15:58:14

Salut à tous,mon site s'affiche bien dans firefox, mais pas du tout dans IE, même en local

http://fabb.r.free.fr/

voici le code css,

body
{
text-align:center;
background-color:#bdcedb;

}

#banniere1
{
float: left; /* La première partie sera à gauche*/
width:768px; /* On définit la largeur de l'image */
height:150px; /* On définit la hauteur de l'image */
background-repeat: no-repeat;
margin-bottom: 10px;
margin-right: -40px; /*Pour que la partie 1 se colle à la 2.*/

}
#banniere2
{
width:auto; /* Se répétera sur la place qu'on lui donne. */
height: 150px;
background-image: url("images/ban2.png");
background-repeat: repeat; /* Un repeat-x aurait suffit, mais comme on définit la hauteur c'est pas la peine*/
margin-bottom: 10px;
}

#banniere3
{
float: right; /* La dernière partie est à droite */
width:85px;
height: 150px;
background-image: url("images/ban3.png");
background-repeat: no-repeat;
margin-bottom: 10px;
margin-left : -5px; /*Pour que la partie 3 se colle à la 2.*/
}

/* Le menu */

#menu
{
float: left;
width: 120px;
height:800px;
background-image: url("images/motif3.gif");
background-repeat: no-repeat;
font-family: Arial;
font-size: 0.9em;
}

#menu h3
{
background-repeat: no-repeat;
background-color: #e2e2e2;
text-align: center;
padding-top:10px;
padding-bottom:10px;
}

#menu ul
{
list-style-image: url("images/puce.png");
padding-bottom:10px;
margin-left: -10px;
}

#menu a
{
color: blue; /*couleur du lien*/
}

#menu a:hover
{
color:red; /*couleur quand la flèche pointe sur le lien*/
}

/* Le corps de la page */

#corps
{
margin-left: 140px;
margin-bottom: 20px;
padding:5px;
font-family: Verdana;
font-size: 0.9em;
background-color: ;
background-image: url("images/motif3.gif");
background-repeat: repeat-x;

}

#corps h2
{
background-color: #e2e2e2;
text-align: center;
font-family: Arial;
}

#corps a
{
color: blue; /*couleur du lien*/
}

#corps a:hover
{
color: red; /*couleur quand la flèche pointe sur le lien*/
}

#corps ul
{
list-style-image: url("images/main.png");
}

/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

#pied_de_page
{
margin-left: 140px;
padding: 5px;
font-size: 0.9em;
text-align: center;
font-family: Verdana;
background-color: ;
background-image: url("images/motif3.gif");
background-repeat: repeat-x;
}

#pied_de_page p
{
background-image: url("http://perso0.free.fr/cgi-bin/wwwcount.cgi?df=[login].dat&dd=A&ft=4");
background-repeat: no-repeat;
padding: 5px;
}

et le html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

   <head>
<title>Acceuil/Astuces PC</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="style1"href="style1.css" />
</head>

<body>

 

<div id="banniere1">
   <img src="images/ban11.png" alt="Astuces PC" title="Ton pc est ton ami!!!">
</div>

<div id="banniere3">

</div>

<div id="banniere2">

</div>



<div id="menu">

<h3><em><q>MENU</q></em></h3>
<ul>
<li><a href="index.html">Acceuil</a></li>
<li><a href="astuce/indexa.html">Les Astuces</a></li>
   <li><a href="livre/indexl.html">Livre d OR</a></li>
<li><a href="forum/indexf.html">Forum</a></li>
   </ul>

<h3><em><q>Liens Utiles</q></em></h3>
<ul>
<li><a href="http://www.siteduzero.com/index.php">Site du Zéro</a></li>
<li><a href="http://www.google.com/webhp?hl=fr">Google</a></li>
</ul>
<h3><em><q>L'astuce du jour</q></em></h3>
<p>
Pour voir l'astuce du jour, <a href="astuce/indexa.html">cliquez ici</a>.

</p>
</div>



<div id="corps">
<h2> <em> <q>Bienvenue sur le site des astuces pour PC.</q> </em> </h2>
   <ul>
<li> <strong>Pourquoi la création de ce site?</strong>: Ce site est un site <q>test</q> que j'ai créé (on ferra les présentations ci-dessous

), afin de mettre en application tout ce que j'ai appris sur <a href="http://www.siteduzero.com/index.php"> Le Site du Zéro </a>, que je vous conseil d'aller visiter si vous voulez comme moi, apprendre a créer un site en partant de zéro.</li>
   <li> <strong>Que trouve-t-on dans ce site?</strong>: Pour ne pas refaire un site d'aide informatique, alors que ça se trouve facilement sur le net, et comme je trouvais pas le sujet, j'ai décidé de créer un site ou l'on peut trouver toutes sortes d'astuces afin d'utiliser plus facilement votre PC, que ce soit logiciel ou matérielle. Mais bon, soyons clair, je vais pas vous cacher que dans le forum qui se trouvera gréffé au site, il y aura une catégorie pour l'aide en générale.</li>
   <li> <strong>...et moi</strong>: Pour l'instant je ne dévoile pas toute mon identitée, mais juste mon pseudo <q>fabb</q> que j'utilise sur le net.</li>
   </ul>
   <p>
   <center>Donc voilà pour la présentation du site, il me reste plus qu'à vous souhaiter une bonne visite.<br/>
Par contre, comme c'est mon premier site, laissez moi un commentaire sur le<a href="livre/indexl.html">Livre d OR</a> Merci.</center>

   </p>
   </div>






<div id="pied_de_page">
<p>Copyright "fabb.Corp." 2006, tous droits réservés </p>
</div>

</body>

</html>
<position valeur="justifie"></position>

strucky

16 octobre 2006 à 17:48:27

le code html que tu as mis n'est pas le même que sur ton site.

Tu as un problème avec tes includes.

bbsebb

16 octobre 2006 à 17:58:32

Tu as trois choix:

Tu enleves le float des élements banières et tu les places en absolute
Tu met, tes banières en image d'arrière plan en haut, et tu laisses la place pour qu'on les voie
Tu regroupe le menu et le corp de page dans un sur-division :

<head>
</head>
<body>
 
<div id="banniere1">
<img src="images/ban11.png" alt="Astuces PC" title="Ton pc est ton ami!!!">
</div>
<div id="banniere3">
</div>
<div id="banniere2">
</div>

<div id="body">

<div id="menu">
</div>

<div id="corps">
</div>

<div id="pied_de_page">
<p>Copyright "fabb.Corp." 2006, tous droits réservés </p>
</div>

</div>
</body>
</html>
<position valeur="justifie"></position>

et tu ajoute dans le fichier CSS:
body{margin-top:80px}
pour eviter l'empiétement sur les banières

<< On n'apprend bien qu'à force de se tromper. >>

nix15

16 octobre 2006 à 19:44:57

Voici une petite Aide:
http://www.siteduzero.com/tuto-3-1512-0-faire-un-site-compatible-ie-et-ff.html

fabb.r

16 octobre 2006 à 19:46:42

Citation : strucky

le code html que tu as mis n'est pas le même que sur ton site.

Tu as un problème avec tes includes.

oui, mais je me suis basé sur le fichier html et css qui y a au dessus pour faire ensuite mes includes vu que mes fichier sont désormé en php, et j'ai éssayé avec le html et css qui sont la et c pareil

strucky

16 octobre 2006 à 20:04:14

Commence déjà par régler tes erreurs html.

Candygirl

16 octobre 2006 à 20:19:41

Citation : strucky

Commence déjà par régler tes erreurs html.

+1

Je dois dire, en regardant ton code source, que FF est quand même bien gentil de t'afficher quelque chose de potable

Si tu regardes, ton source génér commence ainsi:

<head>
<title>Acceuil/Astuces PC</title>

</head>
<div id="bannière" >
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

Le doctype n'est pas tout en haut ni l'ouverture de la balise html. La suite est du même acabbi avec plusieurs fermetures/ouvertures de balises comme html, body, d'autres déclarations de doctype en milieu de page...

Commence par revoir tes bouts d'html inclus avec php pour générer un code propre

fabb.r

16 octobre 2006 à 20:36:19

mais je croi avoir trouvé mon problème,le site fonctionne sous ie quand je modifie la bannière, c'est a direque quand j'ai voulu faire un site extensible comme expliqué dans les cours du site, faut créer une bannière en trois parti, et il est la le problème, dès que je met une simple bannière en haut de la pge et centré, ça fonctionne, donc je vais revoir mon design.

Pour Candygirl, c'est le premeir moyen que j'ai trouvé pour afficher le nom de la page sur l'onglet et l'en tête du navigateur, et si ça marche je vois pas ou est le problème

Sinon merci à tous pour votre aide.

strucky

16 octobre 2006 à 20:40:04

Faut revoir ta philosophie là

fabb.r

16 octobre 2006 à 22:56:17

Citation : strucky

Faut revoir ta philosophie là

pourquoi?

nix15

17 octobre 2006 à 13:57:47

Pas mal le nouveau design, mais faudrait changer la couleur des liens

fabb.r

17 octobre 2006 à 16:16:38

Citation : nix15

Pas mal le nouveau design, mais faudrait changer la couleur des liens

tu trouve que c'est mieu,j'ai changé pour faire un design fixe car j'avis un problème avec mon design extensible dans IE, tu te rapel? et en fait maintenant ça remarche avec IE, donc du coup je sais plus ou commencer, j'ésite entre un design fixe avec les nouvelles couleurs ou les anciennes, ou un design extensible avec les nouvelles couleurs ou les anciennes.
Ca me donne 4 possibilité, et comme je vois que tu trouve bien le nouveau design, je vais faire un extensible avec les nouvelles couleurquand au couleur du lien, oui c'est évident que je vais les changer.