Crear tabla o div de tamaño fijo

victorfz · #1 (**permalink**) 30/01/2010, 01:08

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.

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
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))
La imagen (el edificio) es una imagen intercambiable y no un fondo
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>

Impostor · #2 (**permalink**) 30/01/2010, 05:57

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¡¡

AlbertoGarcia · #3 (**permalink**) 30/01/2010, 07:59

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

Código HTML:

Ver original<!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=utf-8" />
 
        <title>Ejemplo Caja Noticias</title>
<style type="text/css">
        <!--
        /* Reset */
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background-color: #fff;
            font: 84% VerdaVerdana, Geneva, Arial, Helvetica, sans-serif;
            color: #000;
            margin: 1em; /* quitar */
        }
        
        /* Caja noticias */
        .highlights {
            width: 710px;
            height: 300px; /* Ancho y alto fijo */
            overflow: hidden; /* Se oculta el contenido desbordado */
            background-color: #efefef;
            border: 2px solid #b2b2b2;
        }
        
        .highlights h3 {
            height: 30px;
            margin: 6px 6px 30px 6px;
            line-height: 1.8em;
            letter-spacing: 1px;
            background: #598eb0 url(h3-bg.png) repeat-x left center; /* Imagen de 1x30px con degradado */
        }
        
        .highlights h3 span {
            background: url(bullet.gif) no-repeat left center; /* boliche */
            padding-left: 20px;
            margin-left: 10px;
        }
        
        .hl-col {
            width: 170px;
            float: left;
            margin-left: 30px;
            _margin-left: 15px; /* hack para el puñetero IE6 */
        }
        
        .hl-content {
            margin: 0 30px 60px 220px;
        }
        
        .hl-content p, .hl-col p {
            margin: 1em 0;
        }
        -->
    
</style>
    </head>
 
    <body>
        <div class="highlights">
            <h3><span>Highligts</span></h3>
            
            <div class="hl-col">
                <img src="pict.jpg" title="" alt="" />
                <p>Loem ipsum dolor</p>
                <p>Loem ipsum dolor</p>
            </div>
 
            <div class="hl-content">
                <p>Lorem ipsum dolor sit amet, consectetur
                adipiscing elit. Morbi venenatis, tellus eget
                elementum dictum, dolor enim varius enim, pharetra
                pretium eros lectus nec nisi. Aenean fringilla
                lorem sed massa imperdiet ac scelerisque nisi
                venenatis.</p>
                <a href="#" title="">Read more...</a>
 
                <p>Lorem ipsum dolor sit amet, consectetur
                adipiscing elit. In ac magna purus. Aliquam
                vehicula nulla at purus pellentesque nec malesuada
                sapien tincidunt. Vestibulum pretium volutpat eros,
                pulvinar sollicitudin dolor aliquam at.</p>
                <a href="#" title="">Read more...</a>
            </div>
        </div>
    </body>
</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!

victorfz · #4 (**permalink**) 30/01/2010, 16:15

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.

Calle7 · #5 (**permalink**) 18/10/2012, 14:52

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