Pour les styles, tu dois revoir les dispositions des DIV. Evite de mettre trop d'imbrications de DIV qui servent à rien. Evite aussi de répéter l'entête HTML dans plusieurs pages de tes programmes, mets une seule entête HTML (<html>, <head>, styles, script, <body>) dans le fichier "menu.php" sans faire de </body> et </html> dedans et sans répéter ces éléments dans les autres fichiers des programmes et formulaires puisque tu fais toujours dedans un include("menu.php").
Dans un premier temps j'ai modifié légèrement les styles pour que la bannière soit en haut centrée, le menu à gauche et le contenu à droite.
div.logo{
float:center;
width:100%;
height:150px;
}
div.main{
float:left;
padding-left:15px;
height:100%;
}
div.main2{
float:right;
padding-left:15px;
margin-left:20px;
margin-top:10px;
}
Et Voici le format modifié du fichier menu.php:
<?php
// on se connecte à notre base
mysql_select_db("bd_etudiants", @mysql_connect("localhost","root","")) or die(mysql_error());
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajout d'élève dans la base</title>
<link rel="stylesheet" type="text/css" href="calendrier.css">
<script type="text/javascript" src="calendrier.js"></script>
<link href="/index.php?format=feed&type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
<link href="/index.php?format=feed&type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
<script type="text/javascript" src="/media/system/js/mootools.js"></script>
<script type="text/javascript" src="/media/system/js/caption.js"></script>
<link rel="stylesheet" type="text/css" href="css/content.css">
<link rel="stylesheet" type="text/css" href="css/current.css">
<link rel="stylesheet" type="text/css" href="css/form.css">
<link rel="stylesheet" type="text/css" href="css/html_code.css">
<link rel="stylesheet" type="text/css" href="css/menu.css">
<link rel="stylesheet" type="text/css" href="css/message.css">
<link rel="stylesheet" type="text/css" href="css/module.css">
<link rel="stylesheet" type="text/css" href="css/page_nav.css">
<link rel="stylesheet" type="text/css" href="css/print.css">
<link rel="stylesheet" type="text/css" href="css/template.css">
<script language="JavaScript">
function imprime_zone(obj)
{
// Ouvre une nouvelle fenêtre
var f = window.open("Impression.htm", "Impression", "height=50, width=400,toolbar=0, menubar=0, scrollbars=0, resizable=0,status=0, location=0, left=0, top=0");
// Définit le Style de la page
f.document.body.style.color = '#000000';
f.document.body.style.backgroundColor = '#FFFFFF';
f.document.body.style.padding = "10px";
// Affiche le contenu HTML de obj dans le body de la nouvelle fenêtre
f.document.title = "Impression: " + document.getElementById(obj).id;
f.document.body.innerHTML = document.getElementById(obj).innerHTML;
// Imprime et ferme la fenêtre
f.window.print();
f.window.close();
return true;
}
</script>
</head>
<body>
<div class="logo"><img src="images/banniere.jpg" width="1133" height="138" alt="banniere" /></div>
<div class="main">
<div class="leftmod">
<div class="leftmod2">
<div class="module_menu">
<h3>Menu Principal</h3>
<ul class="menu">
<li id="current" class="active item1"><a href="index.php"><span>Accueil</span></a></li>
<li class="parent item27"><a href="formAssiduite.php"><span> Gestion d'assiduité</span></a></li>
<li class="item2"><a href="consultation_d_assiduite.php"><span>Consultation d'assiduite</span></a></li>
<li class="item37"><a href="attestation.php"><span>Attestation</span></a></li>
<li class="item37"><a href="gestion_etudiants.php"><span>Gestion des étudiants</span></a></li>
<li class="item37"><a href="gestion_profs.php"><span>Gestion des profs</span></a></li>
<li class="item37"><a href="gestion_matiere.php"><span>Gestion des matieres</span></a></li>
<li class="item37"><a href="gestion_entreprise.php"><span>Gestion des entreprises</span></a></li>
</ul>
</div>
<div class="module_menu">
<h3>Ressources</h3>
<ul class="menu">
<li class="item11"><a href="modeles.php"><span>Modèles</span></a></li>
<li class="item12"><a href=""><span></span></a></li>
<li class="item13"><a href=""><span></span></a></li>
<li class="item17"><a href=""><span></span></a></li>
</ul>
</div>
</div>
</div>
</div>
Comme tu vois, le div porteur du logo reste indépendant des autres et non imbriqué et de même pour le div du menu.
Le div du contenu viendra plu-tard dans les fichiers formulaires et affichage d'attestation. Comme par exemple dans le formulaire "attestation.php":
<?php
include ("menu.php");
include ("fonctions_attestation.php");
?>
<div class="main2">
<h1>Consultation d'assiduité des élèves</h1>
<div id='feuille_absence'>
<form name="form1">
<table>
<tr>
<th>Année :
<select name="annee" onChange="form1.submit();">
<option value="" ></option>
<?php echo $listeAnnees; ?>
</select>
</th>
<th>Mois :
<select name="mois" onChange="form1.submit();" >
<option value="" ></option>
<?php echo $listeMois; ?>
</select>
</th>
</tr>
<tr>
<th>
Etudiant :
<select name="idEtudiant" >
<option value="" >
</option>
<?php echo isset($listeDesEtudiants)?$listeDesEtudiants:null; ?>
</select>
</th>
<th>
<br/>
<input type="submit" name="action_attestation" value="Total absences">
<br /><br />
</th>
</tr>
</table>
</form>
<div id="messag"><?php echo isset($message2)?$message2:''; ?></div>
<br/><br/>
</div>
</div>
Tu vois ici, pas d'entête HTML et de <body> car ce programme fait un include() du fichier "menu.php" qui inclut l'entête HTML et les divs du logo et du menu.
Un autre exemple : l'affichage de l'attestation:
<style media="screen">
.invisible_sur_ecran {
visibility:hidden;
height:0px;
}
</style>
<div class="main2">
<div id="attestation">
<img class="invisible_sur_ecran" src="images/banniere.jpg" width="100%" height="138" alt="banniere"></img>
<h1><u>Attestation</u></h1>
<br/><br/><br/>
Période : <?php echo isset($nomMois)?$nomMois:''; ?> (<?php echo isset($annee)?$annee:''; ?>)
<br/>
<br/>
Relevé de présence : <br/><br/>
Je soussigné M......., en qualité de directeur de ......... , Institut Supérieur <br/>
de Commerce et Gestion,.................. - .............. .............., certifie que :
<br/>
<br/>
<?php echo isset($civiliteEtudiant)?$civiliteEtudiant:''; ?> <?php echo isset($nomEtudiant)?$nomEtudiant:''; ?> <?php echo isset($prenomEtudiant)?$prenomEtudiant:''; ?> inscrit en <?php echo isset($idClasse)?$idClasse:''; ?>
(<?php echo isset($promotion)?$promotion:''; ?>)
<br/>
<br/>
A été présent(e) <?php echo isset($nombreheurepresencemois)?$nombreheurepresencemois:'0'; ?> heures
<br/>
<br/>
Relevé d'Absence :
<br/>
Total des absences : <?php echo isset($nombreheureabsencemois)?$nombreheureabsencemois:'0'; ?> heures
<div id="message1"><?php echo isset($message1)?$message1:''; ?></div>
<br/><br/>
<br/><br/>
<br/><br/>
<table border="0" width="100%">
<tr><th>Le Salarié</th><th>Le Directeur de l'établissement</th></tr>
<tr><th><?php echo isset($nomEtudiant)?$nomEtudiant:''; ?> <?php echo isset($prenomEtudiant)?$prenomEtudiant:''; ?></th><th>........</th></tr>
</table>
</div>
<input type="button" value="Imprimer" onClick="imprime_zone('attestation');" />
</div>
Remarque: j'ai aussi ajouté un logo dans l'attestation qui ne se voit pas à l'écran mais simplement à l'impression grâce à un style media="screen".
voici le logo que je veux placé en haut a gauche de mon attestation et surtout qu'il reste quand on imprime, sinon j'ai un petit problème avec l'affichage de l'attestation : elle se met en dessous du menu de gauche, cela viens des div?comment faire pour quelle s'affiche comme les autres?