Foros del Web » Creando para Internet » HTML »

Me surje el mismo problema con celdas

Estas en el tema de Me surje el mismo problema con celdas en el foro de HTML en Foros del Web. Buenas a todos: Pues hace unas semanas me resolvieron esto pero no sé como volvió a aparecer el mismo error de nuevo. El caso es ...
  #1 (permalink)  
Antiguo 31/10/2010, 07:47
 
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
Me surje el mismo problema con celdas

Buenas a todos:

Pues hace unas semanas me resolvieron esto pero no sé como volvió a aparecer el mismo error de nuevo. El caso es que el texto de las celdas me aparece centrado y no a la izquierda (es decir, donde pone "Título 1" y "Título 2" en el código que dejo abajo), y si uso <p align="right">Título 1</p> la celda se agranda mucho y encima en Internet Explorer deja de funcionar la etiqueta <font color>. En resumen, ¿cómo hago para que "Título 1", "Título 2", etc. aparezca alineado a la izquierda sin que surjan esos errores?. Este código es una tabla de celdas que al darle a una celda se despliega y aparece un cuadro de pestañas.



Código:
<table border="2" summary="Tabla" bordercolor="#045FB4">


<tr>
<th width="645" height="30" style="cursor: pointer;"onclick="this.getElementsByTagName('div')[0].style.display=((this.getElementsByTagName('div')[0].style.display=='none')?'':'none');"><font color="#C66613"><b>Título 1</b></font><br/><div style="display:none; text-align: left"><br />


<ul class="tabs">
<li><a href="#tab1">Japonés Sub. 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">
En proceso.
</div>
<div id="tab2" class="tab_content">
En proceso.
</div>
<div id="tab3" class="tab_content">
En proceso.
</div>
</div></div></th>
</tr>


<tr>
<th width="645" height="30" style="cursor: pointer;"onclick="this.getElementsByTagName('div')[0].style.display=((this.getElementsByTagName('div')[0].style.display=='none')?'':'none');"><font color="#C66613">Título 2</font><br/><div style="display:none; text-align: left"><br />


<ul class="tabs">
<li><a href="#tab4">Japonés Sub. 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">
En proceso.
</div>
<div id="tab5" class="tab_content">
En proceso.
</div>
<div id="tab6" class="tab_content">
En proceso.
</div>
</div></div></th>
</tr>


</table>
Gracias por adelantado, un abrazo.
  #2 (permalink)  
Antiguo 31/10/2010, 08:13
Avatar de kalebra  
Fecha de Ingreso: mayo-2010
Ubicación: Marbella
Mensajes: 44
Antigüedad: 7 años, 7 meses
Puntos: 5
Respuesta: Me surje el mismo problema con celdas

Pues lo unico que deberias de hacer es añadir esto
Código HTML:
align="left"
a los <th>
Código HTML:
<th align="left" width="645"
Vamos a mi me funciona, saludos
__________________
- La única causa perdida, es la que se abandona.
  #3 (permalink)  
Antiguo 31/10/2010, 08:34
 
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: Me surje el mismo problema con celdas

Gracias pero no me funciona ni en Firefox ni en IE, no sé si es por el PC o yo que sé. Si alguien más puede comprobarlo añadiendo align="left" y comentar si le va se lo agradecería.

Espero más ideas, saludos.
  #4 (permalink)  
Antiguo 31/10/2010, 09:30
Avatar de kalebra  
Fecha de Ingreso: mayo-2010
Ubicación: Marbella
Mensajes: 44
Antigüedad: 7 años, 7 meses
Puntos: 5
Respuesta: Me surje el mismo problema con celdas

Acabo de probar en IE8, Chrome y FireFox 3, y en los tres se ve bien.

Navegador IE8


Navegador FireFox 3


Navegador Chrome


Es raro que no funcione, ese codigo lleva mas lineas, mira a ver si es que alguna otra linea afecta a los th, no se, no se me ocurre otra cosa.

Saludos
__________________
- La única causa perdida, es la que se abandona.
  #5 (permalink)  
Antiguo 31/10/2010, 11:21
 
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: Me surje el mismo problema con celdas

De verdad que he revisado el código de arriba a abajo y no tengo ni idea de por qué se centra. El código que coloco en la entrada es el mismo que he puesto en el primer mensaje (copy-paste).

Os dejo la página donde estoy haciendo las pruebas y me decís si encontráis el error: http://www.tus-animes.com/?p=676

Saludos.
  #6 (permalink)  
Antiguo 31/10/2010, 13:05
Avatar de kalebra  
Fecha de Ingreso: mayo-2010
Ubicación: Marbella
Mensajes: 44
Antigüedad: 7 años, 7 meses
Puntos: 5
Respuesta: Me surje el mismo problema con celdas

