tracer des rectangles sur plusieurs pages

tracer des rectangles sur plusieurs pages - Divers - Programmation

Marsh Posté le 19-09-2006 à 13:50:19    

Pour faire simple
Je recherche comment tracer des rectangles
de tailles prédéfinis dans une page format A4 !?
 
J'ai en entrée un fichier contenant des dimensions l(argeur) X L(ongueur) et un numéro de page où placer le rectangle
 
Je voudrais en résultat, sortir un .DOC ou  
sortir une page précise (donc remplie de rectangles) ?
 
Le problème est que je ne vois pas comment
niveau code (VB, HTML, PHP, JAVASCRIPT ou autres) composer ma page et l'imprimer ?
 
Quelqu'un peut-il m'éclairer là-dessus ? :whistle:  
 
 
 
 
 

Reply

Marsh Posté le 19-09-2006 à 13:50:19   

Reply

Marsh Posté le 19-09-2006 à 15:09:46    

hmmmm, je vais faire un test, je te tiens au courant

Reply

Marsh Posté le 19-09-2006 à 15:21:55    

Et hop !
 

Code :
  1. <html>
  2.   <head>
  3.     <title>Test rectangles</title>
  4.     <style rel="stylesheet" type="text/css" media="print">
  5.       .pageBreak
  6.       {
  7.         page-break-after: always;
  8.         visibility: hidden;
  9.       }
  11.       #rectangle1
  12.       {
  13.         position: relative;
  14.         border: solid 1px black;
  15.         background-color: yellow;
  16.         display: block;
  17.         top: 10cm;
  18.         left:5cm;
  19.         width: 5cm;
  20.         height: 5cm;
  21.       }
  23.       #rectangle2
  24.       {
  25.         position: relative;
  26.         border: solid 1px black;
  27.         background-color: red;
  28.         display: block;
  29.         top: 1cm;
  30.         left:1cm;
  31.         width: 1cm;
  32.         height: 1cm;
  33.       }
  34.     </style>
  35.   </head>
  36.   <body>
  37.     <div id="rectangle1"></div>
  38.     <hr class="pageBreak"/>
  39.     <div id="rectangle2"></div>
  40.   </body>
  41. </html>


 
T'as juste à lancer ton impression depuis n'importe quel navigateur.

Message cité 1 fois
Reply

Marsh Posté le 19-09-2006 à 15:29:09    

Super !
Je teste ça ce soir
Mais d'avance un grand Merci !!!

Reply

Marsh Posté le 20-09-2006 à 07:46:48    

C'était exactement ce qu'il me fallait ;-)
 
Je vais donc partir d'un fichier texte contenant donc les dimensions
et générer en sortie du Html (en m'inspirant de ce que tu m'as donné)
En gérant le pagebreak évidemment au passage ...
 
Reste à trouver comment ouvrir / lire un fichier texte
et écrire dans un autre, je vais sans doute trouver ça
facilement du coté Javascript ...
 
 
 
 

Reply

Marsh Posté le 20-09-2006 à 23:19:10    

Plutôt du côté php je pense.
Car si JavaScript peut effectivement lire un fichier il ne peut pas en écrire un.

Reply

Marsh Posté le 21-09-2006 à 01:52:00    

pas besoin d'en écrire un, il altère la page et t'as plus qu'a l'imprimer [:spamafote]


---------------
Me: Django Localization, Yogo Puzzle, Chrome Grapher, C++ Signals, Brainf*ck.
Reply

Marsh Posté le 21-09-2006 à 12:01:28    

Ok dwogsi Bonne remarque
 
Par contre  0x90 j'ai pas compris ta reflexion ?
car je dois partir d'un fichier texte
ex : FIC.TXT  
Contenu
=>  
150;100
200;10
50;15
...
 
et ensuite générer un html
ici 3 rectangle avec un algorithme
qui va me dire le rectangle 1 et 2 tu l'imprimes sur la 1ere page
et le recangle 3 sur la 2ème ..
Et cet algo je pensais le mettre dans un .Html donc en PHP
 
Au final : j'aurai 3 fichiers
- le fichier FIC.TXT de parmètrage
- le .HTML contenant le PHP
- le .HTML recréé à chaque fois qui servira à l'impression ...
 
 

Reply

Marsh Posté le 21-09-2006 à 12:13:39    

Si c'est pour utilisation "humaine" j'aurais fait ca :
- une seule page en html+javascript avec une textbox, tu rentre le contenu du FIC.TXT dedans, il le lit, il génère les rectangles (tout ca en JS à grand coup de DOM) puis cache la textbox et enfin lance l'impression.
 
ca fait moins de fichiers et moins de langages différents.


---------------
Me: Django Localization, Yogo Puzzle, Chrome Grapher, C++ Signals, Brainf*ck.
Reply

Marsh Posté le 21-09-2006 à 12:14:13    

Au fait, à la base, tu veux quoi exactement ? Parcequ'une petite Macro Word, ce sera limite plus simple en fait... (la solu de 0x90 aussi d'ailleurs)


Message édité par MagicBuzz le 21-09-2006 à 12:15:01
Reply

Marsh Posté le 21-09-2006 à 12:14:13   

