html css java php ^^ Fermé

Question

Bonjour, j'ai créé un formulaire très simple en php depuis une page html, je souhaiterais qu'une fois le formulaire validé, les données récupérées soit affichées directement sur une nouvelle fenêtre imprimable ? (genre facture, Bon livraison ...) je sais pas si c'est clair ^^ et j'ai épluché le net depuis 2 jours mais je débute et je comprends pas tout merci de vos réponses et bon dimanche :) ma page de result : (oui je débute soyez sympas) ^^ Ma première page avec CSS

P :

Configuration: Windows Vista / Firefox 19.0

tidjool · Answer

Salut, tu as une balise qui traine toute seule ;-) Sinon, tu peux imprimer directement cette page nan?

jedebute · Answer

merci de ta reponse :)

ah oui pas vu div ^^

bah là c'est l'affichage simplifié, en fait, je voudrais que ces données apparraissent 4 fois sur la même ligne donc j'essaie de trouver une solution en css.

Mais ma question au final, enfin mon problème, c'est qu'il faudrait qu'une fois en mode impression, ca apparraise à des endroits bien précis, et je sais qu'entre l'affichage navigateur et celui du mode impression ....

GrifOli · Answer

Bonjour, Je ne connais pas quelles sont les conditions pour que ton formulaire soit valide. Selon ton exemple, tu as les entrées "diz", "unit", et "mag". Pour vérifier si le visiteur a entré quelque chose à chacune de ces variables, tu fais cela: Ma première page avec CSS 0) //On vérifie si l'entrée diz contient quelque chose { $diz = TRUE; } else { $diz = FALSE; } if (strlen($_POST['unit']) > 0) //On vérifie si l'entrée unit contient quelque chose { $unit = TRUE; } else { $unit = FALSE; } if (strlen($_POST['mag']) > 0) //On vérifie si l'entrée mag contient quelque chose { $mag = TRUE; } else { $mag = FALSE; } if ($diz && $unit && $mag) //Si toutes les entrées contiennent quelque chose { ?>

P :

Vous n'avez pas rempli tous les champs obligatoires du formulaire. Veuillez recommencer.

jedebute · Answer

merci Grifoli mais pour ce qui est des vérifs, je ferai après, là c'est plus le problème de mise en page qui m'intrigue :(

Par exemple, j'aimerais que les 4 blocs diz soient alignés :

8         8          8         8  

ça j'y arrive déjà pas :(

GrifOli · Answer

Pour chaque bloc diz, tu les mets dans une balise comme suit:

Blabla1

Blabla2

Blabla3

Blabla4

Dans ton css: .diz-content{display:inline-block} Cela les fera aligner à un côté de l'autre.

jedebute · Answer

super je teste merci :) par contre je viens de tester une

cela m'a modifié ma taille de police j'ai encore du boulot pour devenir webmaster lol heureusement qu'y a ccm entre autre

jedebute · Answer

bon tant pis je vais passer pour un débile mais le css n'est résolument pas pour moi je crois ^^ Quand vous dites "dans ton css" je n'ai pas fait de fichier à part, j'essaie de tout mettre dans le même code, apparemment si j'ai bien lu, c'est possible, voilà ou j'en suis mais tu vas me dire à juste titre que y'a des trucs pas a leurs places lol (euh merci de ta patience) test

P :

€

GrifOli · Answer

Ok tu m'as mal compris en ce qui concerne les balises

. Celles-ci doivent se situer dans ton code html là où tu affiches du texte, c'est ce qui permet de délimiter une section de ta page internet à laquelle tu vas lui faire une mise en page. Cette mise en page, c'est le code situé dans le css qui va le faire. Les balises

ne se retrouvent donc pas avec le css, mais elles y font référence Effectivement, au lieu de mettre tout le code css dans la page internet, tu les mets dans un fichier .css) Je crois qu'avant d'aller plus loin, tu devrais suivre un tutoriel sur le CSS afin que tu comprennes bien la structure à mettre en place. Ça vaut vraiment la peine de s'investir, parce qu'une fois maîtrisé, tu vas sauvé beaucoup de temps, surtout si tu as beaucoup de pages internet à créer. Voici un bon tutoriel : https://openclassrooms.com/fr/courses

