Ocultar texto, pulsar boton y mostrarlo

clau1127 · #31 (**permalink**) 25/05/2010, 23:59

wooww gracias me sacaron de un apuro
muchas gracias

WinderJerter · #32 (**permalink**) 27/05/2010, 20:30

alguien sabe porque no funciona en Opera ni en IE???

Saludos!!!

clau1127 · #33 (**permalink**) 14/06/2010, 15:50

gracias a mi si me sirviooo

raxper · #34 (**permalink**) 06/07/2010, 18:50

charlescuella · #35 (**permalink**) 05/08/2010, 10:12

Cita:

Iniciado por JavierB

Hola, julimirin.

Otra opción:

Código PHP:

  <body>

<input type="button" value="Ver"

 onClick="document.getElementById('oculto').style.visibility='visible'">

<br>Este texto se ve siempre

<div id="oculto" style="visibility:hidden">

Este texto se verá cuando yo quiera

</div>

</body>

Saludos,

gracias amigo por la inf

s13597 · #36 (**permalink**) 28/08/2010, 13:04

Hola.
Este post me ha servido de gran ayuda. Pero me gustaría preguntar una cosa más. ¿Cómo hago para que al hacer click sobre un enlace se abra ese y se cierren los demás?
Muchas gracias =)

JessyF · #37 (**permalink**) 14/09/2010, 13:17

Retomo esta aportación de JavierB, primero para agradecer lo útil que me han sido sus colaboraciones

. Y segundo para ver si la comunidad puede ayudar con esto:

Resulta que tengo una lista de proyectos, que mediante la función ocultar / mostrar texto quisiera mostrar su detalle uno a uno. Por ejemplo:

Proyecto1
"texto con detalles del mismo..."
Proyecto2
"texto con detalles del mismo..."
Proyecto3
"texto con detalles del mismo..."

A todos ellos aplico el scrip:

<a href="#" onclick="MostrarOcultar('mostrar')">+</a>
<div id="oculto" style="display: none">
"texto con detalles del mismo..."
</div>

Pero al probarlo sólo me aparece o desaparece el primero (Proyecto1) y el resto no lo muestra, aún cuando presentan cada uno su símbolo y contenido (+); al probarlo no lo abre y me activa automáticamente el primero.

P.d
Coloque en el Head:
<script language="javascript">
function MostrarOcultar (objetoVisualizar) {
if (document.getElementById(objetoVisualizar).style.d isplay=='none') {
document.getElementById(objetoVisualizar).style.di splay='block';
} else {
document.getElementById(objetoVisualizar).style.di splay='none';
}
}
</script>
<script>
function mostrar(enla) {
obj = document.getElementById('oculto');
obj.style.display = (obj.style.display == 'block') ? 'none' : 'block';
enla.innerHTML = (enla.innerHTML == '-') ? '+' : '-';
}
</script>
</head>

Saludos y gracias desde ya!.

decinti · #38 (**permalink**) 27/10/2010, 15:14

Saludos amigos, necesito mostrar/ocultar simultáneamente varios div, encontré esta magnífica función que he aplicado como sigue. La cosa es saber si se puede y cómo reducir la función a su mínima expresión. ¿Me podéis aconsejar?, me imagino que se puede!!

<script>
function mostrar(enla) {
obj = document.getElementById('oculto');
obj.style.display = (obj.style.display == 'block') ? 'none' : 'block';
enla.innerHTML = (enla.innerHTML == 'Ocultar todo') ? 'Mostrar todo' : 'Ocultar todo';
}
function mostrar1(enla) {
obj = document.getElementById('oculto1');
obj.style.display = (obj.style.display == 'block') ? 'none' : 'block';
enla.innerHTML = (enla.innerHTML == 'Ocultar todo') ? 'Mostrar todo' : 'Ocultar todo';
}
function mostrar2(enla) {
obj = document.getElementById('oculto2');
obj.style.display = (obj.style.display == 'block') ? 'none' : 'block';
enla.innerHTML = (enla.innerHTML == 'Ocultar todo') ? 'Mostrar todo' : 'Ocultar todo';
}
</script>
</head>
<body>
<a href="#" onClick="mostrar(this);mostrar1(this);mostrar2(thi s); return false" />Mostrar todo</a>
<div id="oculto" style="display:none">
Este texto se verá cuando yo quiera
</div>
<div id="oculto1" style="display:none">
Este texto se verá cuando yo quiera
</div>
<div id="oculto2" style="display:none">
Este texto se verá cuando yo quiera
</div>
<p>Texto visible</p>
</body>

