HTML Image

Résolu/Fermé

servietsky777 Messages postés 189 Date d'inscription mercredi 24 décembre 2008 Statut Membre Dernière intervention 19 septembre 2013 - Modifié par servietsky777 le 26/10/2010 à 13:55
servietsky777 Messages postés 189 Date d'inscription mercredi 24 décembre 2008 Statut Membre Dernière intervention 19 septembre 2013 - 24 nov. 2010 à 19:29

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>

<div id="entete">

</div>



<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>

<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>

<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:

HTML Image
Image iso - Guide
Editeur html - Télécharger - HTML
Acronis true image - Télécharger - Sauvegarde
Image iso windows 10 - Guide
Faststone image viewer - Télécharger - Visionnage & Diaporama

3 réponses

Réponse 1 / 3

servietsky777 Messages postés 189 Date d'inscription mercredi 24 décembre 2008 Statut Membre Dernière intervention 19 septembre 2013 7
26 oct. 2010 à 14:04

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.

Réponse 2 / 3

jjsteing Messages postés 1670 Date d'inscription vendredi 11 mai 2007 Statut Contributeur Dernière intervention 21 mai 2012 181
26 oct. 2010 à 14:09

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/...

Réponse 3 / 3

servietsky777 Messages postés 189 Date d'inscription mercredi 24 décembre 2008 Statut Membre Dernière intervention 19 septembre 2013 7
27 oct. 2010 à 13:02

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?

jjsteing Messages postés 1670 Date d'inscription vendredi 11 mai 2007 Statut Contributeur Dernière intervention 21 mai 2012 181
27 oct. 2010 à 13:28

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....

servietsky777 Messages postés 189 Date d'inscription mercredi 24 décembre 2008 Statut Membre Dernière intervention 19 septembre 2013 7
27 oct. 2010 à 13:57

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.

jjsteing Messages postés 1670 Date d'inscription vendredi 11 mai 2007 Statut Contributeur Dernière intervention 21 mai 2012 181
27 oct. 2010 à 14:15

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");

servietsky777 Messages postés 189 Date d'inscription mercredi 24 décembre 2008 Statut Membre Dernière intervention 19 septembre 2013 7
27 oct. 2010 à 14:16

ça ne change rien :/

jjsteing Messages postés 1670 Date d'inscription vendredi 11 mai 2007 Statut Contributeur Dernière intervention 21 mai 2012 181
27 oct. 2010 à 14:19

bizarr.. je regarderais ca ce soir... je mettrais différentes images et je te tiens au jus ;)

Discussions similaires

PIX

la balise <br> ou <br />

Comment recadrer une image avec Inkscape

Comment enlever le rouge sur la photo svp ?