Sujet Précédent Sujet Suivant

Html css java php ^^

Fermé
jedebute - Modifié par jedebute le 3/03/2013 à 16:52
GrifOli Messages postés 2111 Date d'inscription samedi 28 juin 2008 Statut Membre Dernière intervention 26 mars 2020 - 12 mars 2013 à 19:30
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) ^^ 

<html> 

   <head> 
   <title>Ma première page avec CSS</title>  

   <style type="text/css"> 
    h1 {font-size: 300px; font-family: arial; margin: 100px 40px 10px 70px;} 
    h2 {font-size: 72px; font-family: courier; margin: 15px 80px 15px 80px;} 
    h3 {font-size: 24px; font-family: "times new roman"; margin: 50px 60px 20px 90px;} 
   </style> 

   </head> 

   <body> 


        <h1> <?php echo ($_POST['diz']); ?> </h1> 
        <br><br/> 
        <h2> <?php echo $_POST['unit']; ?> </h2> 
        <br><br/> 
        <h3> P :<?php echo $_POST['mag']; ?> </h3> 

        </DIV> 
 </body> 
        </html>




A voir également:

22 réponses

  • 1
  • 2
Réponse 1 / 22
tidjool
3 mars 2013 à 17:22
Salut,

tu as une balise </div> qui traine toute seule ;-)

Sinon, tu peux imprimer directement cette page nan?
0
Réponse 2 / 22
jedebute
3 mars 2013 à 17:35
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 ....
0
tidjool
3 mars 2013 à 17:42
Tu peux utiliser une boucle for pour afficher 4 fois ces données. Ensuite, pour la mise en page, effectivement, il faut regarder du cote css ;-)
0
Réponse 3 / 22
GrifOli Messages postés 2111 Date d'inscription samedi 28 juin 2008 Statut Membre Dernière intervention 26 mars 2020 591
3 mars 2013 à 17:43
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: 

<html> 

<head> 
<title>Ma première page avec CSS</title>  

<style type="text/css"> 
h1 {font-size: 300px; font-family: arial; margin: 100px 40px 10px 70px;} 
h2 {font-size: 72px; font-family: courier; margin: 15px 80px 15px 80px;} 
h3 {font-size: 24px; font-family: "times new roman"; margin: 50px 60px 20px 90px;} 
</style> 
</head>

<body>

<?php

if (strlen($_POST['diz']) > 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
{
?>

<h1>
<?php echo ($_POST['diz']); ?> </h1> 
<br><br/> 
<h2/> <?php echo $_POST['unit']; ?> </h2> 
<br/><br/> 
<h3> P :<?php echo $_POST['mag']; ?> </h3> 

<?php
}
else
{
?>
<h1>Vous n'avez pas rempli tous les champs obligatoires du formulaire. Veuillez recommencer.</h1>
<?php
}
?>

</body> 
</html>
0
GrifOli Messages postés 2111 Date d'inscription samedi 28 juin 2008 Statut Membre Dernière intervention 26 mars 2020 591
3 mars 2013 à 17:46
Ce que je t'ai affiché ici, c'est une sorte de validation du formulaire. Mais ça ne fait pas la mise en page. Seul toi sait comment tu veux faire afficher ta page. Je te conseille de mettre des balises <div> </div> et les placer là où tu veux à l'aide du css.
0
Réponse 4 / 22
jedebute
3 mars 2013 à 17:49
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 :(
0
tidjool
Modifié par tidjool le 3/03/2013 à 18:01
il faut utiliser le css et une boucle par exemple :
<?PHP for (i=0;i<3;i++) { ?>
<div style="float: left; margin-right:20px;"> <?PHP echo $_POST['diz']; ?></div>
<?PHP } ?>

syntaxe à vérifier
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 22
GrifOli Messages postés 2111 Date d'inscription samedi 28 juin 2008 Statut Membre Dernière intervention 26 mars 2020 591
3 mars 2013 à 17:56
Pour chaque bloc diz, tu les mets dans une balise comme suit: 
<div class="diz-content">Blabla1</div>
<div class="diz-content">Blabla2</div>
<div class="diz-content">Blabla3</div>
<div class="diz-content">Blabla4</div>

Dans ton css: 
.diz-content{display:inline-block}

Cela les fera aligner à un côté de l'autre.
0
Réponse 6 / 22
jedebute
3 mars 2013 à 17:58
super je teste merci :)

par contre je viens de tester une <div> cela m'a modifié ma taille de police

j'ai encore du boulot pour devenir webmaster lol heureusement qu'y a ccm entre autre
0
GrifOli Messages postés 2111 Date d'inscription samedi 28 juin 2008 Statut Membre Dernière intervention 26 mars 2020 591
3 mars 2013 à 18:04
Pour mettre la taille de la police désiré dans la balise div, tu dois y faire référence dans ton css comme dans mon exemple <div class="diz-content">.

Pour modifier la taille de la police dans le css, tu fais cela (par exemple):
.diz-content {display:inline-block; font-size:12pt}
0
Réponse 7 / 22
jedebute
3 mars 2013 à 18:16
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) 

       <html>
	  <head>
	   <title>test</title>	

	    <style type="text/css">
		<div class="diz-content">h1 {font-size: 200px; font-family: arial; margin: 100px 40px 60px 80px;}</div>
                <div class="diz-content">h1 {font-size: 200px; font-family: arial; margin: 100px 40px 60px 80px;}</div>
                <div class="diz-content">h1 {font-size: 200px; font-family: arial; margin: 100px 40px 60px 80px;}</div>
                <div class="diz-content">h1 {font-size: 200px; font-family: arial; margin: 100px 40px 60px 80px;}</div>
		  <Div> h2 {font-size: 36px; font-family: courier; margin: 100px 40px 60px 80px;}<div/>
		  <Div> h3 {font-size: 18px; font-family: "times new roman"; margin: 100px 40px 6px 80px;}<div/>
                  <Div> h4 {font-size: 30px; font-family: "times new roman"; margin: 100px 40px 60px 80px;}<div/>
                  .diz-content{display:inline-block; font-size:48pt}
 	   </style>
	  </head>
	  <body>
        <h1> <?php echo ($_POST['diz']); ?> </h1>
        <br><br/>
        <h2> <?php echo $_POST['unit']; ?> </h2>
        <br><br/>
        <h3> P :<?php echo $_POST['mag']; ?> </h3>
        <h4> € <?php echo $_POST['mag']; ?> </h4>
       </body>
      </html>