Un gran abrazo

decinti · #39 (**permalink**) 27/10/2010, 15:18

Gracias de antemano

DaRKeN58 · #40 (**permalink**) 05/11/2010, 11:08

Hola chicos, que tal.

A ver si me podéis echar una mano.

Estoy usando este código:

Código:

<script>
function mostrar(enla) {
  obj = document.getElementById('oculto');
  obj.style.visibility = (obj.style.visibility == 'hidden') ? 'visible' : 'hidden';
  enla.innerHTML = (enla.innerHTML == '<img src="/enlaces/imagenes/mostrar.png" />') ? '<img src="/enlaces/imagenes/mostrar.png" />' : '<img src="/enlaces/imagenes/ocultar.png" />';
}
</script>

Mostrar listado <a href="#" onclick="mostrar(this); return false" /><img src="/enlaces/imagenes/mostrar.png" /></a>
<div id="oculto" style="visibility:hidden">
LALALA
</div>

El resultado que tengo con esta modificación que he intentado hacer es que de inicio se muestra el botón MOSTRAR.PNG, al pulsarlo se muestra el texto y el botón se convierte en OCULTAR.PNG.

Hasta ahí va bien, el caso es que al darle al botón OCULTAR.PNG, se oculta el listado pero se sigue viendo el botón OCULTAR.PNG y no se muestra como al inicio el botón MOSTRAR.PNG, que es lo que quiero, jeje.

Alguna idea? Gracias de antemano :)

DaRKeN58 · #41 (**permalink**) 06/11/2010, 17:02

Nadie sabe nada? UP!

mexicanyop · #42 (**permalink**) 31/03/2011, 23:57

Cita:

Iniciado por JavierB

Hola, julimirin.

Otra opción:

Código PHP:

  <body>

<input type="button" value="Ver"

 onClick="document.getElementById('oculto').style.visibility='visible'">

<br>Este texto se ve siempre

<div id="oculto" style="visibility:hidden">

Este texto se verá cuando yo quiera

</div>

</body>

Saludos,

Me podrias decir un code que tenga oculto el texto y al presionarlo lo suelte, y al volver a presionarlo que se oculte de nuevo.
Si es posible con un <input type="button" value="Ver".
Espero que puedar resolver mi duda.
Gracias

pablopgp_lm · #43 (**permalink**) 30/06/2011, 19:49

hola gente, voy a revivir este tema porque toy buscando la forma de encontrar una respuesta a mis preguntas y estoy tocando por todos lados je.
La idea es casi la misma, mostrar y ocultar ...pero esta vez una cadena de texto es decir un texto, un parrafo que primero se va a ver a la mitad, con unos "..." al final y al lado un "leer mas" que va a hacer que se muestre el texto completo de forma dinamica en el acto, y que baje todo los demas elementos que estan debajo del texto. Despues cuando este mostrado totalmente, va a ver otro boton que diga.."volver" o algo asi, que vuelve a dejar el texto reducido...no se si me explico..espero que puedan ayudarme. Saludos!

RafaRG · #44 (**permalink**) 12/07/2011, 09:34

Cita:

Iniciado por pablopgp_lm

hola gente, voy a revivir este tema porque toy buscando la forma de encontrar una respuesta a mis preguntas y estoy tocando por todos lados je.
La idea es casi la misma, mostrar y ocultar ...pero esta vez una cadena de texto es decir un texto, un parrafo que primero se va a ver a la mitad, con unos "..." al final y al lado un "leer mas" que va a hacer que se muestre el texto completo de forma dinamica en el acto, y que baje todo los demas elementos que estan debajo del texto. Despues cuando este mostrado totalmente, va a ver otro boton que diga.."volver" o algo asi, que vuelve a dejar el texto reducido...no se si me explico..espero que puedan ayudarme. Saludos!

