Partage

Problème avec IE et pas Firefox

le css qui n'est chargé qu'à moitié??

Sujet résolu

3 janvier 2006 à 19:07:23

bonjour à tous!!
j'ai donc un souci avec IE sur le site perso que je suis en train de faire^^
avec firefox tout marche bien mais avec IE 6 j'ai une page en fond blanc alors qu'il y a un fond:(
les menu sont placés mais c'est tout meme pas la banniere.

pouvez vous m'aidez?

voici le code HTML
(ps: apparement la coloration du code ne marche pas o_O

)

<!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>
<link rel="stylesheet" media="screen" type="text/css" title="ma_banniere" href="css\ma_banniere.css" />
<title>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="en_tete">

</div>
<div id="menu1">

<div class="haut_menu">
<img src="images_site\cont_haut.gif"alt="contour haut"/>
</div>

<div class="element_menu"> 
   <h3>Titre menu</h3> 
<ul>
<li><a href="index.html">Accueil</a></li> 
<li><a href="news.html">News</a></li>
<li><a href="animes.html">Animes</a></li>
   <li><a href="resumes.html">résumés</a></li>
<li><a href="liens.html">Liens</a></li> 
<li><a href="page sept.html">forum</a></li>
   </ul>
</div>

<div class="bas_menu">
<img src="images_site\cont_bas.gif"alt="contour bas"/>
</div>
</div>


<div id="menu2">
<div class="haut_menu">
<img src="images_site\cont_haut.gif"alt="contour haut"/>
</div>

<div class="element_menu">
<h3>Nos sponsors!</h3>
<ul>
<li><img src="images_site\gto19.gif"alt="petit nichon"/></li>
<li><img src="images_site\manga.gif"alt="encore petit nichon"/></li>
<li>lien mort</li>
</div>

<div class="bas_menu">
<img src="images_site\cont_bas.gif"alt="contour bas"/>
</div>
</div>

<div class="haut_corp">
<img src="images_site\haut_corp.gif"alt="contour haut"/>
</div>
</div>
<div id="corps">

<h1>Mon super site</h1>
<?
// Enregistrons les informations de date dans des variables de code php

$jour = date("d");
$mois = date("m");
$annee = date("Y");

$heure = date("H");
$minute = date("i");

// Maintenant on peut afficher ce qu'on a recueilli
echo "Bonjour ! Nous sommes le $jour/$mois/$annee et il est $heure h $minute.";
?>
<p> 
<h3>Bienvenue sur mon super site !</h3><br /><img src="images_site\24.gif"class="imageflottante"alt="sangoku"title="sangoku frappe boubou"/>
Vous allez adorer ici, c'est un site génial qui va parler d'Animes, donc des mangas animés.<br /> je vais tenter de vous faire découvrir les séries que je regarde et je vous donnerai les lien sur les sites où l'on peut les télécharger^^<br/>
   bien sur il existe d'autres sites qui traite de ce sujet mais je compte faire de mon mieux pour vous faire découvrir ces mangas qui ne sont pas tous connus <br/>
   en effet il ne s'agis pas ici de vous parler des séries qui passaient sur le "club dorothée" dans votre jeunesse mais de vous faire voir qu'il existe d'autre chose

</p>

<h2>A qui s'adresse ce site ?</h2>
<p>

Ce site s'adresse essentiellement aux néophites

c'est un site pour decouvrir les mangas.
</p>

<h2>L'auteur</h2>
<p>
L'auteur du site ? Bah, c'est moi, quelle question :-p<br />
</p>
</div>
<div class="bas_corp">
<img src="images_site\bas_corp.gif"alt="contour bas"/>
</div>
</div>

<div id="pied_de_page">

<p>Copyright "Tout pourri Corporation" 2005, tous droits réservés,histoire de metrre quelque chose;)</p>
</div>

</body>

</html>

et le CSS

body
{
width: 800px;
margin: auto; /* Pour centrer notre page */
/*margin-top: 10px; Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom: 10px; /* Idem pour le bas du navigateur */
background-image: url("images_site/degrade bleu.jpg"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc

*/
background-repeat: repeat-x;

}

/* L'en-tête */
#en_tete
{
width: 800px;
height: 310px;
background-image: url("images_site/ma_banniere1.gif");
background-repeat: no-repeat;
margin-bottom: 5px;/*pour pas quelle soit collée au txte en dessous*/
}
/* Le menu */

#menu1
{
float: left; /* Le menu flottera à gauche */
width: 120px; /* Très important : donner une taille au menu */

}
#menu2
{
float: right; /* Le menu flottera à gauche */
width: 120px; /* Très important : donner une taille au menu */
}
.haut_menu
{
margin-left: -8px;
margin-top: 0px;
margin-bottom: 0px;
}
.element_menu
{
margin-top: 0px;
margin-bottom: 0px;
background-image: url("images_site/degrade menu.jpg");/*motif.png*/
background-repeat: repeat-x;/*pour repeter l'image uniquement horizontalement*/
border-left: 2px solid black;/*bordure qui fait 2 pixels en trait continue noir*/
border-right: 2px solid black;
/*margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
}
.bas_menu
{
margin-left: -8px;
}

/* Quelques effets sur les menus */
.element_menu h3 /* Tous les titres de menus */
{
color: #00078a;/*couleur du texte*/
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
margin-top: -5px;

}

.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
list-style-type: square;/*ou bien list-style-image: url("images/puce.png"); /* On change l'apparence des puces */
padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
/*margin-bottom: 5px; Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}

.element_menu a /* Tous les liens se trouvant dans un menu */
{
text-decoration: none; /* Les liens ne seront plus soulignés */
color: 00078a;
}

.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
background-color: #B3B3B3;
color: black;
}
/* Le corps de la page */
.haut_corp
{
margin-right:140px;
margin-left: 140px;
padding-bottom: 0px;
margin-bottom: -5px;
}
#corps
{
margin-right:140px;
margin-left: 140px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
padding-bottom: 0px;
padding-top: 0px;
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
text-align: justify;

background-image: url("images_site/degrade menu.jpg");
background-repeat: repeat-x; /* Une petite image de fond qui se répètera horizontalement en haut */

border-left: 2px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
border-right: 2px solid black;
}
.bas_corp
{
margin-right:140px;
margin-left: 140px;
}
#corps h1 /* Tous les titres h1 du corps */
{
padding-top: 0px;
margin-top: 0px;/*diminue la marge que le titre prend*/
color: #00078a;
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}
.imageflottante/* balise img src class="imageflottante"*/
{
margin-right:5px;
float: left;
}
#corps h2 /* Tous les titres h2 du corps */
{
height: 30px;/*hauteur*/

background-image: url("images_site/titre.png"); /* Une petite image de fond sur les titres h2 */
background-repeat: no-repeat; /* L'image ne se répètera pas, elle sera à gauche du titre */

padding-left: 30px;
color: #00078a;
text-align: left;
}

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

#pied_de_page
{
padding: 5px;

text-align: center;

color: #B3B3B3;

background-image: url("images_site/degrade bleu.jpg");
background-repeat: repeat-x;

border: 2px double black;/*bordure double de 2 pixels noir*/
}

JulFisher

3 janvier 2006 à 19:15:16

Impossible de supprimer son message ? :euh:

JulFisher

3 janvier 2006 à 19:16:22

Utilise des slashs "/" et pas des antislashs "\" de windows pour définir le lien relatif du .css ;).

(Valable pour toutes les adresses d'ailleurs

)

henichi

3 janvier 2006 à 19:19:35

ok merci je vais essayer la je doit aller faire à manger lol

CA ne marche pas !C'est maintenant pareil sous firefox et IE ya plus rien

JulFisher

3 janvier 2006 à 20:07:19

As-tu ton site en ligne ? Peut-être que c'est ton PC qui a un problème.

Tu as un prublème dans l'un de tes commentaire :

Fais cela ainsi :

Le "!" pourrait poser des problèmes.

Et remplace tout tes "\" par des "/".

Et donne-nous ton code sans PHP, une fois généré par le serveur.

Pourquoi tu as un "</div>" après tes images plusieurs fois ? Ils ne referment aucune balise ouverte voulue.

henichi

3 janvier 2006 à 20:26:21

non ce n'est pas mon pc car je l'ai essayer sur un autre et c'est pareil , mon site n'est pas en ligne.
J'ai essayé en suprimant le code php et en enlevant le ! à la fin du commentaire et c'est toujours pareil

pour les div tu as mal compté ils referment tous quelque chose en l'occurence les div dont tu parle (je crois) ferment les id.
d'autres solutions please.

JulFisher

3 janvier 2006 à 20:38:39

Non je confirme tu as un </div> (l. 91) en trop et un <ul> (l. 43) non refermé.

strucky

3 janvier 2006 à 20:49:12

Salut,

Juste une petite question comme ça :

Est-ce que tu as 2 dossier images_site ?

henichi

3 janvier 2006 à 20:51:48

OUI désolé tu as raison :-°

mais helas apres avoir corrigé le probleme reste le meme
non je n'ai qu'un seul dossier image site

JulFisher

3 janvier 2006 à 20:54:50

Evite les espaces dans les noms d'image.

Chez moi la page s'affiche (sans image bien sûr) mais il s'affiche.

henichi

3 janvier 2006 à 20:58:00

oui elle s'affiche mais je n'ai pas les images justement et je n'ai pas d'espace dans les noms d'mages

strucky

3 janvier 2006 à 21:07:46

Tu entres dans le dossier "css" pour aller chercher ton fichier.

Les images sont placés dans "images_site" à partir de ta page html.

background-image: url("images_site/degrade bleu.jpg");

Mais là, à partir de ta feuille css, tu va dans un dossier "images_site" contenu donc dans le dossier css.

Donc tes liens vers tes images à partir de ton css ne sont à mon avis pas bon, ils doivent-être comme ceci :

background-image: url(../images_site/degrade bleu.jpg);

JulFisher

3 janvier 2006 à 21:08:39

Et bien ça on peut pas le faire à ta place : vérifie les liens exacts et fais attention aux majuscules/minuscules.

EDIT : Ah ouai strucky, j'avais pas fais gaffe :-°

(je mets toujours mon .css dans le même dossier que mes pages avec un dossier images

)

Rajoute à l'exemple de strucky des guillemets dans les parenthèses.

Par contre je comprends pas pourquoi il a rajouté un ";" dans la parenthèse :-°

Citation : henichi

d'ailleur j'ai bien dit au debut que sous firefox ca marche nikel

IE n'est pas pourri à ce point qu'en même, faut pas exagérer o_O

(Un peu quand même

)

henichi

3 janvier 2006 à 21:12:02

non non mes liens sont bon ,j'ai essayé comme tu as dit et là il a pas trouvé l'image :euh:

d'ailleur j'ai bien dit au debut que sous firefox ca marche nikel

strucky

3 janvier 2006 à 21:18:15

As-tu bien aussi remplaçer l'antislash du lien vers ton fichier ?

href="css/ma_banniere.css" />

Citation : JulFisher

Par contre je comprends pas pourquoi il a rajouté un ";" dans la parenthèse

Petite erreur, rectifiée

henichi

3 janvier 2006 à 21:22:15

Citation : henichi

CA ne marche pas !C'est maintenant pareil sous firefox et IE ya plus rien

ce n'est pas la bonne formule essayez chez vous avec votre site vous verrez ca ne marche pas comme vous dites

mistike

3 janvier 2006 à 21:23:54

Citation : henichi

non non mes liens sont bon ,j'ai essayé comme tu as dit et là il a pas trouvé l'image

Pourtant il a raison : les liens définis dans un fichier css le sont relativement à l'emplacement du fichier CSS et non pas du fichier HTML. Donc si ton arborescence est comme ça :

C:.
| index.html
|
+---css
| ma_banniere.css
|
\---images_site
image1.jpg
image2.gif

Alors si tu veux afficher image1.jpg, tu dois écrire :

images_sites/image1.jpg ==> dans ton fichier html

ou alors :

../images_site/image1.jpg ==> dans ton fichier css

henichi

3 janvier 2006 à 21:27:25

là j'ai mon .html
C:\Documents and Settings\henichi\Mes documents\site web\site internet essai

là mon dossier CSS
C:\Documents and Settings\henichi\Mes documents\site web\site internet essai\css

et la mon dossier image
C:\Documents and Settings\henichi\Mes documents\site web\site internet essai\images_site
et puis sous firefox ca ne devrait pas marcher non plus si les liens ne sont pas bon? non?
et bien non on dirai car j'ai reéssayer et en fait on dirai que ca amrche
MERCI
je close pas j'ai pas tout verifier

mistike

3 janvier 2006 à 21:33:20

OK. Alors essayes plutôt de reprendre ton code original et de copier ton fichier css dans le même répertoire que ton fichier html (donc dans C:\Documents and Settings\henichi\Mes documents\site web\site internet essai\) et change le lien vers le css en mettant :

Si ça marche alors on saura que c'est de là que vient le problème.

IMPORTANTISSIME : jamais de signe \ dans les liens nulle part. Toujours des / (même si windows utilise des \).

henichi

3 janvier 2006 à 21:36:07

oui vous avez raison MERCI!!
mais sous IE j'ai encore un probleme au niveau du placement de mon corps ainsi que du bas_corp vous pouvez le voir?

jp949

4 janvier 2006 à 11:10:11

donne une largeur a #corps et margin:auto;

henichi

4 janvier 2006 à 20:22:55

j'ai fait ce que tu as dit

width: 506px;margin: auto;

en enlevant les

margin-right:140px;
margin-left: 140px

donc comme cà et bien ça cange rien

il y a toujour un ecart avec le corps qui comence (en étant bien centré)où se trouve la fin du plus grand menu

ptitvincou

5 janvier 2006 à 12:39:09

salut henichi !

tu as repondu a un de mes post pour le meme probleme et j'ai trouvé tout seul comme un grand (sisi) ma solution: mon corps etait trop large pour passé entre le menu et le bord de droite !!
quand je dis largeur y a le width et le padding qui compte (peut etre aussi le margin...)
je crois avoir lu quelque part que explorer avait un beug de 2, 3 pixels qui pourrait peut etre expliquer que ça marche tout juste avec firefox et pas avec IE !

fais un test genre en enlevant 100 px a ton width du corps pour voir si ça rentre ben ajustes !

je te mets mon nouveau code css

body
{
width: 793px;
margin: auto;
margin-top: 5px;
margin-bottom: 20px;
background-color: #666666;
}

#page
{
background-image: url("images/Themes/background/fond_page.gif");
background-repeat: no-repeat;
}

/* L'en-tête */

#en_tete
{
width: 793px;
height: 100px;
background-image: url("images/Themes/background/head_guillaumet.png");
background-repeat: no-repeat;
}

/* Le menu */

#menu
{
float: left;
width: 182px;
margin-left: 2px;
}

.element_menu
{
background-image: url("images/Themes/menu/menu.gif");
background-repeat: no-repeat;
margin-bottom: 20px;
height: 720px;
}

/* Quelques effets sur les menus */

.element_menu
{
padding-top: 60px; /* descendre le texte par rapport au background*/
margin-bottom: 0px;
}

.element_menu h3 /* Tous les titres de menus */
{

padding-left: 20px;
color: white;
font-family: "Comic Sans MS", "Arial Black", "Times New Roman", Times, serif;
font-size: 0.95em;
margin-bottom: 5px;
}

.element_menu h5 /* administration */
{

text-align: center; /* Pour centrer le titre */
color: grey;
margin-bottom: 0px;
}

.element_menu h5 a /* Tous les liens se trouvant dans un menu */
{
font-family: "Times New Roman", "Arial Black", "Times New Roman", Times, serif;
font-size: 10px;
color: grey;
text-decoration: none; /* Les liens ne seront plus soulignés */
}

.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
list-style-image: url("images/images_creations/head_guillaumet/puce_horizon.png"); /* On change l'apparence des puces */
padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
padding-left: 40px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */

margin-left: 10px;
margin-bottom: 0px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}

