Celdas con desplegable

Anonimo12 · #1 (**permalink**) 15/10/2010, 17:37

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.

ArturoGallegos · #2 (**permalink**) 15/10/2010, 19:32

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

emprear · #3 (**permalink**) 15/10/2010, 21:22

Anonimo12

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

Código HTML:

Ver original<!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="3" summary="Tabla">
<tr>
<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');">
Título 1<br />
<div style="display:none; text-align: left"><br />ESTE ES EL TEXTO QUE SE COLOCA A LA DERECHA</div></th>
</tr>
<tr>
<td width="500" height="30">Título 2</td>
</tr>
<tr>
<td width="500" height="30">Título 3</td>
</tr>
</table>
</body>
</html>

Saludos

Anonimo12 · #4 (**permalink**) 16/10/2010, 05:05

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?.

emprear · #5 (**permalink**) 16/10/2010, 11:36

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

Anonimo12 · #6 (**permalink**) 16/10/2010, 15:05

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.

emprear · #7 (**permalink**) 16/10/2010, 20:11

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 originallist-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

Anonimo12 · #8 (**permalink**) 18/10/2010, 06:11

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

Un abrazo.

emprear · #9 (**permalink**) 18/10/2010, 12:06

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<p><a href="#" onclick="mostrarcapa('capauno')">Mostrar-Ocultar div uno</a></p>
<div id="capauno" style="display: none;">Contenido de div uno</div>
<p><a href="#" onclick="mostrarcapa('capados')">Mostrar-Ocultar div dos</a></p>
<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