bonjour, je suis nouveau par ici 
j'ai un souci : j'ai une page HTML (avec du PHP un peu dedans) et une feuille de style pour l'affichage à l'écran (qui fonctionne très bien) et une autre pour l'impression qui elle bug apparemment !
en fait, j'ai une coupure quand je veux imprimer la page sous firefox, je n'ai que le contenu de la première page... je me suis un peu renseigné, et ce pb était un bug de firefox apparemment avec les éléments flottant... or j'ai retiré tous les éléments flottants de mon code et le problème persiste ! Merci de bien vouloir m'aider !
code source rétréci de la page html :
et le CSS pour l'impression :
Modifié par naheulbeuk (14 May 2008 - 12:00)
j'ai un souci : j'ai une page HTML (avec du PHP un peu dedans) et une feuille de style pour l'affichage à l'écran (qui fonctionne très bien) et une autre pour l'impression qui elle bug apparemment !
en fait, j'ai une coupure quand je veux imprimer la page sous firefox, je n'ai que le contenu de la première page... je me suis un peu renseigné, et ce pb était un bug de firefox apparemment avec les éléments flottant... or j'ai retiré tous les éléments flottants de mon code et le problème persiste ! Merci de bien vouloir m'aider !
code source rétréci de la page html :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Afficher une fiche</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="form.js"></script>
<script type="text/javascript" src="ajax.js"></script>
<link rel="stylesheet" href="css/view.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/print_view.css" type="text/css" media="print" />
</head>
<body>
<div id="header">
<div id="banniere">
<img src="css/img/banniere.png" height="65" width="751" border="0">
</div>
<div id="icons">
<a href="zonemembre.php"><img src="css/img/Home2.png" height="24" width="24" border="0" TITLE="Accueil" /></a> <a href="recherche.php"><img src="css/img/Search2.png" height="24" width="24" border="0" TITLE="Rechercher" /></a> <a href="deconnexion.php"><img src="images/Exit.png" height="24" width="24" border="0" TITLE="Se déconnecter" /></a>
</div>
</div>
<div id="content">
<!--content-->
<img alt="" src="css/img/tl_curve_white2.jpg" height="6" width="6" id="tl" /> <img alt="" src="css/img/tr_curve_white2.jpg" height="6" width="6" id="tr" />
<div id="fil_ariane">
<a href="index.php">Accueil</a> >> <a href="#">Afficher une fiche</a>
</div>
<div id="pageName">
<h2>Fiche du site n° 1</h2>
<img src="images/Edit.png" height="66" width="66"/>
</div>
<div id="col2">
<div class="story">
<div id="form_alert">
<div id="signupbox">
<div id="signupwrap">
<form action="/alert/view_fiche.php" method="post" name="form" id="form">
<p>* <span style="font-style:italic">Champs obligatoires</span></p>
<input type="hidden" name="action" id="action" value="add" />
<input type="hidden" name="liste_caracteres" id="liste_caracteres" value="" />
<input type="hidden" name="liste_resultats" id="liste_resultats" value="" />
<input type="hidden" name="liste_datations" id="liste_datations" value="" />
<div id="renseignements">
<fieldset>
<legend>Renseignements</legend>
<p>
<label for="nom_site" class="label">Nom du site </label><input type="text" name="nom_site" id="nom_site" maxlength="25" size="25" value="*********" />
<span id="aff_nom_site">
</p>
<p>
<label for="lieu_dit" class="label">* Lieu-dit </label><input type="text" name="lieu_dit" id="lieu_dit" maxlength="25" size="25" value="**********" />
<span id="aff_lieu_dit">
</p>
<p>
<label for="commune" class="label">* Commune </label><input type="text" name="commune" id="commune" maxlength="25" size="25" value="*********" />
<span id="aff_commune">
</p>
<p>
<label for="departement" class="label">* Département </label>
<select name="departement" id="departement" onChange="ajax_departement()" >
<option value="CA">Calvados</option><option value="CO" selected="selected">Côtes d'Armor</option><option value="FI">Finistère</option><option value="IV">Ille et Vilaine</option><option value="LA">Loire-Atlantique</option><option value="MA">Manche</option><option value="MO">Morbihan</option><option value="VE">Vendée</option> </select>
<span id="aff_departement">
</p>
<p>
<label for="num_ea" class="label">Numéro d'EA </label><input type="text" name="num_ea" id="num_ea" maxlength="8" size="8" onchange="ajax_num_ea()" value="55555555" />
</p>
</fieldset>
</div>
<div id="decouverte">
<fieldset>
<legend>Découverte</legend>
<p>
<label for="inedit" class="label">Site inédit ? </label><input type="checkbox" name="inedit" id="inedit" />
</p>
<p>
<label for="decouvreur" class="label">Personne ayant découvert le site </label><input type="text" name="decouvreur" id="decouvreur" maxlength="50" size="25" value="Jeangilles Baugrand" />
<span id="aff_decouvreur">
</p>
<p>
<label for="date_decouverte" class="label">Date de la découverte </label><input type="text" name="date_decouverte" id="date_decouverte" maxlength="10" size="10" value="14/12/2006" />
<span id="aff_date_decouverte">
</p>
</fieldset>
</div>
<div id="temoignages">
<p style="font-weight:bold">Mentions et/ou indices de l'existence du site, dépouillement, témoignages... <br>
<textarea name="temoignages_existence" id="temoignages_existence" rows="6" cols="65" ></textarea>
<span id="aff_temoignages_existence"></span></p>
<span class="titre">Informations</span>
</div>
<div id="caracteristiques">
<div class="box">
<p class="gras">* Situation</p>
<label for="ES" class="label"> Estran</label><input type="checkbox" name="nom_situation[]" id="ES" value="ES"checked="checked" /><br>
<label for="LI" class="label"> Littoral</label><input type="checkbox" name="nom_situation[]" id="LI" value="LI"checked="checked" /><br>
<label for="MA" class="label"> Marais</label><input type="checkbox" name="nom_situation[]" id="MA" value="MA" /><br>
<label for="ZO" class="label"> Zone des 100m</label><input type="checkbox" name="nom_situation[]" id="ZO" value="ZO" /><br>
</div>
<div class="box">
<p class="gras">* Immersion</p>
<label for="PE" class="label">Permanente </label><input type="radio" name="immersion" value="PE" id="PE" /><br>
<label for="EX" class="label">Exceptionnelle </label><input type="radio" name="immersion" value="EX" id="EX" /><br>
<label for="HE" class="label">Hors d'eau </label><input type="radio" name="immersion" value="HE" id="HE" checked="checked" /><br>
</div>
<br>
</div> <!-- caracteristiques -->
<div id="caracterisation">
<p class="gras">* Caractérisation du site</p>
<p>
<input type="checkbox" name="unknown_caractere" id="unknown_caractere" onClick="nature_inconnue()"
/> <label for="unknown_caractere" style="font-weight:bold">Aménagement indéterminé</label>
<div name="form3" id="form3">
<span id="box_g">
<select name="pers1" id="pers1" align="top" size="8" multiple="multiple" style="visibility:visible;" class="select">
</select>
</span>
<span id="fleches">
<input type="image" name="boutvG" id="boutvG" onClick='gtod(this.form,this.form.pers2,this.form.pers1);return false;' SRC="images/gauche.png" />
<input type="image" name="boutvD" id="boutvD" onClick='gtod(this.form,this.form.pers1,this.form.pers2);return false;' SRC="images/droite.png" />
</span>
<span id="box_d">
<select name="pers2" id="pers2" align="top" size="8" multiple="multiple" class="select">
</select>
</span>
</div> <!-- form3 -->
<br /><br />
<script language='javascript'>ini(document.getElementById("form3"),document.getElementById("pers1"),document.getElementById("pers2"),new Array("amas coquillier","amas de briquetages","amas de débitage","bassin","bastion","batiment","bloc","borne","butte","carrière","chaussée","construction","croix","cuve","depotoir","empierrement","enclos","fosse","fossé","four","foyer","megalithe","mur","niveau d occupation","oratoire","pecherie","puits","quai","sarcophage","souterrain","stèle","talus","tombe","tour","trace agraire"));</script> </div> <!-- caracterisation -->
<div id="caracteristiques2">
<p class="centre">
<label for="date_prospection" class="label">Date de la prospection </label><input type="text" name="date_prospection" id="date_prospection" maxlength="10" size="10" value="15/03/2008" />
<span id="aff_date_prospection">
<label for="nom_prospecteur" class="label">Nom du prospecteur </label><input type="text" name="nom_prospecteur" id="nom_prospecteur" maxlength="50" size="20" value="************" />
<span id="aff_nom_prospecteur">
</p>
<br>
<p>
<label for="descriptif_vestiges" class="label">* Descriptif des vestiges </label><br /><textarea name="descriptif_vestiges" id="descriptif_vestiges" rows="6" cols="65" ></textarea>
<span id="aff_descriptif_vestiges"></span>
</p>
<p>
<label for="observations_annexes" class="label">Observations annexes </label><br /><textarea name="observations_annexes" id="observations_annexes" rows="6" cols="65" ></textarea>
<span id="aff_observations_annexes"></span>
</p>
</div> <!-- caracteristiques2 -->
<div id="datation">
<fieldset>
<legend>Datation</legend>
<p>
<input type="checkbox" name="unknown_date" id="unknown_date" onClick="datation_inconnue()" /> <label for="unknown_date" style="font-weight:bold">Indéterminé</label>
</p>
<center>
<table name='tableau' id='tableau2' border="0"
style="visibility:visible;">
<tr>
<td rowspan="3" class="boss" id="1" onClick="color(this.id,'boss')">Préhistoire</td>
<td class="sub" id="11" onClick="color(this.id,'sub')">Paléolithique</td>
</tr>
<tr>
<td class="sub" id="12" onClick="color(this.id,'sub')">Mésolithique</td>
</tr>
<tr>
<td class="sub" id="13" onClick="color(this.id,'sub')">Néolithique</td>
</tr>
<tr>
<td rowspan="3" id="2" class="boss" onClick="color(this.id,'boss')">Protohistoire</td>
<td class="sub" id="21" onClick="color(this.id,'sub')">Age du Bronze</td>
</tr>
<tr>
<td class="sub" id="22" onClick="color(this.id,'sub')">Premier Age du Fer</td>
</tr>
<tr>
<td class="sub" id="23" onClick="color(this.id,'sub')">Second Age du Fer</td>
</tr>
<tr>
<td rowspan="2" id="3" class="boss" onClick="color(this.id,'boss')">Antiquité
<td class="sub" id="31" onClick="color(this.id,'sub')">Haut Empire</td>
</tr>
<tr>
<td class="sub" id="32" onClick="color(this.id,'sub')">Bas Empire</td>
</tr>
<tr>
<td rowspan="2" id="4" class="boss" onClick="color(this.id,'boss')">Moyen-Age
<td class="sub" id="41" onClick="color(this.id,'sub')">Haut Moyen-Age</td>
</tr>
<tr>
<td class="sub" id="42" onClick="color(this.id,'sub')">Bas Moyen-Age</td>
</tr>
<tr>
<td rowspan="5" id="5" class="boss" onClick="color(this.id,'boss')">Epoques modernes et contemporaines
<td class="sub" id="51" onClick="color(this.id,'sub')">16ème siècle</td>
</tr>
<tr>
<td class="sub" id="52" onClick="color(this.id,'sub')">17ème siècle</td>
</tr>
<tr>
<td class="sub" id="53" onClick="color(this.id,'sub')">18ème siècle</td>
</tr>
<tr>
<td class="sub" id="54" onClick="color(this.id,'sub')">19ème siècle</td>
</tr>
<tr>
<td class="sub" id="55" onClick="color(this.id,'sub')">20ème siècle</td>
</tr>
</table>
</center>
</fieldset>
</div> <!-- datation -->
</form>
</div>
</div>
</div>
</div>
<!--story-->
</div>
<script language='javascript'>document.getElementById('pers1').options[11].selected=true;document.getElementById('pers1').options[12].selected=true;document.getElementById('pers1').options[13].selected=true;document.getElementById('boutvD').click();</script>
<!--col2-->
<div id="pageNav">
<div id="sectionLinks">
<a href="zonemembre.php">Accueil</a> <a href="gestion_users.php">Administration</a> <a href="infos_user.php">Profil</a> <a href="recherche.php">Rechercher</a> <a href="add_fiche.php">Ajouter un site</a> <a href="fiches.php">Gestion des fiches</a> <a href="deconnexion.php">Déconnexion</a>
</div>
</div>
<!--end content-->
</body>
</html>et le CSS pour l'impression :
body {
background-color :#fff;
font-family :Serif;
}
a{
color: #005FA9;
text-decoration: underline;
}
/* TITRES */
h1{
font-family: 'Vonness Medium',Arial,sans-serif;
font-size: 120%;
color: #334d55;
margin: 0px;
padding: 0px;
}
h2{
font-family: Arial,sans-serif;
font-size: 114%;
color: #006699;
margin: 0px;
padding: 0px;
}
h3{
color: #334d55;
margin: 0px;
padding: 0px;
margin-bottom:8px;
}
h4{
font-family: Arial,sans-serif;
font-weight: bold;
color: #333333;
margin: 0px;
padding: 0px;
margin-top:10px;
margin-bottom:10px;
}
h5{
font-family: 'Vonness Medium',Arial,sans-serif;
font-size: 100%;
color: #334d55;
margin: 0px;
padding: 0px;
}
.hint {
display:none;
}
.hint .hint-pointer {
display:none;
}
.hint2 {
display:none;
}
.hint2 .hint-pointer {
display:none;
}
/*************** EN-TETE ******************/
#header{
position: absolute;
top: 0px;
left: 2%;
right: 2%;
width:95.6%;
}
#header #banniere{
position: absolute;
top: 0px;
left: 0px;
padding: 5px;
margin: 0px;
height:65px;
width:751px;
}
/*************** COINS SUPERIEURS DU CONTENU DE LA PAGE *******************/
#tl {
display:none;
}
#tr {
display:none;
}
/*************** MENU *******************/
#pageNav{
display:none;
}
/************** CONTENU DE LA PAGE ******************/
#content{
position:absolute;
top: 92px;
left: 2%;
right: 2%;
width:95.6%;
background-color: #ffffff;
}
/*************** COLONNE DE DROITE DU CONTENU DE LA PAGE *****************/
#col2{
margin:0px;
padding: 0px;
border :none;
}
/***************** ENCART DU NOM DE PAGE + ICONE ******************/
#pageName{
padding: 0px 0px 14px 10px;
margin: 0px;
border:none;
}
#pageName h2{
font-family: Arial,sans-serif;
font-size: 21pt;
color: #000000;
margin:0px;
padding: 0px;
}
#pageName img{
display:none;
}
/***************** ICONES, RACCOURCIS DE NAVIGATION EN HAUT A DROITE *******************/
#icons{
display:none;
}
/*****************
MENU GAUCHE
******************/
#sectionLinks{
display:none;
border:none;
}
/**************** Fil d'ariane ********************/
#fil_ariane{
display:none;
}
/***************** Contenu texte de la page *******************/
.story{
padding: 10px 0px 0px 10px;
font-size: 80%;
}
.story h3{
font-family: Arial,sans-serif;
font-size: 15pt;
font-weight: bold;
color: #000000;
}
.story p{
padding: 0px 0px 10px 0px;
}
/************ PIED DE PAGE ****************/
#footer{
border: none;
display: none;
}
/************ BOITES DE SELECTION MULTIPLE ****************/
#box_g{
margin-right:8px;
}
#box_d{
margin-left:8px;
}
#fleches{
top:60px;
/*position:relative;*/
}
.select{
padding:0px;
}
/************ TABLEAUX ****************/
#tableau{
margin-bottom:10px;
margin-top:10px;
}
#tableau td{
padding:4px 6px 4px 6px;
text-align:center;
cursor:pointer;
}
#tableau td.titres{
font-weight:bold;
font-size: 110%;
cursor:default;
}
#tableau2{
margin-bottom:10px;
margin-top:10px;
}
#tableau2 td{
text-align:center;
cursor:pointer;
padding:4px 6px 4px 6px;
}
#tableau2 .boss{
background:#dcecf6;
font-weight:bold;
font-size:larger;
}
#tableau2 .sub{
background:#d7f3d3;
}
.carte{
margin-top:8px;
margin-bottom:10px;
}Modifié par naheulbeuk (14 May 2008 - 12:00)