jedebute · Answer

Salut :) Bon j'ai réussi, merci ;) par contre, ça ne doit pas être le css dont j'ai besoin, en effet, tout se retrouve à la file indienne, et à la suite : x x x x y y y y z z z z ... Hors j'aurais préféré le contraire x y z ... x y z ... Je pense a bloc flottant non ? Et deuxieme chose, le sigle € s'affichait bien avant maintenant il s'affiche en ? losange noir, une idée ? edit : test

Prix

€

GrifOli · Answer

Salut! Tout se retrouve à la suite ainsi car c'est la façon dont tu as construit le code html. Si tu préfères x y z, x y z, ... ton code html doit être dans cet ordre:

Prix

€

Prix

€

etc.

jedebute · Answer

salut :)

Bon jusque là ca va , mais en fait, pour compliquer le truc, il faudrait en fait que chaque élément (diz, unit, mag et h4) soit chacun un bloc contenu dans un contener, et ce 4 fois ^^

(t'as vu j'ai bien lu le tuto lol) par contre, je rame entre, block, inline, float, absolute ... )

ci joint une capture du rendu souhaité, ça résume bien tout en fait

merci du temps que tu m'accordes

capture : http://cjoint.com/?3CgneEcoHJa

GrifOli · Answer

Ok parfait, je comprends. Chaque conteneur sera une autre division faisant référence au css pour la mise en page. Donc, dans ta page HTML, tu auras ça (par exemple):

Prix

€

Prix

€

etc. EDIT: Et dans ton CSS (par exemple): #conteneur1{float:left; width:200px; margin:30px 30px 30px 30px; border:2px solid black} #conteneur2{float:left; width:200px; margin:30px 30px 30px 0px; border:2px solid black} etc. Il n'y a presque pas de différence entre l'attribut class et id. La seule différence, c'est que l'attribut id ne doit être utilisé qu'une seule fois dans ton code html, et le nom est précédé d'un dièse (#) au lieu d'un point dans ton css. Tu ne peux donc pas avoir deux fois

dans ton code html. Si tu veux le mettre une autre fois plus loin, tu devras dans ce cas utiliser l'attribut "class".

jedebute · Answer

super merci 

je teste tout ça taleur, (je suis au taf :P)  par contre, si j'ai bien compris ce que j'ai lu, il y aura bien mes conteneurs contenant exactement ce qu'il faut, mais comme c'est codé là, tout sera en forme de liste, npn ? c'est à dire :
Diz
unit
...

et non comme la capture que je t'ai montré ou par ex le h2 est juste au dessus du h4 !

ou y'a un truc que j'ai (encore:)) pas compris ^^ 

je pense que c'est ici que je dois inclure mes block et/ou inline, c'est bien ça ?

excellente soirée :)

GrifOli · Answer

Salut, Oh ok, si tu veux afficher ce qu'il y a dans les conteneurs tel que tu le montres sur ta capture d'écran, on n'utiliserait peut-être pas les display:inline-block (ça, on les utilise surtout pour afficher des trucs un à côté de l'autre). On pourrait utiliser les position:relative et position:absolute pour bien faire ce que tu désires Ton conteneur, tu dois le mettre en position:relative dans ton css. Puis, pour chaque division dans ton conteneur, tu les situes par rapport à ton conteneur avec position:absolute. Pour résumer, tes divisions dans le conteneur vont avoir une position absolue par rapport à ton conteneur. Voici un exemple: Dans le HTML:

TEST1

TEST2

TEST3

TEST4

