Foros del Web » Creando para Internet » HTML »

Celdas con desplegable

Estas en el tema de Celdas con desplegable en el foro de HTML en Foros del Web. Buenas a todos: El caso es que he makeado un código muy simple de un cuadro de celdas que al darle a uno de los ...
  #1 (permalink)  
Antiguo 15/10/2010, 18:37
 
Fecha de Ingreso: abril-2009
Ubicación: En foros del web, normalmente en Web general, HTML y CSS.
Mensajes: 258
Antigüedad: 8 años, 8 meses
Puntos: 3
Celdas con desplegable

Buenas a todos:

El caso es que he makeado un código muy simple de un cuadro de celdas que al darle a uno de los nombres se despliega, fácil, lo que ocurre es que al desplegarse el texto no sale alineado a la izquierda sino que deja un espacio y a la hora de poner vídeos por ejemplo se alinea a la derecha lo cual le da una estética bastante fea. He intentado alinearlo a la izquierda con:

Código:
<p align=left>texto</p>
Pero sin resultado; aqui les dejo el código completo:

Código:
<table border="3" summary="Tabla">
<tr>
<td width="650" height="30"><dl class="codebox" style="cursor: pointer;" onclick="this.getElementsByTagName('div')[0].style.display=((this.getElementsByTagName('div')[0].style.display=='none')?'':'none');">
<dt><b><font color="#0B610B"><center>Título 1</center></font></b></dt><dd><div style="display:none;"><br />ESTE ES EL TEXTO QUE SE COLOCA A LA DERECHA</div></dd></dl></td>
</tr>
<tr>
<td width="500" height="30">Título 2</td>
</tr>
<tr>
<td width="500" height="30">Título 3</td>
</tr>
</table>
En principio el texto no queda mal de esa manera realmente, el problema surge cuando quieres poner un vídeo, un cuadro de pestañas u otras aplicaciones, entonces se pega a la derecha y queda feo.

Espero respuestas, saludos.
  #2 (permalink)  
Antiguo 15/10/2010, 20:32
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.825
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: Celdas con desplegable

No maquetes en tablas, si no es necesario,

Debes usar <p align="left">hola mundo</p>, si observas tu has omitido las comillas.

o aun mejor utiliza una clase coloca todo en una hoja de estilos.

Nota: la propiedad <font color=" "></font> esta fuera de uso, sugiero pases a leer estas guías http://librosweb.es
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #3 (permalink)  
Antiguo 15/10/2010, 22:22
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: Celdas con desplegable

Anonimo12


Creo que estás haciéndolo algo complejo y usando tags innecesarios, prueba esto:


Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es" >
  4. <title>Expandir</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <meta http-equiv="Content-Style-Type" content="text/css" />
  7. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  8. </head>
  9. <table border="3" summary="Tabla">
  10. <tr>
  11. <th width="650" height="30" align="center" style="cursor: pointer;"onclick="this.getElementsByTagName('div')[0].style.display=((this.getElementsByTagName('div')[0].style.display=='none')?'':'none');">
  12. Título 1<br />
  13. <div style="display:none; text-align: left"><br />ESTE ES EL TEXTO QUE SE COLOCA A LA DERECHA</div></th>
  14. </tr>
  15. <tr>
  16. <td width="500" height="30">Título 2</td>
  17. </tr>
  18. <tr>
  19. <td width="500" height="30">Título 3</td>
  20. </tr>
  21. </body>
  22. </html>


Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #4 (permalink)  
Antiguo 16/10/2010, 06:05
 
Fecha de Ingreso: abril-2009
Ubicación: En foros del web, normalmente en Web general, HTML y CSS.
Mensajes: 258
Antigüedad: 8 años, 8 meses
Puntos: 3
Respuesta: Celdas con desplegable

Cita:
Debes usar <p align="left">hola mundo</p>, si observas tu has omitido las comillas.
Me equivoqué al escribirlo aqui por las prisas, pero lo puse bien en la entrada.

Cita:
Nota: la propiedad <font color=" "></font> esta fuera de uso, sugiero pases a leer estas guías http://librosweb.es
Al compilar se ve el color correctamente por lo tanto en principio si funciona, de todas formas gracias por la guia le echaré un vistazo.

Empear, gracias por el código, ahora se alinea correctamente a la izquierda, sin embargo al publicarlo aparece encima del cuadro de celdas lo siguiente:

Código:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Es parte del código HTML que me has puesto, pero no comprendo por qué aparece visible en la entrada.

Quizá a veces añada más etiquetas de las necesarias (ya que no tengo mucha práctica); lo que quiero hacer exactamente es un cuadro de celdas que al darle a una celda se despliegue un vídeo; si hay otra manera de hacerlo más sencilla o correcta les agradecería que me comentaran, pero de momento me conformo con que me digan el por qué sale visible esa parte del código HTML en la entrada.

Gracias de nuevo a ambos, saludos.

PD: Una pregunta de principiante: ¿Las etiquetas "head" y "body" no van en la cabecera de la plantilla?, ¿o también es correcto usarlas en las entradas?.

Última edición por Anonimo12; 16/10/2010 a las 06:11
  #5 (permalink)  
Antiguo 16/10/2010, 12:36
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: Celdas con desplegable

Anonimo12:

a mi se me ejecuta bien, es probable que al copiar y pegar desde el foro se halla alterado algo, utilizá "ver original" y copia desde ahi

por las dudas, te dejo una demo funcionando

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

saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #6 (permalink)  
Antiguo 16/10/2010, 16:05
 
Fecha de Ingreso: abril-2009
Ubicación: En foros del web, normalmente en Web general, HTML y CSS.
Mensajes: 258
Antigüedad: 8 años, 8 meses
Puntos: 3
Respuesta: Celdas con desplegable