creo que tengo la solución a eso. verás, es simple: simplemente se trata de poner el <div> de lo que se va a mostrar delante del enlace. sería así:

Código PHP:

  <html> 

<head> 

 
<script> 

function mostrar(enla , etik) { 

  obj = document.getElementById(etik); 

    obj.style.display = (obj.style.display == 'block') ? 'none' : 'block'; 

  enla.innerHTML = (enla.innerHTML == 'ocultar texto') ? '... seguir leyendo' : 'ocultar texto'; 

} 

</script> 

</head>

hola gente, voy a revivir este tema porque toy buscando la forma de encontrar una respuesta a mis preguntas y estoy tocando por todos lados je.

<div id="oculto" style="display:none">La idea es casi la misma, mostrar y ocultar ...pero esta vez una cadena de texto es decir un texto, un parrafo que primero se va a ver a la mitad, con unos "..." al final y al lado un "leer mas" que va a hacer que se muestre el texto completo de forma dinamica en el acto, y que baje todo los demas elementos que estan debajo del texto. Despues cuando este mostrado totalmente, va a ver otro boton que diga.."volver" o algo asi, que vuelve a dejar el texto reducido...no se si me explico..espero que puedan ayudarme. Saludos!</div>

<a href="#" onclick="mostrar(this,'oculto'); return false" />... seguir leyendo</a>

----

</html>

lo malo que tiene esto es que el texto escrito entre el <div> te lo pone en un párrafo a parte. de momento el único apaño que le veo sería poner el <div> cuando vayas a cambiar de párrafo. así no se te estropearía el texto y mantendría su formato original.
un saludo.

RafaRG · #45 (**permalink**) 12/07/2011, 11:00

Cita:

Iniciado por alarga

Pues si, y ya la he encontré

Me he puesto a cavilar y por fin he dado con la solución, ya tengo mi menú terminado. La solución consiste en crear dos funciones genéricas, una para mostrar capas y otras para ocultarlas, y en utilizar los eventos onMouseOver y onMouseOut.

Saludos.

PD: que de cosas se aprenden cuando se tiene que buscar uno mismo la vida

buenas. sé que hace tiempo de esto, ¿pero podrías decirme cómo lo has hecho?
yo he estado investigando y no doy con la tecla.

aver, tengo una versión que me va bien. pero claro, para que se oculte el contenido de nuevo tengo que pasar el cursor por el enlace:

Código PHP:

  <script type="text/javascript">

function mostrar(enla,etik) {

  obj = document.getElementById(etik);

  obj.style.visibility = (obj.style.visibility == 'hidden') ? 'visible' : 'hidden';

}

function mostrar(enla,etik) {

  obj = document.getElementById(etik);

  obj.style.visibility = (obj.style.visibility == 'visible') ? 'hidden' : 'visible';

}

</script>

<body>

<a href="#" onmouseover="mostrar(this,'capa'); return false"><input type="button" value=" Ver contenido "></a>

<div id="capa" style="visibility:hidden">

<a href="http://www.google.es" target="_blank"><input type="button" value=" Google "></a>

<a href="http://www.yahoo.es" target="_blank"><input type="button" value=" Yahoo "></a>

</div>

</body>

aquí me puedo permitir el poner enlaces a otras webs o editar el texto con <font>.
sin embargo, en esta otra versión, ocurren dos problemas, a pesar de que se soluciona uno:
·se soluciona el problema de que no se oculta el contenido automáticamente.
·surge el problema de que, a pesar de que se oculta el contenido, no puedo pasar de una palabra a otra, ya que entre medias queda un hueco y se ocultaría todo (tengo que pasar el cursor por el enlace otra vez para que se muestre el contenido).
·a diferencia de la otra versión, no puedo poner enlaces, ya que por alguna extraña razón, no funciona el efecto de ocultar automáticamente el contenido al quitar el cursor. para que se oculte tengo que pasar el cursor por un "no-enlace" (por así decirlo). pero es que hay más: el texto situado por debajo de un enlace, tampoco funciona.

