Aller au contenu

problème d'affichage sur différents navigateur

boy569

Par boy569
dans (X)HTML et CSS

 Partager

Sujets conseillés

boy569

boy569

Posté
Posté

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

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

.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

Sarc

Posté
Posté

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

Ernestine

Posté
Posté

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

boy569

Posté
  • Auteur
Posté (modifié)

bonjour et merci de vos réponses

j'ai réalisé quelque modification,

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

.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

Modifié par boy569
Sarc

Sarc

Posté
Posté (modifié) 
<a href="mapage.html"><img src="image\coupe.gif alt="logo coupe"" border=0></a>

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

<a href="mapage.html"><img src="image\coupe.gif" alt="logo coupe" border="0"></a>

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

Modifié par sarc
boy569

boy569

Posté
  • Auteur
Posté

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

boy569

Posté
  • Auteur
Posté

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

Monique

Posté
Posté

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

Monique

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

<{POST_SNAPBACK}>

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

boy569

boy569

Posté
  • Auteur
Posté

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

Monique

Monique

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

<{POST_SNAPBACK}>

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

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.

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...