Reply

Marsh Posté le 21-09-2006 à 13:18:55    

Bon ...
 
j'ai une liste de 500-600 étiquettes
à sortir et la solution HTML / PHP me plait bien car avec internet
et en plaçant le coding chez mon hebergeur, le pote
en question pourra pré-visualiser et lancer / sortir la totalité
(ou qques pages ) de ces étiquettes partout(chez lui / au boulot)
 
Il y a quand même un algo (léger) à mettre en place
car je dois déterminer / positionner un  nombre d'étiquettes  
par page (fonction marge et écart entre étiquettes + alignement
des étiquettes )
 
C'est + clair ?
 
 
 
 

Reply

Marsh Posté le 21-09-2006 à 14:03:25    

d'accord :)
 
ça me semble rigolo comme truc :D
 
moi j'ai dû faire la même chose en .NET et du coup j'ai généré un PDF à la volée (pas facile de dessiner un code barre à la main dans un PDF :o)

Reply

Marsh Posté le 21-09-2006 à 14:29:40    

;-)
 
Sympa oui !!! mais pour le gars qui me demande ça, ça devenait
un vrai problème et ça faisait 1 an qu'il recherchait un
voisin informaticien ...


Message édité par vttman2 le 21-09-2006 à 15:45:42
Reply

Marsh Posté le 09-10-2006 à 08:54:37    

MagicBuzz a écrit :

Et hop !
 

Code :
  1. <html>
  2.   <head>
  3.     <title>Test rectangles</title>
  4.     <style rel="stylesheet" type="text/css" media="print">
  5.       .pageBreak
  6.       {
  7.         page-break-after: always;
  8.         visibility: hidden;
  9.       }
  11.       #rectangle1
  12.       {
  13.         position: relative;
  14.         border: solid 1px black;
  15.         background-color: yellow;
  16.         display: block;
  17.         top: 10cm;
  18.         left:5cm;
  19.         width: 5cm;
  20.         height: 5cm;
  21.       }
  23.       #rectangle2
  24.       {
  25.         position: relative;
  26.         border: solid 1px black;
  27.         background-color: red;
  28.         display: block;
  29.         top: 1cm;
  30.         left:1cm;
  31.         width: 1cm;
  32.         height: 1cm;
  33.       }
  34.     </style>
  35.   </head>
  36.   <body>
  37.     <div id="rectangle1"></div>
  38.     <hr class="pageBreak"/>
  39.     <div id="rectangle2"></div>
  40.   </body>
  41. </html>


 
T'as juste à lancer ton impression depuis n'importe quel navigateur.


 
Me revoici  :bounce:  
Alors finalement je suis passé par du Pascal  :ouch: pour procéder ainsi :
1) Je pars d'un fichier contenant  mes largeurs/hauteurs (mm) d'étiquettes
ex :  
25;100
50;75
100;35
   
2) je lance mon programme qui me calcule les coordonnées des étiquettes
3) je génére en sortie un .html comme celui que MagicBuzz m'a donné en exemple ...
 
Sauf que => j'ai calculé mes coordonnées en coordonnées absolues
donc niveau "position" j'ai mis "absolute" au lieu de "relative"
et  je pensais qu'après haque saut de page (Pagebreak)
les rectangles iraient se positionner sur la page suivante ...
mais non    
=>
Tous les rectangles/etiquettes (de la 1ere page + des pages suivantes :heink: ) vont se confondre sur le 1ere page et dans les autres pages (Pagebreak) ... il n'y a rien  :sweat:  
 
Vous voyez une soluce simple pour corriger ce pb, ou je dois recalculer l'ensemble de
mes coordonnées en "relative"
 
Thanks ... je progresse !
 
 

Reply

Marsh Posté le 09-10-2006 à 12:34:35    

je ne pense pas qu'il y ait de solution "simple".
 
tente de faire un + 29.7cm au top des étiquettes de la seconde page et ainsi de suite (et du coup, plus de pagebreak), avec un peu de pot ça marchera

Reply

Marsh Posté le 09-10-2006 à 12:35:33    

regroupe toutes les etiquettes d'une même page dans un <div></div> en position:relative; top:0; left:0;


Message édité par 0x90 le 09-10-2006 à 12:35:48
Reply

Marsh Posté le 09-10-2006 à 12:42:39    

Ok j'essaye les 2 soluces ce soir ...
 
Merci !!!

Reply

Marsh Posté le 09-10-2006 à 12:43:57    

a soluce de 0x90, si elle marche, me semble mieux que la mienne, et plus simple à mettre en place (plus propre en tout cas ;))

Reply

Marsh Posté le 09-10-2006 à 13:16:16    

Reparlons de la soluce 0x90 ...
Je vois pas comment adapter le code ci-dessous
Est-ce après la balise <body> que je dois placer
le DIV, l'attribut relative ...
Si je vous pose la question c'est qu'après 3,4 essais
benh j'ai que des erreurs de syntaxe  :whistle:  
 
 
 

