Foros del Web » Creando para Internet » CSS »

Crear tabla o div de tamaño fijo

Estas en el tema de Crear tabla o div de tamaño fijo en el foro de CSS en Foros del Web. Hola normalmente me dedico mas a la programación PHP y el HTML y CSS me lo dan hecho, pero ahora me ha tocado crear una ...
  #1 (permalink)  
Antiguo 30/01/2010, 01:08
 
Fecha de Ingreso: abril-2002
Mensajes: 186
Antigüedad: 21 años, 11 meses
Puntos: 2
Crear tabla o div de tamaño fijo

Hola normalmente me dedico mas a la programación PHP y el HTML y CSS me lo dan hecho, pero ahora me ha tocado crear una tabla y estoy teniendo serios problemas

Quiero hacer una tabla que se quede como la foto que adjunto (bueno el fondo en lugar de ser gris que sea blanco)
http://desarrollo-paginas-web.net/temporal/ejemplo.jpg
Con varias particularidades.
  1. Cuando el contenido de la tabla (abajo a la derecha) de descorda el texto debe de permanecer oculto y la tabla no cambia el tamaño
  2. El título es una imagen en el fondo del td y de debe de escribir texto sobre ella (como se aprecia en la foto))
  3. La imagen (el edificio) es una imagen intercambiable y no un fondo
  4. El alto y ancho de la tabla es fijo
No se si hacerlo con una tabla o con div pero en ambos casos siempre me da algún tipo de problema y al final no hay manera.
Pongo el último código el cual el fallo que me da es que por alguna extraña razón la tabla es mucho mas alta que el contenido que hay en ella lo cual queda con un aspecto catastrófico.
Agradecería sugerencias o códigos de ejemplo que me puedan ayudar.
Un saludo.



Código HTML:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>

<style type="text/css" media="print,screen">
<!--
p {
margin: 0 auto;
text-indent: 0.5cm;
}
.textoContenido {
	overflow: hidden;
	height: 150px;
}
-->
</style>
</head>

<body>



<table width="961" height="527" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td  colspan="2" background="barraPDF.JPG">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;T&iacute;tulo del producto </td>
    <td width="0%" rowspan="3"><img src="tansparente.png" width="1" height="466" /></td>
  </tr>
  <tr>
    <td width="28%" height="506"  valign="top" ><p><img src="escayola72.jpg" width="150" height="112" /></p>
    <p>&nbsp;</p>
    <p>Categoria: Tiras</p>
    <p>Precio 25&euro;</p>
    <p>&nbsp; </p></td>
    <td width="72%" valign="top">

    <div class="textoContenido">
	<p>hoala</p>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
	</div>    
	</td>
  </tr>

</table>
<br /><br /><br /><br />





</body>
</html>



Última edición por victorfz; 30/01/2010 a las 01:09 Razón: Modifico para agregar el HTML/CSS completo
  #2 (permalink)  
Antiguo 30/01/2010, 05:57
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 15 años, 7 meses
Puntos: 20
Respuesta: Crear tabla o div de tamaño fijo

Buenas,

yo me olvidaría de las tablas y realizaría toda la maquetación con div, se puede conseguir todos los requisitos que tu precisas.

Este tutorial te puede ayudar.

Saludos¡¡
__________________
Revisa las FAQ's antes de disparar.
  #3 (permalink)  
Antiguo 30/01/2010, 07:59
 
Fecha de Ingreso: mayo-2009
Ubicación: Fuerteventura
Mensajes: 324
Antigüedad: 14 años, 10 meses
Puntos: 19
Respuesta: Crear tabla o div de tamaño fijo

