Una bonita técnica para aprovechar mejor nuestro sidebar, cuando necesitamos en el resaltar una sección en especial, inclusive cuando se trata de nuestros patrocinadores. La idea es crear una lista de enlaces formado por un título, una descripción corta, y la imagen miniatura. Ver demo
CSS:
dl {
width: 250px;
font-size: 80%;
}
dt {
float: right;
width: 190px;
font-weight: bold;
font-family: Georgia, "Times New Roman", Times, serif;
}
dd {
margin: 0 0 15px 60px;
color: #666666;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
dd.image {
float: left;
margin: 0;
}
width: 250px;
font-size: 80%;
}
dt {
float: right;
width: 190px;
font-weight: bold;
font-family: Georgia, "Times New Roman", Times, serif;
}
dd {
margin: 0 0 15px 60px;
color: #666666;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
dd.image {
float: left;
margin: 0;
}
HTML:
<dl>
<dt><a href="http://www.elserver.com/">El Server</a></dt>
<dd class="image"><img src="icon_css.gif" alt="" width="50" height="50" /></dd>
<dd> Hosting WEB 2.0 que sobrepasa todas las expectativas... </dd>
<dt> <a href="http://POOLDIGITAL.net">POOLDIGITAL </a> </dt>
<dd class="image"><img src="icon_html.gif" alt="" width="50" height="50" /></dd>
<dd>Empresa de diseño web. Brasil. </dd>
<dt> </dt>
<dt><a href="http://www.spiga.com.mx/">SPIGA </a></dt>
<dd class="image"><img src="icon_accessibility.gif" alt="" width="50" height="50" /></dd>
<dd> Diseño Web Profesional Desarrollamos blogs, portales, podcast, e-mail marketing, etc… </dd>
</dl>
<dt><a href="http://www.elserver.com/">El Server</a></dt>
<dd class="image"><img src="icon_css.gif" alt="" width="50" height="50" /></dd>
<dd> Hosting WEB 2.0 que sobrepasa todas las expectativas... </dd>
<dt> <a href="http://POOLDIGITAL.net">POOLDIGITAL </a> </dt>
<dd class="image"><img src="icon_html.gif" alt="" width="50" height="50" /></dd>
<dd>Empresa de diseño web. Brasil. </dd>
<dt> </dt>
<dt><a href="http://www.spiga.com.mx/">SPIGA </a></dt>
<dd class="image"><img src="icon_accessibility.gif" alt="" width="50" height="50" /></dd>
<dd> Diseño Web Profesional Desarrollamos blogs, portales, podcast, e-mail marketing, etc… </dd>
</dl>
Loading ...
Listas en miniatura para publicidad o secciones de tu página web - Incubaweb 2.0 Bitácora del Software, Web 2.0, Beta, Windows, Linux, Mac OS X, Open Source, ....
15-10-2007
Permalink
[...] Vía | xyberneticos [...]
Cesarius
15-10-2007
Permalink
Sencillamente genial... queda muy bien, gracias por compartir el dato.
pebarco
15-10-2007
Permalink
Hey, se ve bastante interesante quisiera saber como hago para conectar estas sabidurias a mi Word Press, Gracias Bacan.
Juan Manuel
15-10-2007
Permalink
Articulo bastante interesante para hacerse una idea de las lista de imagenes, pero yo lo quiero sacar dinamicamente con PHP.
Alguien me podria ayudar en esto.
http://www.posicionempresarial.es/
http://www.d-w-m.es/