Dans le CSS: #conteneur3{position:relative; float:left; width:300px; height:375px; margin:30px 30px 30px 0px; border:2px solid black} .mag-abcd1 {position:absolute; left:10px; top:50px; height:200px; font-size:16pt; border:1px solid black} .mag-abcd2{position:absolute; right:40px; bottom:125px; font-size:16pt; border:1px solid black} .mag-abcd3{position:absolute; left:10px; bottom:20px; width:250px; margin-left:10px;font-size:16pt; border:1px solid black} .mag-abcd4 {position:absolute; right:40px; top:50px; font-size:16pt; border:1px solid black} Voici ce que ça donne: https://www.cjoint.com/c/CCheoO59xih Le positionnement se fait grâce à "top", "right", "bottom", "left". Voici également un lien qui aide à comprendre comme les divisions réagissent avec les différents types de position: http://www.barelyfitz.com/screencast/html-training/css/positioning/

jedebute · Answer

Salut 

C'est exactement ce que je voulais, je me suis même offert le luxe de rajouter des blocs dans le conteneur ^^ et je suis en train d'ajuster tout ça :)

Je voulais mettre en résolu mais je me suis aperçu que je ne pouvais pas répondre une fois "résolu" (bizarre) et comme je risque d'avoir encore ( un peu ) besoin de toi (notamment pour la mise en page "navigateur/format impression"...

mais je vais essayer de m'y faire un peu tout seul et je tiens au courant 

merci encore 1000 fois et bonne soirée

jedebute · Answer

re 

j'ai répondu au dessus mais j'ai crié victoire trop vite :) 

j'ai réussi à faire mes 4 conteneurs côte à côte, impecc ! 

j'ai voulu créer une deuxième rangée identique mais en dessous, le 5eme conteneur est bien en dessous du 1er mais le 6eme se retrouve en chevauchement sur le 1er !! hors j'ai suivi la logique du float ... je vais chercher mais si t'as une astuce et que tu passes par là :) 

