Merci a tous pour votre aide. donc je vais vous afficher le css et le html. il y a aussi du javascript dans le tas mais je suppose que sa n'influe pas. le CSS est en haut de page dans des balise style, le JS en bas entre balise script et le html est entre les 2
HTML
<div id="main" class="span-24">
<div id="menubar" class="span-24">
<a href="#" id="newfact">Nouvelle Facture</a>
<a href="#" id="factlist">Liste de vos Factures</a>
</div>
<div id="facture_form">
<?=Form::open('/facturation/setfacture',array('method'=>'POST'));?>
<div id="date" class="prefix-1 span-24">
<?=Form::label('date_create','date de facturation');?>
<?= Form::input('datecreate','' , array('rel'=>'forminput','id'=>'datecreate')); ?>
<?=Form::label('lastday_date',"date d'échéance");?>
<?=Form::input('lastdaydate','', array('rel'=>'forminput','id'=>'lastdaydate')); ?>
</div>
<div class="prefix-1 span-24">
<?=Form::label('statut','statut');?>
<?=Form::select('statut',array('relance'=>'relance','payed'=>'payée','canceled'=>'annulée','ready'=>'prête pour envoie','loading'=>'en cours'),'',array('id'=>'statut','onChange'=>'checkstatut()'));?>
</div>
<div id="informations" class="span-24" style="margin:2em;">
<div id="seller" class="span-8 prefix-3 suffixe-1">
Vos informations
<table class="seller">
<tr>
<td><?=Form::label('seller_firstname','nom');?></td>
<td><?=Form::input('sellerfirstname','albert', array('rel'=>'forminput')); ?></td>
</tr>
<tr>
<td><?=Form::label('seller_lastname','prénom');?></td>
<td><?=Form::input('sellerlastname','ronard', array('rel'=>'forminput')); ?></td>
</tr>
<tr>
<td><?=Form::label('seller_phonenumber','téléphone');?></td>
<td><?=Form::input('sellerphonenumber','0555555555', array('rel'=>'forminput')); ?></td>
</tr>
<tr>
<td><?=Form::label('seller_company','nom de la société');?></td>
<td><?=Form::input('sellercompany','umbrella', array('rel'=>'forminput')); ?></td>
</tr>
<tr>
<td><?=Form::label('seller_CA','capital de la société');?></td>
<td><?=Form::input('sellerCA','125640', array('rel'=>'forminput')); ?></td>
</tr>
<tr>
<td><?=Form::label('seller_adress','adresse');?></td>
<td><?=Form::input('selleradress','45 rue avenante', array('rel'=>'forminput')); ?></td>
</tr>
<tr>
<td><?=Form::label('seller_codepostal','code postal');?></td>
<td><?=Form::input('sellercodepostal','45000', array('rel'=>'forminput')); ?></td>
</tr>
<tr>
<td><?=Form::label('seller_location','ville');?></td>
<td><?=Form::input('sellerlocation','orleans', array('rel'=>'forminput')); ?></td>
</tr>
</table>
</div>
<div id="buyer" class="span-8 prefix-1 suffixe-1">
information sur le client
<table class="buyer">
<tr>
<td><?=Form::label('buyer_firstname','nom');?></td>
<td><?=Form::input('buyerfirstname','porki', array('rel'=>'forminput')); ?></td>
</tr>
<tr>
<td><?=Form::label('buyer_lastname','prénom');?></td>
<td><?=Form::input('buyerlastname','tortard', array('rel'=>'forminput')); ?></td>
</tr>
<tr>
<td><?=Form::label('buyer_phonenumber','téléphone');?></td>
<td><?=Form::input('buyerphonenumber','0666666666', array('rel'=>'forminput')); ?></td>
</tr>
<tr>
<td><?=Form::label('buyer_company','nom de la société');?></td>
<td><?=Form::input('buyercompany','amagy', array('rel'=>'forminput')); ?></td>
</tr>
<tr>
<td><?=Form::label('buyer_adress','adresse de la société');?></td>
<td><?=Form::input('buyeradress','10 rue allaveile', array('rel'=>'forminput')); ?></td>
</tr>
<tr>
<td><?=Form::label('buyer_codepostal','code postal');?></td>
<td><?=Form::input('buyercodepostal','45000', array('rel'=>'forminput')); ?></td>
</tr>
<tr>
<td><?=Form::label('buyer_location','ville');?></td>
<td><?=Form::input('buyerlocation','orleans', array('rel'=>'forminput')); ?></td>
</tr>
</table>
</div>
</div>
<?=Form::label('payment','moyen de paiement');?>
<?=Form::select('payment',array('cheque'=>'chèque','espece'=>'espèce','CB'=>'carte bancaire','virement'=>'virement bancaire'));?><br/>
<?=Form::label('money','monnaie utilisée');?>
<?=Form::select('money',array('euro'=>'€','dollar'=>'$','livre'=>'£'));?><br/>
<?=Form::label('intracom_TVA','numéro TVA intracommunotaire')?>
<?=Form::input('intracomTVA','fff888777666', array('rel'=>'forminput')); ?><br/>
<?=Form::label('remise','remise');?>
<?=Form::input('remise','0', array('rel'=>'forminput')); ?><br/><br/>
<div id="produit" class="span-24 prefix-1">
<?=Form::hidden('nombreproduit', '1',array('id'=>'nbrproduct'));?>
<table class="product" border="1">
<tr id="productheader">
<th>référence du produit</th>
<th>descriptif du produit<br/></th>
<th>quantitée vendu</th>
<th>prix HT</th>
<th>TVA sur le produit</th>
</tr>
<tr class="productdatas">
<td><?=Form::input('ref1',HTML::chars(Arr::get($_POST, 'ref')), array('rel'=>'forminput')); ?></td>
<td><?=Form::textarea('libelle1',HTML::chars(Arr::get($_POST, 'libelle')), array('id'=>'libelle1','rows'=>'1','cols'=>'45','onKeyUp'=>'addrow("libelle1")'));?></td>
<td><?=Form::input('quantity1',HTML::chars(Arr::get($_POST, 'quantity')), array('rel'=>'forminput')); ?></td>
<td><?=Form::input('priceht1',HTML::chars(Arr::get($_POST, 'priceht ')), array('rel'=>'forminput')); ?></td>
<td><?=Form::select('tva1', array('0'=>'0%','19.6'=>'19,6%','5.5'=>'5,5%'),'', array('rel'=>'forminput','style'=>'background-color:#b7b7b7;')); ?></td>
</tr>
</table>
<a class="addnewform">Ajouter un produit</a>
</div>
<div>
<?=Form::label('postage','frai de port');?>
<?=Form::input('postage','0', array('rel'=>'forminput','id'=>'postage','onBlur'=>"calcul('totalprice','priceht ','tva','postage')")); ?><br/>
<?=Form::label('type_accompte',"type d'accompte");?>
<?=Form::select('typeaccompte', array('0'=>'pourcentage','1'=>'somme'), '', array('rel'=>'forminput')); ?><br/>
<?=Form::label("accompte","valeur de l'accompte");?>
<?=Form::input('accompte','0', array('rel'=>'forminput')); ?><br/>
<?=Form::label('total_price','prix total TTC');?>
<?=Form::input('totalprice',HTML::chars(Arr::get($_POST, 'totalprice')), array('rel'=>'forminput','id'=>'totalprice','readonly'=>'true')); ?><br/>
<?=Form::submit('create_facture','Créer la facture'); ?><br/>
</div>
<?=Form::close();?>
</div>
</div>
Le css complet
<style type="text/css">
#productheader
{
background-color : #33378f;
color : white;
}
.productdatas
{
background-color : #b7b7b7;
}
.productdatas td
{
padding-top : 2px;
padding-right : 2px;
padding-left : 2px;
padding-bottom : 2px;
}
tr.productdatas td > *:focus
{
background-color : #8b8b8b;
}
tr.productdatas td > *
{
border:none;
outline:none;
}
#buyer table tr td label,#seller table tr td label
{
float : left;
}
#buyer table tr td input,#seller table tr td input
{
float : right;
outline : none;
border : none;
}
table.buyer,table.seller
{
border : none;
}
div#buyer,div#seller{float:left;}
div#menubar a
{
float : left;
margin : 5px;
text-decoration: none;
color: black;
}
#menubar
{
border : 1px;
border-top-right-radius : 1em;
background-color : #32368f;
margin-bottom : 5px;
}
div#menubar a
{
color:white;
border : solid 1px;
border-color : #4f49bf;
background-color : #4f49bf;
border-radius : 1em;
margin : 5px;
padding : 2px
}
</style>
le javascript
/*** calendrier pour les dates ***/
jqcc( "div#date > input[name*=date]" ).click(
function()
{
jqcc(this).datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
changeYear: true,
yearRange: '1900:<?php echo date("Y"); ?>',
dayNamesMin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'],
monthNamesShort: ['Jan','Fev','Mar','Avr','Mai','Jui','Jul','Aou','Sep','Oct','Nov','Dec'],
constrainInput: true,
onSelect: function(res) {}
});
}
);
/*** clicker sur le bouton permet d'ajouter une ligne dans le tableau des produit ***/
jqcc( ".addnewform").click(function() {
var i = jqcc('#nbrproduct').attr('value');
i++;
jqcc(".product").append('<tr class="productdatas"><td><input type="text" name="ref'+i+'"></td>'+
'<td><textarea id="libelle'+i+'" name="libelle'+i+'" rows="1" cols="45" onKeyUp="addrow(\'libelle'+i+'\')"></textarea></td>'+
'<td><input name="quantity'+i+'" type="text"></td>'+
'<td><input name="priceht'+i+'" type="text"></td>'+
'<td><select name="tva'+i+'" style="background-color:#b7b7b7;"><option value="19.6">19,6%</option><option value="5.5">5,5%</option><option value="0">0%</option></select></td></tr>');
jqcc('#nbrproduct').attr('value',i);
});
/*** ajout d'une ligne dans le textarea du libelle produit au lieu des scroll bar ***/
function addrow(libelle)
{
var id = '#';
id += libelle;
var x = jqcc(id).attr('value');
var numbrow = jqcc(id).attr('rows');
numbrow = parseInt(numbrow);
if (x.length > (numbrow*45))
{
numbrow += 1;
jqcc(id).attr('rows',numbrow);
}
}
/*** retirer les date si la facture est prête mais pas envoyée (préfacture) ***/
function checkstatut()
{
if(jqcc('#statut').attr('value') == 'ready')
{
jqcc('#datecreate').attr('value','');
jqcc('#lastdaydate').attr('value','');
}
Modifié par ownedsoi (21 Jul 2011 - 15:42)
