Texto en H1 dentro de una tabla o div

Laika · #1 (**permalink**) 24/04/2009, 04:39

Hola,

Tengo una frase que va en H1. A este texto le asigno un estilo para que no se vean tan grande:

Código:

<h1 class="textoencabficha">Mi Pagina Web</h1>

El problema es que en el navegador, la tabla que tiene un borde y un color de fondo se ve con más altura de lo que debería, no se ajusta su altura al texto con la clase que le he asignado.

He probado con una capa en lugar de con una tabla pero me pasa lo mismo.
¿Qué puedo hacer?

Gracias

adriancitov7 · #2 (**permalink**) 24/04/2009, 08:00

probaste resetear los elementos html con css y tambien colocar un DTD correcto para no tener problemas futuros

* {
margin:0;
padding:0;
}

Laika · #3 (**permalink**) 24/04/2009, 08:12

Este es el codigo de la tabla:

Código:

<table width="779" height="15" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#EBEAFF" class="tabla">
      
      <tr>
        <td width="744" height="13" class="texto"><h1 class="texto">Texto de prueba</h1></td>
      </tr>
    </table>

¿Cómo puedo solucionarlo para que la tabla se ajuste al tamaño de la letra del texto en H1 y no coja tanta altura?

FRAN00 · #4 (**permalink**) 24/04/2009, 08:24

deberías poner el css que le has aplicado al h1 para ver posibles errores...
también podrías probar a aumentar un poco la altura del td para que el h1 quepa sin problemas

Laika · #5 (**permalink**) 24/04/2009, 09:28

Este es el código del css de ese estilo:

Código:

.texto {
	FONT-SIZE: 12px;
	COLOR: #000000;
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
	TEXT-DECORATION: none;
	text-align: center;
	font-weight: bold;
	}

adriancitov7 · #6 (**permalink**) 24/04/2009, 09:53

estas indicando un height <table width="779" height="15" si solo pones width el height seria auto la altura si defines una altura para alinear el h1 verticalmente usas line-height :13px osea el alto definido de la caja contenedora

PD: tambien se usa height:auto; o overflow:auto; aunque creo que el primero viene por defecto.

prueba con este codigo

Código:

<html>
<head>
  <title>tabla</title>

<style type="text/css">
* {
  margin: 0;
  padding: 0;
}

.texto {
	FONT-SIZE: 12px;
	COLOR: #000000;
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
	TEXT-DECORATION: none;
	text-align: center;
	font-weight: bold;
	}


</style>
</head>

<body>
<table width="779" height="15" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#EBEAFF" class="tabla">

      <tr>
        <td width="744" height="13" class="texto"><h1 class="texto">Texto de prueba</h1></td>
      </tr>
    </table>

</body>

</html>

recuerda declarar un DTD , lo que soluciona tu problema es

* {
margin: 0;
padding: 0;
}

eso lo pones en tu css ya que oir defecto los elementos html tienen un margen y padding

Laika · #7 (**permalink**) 27/04/2009, 02:31

Muchas gracias ahora si queda bien.

Laika · #8 (**permalink**) 27/04/2009, 10:52

No me habia dado cuenta de que en firefox ahora al haber añadido eso en los estilos se ve toda la web alineada en el lado izquierdo de la pantalla y las tablas a la izquierda.

¿Puedo solucionarlo?

jomaruro · #9 (**permalink**) 29/04/2009, 05:13

Hola:

Cambia este código:

Código:

* {
margin:0;
padding:0;
}

por este otro:

Código:

* {
margin:0 auto;
padding:0;
}

Saludos.

tunait · #10 (**permalink**) 01/05/2009, 07:29

tema trasladado desde (x)html

adriancitov7 · #11 (**permalink**) 01/05/2009, 10:04

quizas no enlazaste bien las clases o ID o no aplicaste los estilos requeridos . prueba con esto

Código:

<html>
<head>
<style type="text/css">

/*Con esto solo reseteo los rellenos y margenes que traen algunos elementos HTML  */
* {
  margin: 0;
  padding: 0;
}

/* si deseas alinear tu contenedor en ese caso veo que es la tabla tienes que especificar un ancho y luego puedes centrarlo con */

#table_principal {
     width:779px;
     margin:0px auto;
     border:0px;
     background-color: #EBEAFF;
}

/*la clase .texto la aplicarias a los textos que quieres centrar es un ejemplo para ser mas especifico aplicar a un h1 dentro de una tabla con una id #table_principal como este ejemplo */

#table_principal td h1.texto {
    text-align:center;
    font-size: 12px;
	COLOR: #000;
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
}
</style>
</head>
<body>
<table id="table_principal" cellpadding="0" cellspacing="0">
<tr>
<td><h1 class="texto">Texto de prueba</h1></td>
</tr>
</table>
</body>
</body>
</html>

Suerte!!