0
Réponse 8 / 22
GrifOli Messages postés 2111 Date d'inscription samedi 28 juin 2008 Statut Membre Dernière intervention 26 mars 2020 591
3 mars 2013 à 18:24
Ok tu m'as mal compris en ce qui concerne les balises <div> </div>.

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 <div> </div> 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
0
Réponse 9 / 22
jedebute
Modifié par jedebute le 5/03/2013 à 16:46
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 : 
        <html>

	  <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
	  <title>test</title>	

	  <style type="text/css">
             .diz-ab {display:inline-block; font-size:60pt;}
             .unit-abc {display:inline-block; font-size:36pt;}
             .mag-abcd {display:inline-block; font-size:24pt;}
             .€-abcde {display:inline-block; font-size:12pt;}
	  </style>

	  </head>

	  <body>

<div class="diz-ab"><h1> <?php echo ($_POST['diz']); ?> </h1></div>
<div class="diz-ab"><h1> <?php echo ($_POST['diz']); ?> </h1></div>
<div class="diz-ab"><h1> <?php echo ($_POST['diz']); ?> </h1></div>
<div class="diz-ab"><h1> <?php echo ($_POST['diz']); ?> </h1></div>

<div class="unit-abc"><h2> <?php echo ($_POST['unit']); ?> </h2></div>
<div class="unit-abc"><h2> <?php echo ($_POST['unit']); ?> </h2></div>
<div class="unit-abc"><h2> <?php echo ($_POST['unit']); ?> </h2></div>
<div class="unit-abc"><h2> <?php echo ($_POST['unit']); ?> </h2></div>

<div class="mag-abcd"><h3> Prix  <?php echo ($_POST['mag']); ?> </h3></div>
<div class="mag-abcd"><h3> Prix  <?php echo ($_POST['mag']); ?> </h3></div>
<div class="mag-abcd"><h3> Prix  <?php echo ($_POST['mag']); ?> </h3></div>
<div class="mag-abcd"><h3> Prix  <?php echo ($_POST['mag']); ?> </h3></div>

<div class="€-abcde"><h4> € </h4></div>
<div class="€-abcde"><h4> € </h4></div>
<div class="€-abcde"><h4> € </h4></div>
<div class="€-abcde"><h4> € </h4></div>
        
	</body>
        </html>
0
Réponse 10 / 22
GrifOli Messages postés 2111 Date d'inscription samedi 28 juin 2008 Statut Membre Dernière intervention 26 mars 2020 591
5 mars 2013 à 23:08
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: 

