Scribd Logo
Upload

Welcome to Scribd!

  • Superposici N de Objetos de HTML Overlapping Con Css

    Uploaded by

    Nelson Cerda
    45 views3 pages

    Original Title

    Www.cristalab.com Superposici n de Objetos de HTML Overlapping Con Css

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    45 views3 pages

    Superposici N de Objetos de HTML Overlapping Con Css

    Uploaded by

    Nelson Cerda

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 3

    cristalab.

    com

    02/03/2012 16:34
    http://www.cristalab.com/humans.txt

    Superposicin de objetos de HTML (overlapping) con CSS

    uando trabajamos una web y aparecen problemas con la ubicacin de los items, varias veces se debe a que los contenidos quedan mal apilados. Por ejemplo hacemos un menu en css y un swf con noticias pero el menu se despliega hacia abajo y los items son tapados por el swf. Otra ocasin es cuando queremos superponer cosas: Ya sean imgenes, textos o incluso pelculas flash.

    y no los afectar, ni ellos al objeto con la propiedad. Entonces causara un overlapping (apilacin). Esta apilacin se controla con el z-index. Los elementos con position:absolute no tienen margenes pero s bordes y padding.Si ponemos position:relative, entonces el objeto (o el div) se acoplar al documento sin causar overlap.

    Como ordena CSS el orden de apilacin?


    Por medio de la propiedad z-index y de la propiedad position de CSS podemos ordenar los elementos de nuestra pgina a nuestro gusto. Lo mas recomendado para esta propiedad es incluirla en divs.
    http://www.cristalab.com/tutoriales/superposicion-de-objetos-de-html-overlapping-con-css-c184l/

    Como uso estos cdigos?


    Al usar estas propiedades, crearas algo que Dreamweaver llama capas. Son capas ya que no interfieren con otras partes del documento, ni son afectadas por ellas. Ahora veremos como aplicar esto a un div (en XHTML): <html> <head> <title>Prueba de overlapping</title> <style type=text/css> #capa1{ position:absolute; zindex:1; } </style> </head> <body> <div id=capa1> Texto con z-index de 1 </div> </body> </html> Ya creamos la primera capa, ahora creemos la segunda conteniendo una imagen (busquen una imagen cualquier lo bastante grande), que ira debajo del texto. Le ponemos color de fondo a la capa 1 para que no se pierda el texto. <html> <head> <title>Prueba de overlapping</title> <style type=text/css> #capa1{ position:absolute; z-index:1; background-color:#FFFFFF; } #capa2{ position:absolute; z-index:0; } </style> </head> <body> <div id=capa1> Texto con z-index de 1 </ div> <div id=capa2> <img src=imagen.jpg /> </ div> </body> </html>

    Cmo funcionan las propiedades z-index y position?


    Z-index: El valor de z-index indica la posicin de profundidad (capa) de u objeto en la pgina. Los elementos con valores positivos son apilados encima de uno con valores negativos, menores, o no especificados. Dos objetos con el mismo z-index son organizados dependiendo de la colocacin de sus etiquietas. Un valor negativo posiciona el objeto debajo de otro que no lo tenga definido. Para remover el efecto, se retira o se cambia el parametro a null. Nota: La propiedad z-index solo aplica a elementos que tengan la propiedad position en absolute o relative. Position: Esta propiedad se utilice junto con el z-index para crear capas. Si se pone en absolute, esta propiedad ignorar la posicin de los otros objetos en la pgina

    Love this

    PDF?

    Add it to your Reading List! 4 joliprint.com/mag


    Page 1

    cristalab.com
    Superposicin de objetos de HTML (overlapping) con CSS

    02/03/2012 16:34

    Ahora veamos como se le hace overlapping a dos swf cualquiera (Ver ejemplo del tutorial, abajo): Primero se crean dos capas, una con mayor z-index que la otra, y se ingresa el cdigo para insertar tu swf. Despues ajustamos el parmetro para que nuestro swf sea transparente: <html> <head> <title>Prueba de overlapping</title> <styletype=text/css>#peliarriba{position:absolute; z-index:1; } #peliabajo{ position:absolute; z-index:0; } </style> </head> <body> <div id=peliarriba> <object classid=clsid:D27CDB6E-AE6D-11cf96B8-444553540000 codebase=http://download.macromedia.com/pub/shockwave/cabs/ flash/swflash.cab#version=7,0,19,0 width=550 height=400> <param name=movie value=circulo-peque.swf /> <param name=quality value=high /> <param name=wmode value=transparent /> <embed wmode=transparent src=circulo-peque.swf quality=high pluginspage=http://www.macromedia.com/go/getflashplayer type=application/xshockwave-flash width=550 height=400></ embed> </object> </div> <div id=peliabajo> <object classid=clsid:D27CDB6E-AE6D-11cf96B8-444553540000 codebase=http://download.macromedia.com/pub/shockwave/cabs/ flash/swflash.cab#version=7,0,19,0 width=550 height=400> <param name=movie value=circulo-grande.swf /> <param name=quality value=high /> <param name=wmode value=transparent /> <embed wmode=transparent src=circulo-grande.swf quality=high pluginspage=http://www.macromedia.com/go/getflashplayer type=application/ x-shockwave-flash width=550 height=400></ embed> </object> </div> </body> </html>

    As ha de ir nuestra pagina Tambien podemos especificarle una posicion a las capas y su ancho y alto: <html> <head> <title>Prueba de overlapping</title> <style type=text/css> #capa1{ position:absolute; z-index:1; background-color:#FFFFFF; top:100px; left:300px; width:300px; height:12px; } #capa2{ position:absolute; z-index:0; } </style> </head> <body> <div id=capa1> Texto con z-index de 1 </ div> <div id=capa2> <img src=imagen.jpg /> </ div> </body> </html>

    http://www.cristalab.com/tutoriales/superposicion-de-objetos-de-html-overlapping-con-css-c184l/

    Nuestra pagina debe verse similar a sta imagen.

    Love this

    PDF?

    Add it to your Reading List! 4 joliprint.com/mag


    Page 2

    cristalab.com
    Superposicin de objetos de HTML (overlapping) con CSS

    02/03/2012 16:34

    Aunque no parezca, cada circulo es un SWF independiente superpuesto. Ver ejemplo para ms detalles.
    http://www.cristalab.com/tutoriales/superposicion-de-objetos-de-html-overlapping-con-css-c184l/

    Advertencia: Ya sabes que hacer un swf transparente puede hacer la navegacion lenta, asi que imagina dos swf superpuestos y transparentes. En este caso el overlapping debe ser usado con peliculas pequeas. Felicidades, ya pueden hacer capas en HTML y XHTML usando CSS. Espero que tengan suerte haciendolo ya que es bastante til. Con capas no tendran tanto problema en compatibilidad con otros navegadores si especifican la altura y ancho asi como la posicin. Si ven el ejemplo pueden ver que con los swf el elemento de atrs no es accesible asi el fondo sea transparente.

    Tweet

    Love this

    PDF?

    Add it to your Reading List! 4 joliprint.com/mag


    Page 3

    You might also like