Me surje el mismo problema con celdas

[Anonimo12]

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.

[kalebra]

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

[Anonimo12]

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.

[kalebra]

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

[Anonimo12]

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.

[kalebra]

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.

[Anonimo12]

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.

[netovs]

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:

.art-PostHeader {
color:#000000;
font-family:Arial,Helvetica,Sans-Serif;
font-size:22px;
font-style:normal;
font-variant:normal;
font-weight:bold;
letter-spacing:normal;
line-height:inherit;
margin:0.2em 0;
padding:0;
text-align:center;
text-decoration:none;
text-indent:0;
text-transform:none;
word-spacing:normal;
}
 

Sí observas text-align:center; es donde debes modificar para alinear el texto a donde tu quieras.

[Anonimo12]

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.

[hugomig]

Ir a style.css, línea 992:
(.art-article th {
padding:7px;
text-align:center;
vertical-align:middle;
})
Cambiar center por left.

[emprear]

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

[Anonimo12]

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 =)