<div class="diz-ab"><h1> <?php echo ($_POST['diz']); ?> </h1></div>
<div class="unit-abc"><h2> <?php echo ($_POST['unit']); ?> </h2></div>
<div class="mag-abcd"><h3> Prix  <?php echo ($_POST['mag']); ?> </h3></div>
<div class="€-abcde"><h4> € </h4></div>

<div class="diz-ab"><h1> <?php echo ($_POST['diz']); ?> </h1></div>
<div class="unit-abc"><h2> <?php echo ($_POST['unit']); ?> </h2></div>
<div class="mag-abcd"><h3> Prix  <?php echo ($_POST['mag']); ?> </h3></div>
<div class="€-abcde"><h4> € </h4></div>

etc.
0
Réponse 11 / 22
jedebute
6 mars 2013 à 13:04
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
0
Réponse 12 / 22
GrifOli Messages postés 2111 Date d'inscription samedi 28 juin 2008 Statut Membre Dernière intervention 26 mars 2020 591
Modifié par GrifOli le 6/03/2013 à 14:13
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): 
<div id="conteneur1">     
<div class="diz-ab"><h1> <?php echo ($_POST['diz']); ?> </h1></div>     
<div class="unit-abc"><h2> <?php echo ($_POST['unit']); ?> </h2></div>     
<div class="mag-abcd"><h3> Prix  <?php echo ($_POST['mag']); ?> </h3></div>     
<div class="€-abcde"><h4> € </h4></div>     
</div>     

<div id="conteneur2">     
<div class="diz-ab"><h1> <?php echo ($_POST['diz']); ?> </h1></div>     
<div class="unit-abc"><h2> <?php echo ($_POST['unit']); ?> </h2></div>     
<div class="mag-abcd"><h3> Prix  <?php echo ($_POST['mag']); ?> </h3></div>     
<div class="€-abcde"><h4> € </h4></div>     
</div>     
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 <div id="conteneur1"> dans ton code html. Si tu veux le mettre une autre fois plus loin, tu devras dans ce cas utiliser l'attribut "class".
0
Réponse 13 / 22
jedebute
6 mars 2013 à 18:51
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 :)
0
Réponse 14 / 22
GrifOli Messages postés 2111 Date d'inscription samedi 28 juin 2008 Statut Membre Dernière intervention 26 mars 2020 591
7 mars 2013 à 04:24
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: 
<div id="conteneur3">  
<div class="mag-abcd1"><h3>TEST1</h3></div>
<div class="mag-abcd2"><h3>TEST2</h3></div>
<div class="mag-abcd3"><h3>TEST3</h3></div>
<div class="mag-abcd4"><h3>TEST4</h3></div>
</div>


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/
0
Réponse 15 / 22
jedebute
7 mars 2013 à 17:21
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
0
Réponse 16 / 22
jedebute
Modifié par jedebute le 7/03/2013 à 19:22
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}
0
Réponse 17 / 22
GrifOli Messages postés 2111 Date d'inscription samedi 28 juin 2008 Statut Membre Dernière intervention 26 mars 2020 591
Modifié par GrifOli le 7/03/2013 à 22:25
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.
0
Réponse 18 / 22
GrifOli Messages postés 2111 Date d'inscription samedi 28 juin 2008 Statut Membre Dernière intervention 26 mars 2020 591
Modifié par GrifOli le 7/03/2013 à 22:34
Dans ton code HTML, entre le 4e et le 5e conteneur, ajoute cela: 
<div style="clear:both"></div>

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 ;)
0
Réponse 19 / 22
jedebute
8 mars 2013 à 17:17
Re :)

Ca fonctionne nickel !

bizarre, hier, ça me décalait les conteneurs, en ajoutant ta div 
<div style="clear:both"></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 à


<link rel="stylesheet" type="text/css" media="print" href="print.css" />


@media print { size: landscape; margin: 0cm;}
0
Réponse 20 / 22
GrifOli Messages postés 2111 Date d'inscription samedi 28 juin 2008 Statut Membre Dernière intervention 26 mars 2020 591
9 mars 2013 à 00:30
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.
0

Discussions similaires

telechargement gratuit de jeux pour telephone
pipo -
alasko de montana -

16 réponses
Téléchargement de la Bible en français
Grande sÅ"ur -
Icarenna -

6 réponses
Télécharger des jeux Java ?
ninou007 -
itachiuchiwa252 -

5 réponses
la balise <br> ou <br />
faamugol -
rwaness -

8 réponses