Probleme placement menu

celine -  
 celine -
Bonjour,

J'ai suivi un tutoriel sur la mise en page de site en html et css.
Le resultat est visible sur http://www.celinehurghada.com/essai1.php

Le probleme est que j'aimerai remplacer le menu du tuto par un menu php. J'ai donc fait une fonction "include" dans la div "menu" et ca ne fonctionne pas comme je voudrais.

Si j'inclus le mon menu php sans le modifier, mon menu se place au dessus de l'entete et la couleur de fond du menu s'appliqe a la page complete:
http://www.celinehurghada.com/essai2.php

Si j'enleve la partie css de mon menu et garde celle du tuto, mon menu se retrouve a la bonne place mais change de forme:
http://www.celinehurghada.com/essai3.php

J'ai fait plusieurs essais et ne trouves pas ce qu'il faut modifier (je supposes dans le css du menu) pour que le menu soit a la bonne place tout en gardant sa forme.

Il y a 3 fichiers (sans compter la banniere): le fichier php, le css et le menu.php (qui contient une partie de css) si necessaire je peux ecrire les codes ici.

merci d'avance
PS: desolee pour les accent, j'ai pas le bon clavier
A voir également:

2 réponses

Réponse 1 / 2
comingseb Messages postés 48 Statut Membre 11
 
un peu de code pourrait nous être utile pour répondre correctement a ton pb...
0
Réponse 2 / 2
celine
 
Le code de la page:
<head>
<title>Mon super site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="zero.css" media="all"/>
</head>

<body>

<!-- L'en-tête -->

<div id="en_tete">

</div>

<!-- Les menus -->

<div id="menu">
<?php include("menu.php"); ?>
</div>

<!-- Le corps -->

<div id="corps">
<h1>Mon super site</h1>

<p>
Bienvenue sur mon super site !<br />
Vous allez adorer ici, c'est un site génial qui va parler de... heu... Je cherche encore un peu le thème de mon site :-D
</p>

<h2>A qui s'adresse ce site ?</h2>
<p>
A tout le monde ! Si je commence à privilégier certaines personnes, on va m'accuser de discrimination ;o)<br />
Que vous soyez fans de fusils à pulsion plasma ou de Barbie et Ken, ce site est fait pour vous ! Si si !
</p>

<h2>L'auteur</h2>
<p>
L'auteur du site ? Bah, c'est moi, quelle question :-p<br />
Je vais essayer de faire le meilleur site du monde (ça doit pas être bien compliqué). Mon objectif est d'attirer un maximum de visiteurs, de les rendre accros à mon site, puis de les mettre en mon pouvoir.<br />
Je prendrai ensuite le contrôle du Monde. Une fois que ce sera fait, j'irai explorer les confins de l'Univers à la recherche de nouveaux peuples à soumettre à ma terrible puissance. MooUUuUuuUAhahHaaAhAAaaah !!! (rire diabolique).
</p>
</div>

<!-- Le pied de page -->

<div id="pied_de_page">
<p>Copyright "Tout pourri Corporation" 2005, tous droits réservés</p>
</div>

</body>
</html>

Le code du css :
body
{
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-image: url("images/fond.png");
}

/* L'en-tête */

#en_tete
{
width: 760px;
height: 142px;
background-image: url("titre.jpg");
background-repeat: no-repeat;
margin-bottom: 10px;
}

/* Le menu */

#menu
{
float: left; /* Le menu flottera à gauche */
width: 120px; /* Très important : donner une taille au menu */
}




/* Le corps de la page */

#corps
{
margin-left: 140px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */

color: #B3B3B3;
background-color: #626262; /* Une couleur de fond pour le corps */
background-image: url("images/motif.png");
background-repeat: repeat-x; /* Une petite image de fond qui se répètera horizontalement en haut */

border: 2px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}

/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

#pied_de_page
{
padding: 5px;

text-align: center;

color: #B3B3B3;
background-color: #626262;
background-image: url("images/motif.png");
background-repeat: repeat-x;

border: 2px solid black;
}

Le code du fichier menu.php:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>

<title>Les bons plans d Hurghada</title>
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>

<style type="text/css" media="screen">
<!--
body {
margin: 0;
padding: 0;
background:#ff9900;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 0;
left: 0;
}
#menu {
width: 7em;
}
#menu dt {
cursor: pointer;
margin: 2px 0;;

line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid gray;
background: #ffff00;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #ffff99;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
-->
</style>


</head>
<body>

<dl id="menu">

<dt onclick="javascript:montre();"><a href="https://celinehurghada.com/">Accueil</a></dt>

<dt onclick="javascript:montre('smenu5');">Intendance</dt>

<dd id="smenu5">
<ul>
<li><a href="logement.php">où dormir ?</a></li>
<li><a href="manger.php">où manger ?</a></li>
<li><a href="sortir.php">où sortir ?</a></li>


</ul>
</dd>

<dt onclick="javascript:montre('smenu2');">Pratique</dt>

<dd id="smenu2">
<ul>
<li><a href="plan.php">Se repérer</a></li>
<li><a href="meteo.php">Climat</a></li>
<li><a href="visa.php">Formalités</a></li>
<li><a href="sante.php">Santé</a></li>
<li><a href="enfant.php">Enfants</a></li>
<li><a href="vivre.php">Vivre en Egypte</a></li>
</ul>
</dd>

<dt onclick="javascript:montre('smenu3');">Activités</dt>

<dd id="smenu3">
<ul>
<li><a href="plongee sous marine.php">Plongée</a></li>
<li><a href="snorkeling.php">Randonnée palmée</a></li>
<li><a href="desert.php">Désert</a></li>
<li><a href="cheval.php">Equitation</a></li>
<li><a href="visite.php">Visite</a></li>
<li><a href="louxor et le caire.php"c>Louxor et Le Caire</a></li>
</ul>
</dd>



<dt onclick="javascript:montre('smenu6');">Plongée sous marine</dt>

<dd id="smenu6">
<ul>
<li><a href="debutants.php">Débutants</a></li>
<li><a href="confirme.php">Confirmés</a></li>
<li><a href="moi.php">Moniteur privé</a></li>
<li><a href="sites.php">Sites</a></li>
<li><a href="photo.php">Photo et vidéo</a></li>
<li><a href="theorie.php">Cours théoriques</a></li>
</ul>
</dd>

<dt onclick="javascript:montre('smenu7');">Coutumes</dt>

<dd id="smenu7">
<ul>
<li><a href="coutumes.php">Apercu des coutumes</a></li>
<li><a href="fete.php">Fetes egyptiennes</a></li>
<li><a href="wc.php">toilette</a></li>

</ul>
</dd>


<dt onclick="javascript:montre();"><a href="contact.php">Contact</a></dt>
</dl>

</body>
</html>
0

Discussions similaires

TV continental Edison bloqué sur le menu
Utilisateur anonyme -
jeannets -

1 réponse
menu caché
laurent -
ChariduP -

7 réponses
Comment activer le Bluetooth sur une TV Samsung ?
zaraki490 -
Marjo -

110 réponses
Mon PC marque press the esc key for startup menu
Jonas2022 -
SATS_fr -

5 réponses
Déblocage du mode hôtel Philips 20HF5234/10
Jo_3 -
TRAORE_2505 -

7 réponses