je te colle ou j'en suis (que le CSS le reste étant acquis) mais tu rigoles pas : 
(c'est donc a partir du 6 que ça cloche :-(  

#conteneur1{position:relative; float:left; width:300px; height:375px; margin:30px 30px 30px 0px; border:2px solid black}   
.diz-ab {position:absolute; left:45px; top:10px; font-size:48pt; font-weight:bold; border:1px solid black} 
.unit-abc {position:absolute; right:55px; bottom:125px; font-size:24pt; border:1px solid black} 
.mag-abcd {position:absolute; left:20px; bottom:20px; width:250px; margin-left:10px;font-size:18pt; font-weight:bold; border:1px solid black} 
.px-abcde {position:absolute; left:120px; bottom:18px; width:150px; margin-left:10px;font-size:18pt; border:1px solid black} 
.€-abcdef {position:absolute; right:60px; top:50px; font-size:28pt; font-weight:bold; border:1px solid black} 

#conteneur2{position:relative; float:left; width:300px; height:375px; margin:30px 30px 30px 0px; border:2px solid black}   
.diz-ab {position:absolute; left:45px; top:10px; font-size:48pt; font-weight:bold; border:1px solid black} 
.unit-abc {position:absolute; right:55px; bottom:125px; font-size:24pt; border:1px solid black} 
.mag-abcd {position:absolute; left:20px; bottom:20px; width:250px; margin-left:10px;font-size:18pt; font-weight:bold; border:1px solid black} 
.px-abcde {position:absolute; left:120px; bottom:18px; width:150px; margin-left:10px;font-size:18pt; border:1px solid black} 
.€-abcdef {position:absolute; right:60px; top:50px; font-size:28pt; font-weight:bold; border:1px solid black} 

#conteneur3{position:relative; float:left; width:300px; height:375px; margin:30px 30px 30px 0px; border:2px solid black}   
.diz-ab {position:absolute; left:45px; top:10px; font-size:48pt; font-weight:bold; border:1px solid black} 
.unit-abc {position:absolute; right:55px; bottom:125px; font-size:24pt; border:1px solid black} 
.mag-abcd {position:absolute; left:20px; bottom:20px; width:250px; margin-left:10px;font-size:18pt; font-weight:bold; border:1px solid black} 
.px-abcde {position:absolute; left:120px; bottom:18px; width:150px; margin-left:10px;font-size:18pt; border:1px solid black} 
.€-abcdef {position:absolute; right:60px; top:50px; font-size:28pt; font-weight:bold; border:1px solid black} 

#conteneur4{position:relative; float:left; width:300px; height:375px; margin:30px 30px 30px 0px; border:2px solid black}   
.diz-ab {position:absolute; left:45px; top:10px; font-size:48pt; font-weight:bold; border:1px solid black} 
.unit-abc {position:absolute; right:55px; bottom:125px; font-size:24pt; border:1px solid black} 
.mag-abcd {position:absolute; left:20px; bottom:20px; width:250px; margin-left:10px;font-size:18pt; font-weight:bold; border:1px solid black} 
.px-abcde {position:absolute; left:120px; bottom:18px; width:150px; margin-left:10px;font-size:18pt; border:1px solid black} 
.€-abcdef {position:absolute; right:60px; top:50px; font-size:28pt; font-weight:bold; border:1px solid black} 

#conteneur5{position:relative; float:top:400px; width:300px; height:375px; margin:30px 30px 30px 0px; border:2px solid black}   
.diz-ab {position:absolute; left:45px; top:10px; font-size:48pt; font-weight:bold; border:1px solid black} 
.unit-abc {position:absolute; right:55px; bottom:125px; font-size:24pt; border:1px solid black} 
.mag-abcd {position:absolute; left:20px; bottom:20px; width:250px; margin-left:10px;font-size:18pt; font-weight:bold; border:1px solid black} 
.px-abcde {position:absolute; left:120px; bottom:18px; width:150px; margin-left:10px;font-size:18pt; border:1px solid black} 
.€-abcdef {position:absolute; right:60px; top:50px; font-size:28pt; font-weight:bold; border:1px solid black} 

#conteneur6{position:relative; float:top:400px; left:500px; width:300px; height:375px; margin:30px 30px 30px 0px; border:2px solid black}   
.diz-ab {position:absolute; left:45px; top:10px; font-size:48pt; font-weight:bold; border:1px solid black} 
.unit-abc {position:absolute; right:55px; bottom:125px; font-size:24pt; border:1px solid black} 
.mag-abcd {position:absolute; left:20px; bottom:20px; width:250px; margin-left:10px;font-size:18pt; font-weight:bold; border:1px solid black} 
.px-abcde {position:absolute; left:120px; bottom:18px; width:150px; margin-left:10px;font-size:18pt; border:1px solid black} 
.€-abcdef {position:absolute; right:60px; top:50px; font-size:28pt; font-weight:bold; border:1px solid black}

GrifOli · Answer

Re 

Tout d'abord, tu peux enlever dans ton css tous les doublons .diz-ab .unit-abc .mag-abcd .px-abcde .€-abcdef. Tu n'as qu'à les indiquer une seule fois! 

Comme ceci: 

#conteneur1{position:relative; float:left; width:300px; height:375px; margin:30px 30px 30px 0px; border:2px solid black} 
#conteneur2{position:relative; float:left; width:300px; height:375px; margin:30px 30px 30px 0px; border:2px solid black} 
#conteneur3{position:relative; float:left; width:300px; height:375px; margin:30px 30px 30px 0px; border:2px solid black} 
#conteneur4{position:relative; float:left; width:300px; height:375px; margin:30px 30px 30px 0px; border:2px solid black} 
#conteneur5{position:relative; float:left; width:300px; height:375px; margin:30px 30px 30px 0px; border:2px solid black} 
#conteneur6{position:relative; float:left; width:300px; height:375px; margin:30px 30px 30px 0px; border:2px solid black}    
.diz-ab {position:absolute; left:45px; top:10px; font-size:48pt; font-weight:bold; border:1px solid black}  
.unit-abc {position:absolute; right:55px; bottom:125px; font-size:24pt; border:1px solid black}  
.mag-abcd {position:absolute; left:20px; bottom:20px; width:250px; margin-left:10px;font-size:18pt; font-weight:bold; border:1px solid black}  
.px-abcde {position:absolute; left:120px; bottom:18px; width:150px; margin-left:10px;font-size:18pt; border:1px solid black}  
.€-abcdef {position:absolute; right:60px; top:50px; font-size:28pt; font-weight:bold; border:1px solid black}  


Je te reviens pour la suite de ce que tu veux faire.

GrifOli · Answer

Dans ton code HTML, entre le 4e et le 5e conteneur, ajoute cela:

Cela fera en sorte que le prochain conteneur avec un float:left ne se collera pas sur le conteneur précédent, mais bien en-dessous. Et les prochains conteneurs vont se placer à côté de ce dernier. Voici le résultat de mon côté: https://www.cjoint.com/c/CChwGnWmvhB J'ai quelque peu modifié ton CSS du conteneur5 et conteneur6 (j'ai ajouté float:left et j'ai enlevé les "top" et "left", tu ne dois pas les utiliser pour les conteneurs, seulement pour ce qu'il y a dedans!) Reviens-moi pour confirmer que ça fonctionne ;)

jedebute · Answer

Re :) Ca fonctionne nickel ! bizarre, hier, ça me décalait les conteneurs, en ajoutant ta div

