Tema: Crear tabla o div de tamaño fijo
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 30/01/2010, 07:59
AlbertoGarcia
 
Fecha de Ingreso: mayo-2009
Ubicación: Fuerteventura
Mensajes: 324
Antigüedad: 15 años, 7 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. </style>
  65.     </head>
  66.  
  67.     <body>
  68.         <div class="highlights">
  69.             <h3><span>Highligts</span></h3>
  70.             
  71.             <div class="hl-col">
  72.                 <img src="pict.jpg" title="" alt="" />
  73.                 <p>Loem ipsum dolor</p>
  74.                 <p>Loem ipsum dolor</p>
  75.             </div>
  76.  
  77.             <div class="hl-content">
  78.                 <p>Lorem ipsum dolor sit amet, consectetur
  79.                 adipiscing elit. Morbi venenatis, tellus eget
  80.                 elementum dictum, dolor enim varius enim, pharetra
  81.                 pretium eros lectus nec nisi. Aenean fringilla
  82.                 lorem sed massa imperdiet ac scelerisque nisi
  83.                 venenatis.</p>
  84.                 <a href="#" title="">Read more...</a>
  85.  
  86.                 <p>Lorem ipsum dolor sit amet, consectetur
  87.                 adipiscing elit. In ac magna purus. Aliquam
  88.                 vehicula nulla at purus pellentesque nec malesuada
  89.                 sapien tincidunt. Vestibulum pretium volutpat eros,
  90.                 pulvinar sollicitudin dolor aliquam at.</p>
  91.                 <a href="#" title="">Read more...</a>
  92.             </div>
  93.         </div>
  94.     </body>
  95. </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!