Gracias por el tiempo dedicado, enseguida lo compruebo y te cuento; os planteo dos dudas muy sencillas que me han surgido:

1- Al poner el cuadro de pestanas, como se usa la etiqueta <li>, me aparece el icono alado de los nombres de las pestanas; ¿cómo puedo hacer para que no salgan estos iconos? (los quiero usar para hacer listas pero no para el cuadro de pestanas).

2- He maqueado el siguiente código: Un cuadro de celdas que al darle a una celda se despliega y sale un cuadro de pestanas. La cosa es que al desplegar dos celdas a la vez, en uno de los cuadros de pestanas solo aparecen los nombres de las pestanas y no el contenido; cuando le das a una pestana sale el contenido de esta y desaparece el contenido del otro cuadro de pestanas desplegado (lioso eh? xD), les dejo una imagen:



Aqui el código HTML completo:

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es" >
<head>
<title>Expandir</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
</head>
<body>
<table border="2" summary="Tabla" bordercolor="#045FB4">
<tr>
<th width="645" height="30" align="center" style="cursor: pointer;"onclick="this.getElementsByTagName('div')[0].style.display=((this.getElementsByTagName('div')[0].style.display=='none')?'':'none');">
Título 1<br />
<div style="display:none; text-align: left"><br />
<ul class="tabs">
<li><a href="#tab1">Original - Subtítulos: Esp.</a></li>
<li><a href="#tab2">Español de España</a></li>
<li><a href="#tab3">Español latino</a></li>
</ul>

<div class="tab_container">
<div id="tab1" class="tab_content">
Contenido de la pestana 1
</div>
<div id="tab2" class="tab_content">
Contenido de la pestana 2
</div>
<div id="tab3" class="tab_content">
Contenido de la pestana 3
</div>
</div></div></th>
</tr>
<tr>


<th width="645" height="30" align="center" style="cursor: pointer;"onclick="this.getElementsByTagName('div')[0].style.display=((this.getElementsByTagName('div')[0].style.display=='none')?'':'none');">
Título 2<br />
<div style="display:none; text-align: left"><br />
<ul class="tabs">
<li><a href="#tab4">Original - Subtítulos: Esp.</a></li>
<li><a href="#tab5">Español de España</a></li>
<li><a href="#tab6">Español latino</a></li>
</ul>

<div class="tab_container">
<div id="tab4" class="tab_content">
Contenido de la pestana 1
</div>
<div id="tab5" class="tab_content">
Contenido de la pestana 2
</div>
<div id="tab6" class="tab_content">
Contenido de la pestana 3
</div>
</div></div></th>


</tr>
<tr>
<td width="500" height="30">Título 3</td>
</tr>
</table>
</body>
</html>
Otra pregunta, esto:

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es" >
Y esto:

Cita:
<head>
<title>Expandir</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
</head>
¿Son necesarios en el código HTML?, ami me funciona correctamente sin necesidad de ponerlo, sin embargo cuando lo dejo puesto me sale la línea antes citada visible al publicarlo.


Saludos.

Última edición por Anonimo12; 16/10/2010 a las 18:26
  #7 (permalink)  
Antiguo 16/10/2010, 21:11
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: Celdas con desplegable

Anonimo12:

Por lo que estoy viendo, tu aplicación es un poco mas complicada, no solo se trata de alinear el texto. Te sugiero que cambies el sistema usando capas

Te dejo dos ejemplos

uno ocultando y mostrando alternativamente y manteniendo visibles todas las capas abiertas
http://foros.emprear.com/mostrarcapas/mostrarcapas.html

otro, que al mostrar una ,oculta las restantes.
http://foros.emprear.com/mostrarcapas/titulos.html
revisa los codigos fuentes para detalles adicionales y el css.

Por lo de quitar el formato a las listas el css es
Código CSS:
Ver original
  1. list-style: none;

Y si te animas, podés buscar una alternativa que usa Jquery o Prototype (librerias de Jscript). Busca en google por "Vertical Acordion" o "Acordeon vertical"

todo el código extra en los encabezados es pata hacer una página válida segun los estándares, no es imprescindible, pero te recomiendo que dejes el meta para el charset.

saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #8 (permalink)  
Antiguo 18/10/2010, 07:11
 
Fecha de Ingreso: abril-2009
Ubicación: En foros del web, normalmente en Web general, HTML y CSS.
Mensajes: 258
Antigüedad: 8 años, 8 meses
Puntos: 3
Respuesta: Celdas con desplegable

Vale muchas gracias Empear, he conseguido simplificar el código con lo que me has aconsejado.

Un abrazo.
  #9 (permalink)  
Antiguo 18/10/2010, 13:06
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: Celdas con desplegable

Anonimo12:

Me alegro, te hago un comentario final, si utilizaste el primer método
http://foros.emprear.com/mostrarcapas/mostrarcapas.html
habia un pequeño detalle en el comportamiento que me molestaba (era que en la primera carga de la página, para que funcione el efecto, eran necesarios dos click, y no uno, para mostrar la capa oculta), tras algunas averiguaciones le hice una corrección

Código HTML:
Ver original
  1. <p><a href="#" onclick="mostrarcapa('capauno')">Mostrar-Ocultar div uno</a></p>
  2. <div id="capauno" style="display: none;">Contenido de div uno</div>
  3. <p><a href="#" onclick="mostrarcapa('capados')">Mostrar-Ocultar div dos</a></p>
  4. <div id="capados"  style="display: none;">Contenido de div dos</div>

como verás, el style="display:none;" ahora está definido "inline", es decir en la misma capa, el resto del formato sigue estando en el CSS. Así funciona mucho mejor

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

Etiquetas: celdas, desplegable
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 02:50.