aquí dejo la segunda versión:

Código PHP:

  <html>

<script type="text/javascript">

function mostrar(enla,etik) {

  obj = document.getElementById(etik);

  obj.style.visibility = (obj.style.visibility == 'hidden') ? 'visible' : 'visible';

}

function ocultar(enla,etik) {

  obj = document.getElementById(etik);

  obj.style.visibility = (obj.style.visibility == 'hidden') ? 'visible' : 'hidden';

}

</script>

<a href="#" onmouseover="mostrar(this,'capa'); return false"><input type="button" value=" Ver "></a>

<div id="capa" style="visibility:hidden">

<a href="#" onmouseout="ocultar(this,'capa'); return false">

aaaaaa<p>

bbbbb<br>

<font size=4 face="arial black" color=blue>cccccc</font><br>

<a href="http://rae.es">RAE</a><br>

<a href="http://elmundo.es"><input type="button" value=" El mundo "></a><br>

<a href="http://google.es"><input type="button" value=" Google "></a><br>

<font size=4 face="arial black" color=black>ddddd</font>

</a></div></a>

</html>

he probado poniendo <div> con capas nuevas, pero no da resultado o se hace inestable.
espero que me puedas ayudar

un saludo.

Kudsick · #46 (**permalink**) 18/07/2011, 16:32

Buenas.

Me ha servido muchisimo todo lo que han puesto aqui, solo tengo una duda.

He puesto todo como indican y me funciona pero el problema es que cuando inicia la pagina todo aparece oculto y ademas pues todo aparece separado, vamos cuando le doy mostrar aparece mi texto como debe de ser pero cual lo oculto todo el espacio que ocupa ese texto se queda vacio y lo que sigue esta mas abajo, quisiera que cuando le de ocultar lo que esta mas abajo se recorra hacia arriba para poder visualizar todo. Me explico mejor con ejemplo:

Asi esta mi pagina
----------------------------------------
-Mi enlace que oculta-
-mi texto que desaparece-
-Mi enlace que oculta 2-
-mi texto que desaparece-
-Mi enlace que oculta 3-
-mi texto que desaparece-
---------------------------------------------

Cuando lo oculto quiero que quede asi:

---------------------------------------------------
-Mi enlace que oculta 1-
-Mi enlace que oculta 2-
-Mi enlace que oculta 3-
--------------------------------------------------

pero en lugar de eso me queda asi:

----------------------------------------------------
-Mi enlace que oculta 1-

-Mi enlace que oculta 2-

-Mi enlace que oculta 3-

-------------------------------------------------------

Obvio que mi texto es basto por lo cual queda un espacio muy grande y no se ve cool, solo quiero que se recorre hacia arriba, de antemano muchas gracias y que buen foro es este! (no, no les hago la barba si no que me han sacado de muchas dudas).

RafaRG · #47 (**permalink**) 19/07/2011, 06:53

Cita:

Iniciado por Kudsick

Buenas.

Me ha servido muchisimo todo lo que han puesto aqui, solo tengo una duda.

He puesto todo como indican y me funciona pero el problema es que cuando inicia la pagina todo aparece oculto y ademas pues todo aparece separado, vamos cuando le doy mostrar aparece mi texto como debe de ser pero cual lo oculto todo el espacio que ocupa ese texto se queda vacio y lo que sigue esta mas abajo, quisiera que cuando le de ocultar lo que esta mas abajo se recorra hacia arriba para poder visualizar todo. Me explico mejor con ejemplo:

Asi esta mi pagina
----------------------------------------
-Mi enlace que oculta-
-mi texto que desaparece-
-Mi enlace que oculta 2-
-mi texto que desaparece-
-Mi enlace que oculta 3-
-mi texto que desaparece-
---------------------------------------------

Cuando lo oculto quiero que quede asi:

---------------------------------------------------
-Mi enlace que oculta 1-
-Mi enlace que oculta 2-
-Mi enlace que oculta 3-
--------------------------------------------------

pero en lugar de eso me queda asi:

----------------------------------------------------
-Mi enlace que oculta 1-

-Mi enlace que oculta 2-

-Mi enlace que oculta 3-

-------------------------------------------------------

Obvio que mi texto es basto por lo cual queda un espacio muy grande y no se ve cool, solo quiero que se recorre hacia arriba, de antemano muchas gracias y que buen foro es este! (no, no les hago la barba si no que me han sacado de muchas dudas).

ya se habló de ello antes, pero te pongo el código aquí:

Código PHP:

  <head>

<script>

function mostrar(enla) {

  obj = document.getElementById('oculto');

  obj.style.display = (obj.style.display == 'block') ? 'none' : 'block';

  enla.innerHTML = (enla.innerHTML == '-') ? '+' : '-';

}

</script>

</head>

<body>

<a href="#" onclick="mostrar(this); return false" />+</a>

<div id="oculto" style="display:none">

Este texto se verá cuando yo quiera

</div><br>

Este texto siempre se ve.

</body>

Kudsick · #48 (**permalink**) 19/07/2011, 11:03

Cita:

Iniciado por RafaRG

ya se habló de ello antes, pero te pongo el código aquí:

Código PHP:

  <head>

<script>

function mostrar(enla) {

  obj = document.getElementById('oculto');

  obj.style.display = (obj.style.display == 'block') ? 'none' : 'block';

  enla.innerHTML = (enla.innerHTML == '-') ? '+' : '-';

}

</script>

</head>

<body>

<a href="#" onclick="mostrar(this); return false" />+</a>

<div id="oculto" style="display:none">

Este texto se verá cuando yo quiera

</div><br>

Este texto siempre se ve.

</body>

Creo que no me di a entender, eso ya quedo y no tengo problema, lo que pasa es que cuando oculto el texto lo que esta fuera del <div> no se recorre hacia arriba, vamos que todo el texto que oculto simplemente desaparece y queda un espacio vacio muy grande y mas abajo esta el demas texto que no oculte, lo unico que quiero es saber en que estoy mal, pongo mi codigo

Código:

<script>
function mostrar(enla) {
obj = document.getElementById('oculto'+enla);
obj.style.visibility = (obj.style.visibility == 'hidden') ? 'visible' : 'hidden';
}
</script> 


<a href="#" onclick="mostrar('1'); return false" /><center><span style="color:white"><strong>Saludo</strong></a>

<div id="oculto1" style="visibility:hidden">
Aqui va mi texto que oculto...</div>

<a href="#" onclick="mostrar('2'); return false" /><center><span style="color:white"><strong>Manejo de beneficios.</strong></a>

<div id="oculto2" style="visibility:hidden">Mi otro texto para ocultar...</div>

En este caso digamos que tengo varios enlaces (no solo 2) que usare para ocultar mucho texto solo que los enlaces son "estaticos" cuando todo está oculto hay un gran espacio entre cada uno, lo que busco es que esten lo mas juntos hasta que hago que se muestre el texto.

Muchas gracias por tu respuesta y espero me hayan entendido =D

Salu2

Aijoona · #49 (**permalink**) 19/07/2011, 11:09

Definí las variables usando el var, caso contrario estás creando globales implicitas.

Código Javascript:

Ver original// Mal
function mostrar(enla) {
    obj = document.getElementById('oculto'+enla);
    obj.style.visibility = (obj.style.visibility == 'hidden') ? 'visible' : 'hidden';
}
 
// Bien
function mostrar(enla) {
    var obj = document.getElementById('oculto'+enla);
    obj.style.visibility = (obj.style.visibility == 'hidden') ? 'visible' : 'hidden';
}

Kudsick · #50 (**permalink**) 19/07/2011, 12:58

Cita:

Iniciado por Aijoona

Definí las variables usando el var, caso contrario estás creando globales implicitas.

Código Javascript:

Ver original// Mal
function mostrar(enla) {
    obj = document.getElementById('oculto'+enla);
    obj.style.visibility = (obj.style.visibility == 'hidden') ? 'visible' : 'hidden';
}
 
// Bien
function mostrar(enla) {
    var obj = document.getElementById('oculto'+enla);
    obj.style.visibility = (obj.style.visibility == 'hidden') ? 'visible' : 'hidden';
}

Ok, lo probe y no me funciono, pero he llegado a la solucion al estar probando lo que me dijiste, explico:

yo tenia esto:

Código:

<script>
function mostrar(enla) {
obj = document.getElementById('oculto'+enla);
obj.style.visibility = (obj.style.visibility == 'hidden') ? 'visible' : 'hidden';
}
</script> 


<a href="#" onclick="mostrar('1'); return false" /><center><span style="color:white"><strong>Saludo</strong></a>

<div id="oculto1" style="visibility:hidden">
Aqui va mi texto que oculto...</div>

<a href="#" onclick="mostrar('2'); return false" /><center><span style="color:white"><strong>Manejo de beneficios.</strong></a>

<div id="oculto2" style="visibility:hidden">Mi otro texto para ocultar...</div>

La cuestion aqui es que defini mal style="visibility:hidden" debia ser style="display:none" tanto en mi <script> como en mi <div> una vez cambiado todos mis divs sin problema me funcionó, pongo como lo deje:

Código:

<script>
function mostrar(enla) {
obj = document.getElementById('oculto'+enla);
obj.style.display = (obj.style.display == 'block') ? 'none' : 'block';
}
</script>


<a href="#" onclick="mostrar('1'); return false" /><center><span style="color:white"><strong>Saludo</strong></a>

<div id="oculto1" style="display:none">Aqui mi texto a esconder</div>

Con esto queda solucionado mi problema ahora mis enlaces esconden el texto y lo que no se esconde sube automaticamente, muchas gracias por la ayuda aunque no me haya funcionado con tu codigo me ayudo para detectar mi error. Gracias! un abrazo.

Kudsick · #51 (**permalink**) 20/07/2011, 14:49

Buenas.

Me gusto mucho como quedo, pero tengo una dudilla; ¿Se podria hacer que el texto en vez de que se muestre abajo se pueda mostrar a un lado? he buscado hacerlo por float en css pero no me funca, disculpen la molestia pero busco aprender y hacer muchas cosas, de antemano muchas gracias!.

Salu2

RafaRG · #52 (**permalink**) 22/07/2011, 04:28

Cita:

Iniciado por Kudsick

Buenas.

Me gusto mucho como quedo, pero tengo una dudilla; ¿Se podria hacer que el texto en vez de que se muestre abajo se pueda mostrar a un lado? he buscado hacerlo por float en css pero no me funca, disculpen la molestia pero busco aprender y hacer muchas cosas, de antemano muchas gracias!.

Salu2

mmm, la verdad es que no tengo ni idea... ¿has probado con los frames?

Kudsick · #53 (**permalink**) 23/07/2011, 15:59

Cita:

Iniciado por RafaRG

mmm, la verdad es que no tengo ni idea... ¿has probado con los frames?

Si, de hecho manejo 2 iframes, digamos que uno a la izquierda es una lista de enlaces (productos) i a la derecha cuando pulsas el enlace se abre una ficha tecnica, vamos manda a llamar a un html donde viene la info del producto, ese iframe de informacion tiene pestañas con diferentes datos, en esos datos es donde tengo los enlaces que oculto, pero mi idea era que esos enlaces estuvieran en la izquierda y la info saliera del lado derecho con el float si me esta saliendo pero aun no me convence.

Gracias por tu respuesta!

Salu2

RafaRG · #54 (**permalink**) 01/08/2011, 10:40

Cita:

Iniciado por Kudsick

Si, de hecho manejo 2 iframes, digamos que uno a la izquierda es una lista de enlaces (productos) i a la derecha cuando pulsas el enlace se abre una ficha tecnica, vamos manda a llamar a un html donde viene la info del producto, ese iframe de informacion tiene pestañas con diferentes datos, en esos datos es donde tengo los enlaces que oculto, pero mi idea era que esos enlaces estuvieran en la izquierda y la info saliera del lado derecho con el float si me esta saliendo pero aun no me convence.