Code :
  1. <html>
  2. <head>
  3. <title>Test rectangles</title>
  4. <style rel="stylesheet" type="text/css" media="print">
  5. .pageBreak
  6. {
  7. page-break-after: always;
  8. visibility: hidden;
  9. }
  10. #rectangle1
  11. {
  12. position: absolute;
  13. border: solid 1px black;
  14. background-color: yellow;
  15. display: block;
  16. top: 10cm;
  17. left:5cm;
  18. width: 5cm;
  19. height: 5cm;
  20. }
  21. #rectangle2
  22. {
  23. position: absolute;
  24. border: solid 1px black;
  25. background-color: red;
  26. display: block;
  27. top: 1cm;
  28. left:1cm;
  29. width: 1cm;
  30. height: 1cm;
  31. }
  32. #rectangle3
  33. {
  34. position: absolute;
  35. border: solid 1px black;
  36. background-color: red;
  37. display: block;
  38. top: 15cm;
  39. left:10cm;
  40. width: 2cm;
  41. height: 5cm;
  42. }
  43. </style>
  44. </head>
  45. <body>
  46. <div id="rectangle1"></div>
  47. <hr class="pageBreak"/>
  48. <div id="rectangle2"></div>
  49. <div id="rectangle3"></div>
  50. </body>
  51. </html>

Reply

Marsh Posté le 09-10-2006 à 13:50:32    

essaie ça
 


<html>
<head>
<title>Test rectangles</title>
<style rel="stylesheet" type="text/css" media="print">
.page
{
page-break-after: always;
}
 
.rectangle1
{
position: absolute;
border: solid 1px black;
background-color: yellow;
display: block;
top: 10cm;
left:5cm;
width: 5cm;
height: 5cm;
}
 
.rectangle2
{position: absolute;
border: solid 1px black;
background-color: red;
display: block;
top: 1cm;
left:1cm;
width: 1cm;
height: 1cm;
}
 
.rectangle3
{
position: absolute;
border: solid 1px black;
background-color: red;
display: block;
top: 15cm;
left:10cm;
width: 2cm;
height: 5cm;
}
</style>
</head>
<body>
<div class="page">
  <div class="rectangle1"></div>
  <div class="rectangle2"></div>
  <div class="rectangle3"></div>
</div>
<div class="page">
  <div class="rectangle1"></div>
  <div class="rectangle2"></div>
  <div class="rectangle3"></div>
</div>
<div class="page">
  <div class="rectangle1"></div>
  <div class="rectangle2"></div>
  <div class="rectangle3"></div>
</div>
<div class="page">
  <div class="rectangle1"></div>
  <div class="rectangle2"></div>
  <div class="rectangle3"></div>
</div>
</body>
</html>


Message édité par MagicBuzz le 09-10-2006 à 13:50:52
Reply

Marsh Posté le 09-10-2006 à 13:58:04    

Marche pô !
 
5 pages mais
=>
Tout est sur la 1ere page ... uniquement ...
et ensuite 4 pages vides  
 

Reply

Marsh Posté le 09-10-2006 à 13:58:54    

ben donc tente ma solution, on sait jamais

Reply

Marsh Posté le 09-10-2006 à 14:38:13    

met le .page en position relative sinon l'absolut des rectangles se fera à partir de la page web entière et pas du bloc page.

Reply

Marsh Posté le 09-10-2006 à 15:01:03    

ah ouais, oublié de corriger ce truc dans mon exemple :)

Reply

Marsh Posté le 09-10-2006 à 15:26:47    

Bon le truc en dessous doit faire en gros ce que tu voulais mais pour que tout marche bien il faut lors de l'impression configurer les marges "du navigateur".
Sous FF comme sous IE: aperçu avant impression, mise en page et tu mets les 4 marges à 0 et tu vires également en-tête et pied de page.
Et zou roulez jeunesse:

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  4. <head>
  5.   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  6.   <title>Exemple</title>
  7.   <style type="text/css" media="all">
  8.   *{
  9.     padding:0;
  10.     margin:0;
  11.   }
  12.   div.rectangle{
  13.     border: 1px solid black;
  14.     margin-left:1cm;
  15.     margin-bottom: 1cm;
  16.   }
  17.   div.page{
  18.     width: 20cm;
  19.     height:28.5cm;
  20.     page-break-after: always;
  21.     margin-bottom:0.5cm;
  22.   }
  23.   </style>
  24.   <script type="text/javascript">
  25.   function Rectangle(width, height){
  26.     this.node = document.createElement('div');
  27.     this.node.className = 'rectangle';
  28.     this.node.style.width = width+'cm';
  29.     this.node.style.height= height+'cm';
  30.     return this.node;
  31.   }
  32.   function Page(){
  33.     this.height = 0;
  34.     Page.prototype.nbPages++;
  35.     this.node = document.createElement('div');
  36.     this.node.className = 'page';
  37.     document.getElementsByTagName('body')[0].appendChild(this.node);
  38.   }
  39.   Page.prototype.ajoutRectangle = function( width, height){
  40.     this.node.appendChild(new Rectangle(width, height));
  41.     this.height += parseFloat(height) +1;
  42.   }
  43.   Page.prototype.height = 28.5;
  44.   Page.nbPages = 0;
  46.   function dessineRectangle(liste){
  47.     document.getElementById('genRect').style.display = 'none';
  48.     Page.nbPages = 0;
  49.     var cleaner;
  51.     var pageCourante = new Page();
  52.     var lignes = liste.split('\n');
  53.     for(var i=0; i<lignes.length; i++){
  54.        var taille = lignes[i].split(';');
  55.        if ( taille.length != 2){
  56.          alert('ligne incorrecte:'.$ligne);
  57.        } else {
  58.          if ( parseFloat(pageCourante.height) + parseFloat(taille[1]) > parseFloat(Page.prototype.height)){
  59.            pageCourante=new Page();
  60.          }
  61.          pageCourante.ajoutRectangle(taille[0], taille[1]);
  62.        }
  63.     }
  64.   }
  66.   window.onload = function(){
  67.     document.getElementById('genRect').onsubmit = function(e){
  68.       dessineRectangle(document.getElementById('listeTaille').value);
  69.       return false;
  70.     }
  71.   }
  72.   </script>
  73. </head>
  74. <body>
  75. <form id="genRect" action="scriptPHPquiFaitLaMemeChose.php" method="post">
  77. <textarea id="listeTaille"></textarea>
  78. <input type="submit" value="G&eacute;n&eacute;rer"/>
  79. </form>
  80. </body>
  81. </html>


 