, ca créait une troisième rangée, je l'ai enlevé et maintenant ça fonctionne sur 2 rangées ^^ Par contre, tu t'en doutais, j'ai une autre bonne question, ces deux rangées doivent pouvoir s'afficher sur une page a4 paysage pour impression, là ce n'est pas le cas, ça me prends au moins 4 pages lol, avec quoi puis je rectifier tout ça ? Evidement, j'ai parcouru quelques tutos, mais ça va tellement plus vite avec toi :) Je plaisante, je pensais à @media print { size: landscape; margin: 0cm;}

GrifOli · Answer

Salut,

Tu peux effectivement te faire un nouveau fichier .css dans lequel tu vas redéfinir les dimensions de tes divisions pour que ça rentre sur une page A4.

Avec la ligne de code que tu as trouvée :<link rel="stylesheet" type="text/css" media="print" href="print.css" /> la page web va utiliser le fichier print.css pour imprimer ta page. Tu peux donc mettre dans ce css d'autres dimensions que celles que tu as définies dans le css utilisée pour l'affichage de ta page.

N'utilise pas @media print { size: landscape; margin: 0cm;}, ne fais que donner des nouvelles dimensions à tes divisions et surtout réduire la taille de ta police dans ton fichier print.css.

Dans le fond, print.css est comme une nouvelle mise-en-page, cette fois-ci adaptée pour l'impression. 

Mais ça va te demander beaucoup de temps pour que tout fonctionne bien, je ne connais pas de propriété qui permet d'ajuster en une ligne de code la dimension d'un site internet en une page A4.

jedebute · Answer

Salut :)

Bon avec print... je déprime, je suis retourné avec mon idée de départ en faisant au mieux avec le navigateur mais je galère a ajuster le tout  

en effet, l'affichage doit être au 1/2 centimètre près quand j'imprime et le problème c'est que quand je décale par exemple mes conteneurs vers la droite, ça me le fait passer sur une nouvelle rangée au lieu de rester avec ses copains :(

GrifOli · Answer

Salut,

Si tes conteneurs se retrouvent sur la rangée suivante lorsque tu tentes de les déplacer, c'est parce qu'ils ne rentrent plus la dimension imposée de ta page internet.

Quelle dimension as-tu imposée à ton site internet? Habituellement, on ne dépasse pas les 1000 pixels pour s'assurer que la plus faible résolution d'écran (aujourd'hui, rares sont ceux qui ont une résolution plus faible que 1024x768 pixels) puissent voir le contenu du site internet sans avoir de barre de défilement horizontale.

Avec une dimension maximale de 1000 pixels de large, ça apparaît bien sur une feuille format Lettre habituellement!

Html css java php ^^

22 réponses

Discussions similaires