HTML Image

Résolu
servietsky777 Messages postés 256 Statut Membre -  
servietsky777 Messages postés 256 Statut Membre -
Hello,
J'ai créer un site dernièrement pour apprendre le html depuis le fameux "siteduzero". Tout marchait bien jusqu'à ce que je rajoute des images de catégories qui font planter toutes les autres image donc tous les fond (fond du menu, fond du corp...). ça les fait planter seulement sur IE et sur chorme ça marche. Avez vous une idée?


HTML
<!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" >
<head>
<title>usefulsoft.com</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
</head>
<body>
<!--********************************************ENTETE********************************************-->
<div id="entete">

</div>



<!--********************************************MENU********************************************-->

<div id="menu">
<div class="menu1">
<h3> MENU </h3>
<ul >
<li><a href="UsefulSoft.html" > Accueil </a></li>
<li><a href="Categorie.html" > Catégorie </a></li>
<li><a href="Aide.html" > Aide/Requète </a></li>
</ul>
</div>
<div class="menu2">
<h3> CATEGORIES </h3>
<ul >
<li><a href="categorie.bureautique.html" > Bureautique</a></li>
<li><a href="categorie.developpement.html" > Développement </a></li>
<li><a href="categorie.multimedia.html" > Multimédia </a></li>
<li><a href="categorie.internet.html" > Internet </a></li>
<li><a href="categorie.jeux.html" > Jeux </a></li>
<li><a href="categorie.utilitaires.html" > Utilitaires </a></li>
<li><a href="categorie.securite.html" > Sécurité </a></li>
</ul>
</div>
</div>
<!--********************************************CORP********************************************-->
<div id="corp">
<p> <h1> Catégories </h1> </p>
<p>
Hello, ici vous trouverez toutes les catégories

<ul>

<li><a href="categorie.bureautique.html" > Bureautique : <img src="images/bureautique.png" alt="bureautique" border="0"/> </a></li>
<li><a href="categorie.developpement.html" > Développement : <img src="images/developpement.png" alt="Developpement" border="0"/> </a></li>
<li><a href="categorie.multimedia.html" > Multimédia : <img src="images/multimedia.png" alt="Multimedia" border="0"/> </a></li>
<li><a href="categorie.internet.html" > Internet : <img src="images/internet.png" alt="Internet" border="0"/> </a></li>
<li><a href="categorie.jeux.html" > Jeux : <img src="images/jeux.png" alt="Jeux" border="0"/> </a></li>
<li><a href="categorie.utilitaires.html" > Utilitaires : <img src="images/utilitaires.png" alt="Utilitaires" border="0"/> </a></li>
<li><a href="categorie.securite.html" > Sécurité : <img src="images/securite.png" alt="Securite" border="0"/> </a></li>


</ul>

</p>
</div>
<!--********************************************FOOTER********************************************-->
<div id="footer">
<p> Copyright "Antoine's website" 2010, tous droits réservés</p>
</div>

</body>
</html>














CSS
/**********************DESIGN**************************/
body
{
width: 760px;
background-image: url("images/fond.png");
background-repeat: repeat-x;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-color: blue;
}
h1, h2, h3
{
color: white;
}
/****************************************************ENTETE********************************************************/
#entete
{
background-image: url("images/entete.png");
background-repeat: repeat-x;
height: 150px;
width: 760px;
margin-bottom: 10px;
border: 2px solid black;
}
/****************************************************MENU**********************************************************/
#menu
{
float: left;
width: 129px;
color: white;
}
#menu a
{
color: white;
text-decoration: none;
}
#menu :hover
{
font-size: 17px;
color: blue;
text-decoration: none;
}
#menu h3
{
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}
#menu ul
{
list-style-image: url("images/puce.png");
list-style-image: url("images/puce.png");
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
}

.menu1
{
border: 2px solid black;
margin-bottom: 20px;
background-image: url("images/menu.png");
}

.menu2
{
border: 2px solid black;
background-image: url("images/menu.png");
}
/****************************************************CORP**********************************************************/
#corp
{
margin-left: 140px;
padding: 5px;
border: 2px solid black;
margin-bottom: 20px;
background-image: url("images/corp.png");
}
#corp a
{
color: black;
text-decoration: none;
}

