Foros del Web » Creando para Internet » CSS »

Posicionar / Disponer Capas??

Estas en el tema de Posicionar / Disponer Capas?? en el foro de CSS en Foros del Web. Muy buenas gente, Lo que estoy desarrollando ahora se me plantea de una forma un poco novedosa para mí. Mi duda es si una capa ...
  #1 (permalink)  
Antiguo 25/04/2007, 03:19
 
Fecha de Ingreso: noviembre-2004
Mensajes: 125
Antigüedad: 13 años, 1 mes
Puntos: 0
Posicionar / Disponer Capas??

Muy buenas gente,

Lo que estoy desarrollando ahora se me plantea de una forma un poco novedosa para mí.

Mi duda es si una capa se puede disponer al frente o atrás de otra.
Doy por supuesto que no, que para ello debería variar el código y ponerla antes o después, pero... Si a alguien se le ocurre algo, que me comente!

Un saludo!

PD: No quiero usar flash ;)
  #2 (permalink)  
Antiguo 25/04/2007, 05:29
Avatar de vash-stampede-  
Fecha de Ingreso: abril-2006
Ubicación: En el estómago de una Rana
Mensajes: 441
Antigüedad: 11 años, 7 meses
Puntos: 3
Re: Posicionar / Disponer Capas??

Supongo ke lo querras para que al pulsar un boton aparezcan y desaparezcan como tu quieras no?

Yo lo tengo en una página y así me funciono

Código PHP:
<div id="monumento1" style="visibility:hidden; position:absolute;"
Luego ya necesitaras poner el resto si quieres te lo pongo

