Código html (index.html):
<!doctype html> <html> <head> <meta charset="UTF-8"/> <title>Posicionamiento con div</title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="libraries/p5.js"></script> <script src="libraries/p5.sound.js"></script> <script src='libraries/p5.dom.js'></script> <script src="code.js"></script> </head> <body> <p>Esto está escrito directamente en archivo .html, sin estilo</p> </body> </html>
Código p5.js (code.js):
var div1;
var div2;
var div3;
var canvas1;
function setup() {
div1 = createDiv('Esto está escrito en el archivo .js, dentro de la etiqueta div1, con estilo .css');
div1.class('uno');
canvas1 = createCanvas(200,300);
canvas1.class('canvas1')
canvas1 = background(150);
div2 = createDiv('Esto está escrito en el archivo .js, dentro de la etiqueta div2, con estilo .css');
div2.class('uno');
div3 = createDiv('Esto está escrito en el archivo .js, dentro de la etiqueta div3');
div3.class('dos');
}
function draw(){
fill(255);
ellipse(mouseX,mouseY,20,20);
}
Código css (style.css):
body{
background-color: gold;
font-family: sans-serif;
text-align: center;
margin: 0px;
border: 0px;
padding: 0px;
}
p{
margin: 0px;
border: 0px;
padding: 0px;
}
div{
margin: 0px;
border: 0px;
padding: 0px;
}
.uno{
background-color: orange;
color: #FFFFFF;
font-size: 10pt;
margin: 0px;
border: 0px;
padding: 0px;
}
.canvas1{
margin: 0px;
margin-bottom: -4px;
border: 0px;
padding: 0px;
}