Note: il doit être possible d'optimiser le positionnement des rectangles pour pouvoir en faire tenir le plus possible sur une page ( sans retour à la ligne à chaque fois), ne serait-ce qu'en jouant sur les floatants, mais j'ai pas le temps la :D
Note2: c'est du code écrit à l'arrache, si certains ont envie de corriger des morceaux surtout qu'ils ne se gènent pas!


Message édité par anapajari le 09-10-2006 à 15:27:17
Reply

Marsh Posté le 09-10-2006 à 16:09:39    

Pas mal Anapajari !!
 
Seulement ... je dois partir d'un fichier avec plein de dimensions de rectangle donc pour les rentrer à la main c'est pas top ...  
et la difficulté du bazar c'est justement le
positionnement particulier des rectangles ...  
et là mon algo en Pascal (ancestral) fonctionne
mais bon
dès que j'ai réglé le pb du relative / absolute (cf : 0X90),  
je posterai un exemple de résultat ...
 
 
 
 
 
   

Message cité 1 fois
Reply

Marsh Posté le 09-10-2006 à 16:17:51    

vttman2 a écrit :

Pas mal Anapajari !!
Seulement ... je dois partir d'un fichier avec plein de dimensions de rectangle donc pour les rentrer à la main c'est pas top ...  
et la difficulté du bazar c'est justement le
positionnement particulier des rectangles ...  


Tu peux mettre ta liste directement dans le texte area hein !!!
Et ça calcule tout seul pour pas que tu te retrouves avec un rectangle à cheval sur deux pages.
Par contre ça ne fait pas la réorganistation de tes rectangles dans ce gout la:


____ ___
|  | | |
|  | |_|
|__|  


Message édité par anapajari le 09-10-2006 à 16:19:29
Reply

Marsh Posté le 09-10-2006 à 16:31:52    

On est dac là-dessus !

Reply

Marsh Posté le 10-10-2006 à 07:45:49    

0x90 ça marche impec !
Rest un petit bug à corriger, un rectangle à cheval sur 2 pages
sur ... une centaine de bien positionné
Bon c'est sans doute une histoire de marges ... je vais rectifier
ça asap et poste un exemple de résultat ...
 
A tous encore Merci pour votre aide précieusSSSe !!!

Reply

Marsh Posté le 12-10-2006 à 19:24:26    

un exemple de fichier html généré automatiquement (heureusement  :ouch: )
 
Les rectangles sont ordonnés par programme pascal, l'algo est sympa ...
 
et je pars donc d'un fichier txt contenant les hauteurs et largeurs
 
ex de contenu:  
25;100
55;35
100;15
 
 
 
ex de résultat :

