Foros del Web » Creando para Internet » CSS »

Dos Cajas con display:none y block una encima de otra

Estas en el tema de Dos Cajas con display:none y block una encima de otra en el foro de CSS en Foros del Web. No se si me he explicado bien en el titulo, creo que no, la cosa es que estoy creando una pagina web en la que ...
  #1 (permalink)  
Antiguo 07/06/2011, 12:12
 
Fecha de Ingreso: junio-2011
Mensajes: 7
Antigüedad: 5 años, 7 meses
Puntos: 0
Pregunta Dos Cajas con display:none y block una encima de otra

No se si me he explicado bien en el titulo, creo que no, la cosa es que estoy creando una pagina web en la que puse un poco del javascrip(la tipica funcion de mostrar u ocultar caja)
<script type="text/javascript">
function mostrarCaja() {
var caja = document.getElementById("caja");
caja.style.visibility = "visible";
}

function ocultarCaja() {
var caja = document.getElementById("caja");
caja.style.visibility = "hidden";
}
</script>
bueno todo eso bien en realidad en mi codigo funciona con un solo boton las dos funciones...
El boton es una imagen pero lo llamare boton...
esa caja tiene el style en none y cuando haces click sobre el boton se pone block y muestra la cajita en un mismo lugar(necesito que sea obligatoriamente en un mismo lugar).
Bueno el caso es q, supongamos dos botones en horizontal, cuando hacemos click en el primero muestra una caja gris con un"hola"(por ej) y cuando hacemos click en el otro boton sale otra caja encima de la anterior con un "adios"
todo bien no?bueno ahora si dejamos pulsado el boton que dice "adios" al pulsar el boton "hola" no sale nada, porque el div de adios esta mas abajo supongo y tiene prioridad...ahí va mi pregunta ¿hay algun metodo que conozcan que pueda hacer esto...siempre que al pulsar un boton se ponga encima de cualquier caja este donde este el lugar del div?
Este es el codigo en css de mi caja

.elemen{
position: absolute;
background-color:#CCC;
width: 800px;
height: 200px;
color:#003;
display:inline;
margin-top:150px;}


Lo de inline no es que estuviera puesto asi, es que estoy probando todo tipo de cosas pero a lo mejor con css es imposible hacer, solo queria preguntar


De antemano muchas gracias
  #2 (permalink)  
Antiguo 07/06/2011, 12:38
 
Fecha de Ingreso: junio-2011
Mensajes: 7
Antigüedad: 5 años, 7 meses
Puntos: 0
Respuesta: Dos Cajas con display:none y block una encima de otra

Por si acaso pondre exactamente mi div y el script que estoy usando que lo encontre en internet:

<script>
function toggle(el,im){
el.style.display=el.style.display!='none'?'none':' block';
im.src=el.style.display=='none'?'mas.gif':'menos.g if';
}
</script>



<div class="infraestructura" style="cursor:pointer" onclick="toggle(this.nextSibling,this.childNodes[0])"><a><img src="img/prensa.jpg" /><span>Prensa</span></a></div><div class="elemen" style="display:none"> <a href="http://www.elmundo.es/"target="_blank"><img class="imagencillas" src="img/prensa.jpg" /> EL Mundo</a> Periodico El Mundo</div>
</div>
  #3 (permalink)  
Antiguo 07/06/2011, 12:47
 
Fecha de Ingreso: junio-2011
Mensajes: 7
Antigüedad: 5 años, 7 meses
Puntos: 0
Respuesta: Dos Cajas con display:none y block una encima de otra

Por si acaso este es mi codigo real:

<script>
function toggle(el,im){
el.style.display=el.style.display!='none'?'none':' block';
im.src=el.style.display=='none'?'mas.gif':'menos.g if';
}
</script>





<div class="infraestructura" style="cursor:pointer" onclick="toggle(this.nextSibling,this.childNodes[0])"><a><img src="img/prensa.jpg" /><span>Prensa</span></a></div><div class="elemen" style="display:none"> <a href="http://www.elmundo.es/"target="_blank"><img class="imagencillas" src="img/prensa.jpg" /> EL Mundo</a> Periodico El Mundo</div>
</div>
  #4 (permalink)  
Antiguo 07/06/2011, 14:57
 