.element_menu a /* Tous les liens se trouvant dans un menu */
{
font-family: "Times New Roman", "Arial Black", "Times New Roman", Times, serif;
font-size: 14px;
color: #000000;
text-decoration: none; /* Les liens ne seront plus soulignés */
}

.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
font-family: "Times New Roman", "Arial Black", "Times New Roman", Times, serif;
/*background-color: #B3B3B3;*/
color: white;
}

/* Les infos rapides */

#infos
{
width: 440px;
height: 73px;
margin-left: 275px;
margin-top: 20px;
margin-bottom: 20px;
}

.infos
{
float: left ;
width: 33%;
height: 70px;
margin: 0px;
background-image: url("images/Themes/background/infos.gif");
text-align: center;
}

.infos h3 /*Derniere news, evenement, sortie*/
{
font-size: 0.8em;
color: white;
margin: 0px;
padding: 0px;
margin-bottom: 0px;
margin-top: 5px;
padding-top: 0px;

}

.infos h4 /*Derniere les infos */
{
font-size: 1em;
color: black;
margin: 0px;
padding: 0px
margin-top: 0px
}

.infos a /* Tous les liens se trouvant dans les infos */
{
font-family: "Times New Roman", "Arial Black", "Times New Roman", Times, serif;
font-size: 0.6em;
color: #000000;
margin: 0px;
padding: 0px;
}

/* Le corps de la page */

#corps
{
margin: 0px;
margin-left: 192px;
margin-bottom: 20px;
padding: 0px;
padding-top: 35px; /* pour decaler par rapport au background*/
padding-left: 15px;
width: 580px;
background-image: url("images/Themes/background/contenu.gif");
background-repeat: no-repeat;
min-height: 600px;
_height: 600px; /* hack IE */
}

/* Le pied de page */

#pied_de_page
{

padding: 5px;
text-align: right;
font-size: 0.7em;
color: black;
background-color: #9999FF;

}

J'espere que c ça pour toi aussi
++

henichi

5 janvier 2006 à 18:52:45

Merci ca marche a peu pres car je n'arrive pas a avoir exactement la meme disposition des div dans IE et FF mais ça se rapproche ,je continue le pofinage merci à tous