Código PHP:
<head>
<
title>-- BEJAR --</title>
<
link rel="stylesheet" type="text/css" href="estilos.css" />
<
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<
script language="JavaScript" type="text/JavaScript">
<!--
function 
MM_reloadPage(init) {  //reloads the window if Nav4 resized
  
if (init==truewith (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    
document.MM_pgW=innerWidthdocument.MM_pgH=innerHeightonresize=MM_reloadPage; }}
  else if (
innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgHlocation.reload();
}
MM_reloadPage(true);

function 
MM_findObj(nd) { //v4.01
  
var p,i,x;  if(!dd=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    
d=parent.frames[n.substring(p+1)].documentn=n.substring(0,p);}
  if(!(
x=d[n])&&d.allx=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(
i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!
&& d.getElementByIdx=d.getElementById(n); return x;
}

function 
MM_showHideLayers() { //v6.0
  
var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (
i=0i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (
obj.style) { obj=obj.stylev=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    
obj.visibility=v; }
}
//-->
</script>
</head>
<body>
<div id="content">
    <div id="cabecera">
        <img src="imagenes/cabecera.jpg" alt="cabecera">
    </div> 
    <div id="menu">
        <div id="dolphincontainer">
            <div id="dolphinnav">
                <ul>
                    <li><a href="index.html" title="Bejar"><span>Bejar</span></a></li>
                    <li><a href="historia.html" title="Historia"><span>Historia</span></a></li>
                    <li><a href="monumentos.html" title="Monumentos" class="current"><span>Monumentos</span></a></li>
                    <li><a href="tradiciones.html" title="Traciciones"><span>Tradiciones</span></a></li>
                    <li><a href="local.html" title="Localización"><span>Localización</span></a></li>
                    <li><a href="alojamientos.html" title="Alojamientos"><span>Alojamientos</span></a></li>
                    <li><a href="imagenes.html" title="Imágenes"><span>Imágenes</span></a></li>
                </ul>
            </div>
        </div>
    </div>
    <div id="contenido_sin"> 
      <div id="menu_contenido">
        <br><br><br>
            <table border="0" align="center" width="150">
                <tr valign="top">
                    <td>
                        <a href="javascript:;" onClick="MM_showHideLayers('general','','hide','monumento2','','hide','monumento3','','hide','monumento4','','hide','monumento5','','hide','monumento6','','hide','monumento7','','hide','monumento1','','show')">
                            <img src="imagenes/mon1.jpg" border="0">
                        </a>
                        <a href="javascript:;" onClick="MM_showHideLayers('general','','hide','monumento1','','hide','monumento3','','hide','monumento4','','hide','monumento5','','hide','monumento6','','hide','monumento7','','hide','monumento2','','show')">
                            <img src="imagenes/mon2.jpg" border="0">
                        </a>
                        <a href="javascript:;" onClick="MM_showHideLayers('general','','hide','monumento1','','hide','monumento2','','hide','monumento4','','hide','monumento5','','hide','monumento6','','hide','monumento7','','hide','monumento3','','show')">
                            <img src="imagenes/mon3.jpg" border="0">
                        </a>
                        <a href="javascript:;" onClick="MM_showHideLayers('general','','hide','monumento1','','hide','monumento2','','hide','monumento3','','hide','monumento5','','hide','monumento6','','hide','monumento7','','hide','monumento4','','show')">
                            <img src="imagenes/mon4.jpg" border="0">
                        </a>
                        <a href="javascript:;" onClick="MM_showHideLayers('general','','hide','monumento1','','hide','monumento2','','hide','monumento3','','hide','monumento4','','hide','monumento6','','hide','monumento7','','hide','monumento5','','show')">
                            <img src="imagenes/mon5.jpg" border="0">
                        </a>
                        <a href="javascript:;" onClick="MM_showHideLayers('general','','hide','monumento1','','hide','monumento2','','hide','monumento3','','hide','monumento4','','hide','monumento5','','hide','monumento7','','hide','monumento6','','show')">
                            <img src="imagenes/mon6.jpg" border="0">    
                        </a>
                        <a href="javascript:;" onClick="MM_showHideLayers('general','','hide','monumento1','','hide','monumento2','','hide','monumento3','','hide','monumento4','','hide','monumento5','','hide','monumento6','','hide','monumento7','','show')">
                            <img src="imagenes/mon7.jpg" border="0">
                        </a>
                    </td>
                </tr>
            </table>
      </div>
        <div id="contenido_con">
            <div id="general" style="position:absolute;">
                <br>
                <div class="titulos1" align="center">MONUMENTOS</div>
                <br>
                <table border="0" width="560">  
                    <tr>
                        <td align="center">
                            <img src="imagenes/ayuntamiento.jpg" width="150" height="85" style=" border-style:ridge; border-color:#000000; border-width:thin; "><br>
                            Ayuntamiento
                        </td>
                        <td align="center">
                            <img src="imagenes/bosque.jpg" width="150" height="85" style=" border-style:ridge; border-color:#000000; border-width:thin; "><br>
                            Bosque
                        </td>
                        <td align="center">
                            <img src="imagenes/convento.jpg" width="150" height="85" style=" border-style:ridge; border-color:#000000; border-width:thin; "><br>
                            Convento de San Francisco
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            <img src="imagenes/plazato.jpg" width="150" height="85" style=" border-style:ridge; border-color:#000000; border-width:thin; "><br>
                            Plaza de Toros
                        </td>
                        <td align="center">
                            <img src="imagenes/palacioducal1.jpg" width="150" height="85" style=" border-style:ridge; border-color:#000000; border-width:thin; "><br>
                            Palacio Ducal
                        </td>
                        <td align="center">
                            <img src="imagenes/teatro.jpg" width="150" height="85" style=" border-style:ridge; border-color:#000000; border-width:thin; "><br>
                            Teatro Cervantes
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3" align="center">
                            <img src="imagenes/murallas.jpg" width="150" height="85" style=" border-style:ridge; border-color:#000000; border-width:thin; "><br>
                            Las Murallas
                        </td>
                    </tr>
                </table> 
            </div>
            <div id="monumento1" style="visibility:hidden; position:absolute;">
                <table width="560">
                <tr>
                <td>
                <br>
                <div class="titulos1" align="center">PALACIO DUCAL</div>
                </div>
                </td></tr></table>
            </div> 
Espero te sirva. El resto de las capas no las pongo ppk son iguales jeje
Ya me comentaras
__________________
¡¡¡ Hoy el son de la batalla llegará hasta mi lucharemos hasta vencer o morir, hoy avanzaremos entre toda oscuridad llevando en nuestra sangre el himno de Rohan !!!!!
  #3 (permalink)  
Antiguo 28/04/2007, 11:56
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
Re: Posicionar / Disponer Capas??

Con css si puedes modificar la posición de las "capas" independientemente del lugar del código donde estén. Juega con esto:

Cita:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>New Document</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style>
div#1, div#2, div#3{width: 100px; height: 100px; position: absolute;}

div#1 {
background-color: red;
top: 50px;
left: 50px;
z-index: 1;}
div#2 {
background-color: green;
top: 70px;
left: 70px;
z-index: 2;}
div#3 {
background-color: blue;
top: 90px;
left: 90px;
z-index: 3;}

</style>
</head>
<body>
<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>
</body>
</html>
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:08.