Foros del Web » Creando para Internet » CSS »

Texto en H1 dentro de una tabla o div

Estas en el tema de Texto en H1 dentro de una tabla o div en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 24/04/2009, 05:39
Avatar de Laika  
Fecha de Ingreso: octubre-2001
Mensajes: 1.376
Antigüedad: 16 años, 1 mes
Puntos: 0
Texto en H1 dentro de una tabla o div

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
  #2 (permalink)  
Antiguo 24/04/2009, 09:00
Avatar de adriancitov7  
Fecha de Ingreso: abril-2009
Ubicación: New York
Mensajes: 75
Antigüedad: 8 años, 7 meses
Puntos: 4
Respuesta: Texto en H1 dentro de una tabla o div

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

* {
margin:0;
padding:0;
}
  #3 (permalink)  
Antiguo 24/04/2009, 09:12
Avatar de Laika  
Fecha de Ingreso: octubre-2001
Mensajes: 1.376
Antigüedad: 16 años, 1 mes
Puntos: 0
Respuesta: Texto en H1 dentro de una tabla o div

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?

Última edición por Laika; 24/04/2009 a las 10:27
  #4 (permalink)  
Antiguo 24/04/2009, 09:24
 
Fecha de Ingreso: octubre-2008
Mensajes: 17
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Texto en H1 dentro de una tabla o div

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
  #5 (permalink)  
Antiguo 24/04/2009, 10:28
Avatar de Laika  
Fecha de Ingreso: octubre-2001
Mensajes: 1.376
Antigüedad: 16 años, 1 mes
Puntos: 0
Respuesta: Texto en H1 dentro de una tabla o div

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;
	}
  #6 (permalink)  
Antiguo 24/04/2009, 10:53
Avatar de adriancitov7  
Fecha de Ingreso: abril-2009
Ubicación: New York
Mensajes: 75
Antigüedad: 8 años, 7 meses
Puntos: 4
De acuerdo Respuesta: Texto en H1 dentro de una tabla o div

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

Última edición por adriancitov7; 24/04/2009 a las 11:05
  #7 (permalink)  
Antiguo 27/04/2009, 03:31
Avatar de Laika  
Fecha de Ingreso: octubre-2001
Mensajes: 1.376
Antigüedad: 16 años, 1 mes
Puntos: 0
Respuesta: Texto en H1 dentro de una tabla o div

Muchas gracias ahora si queda bien.
  #8 (permalink)  
Antiguo 27/04/2009, 11:52
Avatar de Laika  
Fecha de Ingreso: octubre-2001
Mensajes: 1.376
Antigüedad: 16 años, 1 mes
Puntos: 0
Respuesta: Texto en H1 dentro de una tabla o div

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?

Última edición por Laika; 27/04/2009 a las 14:19
  #9 (permalink)  
Antiguo 29/04/2009, 06:13
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Texto en H1 dentro de una tabla o div

Hola:

Cambia este código:

Código:
* {
margin:0;
padding:0;
}
por este otro:

Código:
* {
margin:0 auto;
padding:0;
}
Saludos.

  #10 (permalink)  
Antiguo 01/05/2009, 08:29
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Respuesta: Texto en H1 dentro de una tabla o div

tema trasladado desde (x)html
__________________
Javascript Códigos - Bambú difunde
  #11 (permalink)  
Antiguo 01/05/2009, 11:04
Avatar de adriancitov7  
Fecha de Ingreso: abril-2009
Ubicación: New York
Mensajes: 75
Antigüedad: 8 años, 7 meses
Puntos: 4
Respuesta: Texto en H1 dentro de una tabla o div

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!!
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 20:27.