/****************************************************FOOTER********************************************************/
#footer
{
border: 2px solid black;
margin-left: auto;
margin-bottom: 20px;
background-image: url("images/corp.png");
text-align: center;
float: bottom;
clear: both;
}
A voir également:

3 réponses

Réponse 1 / 3
servietsky777 Messages postés 256 Statut Membre 7
 
Si vous pouvez aussi me donner quelques conseils =).

Merci d'avance

PS: Sinon toutes les images sous le dossier images sont des fichiers "nomdelimage.png" sans majuscule. Je ne pense donc pas que le problème vienne de problème de majuscules.
0
Réponse 2 / 3
jjsteing Messages postés 1803 Statut Contributeur 181
 
Bonjour :)

border="0" bof, border=0 Mieu ;)

J ais tout copier sur une page de test, mis une image dans un sous rep images que j ais nommé bureautique.png .. et elle s affiche.. sur IE et sur FF... c'est quoi le soucis ?? Es tu sur que ton répertoire est à la racine et qu il s appelle bien images (en minuscule) et que les images son bien en minuscule aussi (meme l extension !! )


Sinon, le code me parrait bien.. perso, au lieu des <div id="blabla"> j aurais mis <div class="blabla"> et en css donc au lieu de #blavla => .blabla (point blabla au lieu de diese)

Je t explique pourquoi : on utilise le id afin d'accéder à la balise en javascript... mais tu ne va pas modifier tes balises <div> en js... donc class ;)
Par contre <input id="blabla" value='test"> c est là qu on utilise vraiment l id.. avec, en JS par exemple : document.getElementById('current_nb').value="Mon" ce qui modifiera le texte de l input de 'test' en 'Mon' .. mais bon, c est un avis perso.. ca gène en rien le code ;)

plus d explication ici sur differnce id et class : http://www.journaldunet.com/...
0
Réponse 3 / 3
servietsky777 Messages postés 256 Statut Membre 7
 
Ok merci beaucoup.

Le problème vient enfaite quand je met au moins 2 images dans mes catégories.
Avec juste une image sa passe sur IE. Je comprend vraiment pas pourquoi...
Une solution?
0
jjsteing Messages postés 1803 Statut Contributeur 181
 
Ah oui, j avais pas vu:

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

Pourquoi 2 fois l image ?? ca sert à rien.. sinon à faire bugger le site ;)

J ais pas compris l histoire des 2 images....
0
servietsky777 Messages postés 256 Statut Membre 7
 
Sur mon site j'ai créer plusieurs pages , accueil categorie aide/requete. Puis encore une page par catégorie. Sous la page categorie, il y a ces images: le fond du site, le fond du corp, le fond du menu et l'image de l'en-tête avec le nom de mon site. A ce moment là tout fonctionnait. Puis j'ai commencer à éditer ma page categorie, j'ai rajouter un lien vers une des catégories dans le corp avec son image. Tout fonctionnait. Puis j'ai rajouter les liens de toutes les catégories avec toutes les images de chaque catégorie et là quand je lance dans IE, plus aucune image n'apparait ni le fond du site, le fond du menu, les images des catégories..
Maintenant, quand je ne laisse qu'une image dans mes catégories, ça marche mais si j'en mais 2-3-4... ça fait tout planter.
0
jjsteing Messages postés 1803 Statut Contributeur 181
 
Y a pas de raison.... ton code me parrait assez bon.. enlève juste dans #menu ul l une des deux ligne list-style-image: url("images/puce.png");
0
servietsky777 Messages postés 256 Statut Membre 7
 
ça ne change rien :/
0
jjsteing Messages postés 1803 Statut Contributeur 181
 
bizarr.. je regarderais ca ce soir... je mettrais différentes images et je te tiens au jus ;)
0

Discussions similaires

PIX
plart -
jordane45 -

1 réponse
la balise <br> ou <br />
faamugol -
rwaness -

8 réponses
<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

11 réponses
Dechiffrer une image caché
JACQUE -
Otomec -

1 réponse
Comment recadrer une image avec Inkscape
infofeet -
TELLIEZ -

13 réponses