Code :
  1. <html>
  2. <head>
  3. <title>Rectangles</title>
  4. <style rel="stylesheet" type="text/css" media="print">
  5. .page
  6. {
  7. position : relative;
  8. top: 0mm;
  9. left: 0mm;
  10. page-break-after: always;
  11. }
  12. .rectangle1
  13. {
  14. position: absolute;
  15. border: solid 3px black;
  16. background-color: black;
  17. display: block;
  18. top: 10mm;
  19. left: 10mm;
  20. width:100mm;
  21. height:25mm;
  22. }
  23. .rectangle2
  24. {
  25. position: absolute;
  26. border: solid 3px black;
  27. background-color: black;
  28. display: block;
  29. top: 10mm;
  30. left: 120mm;
  31. width:75mm;
  32. height:55mm;
  33. }
  34. .rectangle3
  35. {
  36. position: absolute;
  37. border: solid 3px black;
  38. background-color: black;
  39. display: block;
  40. top: 75mm;
  41. left: 10mm;
  42. width:75mm;
  43. height:55mm;
  44. }
  45. .rectangle4
  46. {
  47. position: absolute;
  48. border: solid 3px black;
  49. background-color: black;
  50. display: block;
  51. top: 75mm;
  52. left: 95mm;
  53. width:100mm;
  54. height:25mm;
  55. }
  56. .rectangle5
  57. {
  58. position: absolute;
  59. border: solid 3px black;
  60. background-color: black;
  61. display: block;
  62. top: 140mm;
  63. left: 10mm;
  64. width:100mm;
  65. height:25mm;
  66. }
  67. .rectangle6
  68. {
  69. position: absolute;
  70. border: solid 3px black;
  71. background-color: black;
  72. display: block;
  73. top: 140mm;
  74. left: 120mm;
  75. width:75mm;
  76. height:55mm;
  77. }
  78. .rectangle7
  79. {
  80. position: absolute;
  81. border: solid 3px black;
  82. background-color: black;
  83. display: block;
  84. top: 205mm;
  85. left: 10mm;
  86. width:75mm;
  87. height:55mm;
  88. }
  89. .rectangle8
  90. {
  91. position: absolute;
  92. border: solid 3px black;
  93. background-color: black;
  94. display: block;
  95. top: 10mm;
  96. left: 10mm;
  97. width:100mm;
  98. height:25mm;
  99. }
  100. .rectangle9
  101. {
  102. position: absolute;
  103. border: solid 3px black;
  104. background-color: black;
  105. display: block;
  106. top: 10mm;
  107. left: 120mm;
  108. width:45mm;
  109. height:30mm;
  110. }
  111. .rectangle10
  112. {
  113. position: absolute;
  114. border: solid 3px black;
  115. background-color: black;
  116. display: block;
  117. top: 10mm;
  118. left: 175mm;
  119. width:25mm;
  120. height:55mm;
  121. }
  122. .rectangle11
  123. {
  124. position: absolute;
  125. border: solid 3px black;
  126. background-color: black;
  127. display: block;
  128. top: 75mm;
  129. left: 10mm;
  130. width:20mm;
  131. height:150mm;
  132. }
  133. .rectangle12
  134. {
  135. position: absolute;
  136. border: solid 3px black;
  137. background-color: black;
  138. display: block;
  139. top: 75mm;
  140. left: 40mm;
  141. width:35mm;
  142. height:45mm;
  143. }
  144. .rectangle13
  145. {
  146. position: absolute;
  147. border: solid 3px black;
  148. background-color: black;
  149. display: block;
  150. top: 75mm;
  151. left: 85mm;
  152. width:100mm;
  153. height:100mm;
  154. }
  155. .rectangle14
  156. {
  157. position: absolute;
  158. border: solid 3px black;
  159. background-color: black;
  160. display: block;
  161. top: 10mm;
  162. left: 10mm;
  163. width:35mm;
  164. height:35mm;
  165. }
  166. .rectangle15
  167. {
  168. position: absolute;
  169. border: solid 3px black;
  170. background-color: black;
  171. display: block;
  172. top: 10mm;
  173. left: 55mm;
  174. width:75mm;
  175. height:55mm;
  176. }
  177. .rectangle16
  178. {
  179. position: absolute;
  180. border: solid 3px black;
  181. background-color: black;
  182. display: block;
  183. top: 75mm;
  184. left: 10mm;
  185. width:100mm;
  186. height:25mm;
  187. }
  188. .rectangle17
  189. {
  190. position: absolute;
  191. border: solid 3px black;
  192. background-color: black;
  193. display: block;
  194. top: 110mm;
  195. left: 10mm;
  196. width:100mm;
  197. height:25mm;
  198. }
  199. .rectangle18
  200. {
  201. position: absolute;
  202. border: solid 3px black;
  203. background-color: black;
  204. display: block;
  205. top: 110mm;
  206. left: 120mm;
  207. width:75mm;
  208. height:55mm;
  209. }
  210. .rectangle19
  211. {
  212. position: absolute;
  213. border: solid 3px black;
  214. background-color: black;
  215. display: block;
  216. top: 175mm;
  217. left: 10mm;
  218. width:75mm;
  219. height:55mm;
  220. }
  221. .rectangle20
  222. {
  223. position: absolute;
  224. border: solid 3px black;
  225. background-color: black;
  226. display: block;
  227. top: 175mm;
  228. left: 95mm;
  229. width:100mm;
  230. height:25mm;
  231. }
  232. .rectangle21
  233. {
  234. position: absolute;
  235. border: solid 3px black;
  236. background-color: black;
  237. display: block;
  238. top: 10mm;
  239. left: 10mm;
  240. width:75mm;
  241. height:55mm;
  242. }
  243. .rectangle22
  244. {
  245. position: absolute;
  246. border: solid 3px black;
  247. background-color: black;
  248. display: block;
  249. top: 10mm;
  250. left: 95mm;
  251. width:75mm;
  252. height:55mm;
  253. }
  254. .rectangle23
  255. {
  256. position: absolute;
  257. border: solid 3px black;
  258. background-color: black;
  259. display: block;
  260. top: 75mm;
  261. left: 10mm;
  262. width:45mm;
  263. height:150mm;
  264. }
  265. .rectangle24
  266. {
  267. position: absolute;
  268. border: solid 3px black;
  269. background-color: black;
  270. display: block;
  271. top: 75mm;
  272. left: 65mm;
  273. width:100mm;
  274. height:25mm;
  275. }
  276. .rectangle25
  277. {
  278. position: absolute;
  279. border: solid 3px black;
  280. background-color: black;
  281. display: block;
  282. top: 10mm;
  283. left: 10mm;
  284. width:75mm;
  285. height:55mm;
  286. }
  287. .rectangle26
  288. {
  289. position: absolute;
  290. border: solid 3px black;
  291. background-color: black;
  292. display: block;
  293. top: 10mm;
  294. left: 95mm;
  295. width:100mm;
  296. height:25mm;
  297. }
  298. .rectangle27
  299. {
  300. position: absolute;
  301. border: solid 3px black;
  302. background-color: black;
  303. display: block;
  304. top: 75mm;
  305. left: 10mm;
  306. width:100mm;
  307. height:25mm;
  308. }
  309. .rectangle28
  310. {
  311. position: absolute;
  312. border: solid 3px black;
  313. background-color: black;
  314. display: block;
  315. top: 75mm;
  316. left: 120mm;
  317. width:75mm;
  318. height:55mm;
  319. }
  320. .rectangle29
  321. {
  322. position: absolute;
  323. border: solid 3px black;
  324. background-color: black;
  325. display: block;
  326. top: 140mm;
  327. left: 10mm;
  328. width:75mm;
  329. height:55mm;
  330. }
  331. .rectangle30
  332. {
  333. position: absolute;
  334. border: solid 3px black;
  335. background-color: black;
  336. display: block;
  337. top: 140mm;
  338. left: 95mm;
  339. width:100mm;
  340. height:25mm;
  341. }
  342. .rectangle31
  343. {
  344. position: absolute;
  345. border: solid 3px black;
  346. background-color: black;
  347. display: block;
  348. top: 205mm;
  349. left: 10mm;
  350. width:75mm;
  351. height:55mm;
  352. }
  353. .rectangle32
  354. {
  355. position: absolute;
  356. border: solid 3px black;
  357. background-color: black;
  358. display: block;
  359. top: 10mm;
  360. left: 10mm;
  361. width:75mm;
  362. height:55mm;
  363. }
  364. .rectangle33
  365. {
  366. position: absolute;
  367. border: solid 3px black;
  368. background-color: black;
  369. display: block;
  370. top: 10mm;
  371. left: 95mm;
  372. width:35mm;
  373. height:65mm;
  374. }
  375. .rectangle34
  376. {
  377. position: absolute;
  378. border: solid 3px black;
  379. background-color: black;
  380. display: block;
  381. top: 85mm;
  382. left: 10mm;
  383. width:100mm;
  384. height:100mm;
  385. }
  386. .rectangle35
  387. {
  388. position: absolute;
  389. border: solid 3px black;
  390. background-color: black;
  391. display: block;
  392. top: 195mm;
  393. left: 10mm;
  394. width:100mm;
  395. height:25mm;
  396. }
  397. .rectangle36
  398. {
  399. position: absolute;
  400. border: solid 3px black;
  401. background-color: black;
  402. display: block;
  403. top: 195mm;
  404. left: 120mm;
  405. width:75mm;
  406. height:55mm;
  407. }
  408. .rectangle37
  409. {
  410. position: absolute;
  411. border: solid 3px black;
  412. background-color: black;
  413. display: block;
  414. top: 10mm;
  415. left: 10mm;
  416. width:100mm;
  417. height:25mm;
  418. }
  419. .rectangle38
  420. {
  421. position: absolute;
  422. border: solid 3px black;
  423. background-color: black;
  424. display: block;
  425. top: 10mm;
  426. left: 120mm;
  427. width:75mm;
  428. height:55mm;
  429. }
  430. .rectangle39
  431. {
  432. position: absolute;
  433. border: solid 3px black;
  434. background-color: black;
  435. display: block;
  436. top: 75mm;
  437. left: 10mm;
  438. width:100mm;
  439. height:25mm;
  440. }
  441. .rectangle40
  442. {
  443. position: absolute;
  444. border: solid 3px black;
  445. background-color: black;
  446. display: block;
  447. top: 110mm;
  448. left: 10mm;
  449. width:100mm;
  450. height:25mm;
  451. }
  452. .rectangle41
  453. {
  454. position: absolute;
  455. border: solid 3px black;
  456. background-color: black;
  457. display: block;
  458. top: 110mm;
  459. left: 120mm;
  460. width:75mm;
  461. height:55mm;
  462. }
  463. .rectangle42
  464. {
  465. position: absolute;
  466. border: solid 3px black;
  467. background-color: black;
  468. display: block;
  469. top: 175mm;
  470. left: 10mm;
  471. width:75mm;
  472. height:55mm;
  473. }
  474. .rectangle43
  475. {
  476. position: absolute;
  477. border: solid 3px black;
  478. background-color: black;
  479. display: block;
  480. top: 240mm;
  481. left: 10mm;
  482. width:150mm;
  483. height:10mm;
  484. }
  485. .rectangle44
  486. {
  487. position: absolute;
  488. border: solid 3px black;
  489. background-color: black;
  490. display: block;
  491. top: 10mm;
  492. left: 10mm;
  493. width:100mm;
  494. height:25mm;
  495. }
  496. .rectangle45
  497. {
  498. position: absolute;
  499. border: solid 3px black;
  500. background-color: black;
  501. display: block;
  502. top: 10mm;
  503. left: 120mm;
  504. width:75mm;
  505. height:55mm;
  506. }
  507. .rectangle46
  508. {
  509. position: absolute;
  510. border: solid 3px black;
  511. background-color: black;
  512. display: block;
  513. top: 75mm;
  514. left: 10mm;
  515. width:75mm;
  516. height:55mm;
  517. }
  518. .rectangle47
  519. {
  520. position: absolute;
  521. border: solid 3px black;
  522. background-color: black;
  523. display: block;
  524. top: 75mm;
  525. left: 95mm;
  526. width:100mm;
  527. height:25mm;
  528. }
  529. .rectangle48
  530. {
  531. position: absolute;
  532. border: solid 3px black;
  533. background-color: black;
  534. display: block;
  535. top: 140mm;
  536. left: 10mm;
  537. width:75mm;
  538. height:55mm;
  539. }
  540. .rectangle49
  541. {
  542. position: absolute;
  543. border: solid 3px black;
  544. background-color: black;
  545. display: block;
  546. top: 140mm;
  547. left: 95mm;
  548. width:75mm;
  549. height:55mm;
  550. }
  551. .rectangle50
  552. {
  553. position: absolute;
  554. border: solid 3px black;
  555. background-color: black;
  556. display: block;
  557. top: 205mm;
  558. left: 10mm;
  559. width:100mm;
  560. height:25mm;
  561. }
  562. .rectangle51
  563. {
  564. position: absolute;
  565. border: solid 3px black;
  566. background-color: black;
  567. display: block;
  568. top: 205mm;
  569. left: 120mm;
  570. width:45mm;
  571. height:30mm;
  572. }
  573. .rectangle52
  574. {
  575. position: absolute;
  576. border: solid 3px black;
  577. background-color: black;
  578. display: block;
  579. top: 10mm;
  580. left: 10mm;
  581. width:150mm;
  582. height:25mm;
  583. }
  584. .rectangle53
  585. {
  586. position: absolute;
  587. border: solid 3px black;
  588. background-color: black;
  589. display: block;
  590. top: 10mm;
  591. left: 170mm;
  592. width:25mm;
  593. height:55mm;
  594. }
  595. .rectangle54
  596. {
  597. position: absolute;
  598. border: solid 3px black;
  599. background-color: black;
  600. display: block;
  601. top: 75mm;
  602. left: 10mm;
  603. width:35mm;
  604. height:45mm;
  605. }
  606. .rectangle55
  607. {
  608. position: absolute;
  609. border: solid 3px black;
  610. background-color: black;
  611. display: block;
  612. top: 75mm;
  613. left: 55mm;
  614. width:100mm;
  615. height:100mm;
  616. }
  617. .rectangle56
  618. {
  619. position: absolute;
  620. border: solid 3px black;
  621. background-color: black;
  622. display: block;
  623. top: 75mm;
  624. left: 165mm;
  625. width:35mm;
  626. height:35mm;
  627. }
  628. .rectangle57
  629. {
  630. position: absolute;
  631. border: solid 3px black;
  632. background-color: black;
  633. display: block;
  634. top: 185mm;
  635. left: 10mm;
  636. width:75mm;
  637. height:55mm;
  638. }
  639. .rectangle58
  640. {
  641. position: absolute;
  642. border: solid 3px black;
  643. background-color: black;
  644. display: block;
  645. top: 185mm;
  646. left: 95mm;
  647. width:100mm;
  648. height:25mm;
  649. }
  650. .rectangle59
  651. {
  652. position: absolute;
  653. border: solid 3px black;
  654. background-color: black;
  655. display: block;
  656. top: 10mm;
  657. left: 10mm;
  658. width:100mm;
  659. height:25mm;
  660. }
  661. .rectangle60
  662. {
  663. position: absolute;
  664. border: solid 3px black;
  665. background-color: black;
  666. display: block;
  667. top: 10mm;
  668. left: 120mm;
  669. width:75mm;
  670. height:55mm;
  671. }
  672. .rectangle61
  673. {
  674. position: absolute;
  675. border: solid 3px black;
  676. background-color: black;
  677. display: block;
  678. top: 75mm;
  679. left: 10mm;
  680. width:35mm;
  681. height:15mm;
  682. }
  683. .rectangle62
  684. {
  685. position: absolute;
  686. border: solid 3px black;
  687. background-color: black;
  688. display: block;
  689. top: 75mm;
  690. left: 55mm;
  691. width:75mm;
  692. height:55mm;
  693. }
  694. .rectangle63
  695. {
  696. position: absolute;
  697. border: solid 3px black;
  698. background-color: black;
  699. display: block;
  700. top: 140mm;
  701. left: 10mm;
  702. width:100mm;
  703. height:25mm;
  704. }
  705. .rectangle64
  706. {
  707. position: absolute;
  708. border: solid 3px black;
  709. background-color: black;
  710. display: block;
  711. top: 140mm;
  712. left: 120mm;
  713. width:75mm;
  714. height:55mm;
  715. }
  716. .rectangle65
  717. {
  718. position: absolute;
  719. border: solid 3px black;
  720. background-color: black;
  721. display: block;
  722. top: 205mm;
  723. left: 10mm;
  724. width:75mm;
  725. height:55mm;
  726. }
  727. .rectangle66
  728. {
  729. position: absolute;
  730. border: solid 3px black;
  731. background-color: black;
  732. display: block;
  733. top: 10mm;
  734. left: 10mm;
  735. width:100mm;
  736. height:25mm;
  737. }
  738. .rectangle67
  739. {
  740. position: absolute;
  741. border: solid 3px black;
  742. background-color: black;
  743. display: block;
  744. top: 10mm;
  745. left: 120mm;
  746. width:75mm;
  747. height:55mm;
  748. }
  749. </style>
  750. </head>
  751. <body>
  752. <div class="page">
  753. <div class="rectangle1"></div>
  754. <div class="rectangle2"></div>
  755. <div class="rectangle3"></div>
  756. <div class="rectangle4"></div>
  757. <div class="rectangle5"></div>
  758. <div class="rectangle6"></div>
  759. <div class="rectangle7"></div>
  760. </div>
  761. <div class="page">
  762. <div class="rectangle8"></div>
  763. <div class="rectangle9"></div>
  764. <div class="rectangle10"></div>
  765. <div class="rectangle11"></div>
  766. <div class="rectangle12"></div>
  767. <div class="rectangle13"></div>
  768. </div>
  769. <div class="page">
  770. <div class="rectangle14"></div>
  771. <div class="rectangle15"></div>
  772. <div class="rectangle16"></div>
  773. <div class="rectangle17"></div>
  774. <div class="rectangle18"></div>
  775. <div class="rectangle19"></div>
  776. <div class="rectangle20"></div>
  777. </div>
  778. <div class="page">
  779. <div class="rectangle21"></div>
  780. <div class="rectangle22"></div>
  781. <div class="rectangle23"></div>
  782. <div class="rectangle24"></div>
  783. </div>
  784. <div class="page">
  785. <div class="rectangle25"></div>
  786. <div class="rectangle26"></div>
  787. <div class="rectangle27"></div>
  788. <div class="rectangle28"></div>
  789. <div class="rectangle29"></div>
  790. <div class="rectangle30"></div>
  791. <div class="rectangle31"></div>
  792. </div>
  793. <div class="page">
  794. <div class="rectangle32"></div>
  795. <div class="rectangle33"></div>
  796. <div class="rectangle34"></div>
  797. <div class="rectangle35"></div>
  798. <div class="rectangle36"></div>
  799. </div>
  800. <div class="page">
  801. <div class="rectangle37"></div>
  802. <div class="rectangle38"></div>
  803. <div class="rectangle39"></div>
  804. <div class="rectangle40"></div>
  805. <div class="rectangle41"></div>
  806. <div class="rectangle42"></div>
  807. <div class="rectangle43"></div>
  808. </div>
  809. <div class="page">
  810. <div class="rectangle44"></div>
  811. <div class="rectangle45"></div>
  812. <div class="rectangle46"></div>
  813. <div class="rectangle47"></div>
  814. <div class="rectangle48"></div>
  815. <div class="rectangle49"></div>
  816. <div class="rectangle50"></div>
  817. <div class="rectangle51"></div>
  818. </div>
  819. <div class="page">
  820. <div class="rectangle52"></div>
  821. <div class="rectangle53"></div>
  822. <div class="rectangle54"></div>
  823. <div class="rectangle55"></div>
  824. <div class="rectangle56"></div>
  825. <div class="rectangle57"></div>
  826. <div class="rectangle58"></div>
  827. </div>
  828. <div class="page">
  829. <div class="rectangle59"></div>
  830. <div class="rectangle60"></div>
  831. <div class="rectangle61"></div>
  832. <div class="rectangle62"></div>
  833. <div class="rectangle63"></div>
  834. <div class="rectangle64"></div>
  835. <div class="rectangle65"></div>
  836. </div>
  837. <div class="page">
  838. <div class="rectangle66"></div>
  839. <div class="rectangle67"></div>
  840. </div>
  841. </body>
  842. </html>


 
 :hello:

Reply

Marsh Posté le 12-10-2006 à 19:32:34    

y'a moyen de grave factoriser ta css pour aléger ta page :o

Reply

Marsh Posté le 12-10-2006 à 19:58:33    

Ajoute ca à ta css:

Code :
  1. .page div {
  2. position: absolute;
  3. border: solid 3px black;
  4. background-color: black;
  5. }


et economise toi tout ces attributs dans tout les rectangles ;)
( et tu peut complètement virer le display:block; c'est déja inclus avec la balise <div> par défaut )


---------------
Me: Django Localization, Yogo Puzzle, Chrome Grapher, C++ Signals, Brainf*ck.
Reply

Marsh Posté le 12-10-2006 à 20:31:11    

ça roule, je vais factoriser
tout ça !

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed