Foros del Web - Ver Mensaje Individual

kseso? · #4 (**permalink**) 20/08/2009, 07:04

Bueno, pues siendo así, mira a ver si esto te sirve como inspiración.

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>kseso? jugando con css</title>
<style type="text/css">
* {margin: 0; padding: 0; border: 0; outline: none; position: relative;}
body {background: #fff;} 
#izquierda {background: transparent url(http://img508.imageshack.us/img508/5843/izquierda.jpg) repeat-y left 0;
width: 70%;
margin: 20px auto 0;
}
#centro { background: url(http://img508.imageshack.us/img508/3259/derecha.jpg) repeat-y right 0;
padding: 0 6px;}
p {margin: 10px 20px; text-align: justify;}
a {text-decoration: none; padding: 10px 0;}
a span.mas {display: none;}
a:focus, a:active {display: block;}
a:focus span.mas, a:active span.mas {display: block;color: #000;}
</style>
</head>
<body>
<div id="izquierda">
<div id="centro">
<p>Lorem ipsum dolor sit amet consectetuer Cras tempus semper est quam. Fusce quis nibh nunc leo interdum consectetuer condimentum nibh vestibulum magna. Magna Sed nunc sagittis lorem hac consequat euismod feugiat adipiscing Nulla. At Aenean ullamcorper Nunc auctor Phasellus pede felis Pellentesque pretium eros. Neque scelerisque dui metus Ut sit quis ligula Nulla Sed mollis. Auctor at ut orci nisl fringilla egestas Curabitur tristique consectetuer id. Enim et et nisl euismod ipsum Sed metus est Suspendisse ligula. Aliquam justo ac interdum interdum justo sem ac Pellentesque eros tempus. Eu sociis condimentum justo pede Aliquam pretium at non lacus Mauris. Sociis elit et leo Curabitur tellus elit tempus pharetra eu laoreet. Leo enim et Integer nec orci accumsan Vestibulum non sed pede. Lorem elit mi Sed auctor at sed diam Sed elit vitae. Tortor Pellentesque.</p>
<p>Molestie pellentesque arcu lacus pellentesque eu Morbi feugiat amet lacus urna. Sed Nullam amet at hac orci habitasse a et at.
<br />
<a href="#">Pulsar para que crezca el texto y los bordes laterales -->
<span class="mas">
Nunc auctor Phasellus pede felis Pellentesque pretium eros. Neque scelerisque dui metus Ut sit quis ligula Nulla Sed mollis. Auctor at ut orci nisl fringilla egestas Curabitur tristique consectetuer id. Enim et et nisl euismod ipsum Sed metus est Suspendisse ligula. Aliquam justo ac interdum interdum justo sem ac Pellentesque eros tempus. Eu sociis condimentum justo pede Aliquam pretium at non lacus Mauris. Sociis elit et leo Curabitur tellus elit tempus pharetra eu laoreet. Leo enim et Integer nec orci accumsan Vestibulum non sed pede.
</span>
</a>
</p>
</div>
</div>
</body>
</html>

Creditos: el texto que se expande de www.araudi.net (para que inventar la rueda otra vez?

)

Un saludo