Gracias por tu respuesta!

Salu2

¿y has probado con la etiqueta de posición? te pongo un ejemplo para que lo veas en tu bloc de notas:

Código PHP:

  <html>

 
<head>

<style type="text/css">

<!--

#menú {

float:right;

position:absolute; left:100px; top:0px;

text-align:left;

background-color:red;

width:250px;

}

#columna {

position:absolute; left:0px; top:0px;

text-align:center;

background-color:orange;

width:100px;

height:500px;

}

-->

</style>

<script>

function mostrar(enla) {

  obj = document.getElementById('menú');

  obj.style.display = (obj.style.display == 'block') ? 'none' : 'block';

  enla.innerHTML = (enla.innerHTML == 'Ocultar menú') ? 'Mostrar menú' : 'Ocultar menú';

}

</script>

</head>

<body>

<div id="columna">

<a href="#" onclick="mostrar(this); return false"/>Mostrar menú</a>

</div>

<div id="menú" style="display:none">

<ul>

<li><b>Menú que se muestra</b>

<li>Primer elemento del menú

<li>Segundo elemento del menú

<li>Tercer elemento del menú

</div>

</body>

</html>

es fácil. simplemente con position:absolute; left: px; top: px; indicas la posición del elemento escribiendo un número delante de cada px. por ejemplo si pongo position:absolute; left:100px; top:0px; , quiere decir que el elemento se situará a 100 píxeles de la izquierda y a 0 píxeles de arriba.
te pondré un tutorial sobre css. creo que te puede ser muy útil:
[URL="http://www.cristalab.com/tutoriales/tutorial-basico-de-css-c94l/"]Tutorial básico sobre CSS[/URL]
[URL="http://www.cristalab.com/tutoriales/tutorial-de-posicionamiento-y-layout-en-css-c111l/"]Tutorial de posicionamiento de CSS[/URL]
espero que esto te sirva.
un saludo

Kudsick · #55 (**permalink**) 03/08/2011, 17:27

Cita:

Iniciado por RafaRG

¿y has probado con la etiqueta de posición? te pongo un ejemplo para que lo veas en tu bloc de notas:

Código PHP:

  <html>

 
<head>

<style type="text/css">

<!--

#menú {

float:right;

position:absolute; left:100px; top:0px;

text-align:left;

background-color:red;

width:250px;

}

#columna {

position:absolute; left:0px; top:0px;

text-align:center;

background-color:orange;

width:100px;

height:500px;

}

-->

</style>

<script>

function mostrar(enla) {

  obj = document.getElementById('menú');

  obj.style.display = (obj.style.display == 'block') ? 'none' : 'block';

  enla.innerHTML = (enla.innerHTML == 'Ocultar menú') ? 'Mostrar menú' : 'Ocultar menú';

}

</script>

</head>

<body>

<div id="columna">

<a href="#" onclick="mostrar(this); return false"/>Mostrar menú</a>

</div>

<div id="menú" style="display:none">

<ul>

<li><b>Menú que se muestra</b>

<li>Primer elemento del menú

<li>Segundo elemento del menú

<li>Tercer elemento del menú

</div>

</body>

</html>

es fácil. simplemente con position:absolute; left: px; top: px; indicas la posición del elemento escribiendo un número delante de cada px. por ejemplo si pongo position:absolute; left:100px; top:0px; , quiere decir que el elemento se situará a 100 píxeles de la izquierda y a 0 píxeles de arriba.
te pondré un tutorial sobre css. creo que te puede ser muy útil:
[URL="http://www.cristalab.com/tutoriales/tutorial-basico-de-css-c94l/"]Tutorial básico sobre CSS[/URL]
[URL="http://www.cristalab.com/tutoriales/tutorial-de-posicionamiento-y-layout-en-css-c111l/"]Tutorial de posicionamiento de CSS[/URL]
espero que esto te sirva.
un saludo

