Foros del Web - Ver Mensaje Individual

kseso? · #2 (**permalink**) 11/09/2009, 06:09

Hola CidDeMizar
Bien hallado en fdw.
Para solventar el tema de las imágenes (o enlaces) hasta que cumplas con el 30+30 puedes ponerlas sin el http://www para que no te lo rebote el foro. Tal que así: pagina.es

No se si este ejemplo se ajustará al 100% de lo que deseas:

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" lang="es-es">
<head>
<title>Kseso? jugando con css</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin: 0; padding:0; outline: none; border: 0;}
body {
    background-color: #444;
    margin:20px;
}
#galeria {
  position: relative;
  width: 40%;
  margin: 0 auto;
  clear: both;
  background-color:#F5F7F9;
  border-bottom:1px solid #A5A7AA;
  border-right:1px solid #A5A7AA;
  overflow: auto;
  padding: 10px;
}
#galeria p {
  font-size: 1em;
  font-family: monospace;
  text-align: justify;
  } 
.expositor {
  position: relative;
  border: 1px solid #A5A7AA;
  float:left;
  margin:0 5px 0;
  padding:5px;
  text-align:center;
}
.expositor ul {
  width: 100%;
  display: block;
  overflow: hidden;
  background: #FF6600;
  }
.expositor ul li {
  list-style-type: none;
  float: left;
}
.expositor ul li a {
  text-decoration: none;
  padding: 5px;
  font-size: .9em;
  display: block;
  border: 1px outset #333;
  background: #FF6600;
  color: #444;
}
.expositor ul li a:hover {
  border: 1px inset #333;
  background: #990000;
  color: #cdcdcd;
}
 
</style>
</head>
 
<body>
<div id="galeria">
<div class="expositor">
<a href="#" title="ver en grande"><img src="http://img299.imageshack.us/img299/9726/96830574.jpg" alt="jardín" /></a>
<ul>
  <li><a href="#" title="Ver ampliada">Ampliar</a></li>
  <li><a href="#" title="anterior">&le;</a></li>
  <li><a href="#" title="foto 1">1</a></li>
  <li><a href="#" title="foto 2">2</a></li>
  <li><a href="#" title="foto 3">3</a></li>
  <li><a href="#" title="foto 4">3</a></li>
  <li><a href="#" title="foto 4">5</a></li>
  <li><a href="#" title="siguiente">&ge;</a></li>
</ul>
</div>
<p>Todo el texto que quieras que se muestre junto a la imagen. Lorem ipsum dolor sit amet consectetuer amet interdum metus netus interdum. Maecenas consectetuer urna id tempus orci justo interdum convallis et egestas. Lobortis gravida Quisque Nam tellus Curabitur Phasellus Nam neque pretium gravida. Malesuada neque.<br/>
Todo el texto que quieras que se muestre junto a la imagen. Lorem ipsum dolor sit amet consectetuer amet interdum metus netus interdum. Maecenas consectetuer urna id tempus orci justo interdum convallis et egestas. Lobortis gravida Quisque Nam tellus Curabitur Phasellus Nam neque pretium gravida. Malesuada neque.
</p>
</div>
</body>

Bueno, lo pruebas y ya comentas.

Un saludo