Pues te tengo que dar la razon, por separado no da problemas, cuando lo juntas todo efectivamente, el texto se centra.

Lo unico que he conseguido es localizar la hoja donde esta el fallo, que es la hoja de estilos de WordPress "style.css", que tienes alojada en tu servidor.

Tiene alguna linea que le afecta a los th pero por mas que he estado mirando no encuentro la linea, ahora me tengo que ir, despues si puedo le sigo echando un vistazo, o bien, mira a ver si te suena a ti alguna linea y que este en conflicto con tu codigo.

Saludos y espero que tengas suerte.
__________________
- La única causa perdida, es la que se abandona.
  #7 (permalink)  
Antiguo 31/10/2010, 13:25
 
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: Me surje el mismo problema con celdas

Muchas gracias Kalebra, lo seguiré mirando pero llevo un buen rato y no he encontrado nada (aun asi mis conocimientos de html y css son un poco limitados). Si facilitaría las cosas el colocar aqui la hoja de estilos "style.css" me decís y la pongo.

Si alguien encuentra el error se agradece, saludos.

PD: Creo que este es el código en el style.css que hace referencia a <th>:

Código:
.art-article table, table.art-article .art-article tr, .art-article th, .art-article td
{
	background-color:Transparent;
}

.art-article th, .art-article td
{
	padding: 2px;
	border: solid 1px #43A1F4;
	vertical-align: top;
	text-align:left;
}

.art-article th
{
	text-align: center;
	vertical-align: middle;
	padding: 7px;
}

/* Finish tables */
He probado a cambiar:

Código:
.art-article th
{
	text-align: center;
	vertical-align: middle;
	padding: 7px;
}
Por:

Código:
.art-article th
{
	text-align: left;
	vertical-align: middle;
	padding: 7px;
}
Pero sigue igual; espero alguna respuesta.

Última edición por Anonimo12; 31/10/2010 a las 13:43
  #8 (permalink)  
Antiguo 31/10/2010, 15:14
Avatar de netovs  
Fecha de Ingreso: enero-2010
Ubicación: Mexico DF
Mensajes: 150
Antigüedad: 7 años, 11 meses
Puntos: 9
Respuesta: Me surje el mismo problema con celdas

Saludos, creo que puedo ayudarte:

Ve al editor de código para abrir el archivo CSS correspondiente al tema que estas empleando en tu Wordpress.
busca esta clase: .art-PostHeader como verás la clase define varios para metros del contenido de cada POST.

Código CSS:
Ver original
  1. .art-PostHeader {
  2. color:#000000;
  3. font-family:Arial,Helvetica,Sans-Serif;
  4. font-size:22px;
  5. font-style:normal;
  6. font-variant:normal;
  7. font-weight:bold;
  8. letter-spacing:normal;
  9. line-height:inherit;
  10. margin:0.2em 0;
  11. padding:0;
  12. text-align:center;
  13. text-decoration:none;
  14. text-indent:0;
  15. text-transform:none;
  16. word-spacing:normal;
  17. }

Sí observas text-align:center; es donde debes modificar para alinear el texto a donde tu quieras.
__________________
No por que a mi nadie me ayudo a aprender a programar yo no les voy a ayudar ...

Comunicación Web
  #9 (permalink)  
Antiguo 01/11/2010, 08:07
 
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: Me surje el mismo problema con celdas

Buenas, he mirado lo que me has dicho y encontré el código:

Código:
.art-PostHeader
{
	text-decoration:none;
	margin: 0.2em 0;
	padding: 0;
	font-weight:normal;
	font-style:normal;
	letter-spacing:normal;
	word-spacing:normal;
	font-variant:normal;
	text-decoration:none;
	font-variant:normal;
	text-transform:none;
	text-align:left;
	text-indent:0;
	line-height:inherit;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 22px;
font-style: normal;
font-weight: bold;
text-align: center;
	color: #000000;
}
Sin embargo como verás en la primera línea que marco ya estaba definido que se alineara el texto a la izquierda mientras que en la segunda aunque lo cambie por "text-align: left;" sigue sin alinearse el texto de las celdas (aunque creo que este código que me has señalado no habla de las celdas sino del texto de la entrada en si).

Gracias por el tiempo dedicado, espero más ideas, saludos.

Edito:

Me he dado cuenta de una pequeña cosa; usando una tabla de celdas con <td></td> no me surje ese problema, el texto de la celda se alinea a la izquierda de forma normal y sin embargo si pongo etiquetas para centrarlo no funcionan:

Código:
<table border="2" summary="Tabla">
<tr>
<td width="645" height="30"" style="cursor: pointer;" onclick="this.getElementsByTagName('div')[0].style.display=((this.getElementsByTagName('div')[0].style.display=='none')?'':'none');">Capitulo 1<br /><div style="display:none;"><br />


<ul class="tabs">
<li><a href="#tab1">Japonés Sub. 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">
En proceso.
</div>
<div id="tab2" class="tab_content">
En proceso.
</div>
<div id="tab3" class="tab_content">
En proceso.
</div>
</div></div></td>



</tr>


<tr>
<td width="645" height="30"" style="cursor: pointer;" onclick="this.getElementsByTagName('div')[0].style.display=((this.getElementsByTagName('div')[0].style.display=='none')?'':'none');">Capitulo 2<br /><div style="display:none;"><br />


<ul class="tabs">
<li><a href="#tab4">Japonés Sub. 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">
En proceso.
</div>
<div id="tab5" class="tab_content">
En proceso.
</div>
<div id="tab6" class="tab_content">
En proceso.
</div>
</div></div></td>



</tr>
</table>


Mientras que si uso <th></th> adquiere valores automáticamente sin definirlos con ninguna etiqueta, es decir, se centra el texto y se pone en negrita.

Código:
<table border="2" summary="Tabla">

<tr>

<th width="645" height="30"" style="cursor: pointer;" onclick="this.getElementsByTagName('div')[0].style.display=((this.getElementsByTagName('div')[0].style.display=='none')?'':'none');">Capitulo 1<br /><div style="display:none;"><br />


<ul class="tabs">
<li><a href="#tab1">Japonés Sub. 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">
En proceso.
</div>
<div id="tab2" class="tab_content">
En proceso.
</div>
<div id="tab3" class="tab_content">
En proceso.
</div>
</div></div></th>

</tr>


<tr>
<th width="645" height="30"" style="cursor: pointer;" onclick="this.getElementsByTagName('div')[0].style.display=((this.getElementsByTagName('div')[0].style.display=='none')?'':'none');">Capitulo 2<br /><div style="display:none;"><br />


<ul class="tabs">
<li><a href="#tab4">Japonés Sub. 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">
En proceso.
</div>
<div id="tab5" class="tab_content">
En proceso.
</div>
<div id="tab6" class="tab_content">
En proceso.
</div>
</div></div></th>

</tr>


</table>


Podría usar <td></td> si, pero cuando despligo, lo que hay en el interior se pega al borde de la tabla y crear un diseño muy feo.

Espero que con esta información alguien sepa a que se debe el que se centre el texto y se ponga en negrita cuando uso <th></th> para la tabla de celdas.

Última edición por Anonimo12; 01/11/2010 a las 09:10
  #10 (permalink)  
Antiguo 01/11/2010, 10:42
 
Fecha de Ingreso: octubre-2010
Ubicación: Córdoba, Argentina
Mensajes: 11
Antigüedad: 7 años, 1 mes
Puntos: 1
Respuesta: Me surje el mismo problema con celdas

Ir a style.css, línea 992:
(.art-article th {
padding:7px;
text-align:center;
vertical-align:middle;
})
Cambiar center por left.
  #11 (permalink)  
Antiguo 01/11/2010, 17: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: Me surje el mismo problema con celdas

Anonimo12:

Yo trabaje sobre el link ( http://www.tus-animes.com/?p=676 ) que dejaste de prueba (que dice Capitulo 1 en lugar de título) lo hice directamente sobre el html utilizando el editor HTML de la extensión webdeveloper de firefox y funciona


En dónde dice
<th style="cursor: pointer;"onclick="this.getElementsByTagName('div')[0].style.display=((this.getElementsByTagName('div')[0].style.display=='none')?'':'none');" height="30" width="645">Capitulo 1

Debes poner

<th style="cursor: pointer;text-align: left;" onclick="this.getElementsByTagName('div')[0].style.display=((this.getElementsByTagName('div')[0].style.display=='none')?'':'none');" height="30" width="645">Capitulo 1

en negrita el agregado

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #12 (permalink)  
Antiguo 01/11/2010, 18:07
 
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: Me surje el mismo problema con celdas

Muchas gracias, por si alguien pudiera tener la misma duda puedo decir que ambas soluciones funcionan (la de empear y la de hugomig), pero añado que si se realiza desde el CSS no hay que definirlo luego en el código html, sin embargo la etiqueta <th></th> está específicamente creada para adquirir los valores de negrita y centrado (como un título en la tabla de celdas).

Gracias de nuevo por las respuestas, saludos =)

Etiquetas: celdas
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 03:22.