Muchas Gracias!! si me sirvio ahora ya no se ve tan cutre la informacion y tiene orden, tambien gracias por las pagina me las voy a refinar para curtirme bien en esto.

Salu2

JARVI09 · #56 (**permalink**) 23/04/2013, 04:34

hola,

mi problema es que me hace la ocultacion del texto bien pero tengo q poner varias como muestra la imagen y el problema es que me crea espacios a razon del tamaño del texto que se oculta es decir si es pequeño el texto espacio pequeño y si es grande pues lo mismo, y claro queda realmente feo y no puedo dejarlo asi, me podeis dar alguna solucion? graciasss

lo que estoy utilizando es esto que vi en mensajes anteriores

Cita:

<html>
<head>
<script>
function mostrar(enla) {
obj = document.getElementById('oculto');
obj.style.visibility = (obj.style.visibility == 'hidden') ? 'visible' : 'hidden';
enla.innerHTML = (enla.innerHTML == '-') ? '+' : '-';
}
function mostrar2(enla) {
obj = document.getElementById('oculto2');
obj.style.visibility = (obj.style.visibility == 'hidden') ? 'visible' : 'hidden';
enla.innerHTML = (enla.innerHTML == '-') ? '+' : '-';
}
</script>
</head>
<body>
<a href="#" onclick="mostrar(this); return false" />+</a>
<div id="oculto" style="visibility:hidden">
<p>Este texto se verá cuando yo quiera </p>
<p>Este texto se verá cuando yo quiera </p>
<p>Este texto se verá cuando yo quiera </p>
<p>Este texto se verá cuando yo quiera </p>
<p>Este texto se verá cuando yo quiera </p>
</div>
<a href="#" onclick="mostrar2(this); return false" />+</a>
<div id="oculto2" style="visibility:hidden"> Este texto se verá cuando yo quiera</div>
</body>
</html>

RafaRG · #57 (**permalink**) 23/04/2013, 06:06

Creo que es porque te falta el ; después de hidden:
<div id="oculto" style="visibility:hidden;">
<div id="oculto2" style="visibility:hidden;">

JARVI09 · #58 (**permalink**) 23/04/2013, 06:10

Cita:

Iniciado por RafaRG

Creo que es porque te falta el ; después de hidden:
<div id="oculto" style="visibility:hidden;">
<div id="oculto2" style="visibility:hidden;">

se lo he puesto y no funciona, sigue saliendo el espacio tan grande como texto incluya para ocultar

RafaRG · #59 (**permalink**) 23/04/2013, 06:18

Prueba entonces lo siguiente: en vez de usar la propiedad visibility, utiliza display:
<html>
<head>
<script>
function mostrar(enla) {
obj = document.getElementById('oculto');
obj.style.display = (obj.style.display == 'none') ? 'block' : 'none';
enla.innerHTML = (enla.innerHTML == '-') ? '+' : '-';
}
function mostrar2(enla) {
obj = document.getElementById('oculto2');
obj.style.display = (obj.style.display == 'none') ? 'block' : 'none';
enla.innerHTML = (enla.innerHTML == '-') ? '+' : '-';
}
</script>
</head>
<body>
<a href="#" onclick="mostrar(this); return false" />+</a>
<div id="oculto" style="display:none">
<p>Este texto se verá cuando yo quiera </p>
<p>Este texto se verá cuando yo quiera </p>
<p>Este texto se verá cuando yo quiera </p>
<p>Este texto se verá cuando yo quiera </p>
<p>Este texto se verá cuando yo quiera </p>
</div>
<p> //para que los div no salgan en la misma línea
<a href="#" onclick="mostrar2(this); return false" />+</a>
<div id="oculto2" style="display:none"> Este texto se verá cuando yo quiera</div>
</body>
</html>

JARVI09 · #60 (**permalink**) 23/04/2013, 06:21

uyy casi casi, ahora sale ++ es decir una cosa seguida de la otra, necesito q sea una bajo la otra

+
+

si lo consigues te estare super agradecido tio