Partage

[CSS] Affichage différent offline/online

Sujet résolu

28 août 2006 à 5:17:55

Bonjour à tous,
J'ai un petit problème avec mon site, celui ci s'affiche bien hors ligne (avec EasyPHP=> pour le moment le php n'est utile que pour l'include), mais quand je le met sur mon hébergeur, plusieurs trucs s'affichent mal.

L'adresse du site: http://www.comexcommunication.ca/shabla/

Des images:
Firefox OFFLINE
Firefox ONLINE

Internet Explorer OFFLINE
Internet Explorer ONLINE

L'include qui fonctionne mal avec EasyPHP j'ai crut comprendre que c'était normal.
Pour Firefox tout s'affiche bien offline, par contre online plusieurs trucs sont déplacés.
Pour Internet Explorer, tout s'affiche bien online et offline, excepté un petit bug en bas. Par contre avec IE, aucun des liens n'est cliquable o_O

Voici le code des pages:
index.php

<!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>CSGuide : La nouvelle référence pour Counter-Strike</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<script type="text/javascript">
window.onload = montre;
function montre(id)
{
var d = document.getElementById(id);
for (var i = 1; i<=11; i++)
{
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
</script>
</head>

<body>
<link rel="stylesheet" href="style.css" type="text/css">

<div id="header"></div>

<div id="left_menu">
<ul class="element_menu">
<b>Menu</b>
<li><a href="index.php">Accueil</a></li>
<li><a href="index.php?page=telechargements">Téléchargements</a></li>
<li><a href="index.php?page=liens">Liens</a></li>
<li><a href=""><strike>Forum</strike></a></li>
<li><a href="index.php?page=contacts">Contacts</a></li>
</ul>

<ul class="element_menu">
<b>Les bases</b>

<li><dt onclick="javascript:montre('smenu1')"><a href="#">Setup</a></dt></li>
<dd id="smenu1">
<ul class="element_sousmenu">
<li><a href="#">Clavier</a></li>
<li><a href="#">Tapis</a></li>
<li><a href="#">Chaise</a></li>
</ul>
</dd>

<li><dt onclick="javascript:montre('smenu2')"><a href="#">Config</a></dt></li>
<dd id="smenu2">
<ul class="element_sousmenu">
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
</ul>
</dd>

<li><dt onclick="javascript:montre('smenu3')"><a href="#">Commandes</a></dt></li>
<dd id="smenu3">
<ul class="element_sousmenu">
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Me+nu 2.3</a></li>
</ul>
</dd>

<li><dt onclick="javascript:montre('smenu4')"><a href="#">Mouvements</a></dt></li>
<dd id="smenu4">
<ul class="element_sousmenu">
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
</ul>
</dd>

<li><dt onclick="javascript:montre('smenu5')"><a href="#">Techniques de tir</a></dt></li>
<dd id="smenu5">
<ul class="element_sousmenu">
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
</ul>
</dd>

<li><dt onclick="javascript:montre('smenu6')"><a href="#">Maps</a></dt></li>
<dd id="smenu6">
<ul class="element_sousmenu">
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
</ul>
</dd>

<li><dt onclick="javascript:montre('smenu7')"><a href="#">Conseils pratiques</a></dt></li>
<dd id="smenu7">
<ul class="element_sousmenu">
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
</ul>
</dd>
</ul>

<ul class="element_menu">
<b>La compétition</b>

<li><dt onclick="javascript:montre('smenu8')"><a href="#">Introduction</a></dt></li>
<dd id="smenu8">
<ul class="element_sousmenu">
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
</ul>
</dd>

<li><dt onclick="javascript:montre('smenu9')"><a href="#">Préparation</a></dt></li>
<dd id="smenu9">
<ul class="element_sousmenu">
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
</ul>
</dd>

<li><dt onclick="javascript:montre('smenu10')"><a href="#">Communication</a></dt></li>
<dd id="smenu10">
<ul class="element_sousmenu">
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
</ul>
</dd>

<li><dt onclick="javascript:montre('smenu11')"><a href="#">Stratégies</a></dt></li>
<dd id="smenu11">
<ul class="element_sousmenu">
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
</ul>
</dd>

</ul>

</div>

<div id="frame">
<?php
$page == $_GET['page'];
switch ($page)
{
case 'accueil':
$pageOk = 'accueil.php';
break;
case 'telechargements':
$pageOk = 'telechargements.php';
break;
case 'liens':
$pageOk = 'liens.php';
break;
case 'contacts':
$pageOk = 'contacts.php';
break;
default:
$pageOk = 'accueil.php';
}
include($pageOk);
?>
</div>

<div id="right_menu">
<p style="">Support</p>
</div>

<div id="footer"><p>Créé par Mathieu "Shabla" Collinge ©2006</p></div>

</body>

</html>

style.css

body
{
width: 780px;
margin: auto;
margin-top: 10px;
font-family: Tahoma, Arial;
font-size: 0.7em;
background-color: #113650;
}

#header
{
width: 780px;
height: 125px;
background-color: #5b7b92;
background-image: url("images/header.jpg");
border: #356587 solid 3px;
margin-bottom: -3px;
}

#left_menu
{
float: left;
width: 125px;
height: 430px;
background-color: #5b7b92;
border: #356587 solid 3px;
margin-right: -6px;
}

#right_menu
{
position: absolute;
width: 125px;
height: 430px;
background-color: #5b7b92;
border: #356587 solid 3px;
margin-left: 655px;
margin-top: -436px;
}

#right_menu p
{
padding-left: 4px;
padding-top: 2px;
margin: 0px;
color: white
}

.element_menu
{
list-style-type: square;
margin: 0px;
margin-left: 13px;
padding: 6px;
color: #a9b8AA;
text-decoration: bold;
}

.element_menu li
{
margin-bottom: 5px;
}

dd
{
padding: 0px;
margin: 0px;
}

.element_sousmenu
{
margin: 0px;
padding-left: 15px;
}

.element_menu a
{
margin: 2px;
color: #FFFFFF;
text-decoration: none;
}

.element_menu a:hover
{
text-decoration: underline;
}

#frame
{
width: 527px;
height: 430px;
background-color: #5b7b92;
overflow: auto;
border: #356587 solid 3px;
margin-right: 0px;
}

#frame p
{
margin: 4px;
color: white;
text-align: justify;
}

#news
{
border: 2px solid #205070;
width: 475px;
font-size: 1.2em;
margin: auto;
padding: 3px;
padding-top: 0px;
padding-bottom: 0px;
background-color: #4a6a81;
}

.news_titre
{
font-size: 1.2em;
color: #f6e480;
font-weight: bold;
}

.news_auteur
{
font-size: 0.9em;
color: #f6e480;
text-align: right;
text-decoration: italic;
}

.news_contenu
{
color: white;
text-align: justify;
padding: 5px;
padding-top: 0px;
padding-left: 8px;
}

#download
{
border: 2px solid #205070;
width: 475px;
font-size: 1.2em;
margin: auto;
padding: 3px;
padding-top: 0px;
padding-bottom: 0px;
background-color: #4a6a81;
}

#footer
{
width: 780px;
height: 17px;
background-color: #5b7b92;
border: #356587 solid 3px;
margin-top: -3px;
}

#footer p
{
margin-top: 1px;
color: white;
text-align: center;
}

Voila... j'espère que quelqun pourra m'aider à résoudre ces petits problèmes.
Merci d'avance

jp949

28 août 2006 à 6:02:45

1er probleme ta balise <link> qui dioit s etre placée dans le <head> et non <body>
2eme probleme ton hebergeur qui enferme ta page dans une frame.
1ere chose a faire changer d'hebergement.

Shabla

28 août 2006 à 7:05:03

Merci pour le <link> je n'avais pas remarqué cette erreur

Sinon j'ai trouvé ce qui bloquais:

<div id="right_menu">
<p style="">Support</p>
</div>

style=""

Une fois ce petit bout de code enlevé et tout fonctionnait

Pour l'hébergeur je me demandais en effet d'ou provenait toute ces erreurs quand j'ai essayé de validé ma page pour xhtml...
Je vais en parler avec ladite compagnie...

Gregoo

28 août 2006 à 7:10:59

Salut,
tu as également un correction à faire dans ton code PHP :

$page == $_GET['page'];

... car ceci équivaut à écrire ça :

true;

... ou ça :

false;

Pour assigner une valeur, il faut utiliser un seul égal :

$page = $_GET['page'];

Cependant, si la variable $_GET['page'] n'est pas définie, celà va causer une erreur. Il faut donc vérifier l'existence de la variable :

$page = (isset($_GET['page'])) ? $_GET['page'] : false;

Cordialement,
Gregoo

Shabla

28 août 2006 à 7:22:58

Ah ouais, merci Gregoo, maintenant ca fonctionne offline aussi, y'a plus d'erreur.

Alors la j'ai un autre "problème", j'aimerais que lorsque le visiteur clic sur Setup par exemple, ca ouvre la page setup.php, mais que le sous menu reste ouvert. Comme c'est en ce moment, la page setup.php s'ouvre, mais le menu se referme automatiquement (du au nouveau chargement de la page)...

Les liens des sous-menus menerait vers des ancres dans cette même page (setup.php en l'occurence).

Quelqu'un aurait-il une solution ?

Gregoo

28 août 2006 à 8:03:58

Salut,
au démarrage te page, la fonction javascript montre() s'execute par le biais de cette ligne de code :

window.onload = montre

La fonction montre executée sans argument ferme tous tes sous-menus.
On va faire en sorte que lorsqu'une page autre que l'accueil est ouverte, on donne en argument l'ID du sous-menu qui doit rester ouvert à la fonction au chargement.
Pour celà il faut modifier un peu la structure de ta page. Notamment la place du traitement PHP. On va le faire en tout début de page, comme ça on pourra influencer sur ton javascript.

Tout en haut de ta page :

<?php
$page = (isset($_GET['page'])) ? $_GET['page'] : false;
switch ($page) {
case 'telechargements':
$pageOk = 'telechargements.php';
$menuIndex = 1;
break;
case 'liens':
$pageOk = 'liens.php';
$menuIndex = 2;
break;
case 'contacts':
$pageOk = 'contacts.php';
$menuIndex = 3;
break;
default:
$pageOk = 'accueil.php';
$menuIndex = false;
}
?>

Je te laisse mettre le bon numéro de sous menu pour chaque page. Si tu veux que rien ne souvre, tu met false (comme sur la page d'accueil par exemple).
J'ai également viré le cas 'accueil' dans ton switch puisque si on va sur page.php?page=accueil, on ira au cas par défaut et l'accueil sera bien chargé

.

Ensuite sur ta page, on va laisser juste l'include au milieu. Et ajouter la variable $menuIndex à la fonction montre() au chargement.

<!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>CSGuide : La nouvelle référence pour Counter-Strike</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<script type="text/javascript">
window.onload = montre(<?PHP echo $menuIndex; ?>);
function montre(id)
{
var d = document.getElementById(id);
for (var i = 1; i<=11; i++)
{
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
</script>
</head>

<body>
<link rel="stylesheet" href="style.css" type="text/css">

<div id="header"></div>

<div id="left_menu">
<ul class="element_menu">
<b>Menu</b>
<li><a href="index.php">Accueil</a></li>
<li><a href="index.php?page=telechargements">Téléchargements</a></li>
<li><a href="index.php?page=liens">Liens</a></li>
<li><a href=""><strike>Forum</strike></a></li>
<li><a href="index.php?page=contacts">Contacts</a></li>
</ul>

<ul class="element_menu">
<b>Les bases</b>

<li><dt onclick="javascript:montre('smenu1')"><a href="#">Setup</a></dt></li>
<dd id="smenu1">
<ul class="element_sousmenu">
<li><a href="#">Clavier</a></li>
<li><a href="#">Tapis</a></li>
<li><a href="#">Chaise</a></li>
</ul>
</dd>

<li><dt onclick="javascript:montre('smenu2')"><a href="#">Config</a></dt></li>
<dd id="smenu2">
<ul class="element_sousmenu">
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
</ul>
</dd>

<li><dt onclick="javascript:montre('smenu3')"><a href="#">Commandes</a></dt></li>
<dd id="smenu3">
<ul class="element_sousmenu">
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Me+nu 2.3</a></li>
</ul>
</dd>

<li><dt onclick="javascript:montre('smenu4')"><a href="#">Mouvements</a></dt></li>
<dd id="smenu4">
<ul class="element_sousmenu">
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
</ul>
</dd>

<li><dt onclick="javascript:montre('smenu5')"><a href="#">Techniques de tir</a></dt></li>
<dd id="smenu5">
<ul class="element_sousmenu">
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
</ul>
</dd>

<li><dt onclick="javascript:montre('smenu6')"><a href="#">Maps</a></dt></li>
<dd id="smenu6">
<ul class="element_sousmenu">
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
</ul>
</dd>

<li><dt onclick="javascript:montre('smenu7')"><a href="#">Conseils pratiques</a></dt></li>
<dd id="smenu7">
<ul class="element_sousmenu">
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
</ul>
</dd>
</ul>

<ul class="element_menu">
<b>La compétition</b>

<li><dt onclick="javascript:montre('smenu8')"><a href="#">Introduction</a></dt></li>
<dd id="smenu8">
<ul class="element_sousmenu">
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
</ul>
</dd>

<li><dt onclick="javascript:montre('smenu9')"><a href="#">Préparation</a></dt></li>
<dd id="smenu9">
<ul class="element_sousmenu">
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
</ul>
</dd>

<li><dt onclick="javascript:montre('smenu10')"><a href="#">Communication</a></dt></li>
<dd id="smenu10">
<ul class="element_sousmenu">
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
</ul>
</dd>

<li><dt onclick="javascript:montre('smenu11')"><a href="#">Stratégies</a></dt></li>
<dd id="smenu11">
<ul class="element_sousmenu">
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
</ul>
</dd>

</ul>

</div>

<div id="frame">
<?php
include($pageOk);
?>
</div>

<div id="right_menu">
<p style="">Support</p>
</div>

<div id="footer"><p>Créé par Mathieu "Shabla" Collinge ©2006</p></div>

</body>

</html>

Cordialement,
Gregoo

Shabla

28 août 2006 à 21:32:24

Premierement, merci beaucoup pour ton aide =)
J'ai essayé ce que tu me proposes plus haut, mais ca ouvre tous les menus en même temps, peu importe la variable $menuIndex... Peut-etre ai-je mal fait quelque chose ?

Tout en haut de index.php (en haut du DOCTYPE):

<?php
$page = (isset($_GET['page'])) ? $_GET['page'] : false;
switch ($page)
{
// Menu
case 'telechargements':
$pageOk = 'telechargements.php';
break;
case 'liens':
$pageOk = 'liens.php';
break;
case 'contacts':
$pageOk = 'contacts.php';
break;

// Partie 1
case 'setup':
$pageOk = 'setup.php';
$menuIndex = 1;
break;
case 'config':
$pageOk = 'config.php';
$menuIndex = 2;
break;
case 'commandes':
$pageOk = 'commandes.php';
$menuIndex = 3;
break;
case 'mouvements':
$pageOk = 'mouvements.php';
$menuIndex = 4;
break;
case 'techtir':
$pageOk = 'techtir.php';
$menuIndex = 5;
break;
case 'maps':
$pageOk = 'maps.php';
$menuIndex = 6;
break;
case 'conseils':
$pageOk = 'conseils.php';
$menuIndex = 7;
break;

// Partie 2
case 'p2intro':
$pageOk = 'p2intro.php';
$menuIndex = 8;
break;
case 'prep':
$pageOk = 'prep.php';
$menuIndex = 9;
break;
case 'comm':
$pageOk = 'comm.php';
$menuIndex = 10;
break;
case 'strategies':
$pageOk = 'strategies.php';
$menuIndex = 11;
break;

// Gestion
case 'admin':
$pageOk = 'admin/admin.php';
break;
case 'news_list':
$pageOk = 'admin/news_list.php';
break;
case 'news_add':
$pageOk = 'admin/news_add.php';
break;

// Page par defaut
default:
$pageOk = 'accueil.php';
$menuIndex = false;
}
?>

Dans la page :

Le javascript :

Le résultat en image

Merci encore pour ton aide

Gregoo

29 août 2006 à 7:38:56

Salut,
voici la correction à effectuer dans le javascript :

window.onload = function() {
montre(<?PHP if($menuIndex) echo "'smenu".$menuIndex."'"; ?>);
}

Cordialement,
Gregoo

Shabla

29 août 2006 à 19:18:19

Merci beaucoup, tout fonctionne parfaitement maintenant

J'ai ajouté des $menuIndex = false; pour les liens du menu qui n'a pas de sous-menu (telechargements, contacts, ...) sinon quand je clique sur ces liens le sous-menu précédament ouvert reste ouvert.

Merci pour ton aide Gregoo