28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

je tente de faire ma premiere feuille de style pour impression.

Je ne veux garder que les données d'une div sans rien garder du design.

<div id="chapeau" style="height:10px">
<img src="design/Layout/Contenu/Fond/tableau/menu_tableau_1.gif" /></div>

<div id="chapeau_milieu">
<table width="760" border="0" align="left" cellpadding="0" cellspacing="3">
  <tr>
    <td width="74" align="center" valign="top" rowspan="3"><img src="design/Layout/Contenu/pictos/achevees.gif" /></td>
    <td width="337" align="left" valign="top" class="domaine">Titre </td>
    <td width="337" align="right" valign="top"><select name="domaines" size="" class="select">
  <option>Tous les intervenants</option>
</select></td>
  </tr>
  <tr>
    <td colspan="3" class="domaine_small" align="left" valign="top">
	
	<table border="0" cellpadding="0" cellspacing="2" width="100%">
	<tr><td class="rouge9px" align="left">Heures pr&eacute;vues/00,00$</td></tr>
	<tr><td  height="16" background="design/Layout/Contenu/Barres/Barre_jaune.jpg"><img width="2" height="16" /></td></tr>
	<tr><td height="17" background="design/Layout/Contenu/Barres/Barre_vert.jpg"><img width="2" height="17" /></td></tr>
	<tr><td class="rouge9px" align="right">Heures consomm&eacute;es/00,00$</td></tr>
	</table>	</td>
  </tr>
</table>
</div>



<div id="onglets">

<div id="grisblanc">
<ul>
	<li><a href="#">Dossiers</a></li>
	<li id="current"><a href="#">Valide</a></li>
	<li><a href="#">Archive</a></li>
</ul>
</div>

<div id="orange">
<ul>
	<li><a href="#">Statistiques</a></li>
	<li><a href="#">Archives</a></li>
</ul>
</div>

</div>



<div id="M2milieuOver">


<div id="M2overflow">


