tracer des rectangles sur plusieurs pages

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : tracer des rectangles sur plusieurs pages

vttman2

Je suis Open ...

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:

Publicité

MagicBuzz

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

MagicBuzz

Et hop !

Code :

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

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

Message cité 1 fois

vttman2

Je suis Open ...

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

vttman2

Je suis Open ...

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 ...

dwogsi

Défaillance cérébrale...

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

0x90

→

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.

vttman2

Je suis Open ...

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 ...

0x90

→

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.

MagicBuzz

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

Publicité

vttman2

Je suis Open ...

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 ?

MagicBuzz

d'accord

ça me semble rigolo comme truc

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 )

vttman2

Je suis Open ...

;-)

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

vttman2

Je suis Open ...

MagicBuzz a écrit :

Et hop !

Code :

<html>
<head>
<title>Test rectangles</title>
<style rel="stylesheet" type="text/css" media="print">
.pageBreak
{
page-break-after: always;
visibility: hidden;
}
#rectangle1
{
position: relative;
border: solid 1px black;
background-color: yellow;
display: block;
top: 10cm;
left:5cm;
width: 5cm;
height: 5cm;
}
#rectangle2
{
position: relative;
border: solid 1px black;
background-color: red;
display: block;
top: 1cm;
left:1cm;
width: 1cm;
height: 1cm;
}
</style>
</head>
<body>
<div id="rectangle1"></div>
<hr class="pageBreak"/>
<div id="rectangle2"></div>
</body>
</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 !

MagicBuzz

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

0x90

→

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

vttman2

Je suis Open ...

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

Merci !!!

MagicBuzz

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

vttman2

Je suis Open ...

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 :

<html>
<head>
<title>Test rectangles</title>
<style rel="stylesheet" type="text/css" media="print">
.pageBreak
{
page-break-after: always;
visibility: hidden;
}
#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 id="rectangle1"></div>
<hr class="pageBreak"/>
<div id="rectangle2"></div>
<div id="rectangle3"></div>
</body>
</html>

MagicBuzz

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

vttman2

Je suis Open ...

Marche pô !

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

MagicBuzz

ben donc tente ma solution, on sait jamais

0x90

→

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.

MagicBuzz

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

anapajari

s/travail/glanding on hfr/gs;

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 :

<!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="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Exemple</title>
<style type="text/css" media="all">
*{
padding:0;
margin:0;
}
div.rectangle{
border: 1px solid black;
margin-left:1cm;
margin-bottom: 1cm;
}
div.page{
width: 20cm;
height:28.5cm;
page-break-after: always;
margin-bottom:0.5cm;
}
</style>
<script type="text/javascript">
function Rectangle(width, height){
this.node = document.createElement('div');
this.node.className = 'rectangle';
this.node.style.width = width+'cm';
this.node.style.height= height+'cm';
return this.node;
}
function Page(){
this.height = 0;
Page.prototype.nbPages++;
this.node = document.createElement('div');
this.node.className = 'page';
document.getElementsByTagName('body')[0].appendChild(this.node);
}
Page.prototype.ajoutRectangle = function( width, height){
this.node.appendChild(new Rectangle(width, height));
this.height += parseFloat(height) +1;
}
Page.prototype.height = 28.5;
Page.nbPages = 0;
function dessineRectangle(liste){
document.getElementById('genRect').style.display = 'none';
Page.nbPages = 0;
var cleaner;
var pageCourante = new Page();
var lignes = liste.split('\n');
for(var i=0; i<lignes.length; i++){
var taille = lignes[i].split(';');
if ( taille.length != 2){
alert('ligne incorrecte:'.$ligne);
} else {
if ( parseFloat(pageCourante.height) + parseFloat(taille[1]) > parseFloat(Page.prototype.height)){
pageCourante=new Page();
}
pageCourante.ajoutRectangle(taille[0], taille[1]);
}
}
}
window.onload = function(){
document.getElementById('genRect').onsubmit = function(e){
dessineRectangle(document.getElementById('listeTaille').value);
return false;
}
}
</script>
</head>
<body>
<form id="genRect" action="scriptPHPquiFaitLaMemeChose.php" method="post">
<textarea id="listeTaille"></textarea>
<input type="submit" value="Générer"/>
</form>
</body>
</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
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

vttman2

Je suis Open ...

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

anapajari

s/travail/glanding on hfr/gs;

vttman2 a écrit :

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

vttman2

Je suis Open ...

On est dac là-dessus !

vttman2

Je suis Open ...

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 !!!

vttman2

Je suis Open ...

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 :

