Página web centrada vertical y horizontalmente

Categorias: CSS, Desarrollo web, Diseño y desarrollo web | tags: Etiquetas: , , | Sin comentarios »

10
Jul/09

Se me planteó una curiosidad para jugar con el overflow de las capas…

¿Y si creo una página con un ancho y alto fijos a modo de presentación en el que tan sólo una capa sea flexible?

Buscando por internet llegué a un hilo de foros del web en el que trataban éste tema, y me he tomado la libertad de terminar un poco el código (para añadirle un ancho a la web y que se autocentre).

El código CSS:

html, body {
height: 100%;
width: 100%;margin: 0;
}
#caja {
display: table;
height: 100%;
width: 100%;
position: relative;
background:#000;
}
.centrado {
display: table-cell;
vertical-align: middle;
margin: 0 auto;
padding: 0 10px;
height: 100%;
background:#FFF;
}
.texto {
position: relative;
top: 0;
display: block;
background-color: #f00;
color: #fff;
width:400px;
height: 300px;
margin-left:auto;
margin-right:auto;
}

Y el código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Centrado Vertical</title>
</head>
<body>
<div id="caja">
<div class="centrado">
<p class="texto">Texto de la página aquí</p>
</div>
</div>
</body>
</html>

Y el resultado sería algo como esto:

web centrada verticalmente

(Clic en la imagen para agrandar)

Comparte ésta entrada:
  • del.icio.us
  • Facebook
  • Twitter
  • Bitacoras.com
  • Meneame

Tip CSS: Pie de página siempre abajo

Categorias: CSS, Desarrollo web, Diseño y desarrollo web | tags: Etiquetas: , , | Sin comentarios »

4
Jul/09

A todos en nuestros inicios se nos plantea el mismo problema: ¿Cómo podemos mantener el pie de la página siempre abajo? Pero ésta vez no quiero “abajo del contenido” sino abajo de todo; pegado al borde inferior de mi pantalla en caso que el contenido no rellene la misma, en caso de que la página tenga un largo scroll, etc.

Ésta es la técnica del wrapper, conocida por casi todos los maquetadores CSS, pero que yo tardé en descubrir (lo que tardé en usar google) y quiero compartirla hoy aquí.

Para ésto, creamos las siguientes propiedades CSS:

* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}

Como HTML tenemos la siguiente estructura:

<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>

Si necesitais ver un ejemplo revisad la fuente, propone un ejemplo.

Fuente: Ryanfait

Comparte ésta entrada:
  • del.icio.us
  • Facebook
  • Twitter
  • Bitacoras.com
  • Meneame