Webmaster Hub > problème d'affichage sur différents navigateur

boy569

jeudi 30 décembre 2004 à 14:42

bonjour,
je suis débutant et j'ai créé une page index.html, quand j'utilise différent navigateur l'affichage n'est pas le même
voici mon code

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Les cocktails</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body class="arrierplan1">
<div class ="position1"><a href="menu.html"><img src="image\menu.gif" border=0></div>
<div class ="position2"><a href="materiel\materiel.html"><img src="image\materiel.gif" border=0></div>
<div class ="position3"><a href="shaker/shaker.html"><img src="image\shaker.gif" border=0></div>
<div class ="position4"><a href="longdrink\longdrink.html"><img src="image\ldrink.gif" border=0></div>
<div class ="position5"><a href="coupe\coupe.html"><img src="image\coupe.gif" border=0></div>
<div class ="position6"><a href="vcocktail\vcocktail.html"><img src="image\vcoktail.gif" border=0></div>
<div class ="position7"><a href="lien\lien.html"><img src="image\liens.gif" border=0></div>
<div class ="position8"><a href="email\email.html"><img src="image\email.gif" border=0></div></P>
</a>

</body>
</html>

et mon styles.css

CODE

.arrierplan1 {
    margin: 0px 0px 0px 0px;
    font-family: Verdana;
    font-size: 9pt;
    background: #ffffff;
    color: #000000;
    background-image: url(sable2.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: top left;
}

.position1{
    position: absolute;
    top: 40 px;
    left: 40 px
}

.position2{
    position: absolute;
    top: 80 px;
    left: 40 px
}

.position3{
    position: absolute;
    top: 113 px;
    left: 40 px
}

.position4{
    position: absolute;
    top: 160 px;
    left: 40 px
}

.position5{
    position: absolute;
    top: 200 px;
    left: 40 px
}

.position6{
    position: absolute;
    top: 240 px;
    left: 40 px
}

.position7{
    position: absolute;
    top: 280 px;
    left: 40 px
}

.position8{
    position: absolute;
    top: 320 px;
    left: 40 px
}

.titre1{
    font-family: "Lucida Console";
    size: 16px;
    color: #FEFF5B;
    text-align: center;
}

.paragraphe1{
    size: 14px;
    color: #FF5C1E;
    text-align: center;
    font-style: italic;
    font-weight: bold;
}

/* :link permet de définir les propriétés des liens */
.lien1:link{
font-size:20pt;
color : red;
text-decoration : none;
}

/* :visited permet de définir les propriétés des liens déjà visités */
.lien1:visited{
font-size:20pt;
    color: Lime;
    text-decoration: none;
}

/* :active permet de définir les propriétés d'un lien actif - qui vient d'être cliqué */
.lien1:active{
font-size:20pt;
    color: Black;
    text-decoration: none;
}

/* :hover permet de définir les propriétés du lien quand le curseur le survole */
.lien1:hover{
font-size:20pt;
color: White;
    text-decoration: underline;
}

j'ai utiliser un validateur w3c mais je sis pas comment l'interpréter.
pouriez vous me dire ou sont mes erreurs
merci

sarc

jeudi 30 décembre 2004 à 17:30

Salut !

Tu te prends vraiment trop la tête pour toutes tes positions différentes... Ca doit pouvoir se faire en position relative non ?
La c'est vraiment bcp de travail pour rien, et tu arrives a un résultat trop compliqué ==> des erreurs.

Jte conseille d'aller analyser openweb !

Ernestine

jeudi 30 décembre 2004 à 18:19

Salut Boy, et bienvenue sur le Hub !
Avant toute chose, sache qu'il existe une balise spéciale sur le forum pour inserrer du code HTML. Ca permet d'afficher celui-ci dans une petite boîte déroulante, ce qui évite d'avoir un topic si long

Tu trouves cette balise sur la page de rédaction de message.

Sinon, il y a quand même une énormité dans ton code : tu ouvres 8 balises de liens et n'en referme qu'une seule ! Tu te retrouves avec des divs qui se ferment et qui s'ouvrent à l'intérieur des liens, bref, faut refermer tout ça systématiquement !
Il y a aussi une balise fermante P alors que je ne vois pas la balise ouvrante. Soit elle n'existe pas, soit elle est noyée à un endroit où elle ne devrait pas l'être, dans les deux cas c'est à revoir.
Sinon, les différences d'affichage entre navigateurs sont normales, c'est un des grands problèmes pour la mise en page. Voilà pourquoi il faut tester son site avec les principaux navigateurs, même si ça oblige à installer des navigateurs dont on ne se sert pas.
Au plaisir,
Ernestine

boy569

vendredi 31 décembre 2004 à 18:43

bonjour et merci de vos réponses
j'ai réalisé quelque modification,

mon code html:

HTML

<html>
<head>
<title>Les cocktails</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body class="arrierplan1">
<div class="menu">

<a href="mapage.html"><img src="image\menu.gif" alt="logo menu" border=0></a>
<a href="mapage.html"><img src="image\materiel.gif" alt="logo matériel" border=0></a>
<a href="shaker/shaker.html"><img src="image\shaker.gif" alt="logo shaker" border=0></a>
<a href="longdrink.html"><img src="image\ldrink.gif" alt="logo long drink" border=0></a>
<a href="mapage.html"><img src="image\coupe.gif alt="logo coupe"" border=0></a>
<a href="mapage.html"><img src="image\vcoktail.gif" alt="logo verre cocktail" border=0></a>
<a href="mapage.html"><img src="image\liens.gif" alt="logo liens" border=0></a>
<a href="mapage.html"><img src="image\email.gif" alt="logo email" border=0></a>

</div>
<div class="content">
</div>

</body>
</html>

et mon css

HTML

.arrierplan1 {

margin: 0px 0px 0px 0px;

font-family: Verdana;

font-size: 9pt;

background: #ffffff;

color: #000000;

background-image: url(sable2.jpg);

background-attachment: fixed;

background-repeat: no-repeat;

background-position: top left;

}

.float {
float: left;
width: 70%;
}

.menu {
margin-right: 80%;
padding: 1em;
}

.titre1{

font-family: "Lucida Console";

size: 16px;

color: #FEFF5B;

text-align: center;

}

.paragraphe1{

size: 14px;

color: #FF5C1E;

text-align: center;

font-style: italic;

font-weight: bold;

}

/* :link permet de définir les propriétés des liens */

.lien1:link{

font-size:20pt;

color : red ;

text-decoration : none ;

}

/* :visited permet de définir les propriétés des liens déjà visités */

.lien1:visited{

font-size:20pt;

color: Lime;

text-decoration: none;

}

/* :active permet de définir les propriétés d'un lien actif - qui vient d'être cliqué */

.lien1:active{

font-size:20pt;

color: Black;

text-decoration: none;

}

/* :hover permet de définir les propriétés du lien quand le curseur le survole */

.lien1:hover{

font-size:20pt;

color: White;

text-decoration: underline;

}

sous ie j'ai deux images qui ne s'affiche pas et sous netscape j'en ai aucune
pouriez vous m'expliquer pq? j'ai déja cherché depuis ce matin

voici l'adresse:

cliquez ici

merci

sarc

vendredi 31 décembre 2004 à 18:49

CITATION

CODE

Le guillemet est n'importe ou... Essaye ca :

CODE

Hum, de plus, tu mets toujours des \ dans tes liens et tes images, remplace les par /...

boy569

vendredi 31 décembre 2004 à 19:35

j'ai fais des test et ca n'allais pas juste a cause d'un " ca me servira de lecon et merci encore
je regarderai a deux fois car la c'est une bétise

boy569

vendredi 31 décembre 2004 à 19:45

j'ai fais le test sur mon disque dur ok mais une fois mis sur le site avec ie j'ai l'image liens qui me manque et sous netscape je n'ai aucune image

Monique

vendredi 31 décembre 2004 à 19:47

Bonjour boy569,

Et bienvenue sur le Hub

Débuter n'est pas toujours facile

Mais avec un peu de bonne volonté, de bonnes sources de référence et l'aide des membres du Hub tu y arriveras !

Je te conseille ces pages qui te donneront une bonne base de départ :
- Ecrire une page Web
- CSS débutant

Monique

vendredi 31 décembre 2004 à 19:49

CITATION(boy569 @ vendredi 31 décembre 2004, 19h45)

j'ai fais le test sur mon disque dur ok mais une fois mis sur le site avec ie j'ai l'image liens qui me manque et sous netscape je n'ai aucune image

Hum... essaie avec image/menu.gif au lieu de image\menu.gif

boy569

vendredi 31 décembre 2004 à 19:51

oui c'est sur j'ai envie d'apprendre mais c'est pas évident avec tous ce qu'il y a sur le net.

l'affichage de l'image lien est le même code que les autres et il ne s'affiche pas je voudrais bien comprendre pq
merci a vous qui consacré du temps pour les autres

boy569

vendredi 31 décembre 2004 à 19:59

ok merci a vous j'ai résolu mon problème j'avais mis une majuscule au nom de l'image.

Monique

vendredi 31 décembre 2004 à 20:09

CITATION(boy569 @ vendredi 31 décembre 2004, 19h51)

oui c'est sur j'ai envie d'apprendre mais c'est pas évident avec tous ce qu'il y a sur le net.

Exact, on y trouve du très bon... et du très mauvais

Beaucoup trop de sites donnent encore des conseils complétement dépassés !
C'est pourquoi je t'ai renseigné deux sites spécialement destinés aux débutants qui te donneront les bases indispensables pour bien démarrer.

Pour aller plus loin, tu peux faire confiance aux sites présents dans le Top Sites du Hub... nous sommes très attentifs à leurs qualités.