Hola! Hoy me has pillado aburrido y te lo he montado, pero no te lo tomes por costumbre ;)

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5.     <head>
  6.         <meta http-equiv="Content-Type" content=
  7.        "text/html; charset=utf-8" />
  8.  
  9.         <title>Ejemplo Caja Noticias</title>
  10. <style type="text/css">
  11.         <!--
  12.         /* Reset */
  13.        * {
  14.            margin: 0;
  15.            padding: 0;
  16.        }
  17.        
  18.        body {
  19.            background-color: #fff;
  20.             font: 84% VerdaVerdana, Geneva, Arial, Helvetica, sans-serif;
  21.            color: #000;
  22.             margin: 1em; /* quitar */
  23.        }
  24.        
  25.         /* Caja noticias */
  26.         .highlights {
  27.             width: 710px;
  28.             height: 300px; /* Ancho y alto fijo */
  29.             overflow: hidden; /* Se oculta el contenido desbordado */
  30.             background-color: #efefef;
  31.             border: 2px solid #b2b2b2;
  32.         }
  33.        
  34.         .highlights h3 {
  35.             height: 30px;
  36.             margin: 6px 6px 30px 6px;
  37.             line-height: 1.8em;
  38.             letter-spacing: 1px;
  39.             background: #598eb0 url(h3-bg.png) repeat-x left center; /* Imagen de 1x30px con degradado */
  40.         }
  41.        
  42.         .highlights h3 span {
  43.             background: url(bullet.gif) no-repeat left center; /* boliche */
  44.             padding-left: 20px;
  45.             margin-left: 10px;
  46.         }
  47.        
  48.         .hl-col {
  49.             width: 170px;
  50.             float: left;
  51.             margin-left: 30px;
  52.             _margin-left: 15px; /* hack para el puñetero IE6 */
  53.         }
  54.        
  55.         .hl-content {
  56.             margin: 0 30px 60px 220px;
  57.         }
  58.        
  59.         .hl-content p, .hl-col p {
  60.             margin: 1em 0;
  61.         }
  62.        -->
  63.    
  64.     </head>
  65.  
  66.     <body>
  67.         <div class="highlights">
  68.             <h3><span>Highligts</span></h3>
  69.            
  70.             <div class="hl-col">
  71.                 <img src="pict.jpg" title="" alt="" />
  72.                 <p>Loem ipsum dolor</p>
  73.                 <p>Loem ipsum dolor</p>
  74.             </div>
  75.  
  76.             <div class="hl-content">
  77.                 <p>Lorem ipsum dolor sit amet, consectetur
  78.                 adipiscing elit. Morbi venenatis, tellus eget
  79.                 elementum dictum, dolor enim varius enim, pharetra
  80.                 pretium eros lectus nec nisi. Aenean fringilla
  81.                 lorem sed massa imperdiet ac scelerisque nisi
  82.                 venenatis.</p>
  83.                 <a href="#" title="">Read more...</a>
  84.  
  85.                 <p>Lorem ipsum dolor sit amet, consectetur
  86.                 adipiscing elit. In ac magna purus. Aliquam
  87.                 vehicula nulla at purus pellentesque nec malesuada
  88.                 sapien tincidunt. Vestibulum pretium volutpat eros,
  89.                 pulvinar sollicitudin dolor aliquam at.</p>
  90.                 <a href="#" title="">Read more...</a>
  91.             </div>
  92.         </div>
  93.     </body>
  94. </html>

El código está comentado para que te sirva de aprendizaje, de todos modos sigue el tutorial que te ha puesto Impostor, no es tan duro como parece, es cuestión de invertir tiempo, como todo.

Salud!
  #4 (permalink)  
Antiguo 30/01/2010, 16:15
 
Fecha de Ingreso: abril-2002
Mensajes: 186
Antigüedad: 21 años, 11 meses
Puntos: 2
Respuesta: Crear tabla o div de tamaño fijo

Hola gracias AlbertoGarcia e Impostor por responder y a Mikmoro por el manual.
Me he leido el manual y por fín tengo claros los atributos basicos de los div y como posicinarlos.
De todas formas hare unos pequeños cambios en el código de AlbertoGarcia que por cierto se ha quedado muy muy bien y lo pondré en mi aplicación.
Mañana empezare con la segunda parte del tutorial que estay muy bien.
gracias de nuevo y saludos.
  #5 (permalink)  
Antiguo 18/10/2012, 14:52
 
Fecha de Ingreso: enero-2008
Ubicación: Lima
Mensajes: 127
Antigüedad: 16 años, 2 meses
Puntos: 0
Respuesta: Crear tabla o div de tamaño fijo

Hey muy buen aporte AlbertoGarcia, me ayudo a solucionar un problema. GRACIAS

Etiquetas: fijo, tamaño, tablas
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 15:42.