HTML Image

Résolu

servietsky777 Messages postés 189 Date d'inscription Statut Membre Dernière intervention -
servietsky777 Messages postés 189 Date d'inscription Statut Membre Dernière intervention - 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
Editeur html - Télécharger - HTML
Image iso - Guide
Acronis true image - Télécharger - Sauvegarde
Reduire taille image - Guide
Légender une image - Guide

3 réponses

Réponse 1 / 3

servietsky777 Messages postés 189 Date d'inscription Statut Membre Dernière intervention 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.

Réponse 2 / 3

jjsteing Messages postés 1670 Date d'inscription Statut Contributeur Dernière intervention 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/...

Réponse 3 / 3

servietsky777 Messages postés 189 Date d'inscription Statut Membre Dernière intervention 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?

jjsteing Messages postés 1670 Date d'inscription Statut Contributeur Dernière intervention 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....

servietsky777 Messages postés 189 Date d'inscription Statut Membre Dernière intervention 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.

jjsteing Messages postés 1670 Date d'inscription Statut Contributeur Dernière intervention 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");

servietsky777 Messages postés 189 Date d'inscription Statut Membre Dernière intervention 7

ça ne change rien :/

jjsteing Messages postés 1670 Date d'inscription Statut Contributeur Dernière intervention 181

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

Votre réponse

Discussions similaires