CONTENIDO LÍQUIDO EN X-HTML

Umm que buenísimo recurso, de hecho yo lo uso en casi todos mis proyectos webs, ya que le dá otra presencia a nuestro proyecto.

Ya da lo mismo, que se vea la web que vamos a realizar en un 15 pulgadas, o en un 24. Este recurso permite que el contenedor o div, se ajuste totalmente al centro del monitor que sea, tanto verticalmente como horizontalmente.

Podreis ver un ejemplo en diseño web, haced más grande y más pequeña la ventana del explorador ¿hacia dónde se vá el contenido?

¿COMO SE HACE?

1) para empezar tenemos que crear un div

[html]

y

al que ademas le añadiremos una etiqueta para
controlarlo via CSS, es decir algo asi

lo que queramos meter dentro de ese div

[/html]

Después de eso iremos al asistente de CSS, y tendremos como ya sabemos 2 opciones para llevar a cabo el css:
a)incrustandolo en el propio docmento( html/xhtml) o
b) con un archivo externo.
Acostumbraros a hacerlo desde un archivo externo siempre, ya que las normas de accesibilidad, quieren siempre lo mismo separar, contenido de la web, de la parte de diseño. Nada con respecto al diseño debe de estar en un html/xhtml, en estos documentos solo encontraremos «etiquetas-tag»(h1,h2,p,div….) y texto plano.Los estilos , ya sabeis, a full con CSS.

bien el codigo/propiedades del css es el siguiente contenido_liquido

[html]
//esta propiedad body, lo que hace es decirle que el
//cuerpo de la pagina no tenga ningún margen,
//dreamweaver tiene un problema y es que
//los campos vacios, sin valores, por defecto,
//el valor no es cero por eso el margen lo pongo
// a cero pixeles, porque si nos damos cuenta
//al abrir un documento nuevo, no escribe en la
//posición 0,0,sino en la 5,5 , porque los campos
//margin estan vacios….pero no con valor cero.
//no es necesario si no quereis…

body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

//la etiqueta de mi div la llamé wrapper
// le dí via css lo típico, su ancho y su alto (900x 600px)
//un borde solido en una tonalidad gris, pa ver el efecto
//las posiciones arriba, abajo izda y dcha al 50%
//los margins top y bottom es el valor negativo de
//la mitad de nuestro alto del div y los margin left y
//right es el valor negativo de la mitad de nuestro ancho
//del div
//¿porque tienen esos valores?
//con css, le estamos dando una cordenada,
//de acuerdo al punto central, del ancho y del alto,
//es desde donde css, centra el div en la ventana,
//si fuera una de las esquinas nos volveriamos locos,
//y necesitariamos varios divs más para centrarlo
// (de locos, ya hice pruebas..)
este seria el css de mi div wrapper
#wrapper {

width: 900px;
height: 600px;
border: 3px solid #CCCCCC;
background-color: #FFFFFF;
left: 50%;
top: 50%;
right: 50%;
bottom: 50%;
vertical-align: middle;
position: absolute;
margin-top: -300px;
margin-right: -450px;
margin-bottom: -300px;
margin-left: -450px;
}
[/html]

espero os haya sido de ayuda!
RECURSO OFRECIDO POR www.flashmania.es,
Elaborado por Juan Garcia – hola@cashuba.com Julio 2008

[/html]








Sobre Juan García Delicado 374 artículos
Mi nombre es Juan García Delicado. Soy Diseñador Gráfico y Web, comencé mi andadura profesional hacia el año 1999. En estos últimos 16 años, no he parado de formarme íntensamente para obtener los máximos conocimientos posibles y desenvolverme con agilidad en este sector tan cambiante. Mis Conocimentos en Marketing Online y Mi pasión por crear cosas, me permite mostrarte por ejemplo este sitio en donde estas con más de 40mil visitas mensuales. Gracias Por Entrar. Tel: 95 252 40 19 - Mov: 654 330 706 Nerja (Málaga) ESPAÑA. Juan García Delicado

Sé el primero en comentar

Dejar una contestacion

Tu dirección de correo electrónico no será publicada.


*