18067 sujets

Questions générales et questions de débutants

Faire une zone réactive > Problème sous IE et Firefox

Excellent ce tuto. Mais après l'avoir testé avec succès sur une image, je l'ai utilisé sur le site http://buenaventura75.free.fr/ pour que tout le bandeau se transforme en lien. Les deux problèmes:
> Sous IE6, le bandeau réactif ne s'affiche pas.
> Sous Firefox 2, le bandeau réactif s'affiche mais le corps de page est décalé et surtout, les styles CSS ne s'appliquent pas.
Merci de vos réponses éventuelles et bonne journée.
Modifié par buenaventura (24 Nov 2006 - 15:37)
Bonjour buenaventura Smiley cligne

Je viens de jeter un oeil à ta page et tu as un certain nombre de problèmes de structure qui à mon avis peuvent entraîner le désagrément rencontré. En effet, en jetant un oeil à ta page, on remarque ceci :
[i]<link href="sddm.css" rel="stylesheet" type="text/css" /> [/i]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ... >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Escale numérique</title>
<link href="sddm.css" rel="stylesheet" type="text/css" />

Je te conseille de remettre un peu d'ordre dans tout cela en supprimant le lien vers ta feuille de style intervenant avant le Doctype. Smiley murf

On constate également un peu plus loin :
<div id="page">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ... >  
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" >

<link rel="stylesheet" type="text/css" href="sddm.css" >
<title>JSwitch Slide Menu</title>

</head>
<body>

Je suppose que tu as utilisé la fonction include de php pour insérérer le contenu de ce div.
Cependant, comme cela est mentionné dans ce tutoriel : Optimiser le poids de son site web (CSS séparée et include PHP)
a écrit :
Attention cependant : les fichiers inclus ne doivent pas posséder de balises HEAD ou BODY car ils "appartiennent" au fichier parent et ces balises seraient redondantes et en conflit.


Ces changements règlent-ils ton problème ?
Smiley cligne
Salut Cygnus,
Merci de tes remarques. J'avais déjà supprimé le premier lien redondant vers la CSS en local sur Dream avant d'envoyer le premier mail. J'ai viré les balises Head et Body dans le fichier inclus qui contient le bandeau réactif. Sans succès.
A +
Re Smiley cligne

Il faut que tu enlèves toutes les balises <html>, <head>, <body> ainsi que les Doctypes dans chacun des fichiers que tu inclues via la fonction include. Car si je ne me trompe pas, tu l'utilises plus d'une fois.

Pourrais-tu mettre le fichier en ligne à jour pour que l'on puisse voir ce que cela donne ?
Il y a du progrès Smiley cligne , la zone s'affiche aussi maintenant dans IE mais la page d'accueil ne prend pas les CSS pour le corps de page.
Voici les CSS de la zone réactive qui contient le bandeau d'en-tête (page head.inc2.php):

<div id="image">
	<a id="zone1" href="index.php" title="description du lien pour les syntheses vocales"></a>
</div>


<style type="text/css">
#image {    /* bloc image en arrière-plan */
width : 783px;
height: 100px;
background: url(../images/bandeau3.jpg) top left no-repeat;

}
#zone1 {    /* zone cliquable */

float: left;
width : 783px;
height: 100px;
margin-left: -10px;
margin-top:-10px;
}
</style>

Modifié par buenaventura (25 Nov 2006 - 16:01)
Sujet clos
Aller à