<div id="M2table">

			<table class="texte" border="0" cellpadding="0" cellspacing="1"  width="100%">				
			<tbody><tr>
			  <td width="10"><img src="design/Layout/Contenu/Fond/tableau/bckgrd_coin_G.gif" /></td>
			  <td background="design/Layout/Contenu/Fond/tableau/bckgrd_titre_tableau.gif" height="15"><a href="http://www.timecost.ca/imputations.php?valide=0&amp;choix_intervenant=0&amp;choix_dossier=0&amp;choix_metier=0&amp;choix_tache=0&amp;choix_dd=&amp;choix_df=&amp;ordre=nom&amp;sens=1" class="titre">Intervenant</a></td><td background="design/Layout/Contenu/Fond/tableau/bckgrd_titre_tableau.gif" height="15">&nbsp;<a href="http://www.timecost.ca/imputations.php?valide=0&amp;choix_intervenant=0&amp;choix_dossier=0&amp;choix_metier=0&amp;choix_tache=0&amp;choix_dd=&amp;choix_df=&amp;ordre=nbr_heures&amp;sens=1" class="titre">Nbr heures</a></td><td background="design/Layout/Contenu/Fond/tableau/bckgrd_titre_tableau.gif" height="15">&nbsp;<a href="http://www.timecost.ca/imputations.php?valide=0&amp;choix_intervenant=0&amp;choix_dossier=0&amp;choix_metier=0&amp;choix_tache=0&amp;choix_dd=&amp;choix_df=&amp;ordre=cout&amp;sens=1" class="titre">Coût</a></td><td background="design/Layout/Contenu/Fond/tableau/bckgrd_titre_tableau.gif" height="15">&nbsp;<a href="http://www.timecost.ca/imputations.php?valide=0&amp;choix_intervenant=0&amp;choix_dossier=0&amp;choix_metier=0&amp;choix_tache=0&amp;choix_dd=&amp;choix_df=&amp;ordre=libelle&amp;sens=1" class="titre">Tâche</a></td><td background="design/Layout/Contenu/Fond/tableau/bckgrd_titre_tableau.gif" height="15">&nbsp;<a href="http://www.timecost.ca/imputations.php?valide=0&amp;choix_intervenant=0&amp;choix_dossier=0&amp;choix_metier=0&amp;choix_tache=0&amp;choix_dd=&amp;choix_df=&amp;ordre=libelle_dossier&amp;sens=1" class="titre">Dossier</a></td><td background="design/Layout/Contenu/Fond/tableau/bckgrd_titre_tableau.gif" height="15">&nbsp;<a href="http://www.timecost.ca/imputations.php?valide=0&amp;choix_intervenant=0&amp;choix_dossier=0&amp;choix_metier=0&amp;choix_tache=0&amp;choix_dd=&amp;choix_df=&amp;ordre=date&amp;sens=1" class="titre">Date</a></td><td background="design/Layout/Contenu/Fond/tableau/bckgrd_titre_tableau.gif" height="15">&nbsp;<a href="http://www.timecost.ca/imputations.php?valide=0&amp;choix_intervenant=0&amp;choix_dossier=0&amp;choix_metier=0&amp;choix_tache=0&amp;choix_dd=&amp;choix_df=&amp;ordre=heure_debut&amp;sens=1" class="titre">Heure début</a></td><td background="design/Layout/Contenu/Fond/tableau/bckgrd_titre_tableau.gif" height="15">&nbsp;<a href="http://www.timecost.ca/imputations.php?valide=0&amp;choix_intervenant=0&amp;choix_dossier=0&amp;choix_metier=0&amp;choix_tache=0&amp;choix_dd=&amp;choix_df=&amp;ordre=heure_fin&amp;sens=1" class="titre">Heure fin</a></td>
			  <td width="20"><img src="design/Layout/Contenu/Fond/tableau/bckgrd_coin_D.gif" /></td>
			<tr >
		      <td height="20" bgcolor="#DEDEDE" align="center"><img src="design/Layout/Contenu/Boutons/Rouge_cligno.gif" width="14" height="14" /></td>
		      <td bgcolor="#DEDEDE">&nbsp;<a href="http://www.timecost.ca/admin/imputation_form.php?id_imputation=241&amp;origine=imputations&amp;choix_dossier=0&amp;choix_tache=0&amp;choix_metier=0&amp;choix_intervenant=0" class="lien">Guillon Mathilde</a></td><td bgcolor="#DEDEDE">&nbsp;00 h 09 mn</td><td bgcolor="#DEDEDE">&nbsp;11,10</td><td bgcolor="#EDEDED">&nbsp;Verification</td><td bgcolor="#EDEDED">&nbsp;<a href="http://www.timecost.ca/details.php?choix_dossier=42" class="lien">DEMA Dossier EMA</a></td><td bgcolor="#DEDEDE">&nbsp;11/10/2006</td><td bgcolor="#DEDEDE">&nbsp;11:20:00</td><td bgcolor="#DEDEDE">&nbsp;11:29:00</td>
			    <td bgcolor="#DEDEDE" align="center"><img src="design/Layout/Contenu/Continents.gif" /></td>
			</tr><tr>
		      <td height="20" bgcolor="#EDEDED" align="center"><img src="design/Layout/Contenu/Boutons/Vert_cligno.gif" width="14" height="14" /></td>
		      <td bgcolor="#EDEDED">&nbsp;<a href="http://www.timecost.ca/admin/imputation_form.php?id_imputation=240&amp;origine=imputations&amp;choix_dossier=0&amp;choix_tache=0&amp;choix_metier=0&amp;choix_intervenant=0" class="lien">Brault Guy</a></td><td bgcolor="#EDEDED">&nbsp;20 h 43 mn</td><td bgcolor="#EDEDED">&nbsp;2.486,00</td><td bgcolor="#DEDEDE">&nbsp;Mission d'examen</td><td bgcolor="#DEDEDE">&nbsp;<a href="http://www.timecost.ca/details.php?choix_dossier=43" class="lien">DCCV Dossier CCV</a></td><td bgcolor="#EDEDED">&nbsp;11/09/2006</td><td bgcolor="#EDEDED">&nbsp;00:00:00</td><td bgcolor="#EDEDED">&nbsp;20:43:00</td>
			      <td bgcolor="#EDEDED" align="center"><img src="design/Layout/Contenu/archive.gif" /></td>
			</tr><tr>
	          <td height="20" bgcolor="#DEDEDE" align="center" valign="middle"><img src="design/Layout/Contenu/plus.gif" width="17" height="16" /></td>
	          <td bgcolor="#DEDEDE">&nbsp;<a href="http://www.timecost.ca/admin/imputation_form.php?id_imputation=239&amp;origine=imputations&amp;choix_dossier=0&amp;choix_tache=0&amp;choix_metier=0&amp;choix_intervenant=0" class="lien">Brault Guy</a></td><td bgcolor="#DEDEDE">&nbsp;08 h 53 mn</td><td bgcolor="#DEDEDE">&nbsp;1.066,00</td><td bgcolor="#EDEDED">&nbsp;Mission d'examen</td><td bgcolor="#EDEDED">&nbsp;<a href="http://www.timecost.ca/details.php?choix_dossier=43" class="lien">DCCV Dossier CCV</a></td><td bgcolor="#DEDEDE">&nbsp;11/08/2006</td><td bgcolor="#DEDEDE">&nbsp;15:07:00</td><td bgcolor="#DEDEDE">&nbsp;24:00:00</td>
			        <td bgcolor="#DEDEDE" align="center"><img src="design/Layout/Contenu/courant.gif" width="16" height="14" /></td>
			</tr>
		</tbody></table>
		
