Mise en forme d'une page....

Question

guigui69

22 Jan 2008 à 14:31

Bonjour à tous,

j'ai une page php qui est alimenter par des requête dans ma base mysql. La page affiche correctement mes informations, maintenant je voudrait la mettre en forme.

voici le code:



<div id=login">espace restreint <br></div><!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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title> Réalisation commande fournisseur</title>
<script language="javascript">
function calculTotal(pNum){
document.getElementById('montant'+pNum).value =  parseFloat(document.getElementById('pu'+pNum).value * document.getElementById('qte'+pNum).value);
var nbLignes = document.getElementById("tab").rows.length;
document.getElementById('montanttotal').value = 0;
for (i=1;i<nbLignes;i++)
{
document.getElementById('montanttotal').value= parseFloat(document.getElementById('montanttotal').value) + parseFloat(document.getElementById('montant'+i).value);  
}




}
</script>
<style type="text/css" title="mes_styles" media="all">
<!--
#page
	{

	font-family: Verdana, Geneva, Arial, sans-serif;
	font-size: small;
	background-color: #d5d5de;
	line-height: 14px;
	visibility: visible;
	margin-top: 40px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	width: 650px
	}
table {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
border: medium solid #000000;
border-collapse: collapse;

}
td, th {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
border: medium solid #000000;

}
input {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
border:0px solid black;

}

#login{
position: relative;
margin-top: 10px;
height: 30px
}
#groupe {
	position: relative;
	float: left;
	width: 50%;
	margin-top: 10px;
	left: 10px;
	}
#fournisseur {
	position: relative;
	float: left;
	width: 50%;
	margin-top: 10px;
 }

#tableau {
	width: 650px;
	font-family: Verdana, Geneva, Arial, sans-serif;
	font-size: small;
	position: relative;
	argin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	 clear: left
	
	 }
-->

</style>
</head>
<body>
<div id="page">
<div id="groupe">
<img src="http://172.16.0.30/img/Elancia_logo.jpg" />
<br>

