3-Curso HTML Y CSS para principiantes

Curso html y css, para principiantes , aprende mucho más.

30
20

Vamos a ver cómo crear estilos para posicionar capas.

<html>

<head>

<meta charset="utf-8">

<title>Título</title>

</head>

 

<body>

 

Normalmente las capas se colocan hacia abajo al 100% de ancho

<div class="capa1">Esta es la capa 1</div>

<div class="capa2">Esta es la capa 2</div>

<div class="capa3">Esta es la capa 3</div>


 

<style>

.capa1{

background-color: #FFFFAA;

font-size: 60px;

}

.capa2{ background-color: #FFAAFF;}

.capa3{ background-color: #AAFFFF;}

 

</style>

 

</body>

</html>

Vemos cómo crear estilos para posicionar capas 

<html>

<head>

<meta charset="utf-8">

<title>Título</title>

</head>

 

<body>

 

Podríamos indicar que las capas no ocupen el 100%, colocando un ancho distinto, pero se colocarían hacia abajo.

<div class="capa1">Esta es la capa 1</div>

<div class="capa2">Esta es la capa 2</div>

<div class="capa3">Esta es la capa 3</div>


 

<style>

.capa1{

background-color: #FFFFAA;

font-size: 60px;

width:fit-content;

}

.capa2{

background-color: #FFAAFF;

width: 470px;

}

.capa3{

background-color: #AAFFFF;

width: 30%;

}

 

</style>

 

</body>

</html>

Vemos cómo crear estilos para posicionar capas 

<html>

<head>

<meta charset="utf-8">

<title>Título</title>

</head>

 

<body>

 

Para colocar las capas en la misma linea, usuamos la propiedad display, que por defecto es block.

Si indicamos display inline-block, se colocan en la misma linea, si caben.

Para indicar esta propiedad creamos una clase para las 3 y se asignan a todas

<div class="capa1 enlinea">Esta es la capa 1</div>

<div class="capa2 enlinea">Esta es la capa 2</div>

<div class="capa3 enlinea">Esta es la capa 3</div>


 

<style>

.capa1{

background-color: #FFFFAA;

font-size: 60px;

width:fit-content;

}

.capa2{

background-color: #FFAAFF;

width: 470px;

}

.capa3{

background-color: #AAFFFF;

width: 30%;

}

 

.enlinea{

display: inline-block;

}

 

</style>

 

</body>

</html>

Vemos cómo crear estilos para posicionar capas

<html>

<head>

<meta charset="utf-8">

<title>Título</title>

</head>

 

<body>

 

Las capas se pueden incluir unas dentro de otras, como contenido.

<div class="capa1">

Esta es la capa 1

<div class="capa2">

Esta es la capa 2

</div>

</div>


 

<style>

.capa1{

background-color: #FFFFAA;

font-size: 60px;

padding:30px;

}

.capa2{

background-color: #FFAAFF;

width: 470px;

font-size: 30px;

}

 

</style>

 

</body>

</html>

Vemos cómo crear estilos para posicionar capas:

<html>

<head>

<meta charset="utf-8">

<title>Título</title>

</head>

 

<body>

 

Vemos los tipos de posicion (position). Por defecto se usa relative, que tiene el comportamiento que hemos

visto hasta ahora. Pero también existe la posición absoluta. (position:absolute) que define la posición conforme

a la capa madre anterior. Para colocar una capa en posición absoluta podemos usar left (izquierda) top (arriba)

<div class="capa1">

Esta es la capa 1

<div class="capa2">

Esta es la capa 2

</div>

</div>


 

<style>

.capa1{

position:relative;

background-color: #FFFFAA;

width:500px;

height:500px;

font-size: 60px;

padding:30px;

}

.capa2{

position:absolute;

background-color: #FFAAFF;

width: 100px;

height: 100px;

left:50%;

top:50%;

font-size: 30px;

}

 

</style>

 

</body>

</html>

 

Vemos cómo crear estilos para posicionar capas.

<html>

<head>

<meta charset="utf-8">

<title>Título</title>

</head>

 

<body>

 

También se puede usar right y bottom para colocar desde la derecha y abajo 

<div class="capa1">

Esta es la capa 1

<div class="capa2">

Esta es la capa 2

</div>

</div>


 

<style>

.capa1{

position:relative;

background-color: #FFFFAA;

width:500px;

height:500px;

font-size: 60px;

padding:30px;

}

.capa2{

position:absolute;

background-color: #FFAAFF;

width: 100px;

height: 100px;

right:10%;

bottom:50px;

font-size: 30px;

}

 

</style>

 

</body>

</html>

 

 

Vemos cómo crear estilos para posicionar capas

<html> 

<head>

<meta charset="utf-8">

<title>Título</title>

</head>

 

<body>

 

Así podemos crear maquetaciones más complejas 

<div class="arriba">

Esto es el top

</div>


 

<div class="abajo">

<div class="abajo_espacio">

<div class="boton_abajo">Botón 1</div>

<div class="boton_abajo">Botón 2</div>

<div class="boton_abajo">Botón 3</div>

</div>

 

<div class="logo">

LOGO MIO

</div>

</div>


 

<style>

body{ margin: 0px;}

 

.arriba{

position:relative;

background-color: #FFFFAA;

text-align: center;

font-size: 30px;

padding: 10px;

}

.abajo{

position:absolute;

background-color: #FFAAFF;

width: 100%;

left:0px;

bottom:0px;

font-size: 30px;

}

.abajo_espacio{

padding: 20px;

}

.boton_abajo{

position:relative;

display: inline-block;

background-color:wheat;

border: 1px solid #555;

padding: 10px;

}

.logo{

position: absolute;

right:30px;

bottom:10px;

color: chartreuse;

font-size: 40px;

}

 

</style>

 

</body>

</html>

 

Vemos cómo crear estilos para posicionar capas.

<html>

<head>

<meta charset="utf-8">

<title>Título</title>

</head>

 

<body>

 

Vemos ejemplo de otro tipo de posición Fixed , no se mueve con el scroll.

 

<div class="texto">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor augue et ex convallis maximus. Nulla ante velit, finibus a venenatis at, dapibus in nulla. Suspendisse nec dui vel diam porta volutpat. Duis a venenatis leo. Vestibulum imperdiet quam eget quam tempus, quis venenatis mi pretium. Suspendisse sollicitudin ultricies urna id facilisis. Etiam ut interdum augue. Ut ac neque nunc. Morbi eget maximus magna. Duis tincidunt ipsum sed dolor luctus tincidunt.

 

Nam hendrerit convallis nisl, sit amet feugiat dolor aliquet vitae. Mauris viverra vel libero suscipit aliquam. Mauris sodales nunc sapien, id dapibus dolor ornare sit amet. Suspendisse metus ipsum, porttitor non aliquet eget, ullamcorper id quam. Suspendisse nulla ligula, tempor id dignissim in, ullamcorper eget nisl. Mauris vel est dolor. Quisque eu pharetra metus. Mauris molestie molestie ipsum at faucibus. Mauris a consequat mauris.

 

Integer eu dui placerat, commodo elit quis, blandit turpis. Curabitur pulvinar mi faucibus orci ultricies iaculis. Phasellus lobortis lorem est, ac tincidunt est elementum ut. Vestibulum condimentum leo at eros posuere, sit amet pulvinar risus aliquet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas pellentesque eu turpis id condimentum. Morbi volutpat orci ut magna volutpat venenatis. In eget tortor non ante feugiat pellentesque eget vel mi. Nam faucibus malesuada augue et sollicitudin. Vestibulum purus odio, laoreet et egestas vitae, sagittis quis neque. Pellentesque aliquam libero in blandit sollicitudin.

 

Aliquam sapien odio, blandit bibendum consequat eget, tempor sed dolor. Ut rutrum maximus dui ut egestas. Quisque blandit tortor vel tellus accumsan posuere. Vivamus nec nisi in nunc sodales porta ut et nisi. Nam ut quam dignissim, fermentum velit ut, pharetra nisl. Phasellus consequat viverra euismod. Duis ac ultricies risus. Quisque ut erat in ligula feugiat porta vitae at justo. Curabitur sed nisi orci. Donec in risus mauris. Integer vitae elementum ligula. Maecenas tempor molestie ullamcorper. Maecenas elementum erat magna, quis aliquet augue facilisis at. Nullam cursus erat a iaculis tempus.

 

Morbi sed ante at metus semper sagittis ac quis lorem. Etiam leo justo, venenatis in varius nec, commodo eu risus. Quisque et dui et odio euismod fermentum. Suspendisse nec dui nisl. Nulla hendrerit ornare dui sed pretium. Vivamus sodales nulla et enim eleifend, sit amet rutrum tellus posuere. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi bibendum sapien viverra scelerisque eleifend. Nulla blandit, libero id pulvinar commodo, justo odio imperdiet ex, eget efficitur purus enim at quam. In et nisi at ipsum molestie lacinia. Vestibulum vel lobortis leo.

</div>


 

<div class="fija">

LOGO MIO

</div>

<div class="nofija">

LOGO no fijo

</div>


 

<style>


 

.texto{

font-size: 60px;

}

.nofija{

position: absolute;

background-color: cornflowerblue;

right:30px;

top:10px;

color: chartreuse;

font-size: 40px;

}

.fija{

position: fixed;

background-color: cornflowerblue;

right:30px;

bottom:10px;

color: chartreuse;

font-size: 40px;

}

 

</style>

 

</body>

</html>

 

Vemos cómo crear estilos para posicionar capas

<html>

<head>

<meta charset="utf-8">

<title>Título</title>

</head>

 

<body>

 

Vemos la propiedad overflow, que indica cómo se mostraría en contenido que no cabe una capa

<div class="capa1">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor augue et ex convallis maximus. Nulla ante velit, finibus a venenatis at, dapibus in nulla. Suspendisse nec dui vel diam porta volutpat. Duis a venenatis leo. Vestibulum imperdiet quam eget quam tempus, quis venenatis mi pretium. Suspendisse sollicitudin ultricies urna id facilisis. Etiam ut interdum augue. Ut ac neque nunc. Morbi eget maximus magna. Duis tincidunt ipsum sed dolor luctus tincidunt.

 

Nam hendrerit convallis nisl, sit amet feugiat dolor aliquet vitae. Mauris viverra vel libero suscipit aliquam. Mauris sodales nunc sapien, id dapibus dolor ornare sit amet. Suspendisse metus ipsum, porttitor non aliquet eget, ullamcorper id quam. Suspendisse nulla ligula, tempor id dignissim in, ullamcorper eget nisl. Mauris vel est dolor. Quisque eu pharetra metus. Mauris molestie molestie ipsum at faucibus. Mauris a consequat mauris.

</div>

 

<div class="capa2">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor augue et ex convallis maximus. Nulla ante velit, finibus a venenatis at, dapibus in nulla. Suspendisse nec dui vel diam porta volutpat. Duis a venenatis leo. Vestibulum imperdiet quam eget quam tempus, quis venenatis mi pretium. Suspendisse sollicitudin ultricies urna id facilisis. Etiam ut interdum augue. Ut ac neque nunc. Morbi eget maximus magna. Duis tincidunt ipsum sed dolor luctus tincidunt.

 

Nam hendrerit convallis nisl, sit amet feugiat dolor aliquet vitae. Mauris viverra vel libero suscipit aliquam. Mauris sodales nunc sapien, id dapibus dolor ornare sit amet. Suspendisse metus ipsum, porttitor non aliquet eget, ullamcorper id quam. Suspendisse nulla ligula, tempor id dignissim in, ullamcorper eget nisl. Mauris vel est dolor. Quisque eu pharetra metus. Mauris molestie molestie ipsum at faucibus. Mauris a consequat mauris.

</div>

 

<div class="capa3">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor augue et ex convallis maximus. Nulla ante velit, finibus a venenatis at, dapibus in nulla. Suspendisse nec dui vel diam porta volutpat. Duis a venenatis leo. Vestibulum imperdiet quam eget quam tempus, quis venenatis mi pretium. Suspendisse sollicitudin ultricies urna id facilisis. Etiam ut interdum augue. Ut ac neque nunc. Morbi eget maximus magna. Duis tincidunt ipsum sed dolor luctus tincidunt.

 

Nam hendrerit convallis nisl, sit amet feugiat dolor aliquet vitae. Mauris viverra vel libero suscipit aliquam. Mauris sodales nunc sapien, id dapibus dolor ornare sit amet. Suspendisse metus ipsum, porttitor non aliquet eget, ullamcorper id quam. Suspendisse nulla ligula, tempor id dignissim in, ullamcorper eget nisl. Mauris vel est dolor. Quisque eu pharetra metus. Mauris molestie molestie ipsum at faucibus. Mauris a consequat mauris.

</div>

 

<div class="capa4">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor augue et ex convallis maximus. Nulla ante velit, finibus a venenatis at, dapibus in nulla. Suspendisse nec dui vel diam porta volutpat. Duis a venenatis leo. Vestibulum imperdiet quam eget quam tempus, quis venenatis mi pretium. Suspendisse sollicitudin ultricies urna id facilisis. Etiam ut interdum augue. Ut ac neque nunc. Morbi eget maximus magna. Duis tincidunt ipsum sed dolor luctus tincidunt.

 

Nam hendrerit convallis nisl, sit amet feugiat dolor aliquet vitae. Mauris viverra vel libero suscipit aliquam. Mauris sodales nunc sapien, id dapibus dolor ornare sit amet. Suspendisse metus ipsum, porttitor non aliquet eget, ullamcorper id quam. Suspendisse nulla ligula, tempor id dignissim in, ullamcorper eget nisl. Mauris vel est dolor. Quisque eu pharetra metus. Mauris molestie molestie ipsum at faucibus. Mauris a consequat mauris.

</div>

<div class="capa5">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor augue et ex convallis maximus. Nulla ante velit, finibus a venenatis at, dapibus in nulla. Suspendisse nec dui vel diam porta volutpat. Duis a venenatis leo. Vestibulum imperdiet quam eget quam tempus, quis venenatis mi pretium. Suspendisse sollicitudin ultricies urna id facilisis. Etiam ut interdum augue. Ut ac neque nunc. Morbi eget maximus magna. Duis tincidunt ipsum sed dolor luctus tincidunt.

 

Nam hendrerit convallis nisl, sit amet feugiat dolor aliquet vitae. Mauris viverra vel libero suscipit aliquam. Mauris sodales nunc sapien, id dapibus dolor ornare sit amet. Suspendisse metus ipsum, porttitor non aliquet eget, ullamcorper id quam. Suspendisse nulla ligula, tempor id dignissim in, ullamcorper eget nisl. Mauris vel est dolor. Quisque eu pharetra metus. Mauris molestie molestie ipsum at faucibus. Mauris a consequat mauris.

</div>




 

<style>

 

/* Sin overflow, no se respeta tamaño capa */

.capa1{

background-color: darkgray;

position:absolute;

top:10px;

left:10px;

width:150px;

height:100px;

}

/* overflow hidden, se oculta sobrante */

.capa2{

background-color: rgb(219, 219, 219);

position:absolute;

top:10px;

left:170px;

width:150px;

height:100px;

overflow: hidden;

}

/* overflow hidden, crea siempre scroll */

.capa3{

background-color: rgb(217, 156, 156);

position:absolute;

top:10px;

left:330px;

width:150px;

height:100px;

overflow: scroll;

}

/* Crea scroll solo donde se necesita */

.capa4{

background-color: rgb(219, 204, 229);

position:absolute;

top:10px;

left:500px;

width:150px;

height:100px;

overflow: auto;

}

 

/* Se puede indicar distintos valores de overflow para x e y */

.capa5{

background-color: rgb(149, 205, 159);

position:absolute;

top:10px;

left:670px;

width:150px;

height:100px;

overflow-x: none;

overflow-y: auto;

}


 

</style>

 

</body>

</html>