<html>
<head>
<title>Rectangles</title>
<style rel="stylesheet" type="text/css" media="print">
.page
{
position : relative;
top: 0mm;
left: 0mm;
page-break-after: always;
}
.rectangle1
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 10mm;
left: 10mm;
width:100mm;
height:25mm;
}
.rectangle2
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 10mm;
left: 120mm;
width:75mm;
height:55mm;
}
.rectangle3
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 75mm;
left: 10mm;
width:75mm;
height:55mm;
}
.rectangle4
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 75mm;
left: 95mm;
width:100mm;
height:25mm;
}
.rectangle5
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 140mm;
left: 10mm;
width:100mm;
height:25mm;
}
.rectangle6
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 140mm;
left: 120mm;
width:75mm;
height:55mm;
}
.rectangle7
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 205mm;
left: 10mm;
width:75mm;
height:55mm;
}
.rectangle8
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 10mm;
left: 10mm;
width:100mm;
height:25mm;
}
.rectangle9
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 10mm;
left: 120mm;
width:45mm;
height:30mm;
}
.rectangle10
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 10mm;
left: 175mm;
width:25mm;
height:55mm;
}
.rectangle11
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 75mm;
left: 10mm;
width:20mm;
height:150mm;
}
.rectangle12
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 75mm;
left: 40mm;
width:35mm;
height:45mm;
}
.rectangle13
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 75mm;
left: 85mm;
width:100mm;
height:100mm;
}
.rectangle14
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 10mm;
left: 10mm;
width:35mm;
height:35mm;
}
.rectangle15
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 10mm;
left: 55mm;
width:75mm;
height:55mm;
}
.rectangle16
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 75mm;
left: 10mm;
width:100mm;
height:25mm;
}
.rectangle17
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 110mm;
left: 10mm;
width:100mm;
height:25mm;
}
.rectangle18
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 110mm;
left: 120mm;
width:75mm;
height:55mm;
}
.rectangle19
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 175mm;
left: 10mm;
width:75mm;
height:55mm;
}
.rectangle20
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 175mm;
left: 95mm;
width:100mm;
height:25mm;
}
.rectangle21
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 10mm;
left: 10mm;
width:75mm;
height:55mm;
}
.rectangle22
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 10mm;
left: 95mm;
width:75mm;
height:55mm;
}
.rectangle23
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 75mm;
left: 10mm;
width:45mm;
height:150mm;
}
.rectangle24
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 75mm;
left: 65mm;
width:100mm;
height:25mm;
}
.rectangle25
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 10mm;
left: 10mm;
width:75mm;
height:55mm;
}
.rectangle26
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 10mm;
left: 95mm;
width:100mm;
height:25mm;
}
.rectangle27
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 75mm;
left: 10mm;
width:100mm;
height:25mm;
}
.rectangle28
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 75mm;
left: 120mm;
width:75mm;
height:55mm;
}
.rectangle29
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 140mm;
left: 10mm;
width:75mm;
height:55mm;
}
.rectangle30
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 140mm;
left: 95mm;
width:100mm;
height:25mm;
}
.rectangle31
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 205mm;
left: 10mm;
width:75mm;
height:55mm;
}
.rectangle32
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 10mm;
left: 10mm;
width:75mm;
height:55mm;
}
.rectangle33
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 10mm;
left: 95mm;
width:35mm;
height:65mm;
}
.rectangle34
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 85mm;
left: 10mm;
width:100mm;
height:100mm;
}
.rectangle35
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 195mm;
left: 10mm;
width:100mm;
height:25mm;
}
.rectangle36
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 195mm;
left: 120mm;
width:75mm;
height:55mm;
}
.rectangle37
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 10mm;
left: 10mm;
width:100mm;
height:25mm;
}
.rectangle38
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 10mm;
left: 120mm;
width:75mm;
height:55mm;
}
.rectangle39
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 75mm;
left: 10mm;
width:100mm;
height:25mm;
}
.rectangle40
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 110mm;
left: 10mm;
width:100mm;
height:25mm;
}
.rectangle41
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 110mm;
left: 120mm;
width:75mm;
height:55mm;
}
.rectangle42
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 175mm;
left: 10mm;
width:75mm;
height:55mm;
}
.rectangle43
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 240mm;
left: 10mm;
width:150mm;
height:10mm;
}
.rectangle44
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 10mm;
left: 10mm;
width:100mm;
height:25mm;
}
.rectangle45
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 10mm;
left: 120mm;
width:75mm;
height:55mm;
}
.rectangle46
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 75mm;
left: 10mm;
width:75mm;
height:55mm;
}
.rectangle47
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 75mm;
left: 95mm;
width:100mm;
height:25mm;
}
.rectangle48
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 140mm;
left: 10mm;
width:75mm;
height:55mm;
}
.rectangle49
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 140mm;
left: 95mm;
width:75mm;
height:55mm;
}
.rectangle50
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 205mm;
left: 10mm;
width:100mm;
height:25mm;
}
.rectangle51
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 205mm;
left: 120mm;
width:45mm;
height:30mm;
}
.rectangle52
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 10mm;
left: 10mm;
width:150mm;
height:25mm;
}
.rectangle53
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 10mm;
left: 170mm;
width:25mm;
height:55mm;
}
.rectangle54
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 75mm;
left: 10mm;
width:35mm;
height:45mm;
}
.rectangle55
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 75mm;
left: 55mm;
width:100mm;
height:100mm;
}
.rectangle56
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 75mm;
left: 165mm;
width:35mm;
height:35mm;
}
.rectangle57
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 185mm;
left: 10mm;
width:75mm;
height:55mm;
}
.rectangle58
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 185mm;
left: 95mm;
width:100mm;
height:25mm;
}
.rectangle59
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 10mm;
left: 10mm;
width:100mm;
height:25mm;
}
.rectangle60
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 10mm;
left: 120mm;
width:75mm;
height:55mm;
}
.rectangle61
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 75mm;
left: 10mm;
width:35mm;
height:15mm;
}
.rectangle62
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 75mm;
left: 55mm;
width:75mm;
height:55mm;
}
.rectangle63
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 140mm;
left: 10mm;
width:100mm;
height:25mm;
}
.rectangle64
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 140mm;
left: 120mm;
width:75mm;
height:55mm;
}
.rectangle65
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 205mm;
left: 10mm;
width:75mm;
height:55mm;
}
.rectangle66
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 10mm;
left: 10mm;
width:100mm;
height:25mm;
}
.rectangle67
{
position: absolute;
border: solid 3px black;
background-color: black;
display: block;
top: 10mm;
left: 120mm;
width:75mm;
height:55mm;
}
</style>
</head>
<body>
<div class="page">
<div class="rectangle1"></div>
<div class="rectangle2"></div>
<div class="rectangle3"></div>
<div class="rectangle4"></div>
<div class="rectangle5"></div>
<div class="rectangle6"></div>
<div class="rectangle7"></div>
</div>
<div class="page">
<div class="rectangle8"></div>
<div class="rectangle9"></div>
<div class="rectangle10"></div>
<div class="rectangle11"></div>
<div class="rectangle12"></div>
<div class="rectangle13"></div>
</div>
<div class="page">
<div class="rectangle14"></div>
<div class="rectangle15"></div>
<div class="rectangle16"></div>
<div class="rectangle17"></div>
<div class="rectangle18"></div>
<div class="rectangle19"></div>
<div class="rectangle20"></div>
</div>
<div class="page">
<div class="rectangle21"></div>
<div class="rectangle22"></div>
<div class="rectangle23"></div>
<div class="rectangle24"></div>
</div>
<div class="page">
<div class="rectangle25"></div>
<div class="rectangle26"></div>
<div class="rectangle27"></div>
<div class="rectangle28"></div>
<div class="rectangle29"></div>
<div class="rectangle30"></div>
<div class="rectangle31"></div>
</div>
<div class="page">
<div class="rectangle32"></div>
<div class="rectangle33"></div>
<div class="rectangle34"></div>
<div class="rectangle35"></div>
<div class="rectangle36"></div>
</div>
<div class="page">
<div class="rectangle37"></div>
<div class="rectangle38"></div>
<div class="rectangle39"></div>
<div class="rectangle40"></div>
<div class="rectangle41"></div>
<div class="rectangle42"></div>
<div class="rectangle43"></div>
</div>
<div class="page">
<div class="rectangle44"></div>
<div class="rectangle45"></div>
<div class="rectangle46"></div>
<div class="rectangle47"></div>
<div class="rectangle48"></div>
<div class="rectangle49"></div>
<div class="rectangle50"></div>
<div class="rectangle51"></div>
</div>
<div class="page">
<div class="rectangle52"></div>
<div class="rectangle53"></div>
<div class="rectangle54"></div>
<div class="rectangle55"></div>
<div class="rectangle56"></div>
<div class="rectangle57"></div>
<div class="rectangle58"></div>
</div>
<div class="page">
<div class="rectangle59"></div>
<div class="rectangle60"></div>
<div class="rectangle61"></div>
<div class="rectangle62"></div>
<div class="rectangle63"></div>
<div class="rectangle64"></div>
<div class="rectangle65"></div>
</div>
<div class="page">
<div class="rectangle66"></div>
<div class="rectangle67"></div>
</div>
</body>
</html>

:hello:

anapajari

s/travail/glanding on hfr/gs;

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

0x90

→

Ajoute ca à ta css:

Code :

.page div {
position: absolute;
border: solid 3px black;
background-color: black;
}

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.

vttman2

Je suis Open ...

ça roule, je vais factoriser
tout ça !

Publicité

FORUM HardWare.fr

Programmation

Divers

tracer des rectangles sur plusieurs pages

Sujets relatifs
page appelée plusieurs fois au lieu d'une	[Tomcat] me renvoie des pages vides
[Access][VBA] Construction d'un lien HTML fonction de plusieurs champs	[ORACLE Forms] Data Block Lov Plusieurs tables jointure
[PHP/GD] Superposition de plusieurs images avec tranparence...	[Javascript] Tableau à plusieurs dimensions
[Résolu][ASP.NET 2.0][C#] Plusieurs load pour une meme page	gestion des accès de plusieurs utilisateurs au même m
Qui est mieux et professionnel:Une seul BD ou plusieurs ?	[Access] Imprimer plusieurs états sur une même page
Plus de sujets relatifs à : tracer des rectangles sur plusieurs pages

Page générée en 0.225 secondes