Groupe Elancia Agence Bourgogne Sud<br>
Rue des Artisan<br>
21220 Gevrey Chambertin.<br>
<br><b>Jacotot Stephanie</b><br><b>Service Production</b><br><A HREF="mailto:sjacotot@groupe-elancia.com">sjacotot@groupe-elancia.com</A><br><b>Tél:03.80.58.58.</b><br><b>Por:06.06.09.09.</b></div><div id="fournisseur"><br><img src="http://172.16.0.30/img/logo-eurogerm.gif" /><br><b>EUROGERM</b><br><b>Rue ici</b><br><b>21000 Dijon</b><br><b>Tél:0380585858</b><br><b>Por:0380585959</b></div><div id="tableau"><form name="enr"><table id="tab" BORDER=0><tr><td><u>description du Produit:</u></td><td><u>Prix unitaire:</u></td><td><u>Quantit&eacute;:</u></td><td><u>Total:</u></td>   
	
	<tr>

	<td>farine epistar or</td>
	<td><input type="text" id="pu1" value="0.2476 " size="7" onkeyup="calculTotal(1)"></td>
	<td><input type="text" id="qte1" value="0" size="7" onkeyup="calculTotal(1)"></td>
	<td><input type="text" id="montant1" value="0" size="7" > &euro; </td>
	</tr>
	   
	
	<tr>
	<td>sucre</td>

	<td><input type="text" id="pu2" value="0.8041 " size="7" onkeyup="calculTotal(2)"></td>
	<td><input type="text" id="qte2" value="0" size="7" onkeyup="calculTotal(2)"></td>
	<td><input type="text" id="montant2" value="0" size="7" > &euro; </td>
	</tr>
	   
	
	<tr>
	<td>sel</td>
	<td><input type="text" id="pu3" value="0.1040 " size="7" onkeyup="calculTotal(3)"></td>

	<td><input type="text" id="qte3" value="0" size="7" onkeyup="calculTotal(3)"></td>
	<td><input type="text" id="montant3" value="0" size="7" > &euro; </td>
	</tr>
	
	
	<tr>
	<td>EMMENTAL RAPE </td>
	<td><input type="text" id="pu68" value="4.2470 " size="7" onkeyup="calculTotal(68)"></td>
	<td><input type="text" id="qte68" value="0" size="7" onkeyup="calculTotal(68)"></td>
	<td><input type="text" id="montant68" value="0" size="7" > &euro; </td>

	</tr>
	   
	
	<tr>
	<td>LEVURE  industrie 2,5 kg</td>
	<td><input type="text" id="pu69" value="0.7860 " size="7" onkeyup="calculTotal(69)"></td>
	<td><input type="text" id="qte69" value="0" size="7" onkeyup="calculTotal(69)"></td>
	<td><input type="text" id="montant69" value="0" size="7" > &euro; </td>
	</tr>

	   
	
	<tr>
	<td>LEVURE  industrie 0,5 kg x 20</td>
	<td><input type="text" id="pu70" value="0.7400 " size="7" onkeyup="calculTotal(70)"></td>
	<td><input type="text" id="qte70" value="0" size="7" onkeyup="calculTotal(70)"></td>
	<td><input type="text" id="montant70" value="0" size="7" > &euro; </td>
	</tr>
	   
	
	<tr>

	<td>OEUFS PASTEURIS.</td>
	<td><input type="text" id="pu71" value="1.2400 " size="7" onkeyup="calculTotal(71)"></td>
	<td><input type="text" id="qte71" value="0" size="7" onkeyup="calculTotal(71)"></td>
	<td><input type="text" id="montant71" value="0" size="7" > &euro; </td>
	</tr>
	   
	
	<tr>
	<td>OEUFS PASTEURIS.</td>

	<td><input type="text" id="pu72" value="1.1400 " size="7" onkeyup="calculTotal(72)"></td>
	<td><input type="text" id="qte72" value="0" size="7" onkeyup="calculTotal(72)"></td>
	<td><input type="text" id="montant72" value="0" size="7" > &euro; </td>
	</tr>
	   
	
	<tr>
	<td>MARGARINE IRIS ROUGE 10 kg</td>
	<td><input type="text" id="pu73" value="0.8500 " size="7" onkeyup="calculTotal(73)"></td>

	<td><input type="text" id="qte73" value="0" size="7" onkeyup="calculTotal(73)"></td>
	<td><input type="text" id="montant73" value="0" size="7" > &euro; </td>
	</tr>
	   
	
	<tr>
	<td>Farine EPISTAR OR (42 s/palett</td>
	<td><input type="text" id="pu74" value="0.2796 " size="7" onkeyup="calculTotal(74)"></td>
	<td><input type="text" id="qte74" value="0" size="7" onkeyup="calculTotal(74)"></td>

	<td><input type="text" id="montant74" value="0" size="7" > &euro; </td>
	</tr>
	   
	
	<tr>
	<td>Farine  T65 sans f?ves viennoi</td>
	<td><input type="text" id="pu75" value="23.0000 " size="7" onkeyup="calculTotal(75)"></td>
	<td><input type="text" id="qte75" value="0" size="7" onkeyup="calculTotal(75)"></td>
	<td><input type="text" id="montant75" value="0" size="7" > &euro; </td>

	</tr>
	   
	
	<tr>
	<td>Farine T65 sans f?ves </td>
	<td><input type="text" id="pu76" value="0.3450 " size="7" onkeyup="calculTotal(76)"></td>
	<td><input type="text" id="qte76" value="0" size="7" onkeyup="calculTotal(76)"></td>
	<td><input type="text" id="montant76" value="0" size="7" > &euro; </td>
	</tr>

	   
	
	<tr>
	<td>FARINE IRTAC en sac</td>
	<td><input type="text" id="pu77" value="0.0000 " size="7" onkeyup="calculTotal(77)"></td>
	<td><input type="text" id="qte77" value="0" size="7" onkeyup="calculTotal(77)"></td>
	<td><input type="text" id="montant77" value="0" size="7" > &euro; </td>
	</tr>
	   
	
	<tr>

	<td>FARINE T55</td>
	<td><input type="text" id="pu78" value="24.0000 " size="7" onkeyup="calculTotal(78)"></td>
	<td><input type="text" id="qte78" value="0" size="7" onkeyup="calculTotal(78)"></td>
	<td><input type="text" id="montant78" value="0" size="7" > &euro; </td>
	</tr>
	   
	
	<tr>
	<td>Farine de son micronis? T80</td>

	<td><input type="text" id="pu79" value="0.0000 " size="7" onkeyup="calculTotal(79)"></td>
	<td><input type="text" id="qte79" value="0" size="7" onkeyup="calculTotal(79)"></td>
	<td><input type="text" id="montant79" value="0" size="7" > &euro; </td>
	</tr>
	   
	
	<tr>
	<td>Farine seigle T170</td>
	<td><input type="text" id="pu80" value="0.0000 " size="7" onkeyup="calculTotal(80)"></td>

	<td><input type="text" id="qte80" value="0" size="7" onkeyup="calculTotal(80)"></td>
	<td><input type="text" id="montant80" value="0" size="7" > &euro; </td>
	</tr>
	   
	
	<tr>
	<td>SEL FIN </td>
	<td><input type="text" id="pu81" value="0.0000 " size="7" onkeyup="calculTotal(81)"></td>
	<td><input type="text" id="qte81" value="0" size="7" onkeyup="calculTotal(81)"></td>

	<td><input type="text" id="montant81" value="0" size="7" > &euro; </td>
	</tr>
	   
	
	<tr>
	<td>SUCRE </td>
	<td><input type="text" id="pu82" value="0.0000 " size="7" onkeyup="calculTotal(82)"></td>
	<td><input type="text" id="qte82" value="0" size="7" onkeyup="calculTotal(82)"></td>
	<td><input type="text" id="montant82" value="0" size="7" > &euro; </td>

	</tr>
	   
	
	<tr>
	<td>44</td>
	<td><input type="text" id="pu83" value="20.0000 " size="7" onkeyup="calculTotal(83)"></td>
	<td><input type="text" id="qte83" value="0" size="7" onkeyup="calculTotal(83)"></td>
	<td><input type="text" id="montant83" value="0" size="7" > &euro; </td>
	</tr>

	   
	
	<tr>
	<td>TEST</td>
	<td><input type="text" id="pu84" value="4.0000 " size="7" onkeyup="calculTotal(84)"></td>
	<td><input type="text" id="qte84" value="0" size="7" onkeyup="calculTotal(84)"></td>
	<td><input type="text" id="montant84" value="0" size="7" > &euro; </td>
	</tr>
	<td colspan="2"><u>TOTAL:</u></td><td><input type="text" id="qtetotal" size="7"></td><td><input type="text" id="montanttotal" size="7" > &euro; </td></table></form></div>

</div>	
	</body>
</html>

voila se que ça peut donner visuellement http://cjoint.com/?bwoCpivraE

Pouvez-vous me dire si dans le code actuelle au niveau du CSS il du code mal placer, en trop? (pour voir mes erreurs)

Un élément que je n'arrive a mettre en place est le tableaux je voudrait que ce tableaux soit centré mais je n'y arrive pas. Quel paramètre me manque t-il?

Comment savez-vous la taille partie en CSS ?

Je m'explique:
Dans mon cas il y a la partie ( en noir) qui concerne mon entreprise
( avec logo nom etc...) comment je peut savoir la taille en px de l'ensemble pour attribuer la bonne hauteur dans mon CSS ?

Merci d'avance

guigui69

flattazor

24 Jan 2008 à 19:54

si tu as fait un copier coler de ton code il manque un M à margin-left: auto dans #tableau.

Sujet clos

CSS et mise en forme, CSS3

Mise en forme d'une page....