Código fuente para la parte 3

...
<-- Aqui empieza el container 'content' -->
<div id="content">

  <-- Aquí empieza la caja Teaser -->
  <div id="t-box">
  <h4>Novedad</h4>
		
    <-- Aquí empieza el container 'teaser' -->
    <div class="teaser">	
        <div class="t-head">
        <strong>Título1</strong>
        </div>
        <div class="t-txt">
        Texto y otros contenidos 
	inline para los Teasers.
        </div>				
    </div>
    <-- El contenedor 'teaser' se puede repetir tantas veces como se quiera. -->		
	
  </div>
  <-- Aquí termina la caja Teaser -->  
	
...
Contenido del contenedor 'content'
...
</div>
<-- Aquí termina el container 'content' -->

Las instrucciones correspondientes en la hoja de estilo correspondiente:

/* La caja Teaser */
#t-box {
float: right;
display: block;
}

/* opcional */
#t-box h4 {
letter-spacing: 1px;
color: #666;
}

.teaser {
width: 180px;
background-color: #e7d5b5;
border: solid 1px #09c;
margin: 1px 1px 10px 10px;
}

.t-head {
font-family: 'Trebuchet MS',sans-serif;
background-color: #09c;
color: #e0e0e0;
padding: 3px;
margin: 0;
font-size: 85%;
}

.t-txt {
font-family: Arial,sans-serif;
color: #000000;
padding: 5px;
line-height: 150%;
font-size: 75%;
}

Inicio página | Volver a la parte 3

Índice Capítulo 4 | Contenido material adicional