expressraider: css

Mostrando entradas con la etiqueta css. Mostrar todas las entradas

Layout de dos columnas con encabezado y pie con div y css

estilos.css

*** en el caso en que se utilice en Angular, el body no ponerlo (iria en el index.html) ***

body {
padding: 0; margin: 0;
}

.encabezado
{
float: top;
width: 100%;
height: 14%;
}

.titulo
{
background-color: lightgray;
padding: 10px;
height: 100%
}

.principal
{
background-color: magenta;
width: 100%;
height: 86%;
}

.navegacion
{
float: left;
background-color: yellow;
width: 15%;
height: 92%;
overflow-y: auto;
}

.contenido
{
float: left;
background-color: orange;
width: 85%;
height: 92%;
overflow-y: auto;
}

.pie
{
background-color: red;
color: yellow;
font-weight: bold;
width: 100%;
height: 100%;
}

.seccion
{
padding: 10px;
}

.mensajes
{
background-color: pink;
color: blue;
height: 100%;
}

.menu
{
padding: 1px;
}

index.html

<div id="contenedor" style="height: 100vh">
<div class="encabezado">
<div class="titulo">
<div align="right">
Encabezado
</div>
</div>
</div>

<div class="principal">
<div class="navegacion">
<div class="menu">
Menu
</div>
</div>

<div class="contenido">
<div class="seccion">
Contenido
</div>
</div>

<div class="pie">
<div class="mensajes">
Mensajes
</div>
</div>
</div>
</div>

Evitar que un div vaya a la siguiente linea

usar display: inline

Este ejemplo muestra un textbox y al lado el div (no debajo)

<input type="text" size="20"><div style="display: inline">contenido del div</div>

Div estatico con css

http://ryanfait.com/position-fixed-ie6/

CSS

* {
    margin: 0;
}
html, body {
    height: 100%;
    overflow: auto;
}
.wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
}
.box {
    position: fixed;
    left: 10px;
    top: 180px;
}
* html .box {
    position: absolute;
}

HTML:

<html>
    <head>
        <link rel="stylesheet" href="yo.css" />
    </head>
    <body class="abc">

        <div class="wrapper">
            <p>All of your website content should be here.</p>
   <br>
         <p>All of your website content should be here.</p>
   <br>
         <p>All of your website content should be here.</p>
   <br>
         <p>All of your website content should be here.</p>
   <br>
         <p>All of your website content should be here.</p>
   <br>


        </div>
        <div class="box">
            <p>This box is fixed.</p>
        </div>
    </body>
</html>