Clase 5 del curso, seguimos aprendiendo CSS y HTML.
-Tenemos una carpeta llamada (img) que contiene el logo, otra pagina CSS que contiene su estilo, y un archivo llamado index.html
-Empezamos a escribir en index.html
-Y vamos a ver cómo se colocan las capas para componer una pagina, y en #estilo.css veremos los estilos de las capas.
-En este curso vamos aprender que hay dos tipos de colocación de las paginas (Absoluta y relativa)
Aquí como hemos empezado hablar en el curso vamos a ver las capas absolutas y relativas definición de ambas:
CAPA RELATIVA: Se coloca conforme a donde es la posición activa del código
CAPA ABSOLUTA: Se coloca en las posición total de la capa en la que está.
-Se indicaría así position: relative; Y le ponemos color a la capa para verla por defecto esta relativa. Todo eso en el CSS
.capa1 { background-color: #FF0000; position:relative; }
.capa2 { background-color: #0000FF; position:absolute; }
.capa3 {
background-color: #FF0000;
position:relative;
left: 100px;
top: 120px;
width: 200px;
height: 150px;
}
También antes de poner el CSS pondremos las capas en index.html. Hacemos 1 y 2
<html>
<head>
<meta charset="utf-8">
<title>clase5title>
<link rel="stylesheet" href="css/estilo.css">
head>
<body>
<div class="capa1">contenido capa 1div>
<div class="capa2">contenido capa 2div>
<br><br><br><br><br><br><br><br><br><br>
Luego ponemos capa 3 y 4 que serian las mismas que 1 y 2 copiadas. También lo cambiamos en el CSS
.capa1 { background-color: #FF0000; position:relative; }
.capa2 { background-color: #0000FF; position:absolute; }
.capa3 {
background-color: #FF0000;
position:relative;
left: 100px;
top: 120px;
width: 200px;
height: 150px;
}
.capa4 {
background-color: #10107c;
position:absolute;
left: 100px;
top: 120px;
width: 200px;
height: 150px;
Para organizarnos mejor y no liarnos organizaremos bien los estilos.css de esta forma.
EJEMPLO: Su respectiva capa, si esta a la izquierda, arriba, abajo, alto, color, posición. Todo uno debajo del otro más ordenado.
.capa3
background-color: #FF0000;
position:relative;
left: 100px;
top: 120px;
width: 200px;
height: 150px;
Vamos a crear plantilla.htm, una estructura que nos sirva para una web real.
Creamos sobre el body 4 capas_: cabecera, menú, contenido y pie.
Luego ponemos su estilo en CSS y por ultimo crearemos una misma plantilla pero en segunda versión plantilla2.html
Aquí os mostramos el claro ejemplo: plantilla.html
<html>
<head>
<meta charset="utf-8">
<title>plantillatitle>
<link rel="stylesheet" href="css/estilo.css">
head>
<body>
<div class="cabecera">
div>
<div class="menu">
div>
<div class="contenido">
div>
<div class="pie">
div>
body>
html>
Y aquí su estilo CSS correspondiente
.cabecera{
position:relative;
background-color: #8b4732;
width: 100%;
height: 100px;
text-align: center;
}
.menu{
position: relative;
float: left;
width: 25%;
height: 100%;
background-color: aliceblue;
}
.contenido{
position: relative;
float: left;
width: 75%;
height: 100%;
background-color: rgb(0, 136, 255);
}
.pie{
clear:both;
position:relative;
background-color: #3b3b3b;
width: 100%;
height: 100px;
text-align: center;
}
Vemos las distintas posibilidades de la propiedad overflow, que determina cómo se coloca un contenido que excede los limites de la capa que lo contiene:
<br><br><br><br><br><br><br>
<div class="capa_overflow">
Este texto es demasiado grande para la capa
div>
<br><br><br><br><br><br><br>
<div class="capa_overflow2">
Este texto es demasiado grande para la capa
div>
<br><br><br><br><br><br><br>
<div class="capa_overflow3">
Este texto es demasiado grande para la capa
div>
Este es el css. Probad el resultado.
.capa_overflow{
background-color:#00FF00;
position: relative;
left:100px;
top:120px;
width:80px;
height:80px;
}
.capa_overflow2{
background-color:#00FF00;
position: relative;
left:100px;
top:120px;
width:80px;
height:80px;
overflow: hidden;
}
.capa_overflow3{
background-color:#00FF00;
position: relative;
left:100px;
top:120px;
width:80px;
height:80px;
overflow: auto;
}
En el curso 5 seguiremos poniendo capas igual que 1,2 3,4 hasta llegar 10. Todas copiadas una de otras siempre teniendo más posibilidades de enlaza. En nuestra pagina index.html
*BR se coloca para separar son espacios
<br><br><br><br><br><br><br><br><br><br>
<div class="capa5">
<div class="capa6">contenido capa 6div>
<div class="capa7">contenido capa 7div>
div>
<br><br><br><br><br><br><br><br><br><br>
<div class="capa8">
<div class="capa9">contenido capa 9div>
<div class="capa10">contenido capa 10div>
div>
body>
html>
Aquí os mostramos otro ejemplo de estructura de plantilla.
plantilla2.html
<html>
<head>
<meta charset="utf-8">
<title>plantillatitle>
<link rel="stylesheet" href="css/estilo.css">
head>
<body>
<div class="cabecera2">
div>
<div class="menu2"
>
div>
<div class="contenido2">
div>
<div class="pie2">
div>
body>
html>
Y aquí su correspondiente estilo CSS
.cabecera2{
position:relative;
background-color: #8b4732;
width: 100%;
height: 100px;
text-align: center;
}
.menu2{
position: absolute;
width: 25%;
top: 100px;
bottom:150px;
background-color: aliceblue;
}
.contenido2{
position:absolute;
width: 75%;
left: 25%;
top: 100px;
bottom: 150px;
background-color: rgb(0, 136, 255);
}
.pie2{
position:absolute;
background-color: #3b3b3b;
width: 100%;
height: 150px;
bottom: 0;
text-align: center;
}
body{
margin:0;
}
