sábado, 24 de septiembre de 2016

09 CSS Posicionamiento

Vemos en este video como posicionar distintos parrafos de nuestra web, metiendolos en "cajas", como se visualiza el parrafo si la caja donde esta contenido es de menor dimension al contenido en si, tambien vemos como sobreponemos unos encima de otros y los desplazamos a la posicion que deseamos.



El codigo HTML es:

<!doctype html>
<html lang="ES">
<head>
<link rel="stylesheet" type="text/css" href="css/posicionamiento.css">
<title>
Poscionamiento
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Titulo Principal</h1>
<h2>Titulo Secundario</h2>
</hgroup>
</article>
<p id="parrafo1">Parrafo 1 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsalfjlsajlfjaljdkjkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
<p id="parrafo2">Parrafo 2 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsalfjlsajkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkjlfjaljdflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
<p id="parrafo3">Parrafo 3 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsalfjkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkjlsajlfjaljdflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
</section>
<aside>
</aside>
<footer>
<h4>Pie de pagina</h4>
</footer>
</body>
</html>

El codigo CSS es:

/*www.ticoticotaa.es*/
/*@2016*/
*{
   
}
#parrafo1{
    margin-bottom:15px;
    width:100px;
    height:100px;
    color:green;
   
    background-color:gray;
    overflow:auto;
    z-index:2;
    position:relative;
}
#parrafo2{
    width:200px;
    height:100px;
    margin-top:-40px;
    margin-left:50px;
    color:blue;
    background-color:yellow;
    overflow:scroll;
    z-index:1;
    position:relative;
}
#parrafo3{
width:200px;
background-color:gray;
    overflow:visible;
    color:red;
}





Espero os sea util, no dejeis de practicar y probar opciones. Gracias.

No hay comentarios:

Publicar un comentario