CONTENIDO LÍQUIDO EN X-HTML
Posted by admin | Posted in CSS, DISEÑO WEB, DREAMWEAVER, HTML, PROGRAMACIÓN | Posted on 20-07-2008
Etiquetas: diseño web madrid, diseño web malaga, diseño web nerja, especialista web, infoarquitectura malaga, Juan Garcia Delicado, recursos seo, RECURSOS WEB, Recursos web profesionales, www.4cuarenta.com, www.flashmania.es, www.menaline.com, www.servimena.es
0
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
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
-
//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;
-
}
espero os haya sido de ayuda!
RECURSO OFRECIDO POR www.flashmania.es,
Elaborado por Juan Garcia - webmaster@4cuarenta.com Julio 2008
[/html]
