18067 sujets

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

Menu avec entête et pied de page...

Cela fait maintenant plus de 2 mois que j'essaie sans cesse... mais là, je suis complètement perdu dans tous ces codes........ je désepère.....

Je souhaite faire un site avec un menu sur la gauche, vertical. Un pied de page fixe qui reste en permanence à l'écran (mais que le pied de page ne passe pas sous le menu). Pour la partie centrale, un bloc de texte et une entête qui bouge ensemble....

Un index qui ressemblerait à ça:

upload/8385-index.jpg

Quelqu'un peut-il m'aider ? car là, je suis vraiment perdu.... Smiley bawling

Un immense MERCI d'avance!!!!!
Modifié par vinzu (15 Sep 2006 - 09:24)
Bien, pourquoi ne commencerais-tu pas par nous montrer ce que tu as obtenu jusqu'ici, avec un exemple en ligne ou au moins du code?
Voici mon code actuel :

<html>
<!-- Date de création: 04.07.2006 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>INDEX TEST</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="Vinzu">
<meta name="generator" content="WebExpert 6">

</head>
<body>


<div class="entete" >
<?php
include('titre.html');
?>
<hr size="1px">
</div>
<div class="colonneGauche" >
<?php
include('menu.htm');
?>
</div>
<div class="colonneDroite">
<?php

// On définit le tableau contenant les pages autorisées
// ----------------------------------------------------
$pageOK = array('accueil' => 'introcentre.html',
'sanglier' => 'sanglier/index.html',
'A1' => 'A1/index.html',
'A2' => 'A2/index.html',
'A3' => 'A3/index.html',
'A4' => 'A4/index.html',
'A5' => 'A5.php',
'contact' => 'contact.php',
'noustrouver' => 'noustrouver.html');

// On teste que le paramètre d'url existe et qu'il est bien autorisé
// -----------------------------------------------------------------
if ( (isset($_GET['page'])) && (isset($pageOK[$_GET['page']])) ) {
include($pageOK[$_GET['page']]); // Nous appelons le contenu central de la page
} else {
include('introcentre.html'); }

?>
</div> <div class="pied">
<?php
include('pied.htm');
?>
</div>




</body>
</html>
Alors,

1) il faudrait encadrer ton code avec les balises (tu peux utiliser le menu de mise en page, sous la zone de saisie du message

2) il faudrait uniquement le code généré, ce que tu visualises dans ton navigateur

3) il faudrait aussi la feuille de styles

Et si en plus tu peux définir un doctype ce serait merveilleux Smiley lol
Mon index :


<title>INDEX TEST</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="Vinzu">
<meta name="generator" content="WebExpert 6">

</head>
<body>


<div class="entete" >
<?php
include('titre.html');
?>
<hr size="1px">
</div>
<div class="colonneGauche" >
<?php
include('menu.htm'); 
?>
</div>
<div class="colonneDroite">
<?php

// On définit le tableau contenant les pages autorisées
// ----------------------------------------------------
$pageOK = array('accueil' => 'introcentre.html',
'sanglier' => 'sanglier/index.html',
'A1' => 'A1/index.html',
'A2' => 'A2/index.html',
'A3' => 'A3/index.html',
'A4' => 'A4/index.html',
'A5' => 'A5.php',
'contact' => 'contact.php',
'noustrouver' => 'noustrouver.html');

// On teste que le paramètre d'url existe et qu'il est bien autorisé
// -----------------------------------------------------------------
if ( (isset($_GET['page'])) && (isset($pageOK[$_GET['page']])) ) {
include($pageOK[$_GET['page']]); // Nous appelons le contenu central de la page
} else {
include('introcentre.html'); }

?>
</div> <div class="pied">
<?php
include('pied.htm');
?>
</div>




</body>
</html>


Voici mon menu :


<!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" lang="fr">
<head>
  <title>menu</title>
  <meta name="description" content="menu">
  <meta name="keywords" content="">
  <meta name="author" content="Vinzu">
  <meta name="generator" content="WebExpert 6">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


<style type="text/css">
html, body {
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
font-family:monotype Corsiva;
font-size: 0.8em;
background-color: #CEB89A;
}
.conteneur { /*le conteneur global du site, qui sera centré */
width: 100%;
height: 100%;
position: absolute;
background-color: #CEB89A;
}

.header {
height: 100px;
background-color: #CEB89A;
}
.menu {
position: absolute;
left:0;
width: 50px;
height: 300px;
background-color:#CEB89A;
}
.frame {
margin-left: 200px;
width: auto;
height: 390px;
background-color:#CEB89A;
overflow: auto;
}
p {margin: 0 0 10px 0;}

.menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
.menugauche li {
margin-bottom: 5px;
}
.menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menugauche a:hover {
text-decoration: none;
}

</style>

<style type="text/css" media="screen">
body {
margin: 0;
padding: 0;
background: white;
font: 120% monotype Corsiva;
}
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: 10em;
}
#menu dt {
cursor: pointer;
margin: 25px 0;;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 0px solid gray;
background: #CEB89A;
}
#menu dd {
border: 0px solid gray;
}
#menu li {
text-align: center;
background: #CEB89A;
}
#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: #CEB89A;
}

</style>

<body>



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




		<dl id="menu">

		<dt onmouseover="javascript:montre('smenu1');">
           <a onmouseover="javascript:montre('smenu1');"
            href="index2.php?page=accueil">Accueil</a>
            </dt>


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

			<dd id="smenu2">
				<ul>
					<li><a href="index2.php?page=A1">A1</a></li><br>
					<li><a href="index2.php?page=A2">A2</a></li><br>
					<li><a href="index2.php?page=A3">A3</a></li><br>
					<li><a href="index2.php?page=A4">A4</a></li><br>
					<li><a href="index2.php?page=A5">A5</a></li>
				</ul>
			</dd>

		<dt onclick="javascript:montre();"><a href="index2.php?page=A6">A</a></dt>

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

			<dt onclick="javascript:montre();"><a href="index2.php?page=trouver">Où nous trouver ?</a></dt>

</dl>
</body>
</html>


Là aussi, je voudrais que la parti du sous-menu s'ouvre toute seule au passage de la souris... mais n'y arrive pas...

Par contre je n'ai pas de css pour mon index... c'est peut-être ça le problème ?

Et concernant le doctype... je ne sais pas trop que mettre Smiley decu
Modifié par vinzu (15 Sep 2006 - 13:24)
Sujet clos
Aller à