Lesson: lesson-positioning

Absolute positioning of text boxes

PDF files

Converter PDF Preview
PDFreactor
OK
Download
PrinceXML
OK
Download
Antennahouse
OK
Download
Vivliostyle
OK
Download

Stylesheet

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
@import url("../styles/a4-landscape.css");

@page {
    margin: 0;
    padding: 0;
}

#block1 {
    font-size: 9pt;
    position: absolute;
    color: blue;
    border : 1px dashed red;
    padding: 1em;
    top: 2cm;
    left: 2cm;
    width: 8cm;
    height: 8cm;
}

#block2 {
    font-family: Courier;
    font-size: 9pt;
    position: absolute;
    color: green;
    border : 1px solid red;
    padding: 1em;
    right: 2cm;
    bottom: 2cm;
    width: 8cm;
    height: 8cm;
}

HTML input

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>

        <p id="block1">
        Pulvinar non pellentesque pellentesque nisi nascetur elementum platea
turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus
sagittis ac mattis. Phasellus massa cum, habitasse augue sagittis, turpis
penatibus auctor sagittis aenean in! Aenean porta tincidunt ultricies est
lorem, facilisis dignissim tempor auctor ut sociis pulvinar eros egestas eros
placerat habitasse, mid sed mattis velit platea aliquam, purus lorem, lacus et
integer, natoque augue a, facilisis augue, mattis cras! A pid mattis lorem urna
rhoncus. Elementum tincidunt, mus elementum turpis quis ridiculus eu odio
egestas, elit auctor turpis mus platea sed, rhoncus tempor, augue dictumst
phasellus tortor, ac. Massa sagittis sociis integer mid magna a turpis
pellentesque, placerat lundium! Lacus, enim mus odio placerat? Nec cursus
augue.
        </p>

        <p id="block2">
        Enim aenean? A, turpis lundium, egestas porttitor pulvinar velit sociis
aenean! Placerat est ac est, rhoncus dictumst etiam scelerisque? Proin. Hac
scelerisque scelerisque scelerisque? Placerat phasellus. Ultricies!
Pellentesque phasellus, mid cursus sagittis. Et, nascetur elementum, facilisis
mattis! Porta etiam mus! Phasellus adipiscing montes nascetur platea in non.
Cras aliquet vut, ultricies quis purus massa vel, mid, purus tortor ultrices,
cum nunc montes aliquam velit elementum auctor augue lacus in, nunc sed. Cras?
Nec urna cursus, egestas adipiscing. Etiam pulvinar odio sed velit hac pid
ridiculus dapibus ut placerat! Magna sit ridiculus tempor arcu duis tristique
amet in? Enim etiam ultrices mauris augue eros magnis tortor odio augue pid
magnis habitasse ultrices magna proin urna parturient lacus lectus. Aliquet
proin.
        </p>

    </body>
</html>