</div>

</div>
</div>


Je fais des display:none sur mes autres div... et pourtant je garde tous mes éléments dans la nouvelle page... Je dois manquer quelque chose.


/* ------------- CHAPEAU --------------------- */

#chapeau {
display:none;
}


#chapeau_milieu {
display:none;
}

#onglets {
display:none;
}

#ajout_admin {
display:none;
}

#nav_calendrier {
display:none;
}

#select_calendrier {
display:none;
}

/* ---------------  TABLEAU ---------------------*/


#M2milieuOver {
display:none;
}

#M2overflow {
display:none;
}

#M2table {
width:760px;
float:left;
padding:5px 2px 0 2px;
}


Mais quoi ???

Merci de votre aide pour me mettre sur la bonne voie.

Aurélia.
Modifié par Fugugirl (02 Dec 2006 - 13:43)
Hello

Même si tu fais
#M2table {
width:760px;
float:left;
padding:5px 2px 0 2px;
}

#M2table restera invisible puisque sont parent #M2milieuOver l'est (#M2milieuOver {display:none;}) ... c'est comme repeindre la chambre d'une maison qui à éte détruite.

Voilà ...
Modifié par dhjapan (01 Dec 2006 - 18:38)
Merci de ta réponse.

Mon problème est que tout est visible !

Je veux que tout disparaisse ce serait plus simple pour moi Smiley smile
Modérateur
bonsoir,

Une solution , assez brutale mais efficace en partie:

mettre tout le monde en position:absolue.

ajouter au conteneur de la table une couleur de fond pour eviter la transparence
lui ajouter eventuellement un z-index positif .

Tant que le tableau sera au moins aussi large que le reste et plus "haut" , rien d'autre ne devrait apparaitre (enfin, a voir quand c'est IE qui gere ça !?).

il y a peut-etre des "attributs" css dedié pour ce genre de "rendu" , mais je connais pas

++
Merci de ta solution radicale mais qui semble marcher. J'ajoute des visibility:hidden.. j'ai quand même des restes mais je vais jouer avec le tableau et ses dimensions pour parer à ce genre de soucis.

Je pensais naïvement que le display none faisait disparaître le tout mais les images comprises dans le code html.. restent.... forcément. Rhaaaaaaaaaaaaaa

Merci encore à tous deux pour votre aide Smiley smile

Aurélia.