Fecha de Ingreso: junio-2010
Mensajes: 142
Antigüedad: 6 años, 6 meses
Puntos: 5
Respuesta: Dos Cajas con display:none y block una encima de otra

No entiendo absolutamente nada, ni lo que intentas hacer ni los retasos de códigos sueltos.

Sorry
  #5 (permalink)  
Antiguo 07/06/2011, 15:15
 
Fecha de Ingreso: junio-2011
Mensajes: 7
Antigüedad: 5 años, 7 meses
Puntos: 0
Exclamación Respuesta: Dos Cajas con display:none y block una encima de otra

Perdon, tal vez halla escrito demasiado y sea aburrido de leer, este tema no esta en internet porque he buscado bastante.
Simplemente quiero que un boton muestre un div(una cajita gris con las medidas 200x200 por ejemplo)y que el otro boton haga lo mismo...si el boton uno contiene en su "cajita" una frase cualquiera y el boton 2 tiene otra frase...Lo que quiero es Que al pulsar el boton 1 salga la cajita con la frase cualquiera del boton 1 obviamente y al pulsar el boton 2 se sustituya por lo del boton 1(digamos que se suporpone una div con otro), asi todo el rato...
si lo haces como lo he explicado la del boton 1 al boton 2 te funciona...pero del boton 2 al boton 1 no funciona...me explique ahora?
  #6 (permalink)  
Antiguo 07/06/2011, 15:50
 
Fecha de Ingreso: junio-2010
Mensajes: 142
Antigüedad: 6 años, 6 meses
Puntos: 5
Respuesta: Dos Cajas con display:none y block una encima de otra

Creo que si.

Proba con javascript en el elemento a clickear:

algo asi:

Código HTML:
onclick="getElementById('news').style.display='none'; return false;"
Donde "news" es la ID de la capa que quiero ocultar o mostrar.

Con este mismo método puedes hacer que un div se oculte cuando el otro aparece solo cambiando el valor del display y por último "return false;" (esto cancela la acción de un enlace que es enviarte a una url.)

Se entiende?.
  #7 (permalink)  
Antiguo 07/06/2011, 16:48
 
Fecha de Ingreso: junio-2011
Mensajes: 7
Antigüedad: 5 años, 7 meses
Puntos: 0
Respuesta: Dos Cajas con display:none y block una encima de otra

<script>
function toggle(el,im){
el.style.display=el.style.display!='none'?'none':' block';
im.src=el.style.display=='none'?'mas.gif':'menos.g if';
}
</script>

<div class="infraestructura" style="cursor:pointer" onclick="toggle(this.nextSibling,this.childNodes[0])"><a><img src="img/serie.jpg" /><span>Películas/Series</span></a></div><div class="elemen" style="display:none"> <a href="http://www.seriesyonkis.com/"target="_blank"><img class="imagencillas" src="img/serie.jpg" /> TODAS LAS SERIES</a> Visor y buscador de series </div>

Uff pero como añadirias eso a este div?yo usaba eso de getElementById pero encontre este otro codigo por internet y funcionaba mejor
La cosa es que esto----> [[onclick="toggle(this.nextSibling,this.childNodes[0])"]] no lo entiendo muy bien la verdad xD y si pongo lo de getElementByClass(porque es una clase mi capa) ni siquiera sale la capa :(
  #8 (permalink)  
Antiguo 07/06/2011, 16:57
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 9 años, 6 meses
Puntos: 1567
Respuesta: Dos Cajas con display:none y block una encima de otra

Acá te dejo varios ejemplos de como mostrar u ocultar capas, son distintas variantes, capas simples, multiples, mostrar una mientras se oculta el resto, etc


http://foros.emprear.com/mostrarcapas/varias-capas.html

http://foros.emprear.com/mostrarcapas/titulos.html

http://foros.emprear.com/mostrarcapas/mostrarcapas.html

http://foros.emprear.com/mostrarcapa...tar_capas.html

http://foros.emprear.com/mostrarcapa...as-ctexto.html

http://foros.emprear.com/mostrarcapa...ar_imagen.html

Revisa los códigos fuente y javascript

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Etiquetas: block, cajas, cssayuda, display, javascript, position
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 00:49.