Foros del Web » Creando para Internet » HTML »

Reproducir imagenes

Estas en el tema de Reproducir imagenes en el foro de HTML en Foros del Web. Hola tengo un problema, es que tengo una imagen, pero quiero que salgan 3 imagenes en la misma columna, miren ahora les explico: Tengo esta ...
  #1 (permalink)  
Antiguo 23/06/2010, 20:47
 
Fecha de Ingreso: mayo-2010
Mensajes: 185
Antigüedad: 7 años, 7 meses
Puntos: 2
Reproducir imagenes

Hola tengo un problema, es que tengo una imagen, pero quiero que salgan 3 imagenes en la misma columna, miren ahora les explico:

Tengo esta imagen, pero quiero que salgan tres por lado.

Original:



Imagen modificada con photoshop:



Quiero que quede como la segunda imagen que salgan tres pero no se como hacerlo, aqui esta el codigo de la pagina:

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Silverlight</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<script type="text/javascript">var clear="images/clear.gif";</script>
<script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->
<style type="text/css">
<!--
.Estilo1 {color: #ffffff}
.Estilo2 {color: #000000}
.Estilo5 {font-size: 9px}
-->
</style>
</head>
<body>


<!-- BEGIN wrapper -->
<div id="wrapper">
  <!-- BEGIN header -->
  <div id="header">
    <h1><a href="http://www.free-css.com/">Silverlight</a></h1>
    <div class="ad"><a href="http://www.free-css.com/"><img src="images/ad468x60.gif" alt="" /></a></div>
    <div class="break"></div>
    <ul>
      <li><a href="http://www.free-css.com/" class="Estilo1">Home</a></li>
      <li><a href="about.html"><span class="Estilo1">Registro </span></a></li>
      <li><a href="page.html"><span class="Estilo1">Login</span></a></li>
      <li><a href="contact.html" class="Estilo1">Contacto</a></li>
    </ul>
    <form action="http://www.free-css.com/">
      <input type="text" name="s" id="s" value="" />
      <button type="submit">Search</button>
    </form>
  </div>
  <!-- END header -->
  <!-- BEGIN body -->
  <div id="body">
    <!-- BEGIN content -->
    <div id="content">
      <!-- begin post -->
<!--AQUI ESTA LA IMAGEN -->
      <div class="first post">
        <div class="l"> <a href="http://www.free-css.com/"><img src="images/_thumb3.jpg" alt="" /></a>
          <p>&nbsp;</p>
        </div>
        
        </div>
      <!-- end post -->
      <!-- begin post -->
      <div class="post">
          <div class="l"> 
            <p><a href="http://www.free-css.com/"><img src="images/_thumb1.jpg" alt="" /></a> <span class="Estilo5"><strong>January 13, 2009</strong></span></p>
            <p><span class="Estilo5"><strong>Posted by:</strong> <a href="http://www.free-css.com/">admin</a><strong>Categories:</strong> <a href="http://www.free-css.com/">News</a><strong>Tags:</strong> <a href="http://www.free-css.com/">concert</a>, <a href="http://www.free-css.com/">motion</a>, <a href="http://www.free-css.com/">products</a></span></p>
        </div>
        <div class="r">
          <h2><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet</a></h2>
          <p><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet</a>, consectetur adipiscing elit. Nullam at lorem. Curabitur tincidunt lectus a urna. In adipiscing ornare libero. Maecenas convallis risus et felis. Fusce ut odio ac orci elementum tempus. Suspendisse sapien leo, gravida eu, luctus id, luctus eu, sem. Integer urna diam, tincidunt ultricies, malesuada sed, faucibus id, lacus. Pellentesque quam nulla, molestie eu, imperdiet in, placerat eu, enim. Aenean tempor, leo a ornare viverra, purus felis rhoncus enim, et condimentum urna enim quis justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce et enim. Nam vitae justo. Duis volutpat mauris eu quam. Fusce sed tortor et sem convallis aliquam.</p>
          <p>Duis vel neque. In ac lorem et urna semper pharetra. Integer rhoncus mauris vitae erat. Aliquam dui. Duis porta, nibh sit amet rutrum vehicula, est diam rutrum magna, et lobortis orci arcu a elit. Sed ac nibh. Sed ut odio. Vivamus porttitor orci sed nunc. Morbi tempus venenatis nibh. Donec erat nulla, gravida et, semper sed, pulvinar ut, ante. Praesent vitae nisl ac libero volutpat pulvinar. Mauris fringilla rutrum nisl. Vestibulum egestas elit in lectus. Proin aliquet consectetur leo. Mauris ullamcorper enim nec tortor.</p>
          </div>
      </div>
      <!-- end post -->
      <!-- begin post -->
      <div class="post">
        <div class="l"> <a href="http://www.free-css.com/"><img src="images/_thumb2.jpg" alt="" /></a>
          <p class="Estilo5"><strong>January 13, 2009</strong></p>
          <p class="Estilo5"><strong>Posted by:</strong> <a href="http://www.free-css.com/">admin</a></p>
          <p class="Estilo5"><strong>Categories:</strong> <a href="http://www.free-css.com/">News</a></p>
          <p><span class="Estilo5"><strong>Tags:</strong> <a href="http://www.free-css.com/">concert</a>, <a href="http://www.free-css.com/">motion</a>, <a href="http://www.free-css.com/">products</a></span></p>
        </div>
        <div class="r">
          <h2><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet</a></h2>
          <p><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet</a>, consectetur adipiscing elit. Nullam at lorem. Curabitur tincidunt lectus a urna. In adipiscing ornare libero. Maecenas convallis risus et felis. Fusce ut odio ac orci elementum tempus. Suspendisse sapien leo, gravida eu, luctus id, luctus eu, sem. Integer urna diam, tincidunt ultricies, malesuada sed, faucibus id, lacus. Pellentesque quam nulla, molestie eu, imperdiet in, placerat eu, enim. Aenean tempor, leo a ornare viverra, purus felis rhoncus enim, et condimentum urna enim quis justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce et enim. Nam vitae justo. Duis volutpat mauris eu quam. Fusce sed tortor et sem convallis aliquam.</p>
          <p>Duis vel neque. In ac lorem et urna semper pharetra. Integer rhoncus mauris vitae erat. Aliquam dui. Duis porta, nibh sit amet rutrum vehicula, est diam rutrum magna, et lobortis orci arcu a elit. Sed ac nibh. Sed ut odio. Vivamus porttitor orci sed nunc. Morbi tempus venenatis nibh. Donec erat nulla, gravida et, semper sed, pulvinar ut, ante. Praesent vitae nisl ac libero volutpat pulvinar. Mauris fringilla rutrum nisl. Vestibulum egestas elit in lectus. Proin aliquet consectetur leo. Mauris ullamcorper enim nec tortor.</p>
          </div>
      </div>
      <!-- end post -->
    </div>
    <!-- END content -->
    <!-- BEGIN sidebar -->
    <div id="sidebar">
      <!-- begin about  -->
      <div class="about"> <a href="http://www.free-css.com/"><img src="images/about.jpg" alt="" /></a>
        <p><span class="Estilo2"><strong>Matt Mullenweg</strong> Duis vel neque. In ac lorem et urna semper pharetra. Integer rhoncus mauris vitae erat. Aliquam dui. Duis porta, nibh sit amet rutrum vehicula, est diam rutrum magna, et lobortis orci arcu a elit. Sed ac nibh. Sed ut odio.</span></p>
      </div>
      <!-- end about  -->
      <!-- begin categories -->
      <h2>Categories</h2>
      <ul>
        <li><a href="http://www.free-css.com/">Blog Updates</a></li>
        <li><a href="http://www.free-css.com/">Environment</a></li>
        <li><a href="http://www.free-css.com/">Graphics</a></li>
        <li><a href="http://www.free-css.com/">Internet</a></li>
        <li><a href="http://www.free-css.com/">Recent News</a></li>
      </ul>
      <!-- end categories -->
      <!-- begin archives -->
      <h2>Archives</h2>
      <ul>
        <li><a href="http://www.free-css.com/">March 2009</a></li>
        <li><a href="http://www.free-css.com/">February 2009</a></li>
        <li><a href="http://www.free-css.com/">January 2009</a></li>
        <li><a href="http://www.free-css.com/">December 2008</a></li>
      </ul>
      <!-- end archives -->
      <!-- begin blogroll -->
      <h2>Blogroll</h2>
      <ul>
        <li><a href="http://www.free-css.com/">Greg's Gallery</a></li>
        <li><a href="http://www.free-css.com/">WebDev Forums</a></li>
        <li><a href="http://www.free-css.com/">Photo Gallery</a></li>
        <li><a href="http://www.free-css.com/">Video Studio</a></li>
      </ul>
      <!-- end blogroll -->
      <!-- begin meta -->
      <h2>Meta</h2>
      <ul>
        <li><a href="http://www.free-css.com/">Login</a></li>
        <li><a href="http://www.free-css.com/">Entries RSS</a></li>
        <li><a href="http://www.free-css.com/">Comments RSS</a></li>
      </ul>
      <!-- end meta -->
    </div>
    <!-- END sidebar -->
    <div class="break"></div>
  </div>
  <!-- END body -->
  <!-- BEGIN footer -->
  <div id="footer">
    <p>Copyright &copy; 2009 - <a href="http://www.free-css.com/">Website Name</a> &middot; All Rights Reserved | Template by: <a href="http://www.wpthemedesigner.com/">WordPress Designer</a> | Get More <a href="http://www.free-css.com/">Free CSS Templates</a> </p>
  </div>
  <!-- END footer -->
</div>
<!-- END  -->
</body>
</html> 

Última edición por Arcana; 23/06/2010 a las 20:53
  #2 (permalink)  
Antiguo 23/06/2010, 20:58
 
Fecha de Ingreso: mayo-2010
Mensajes: 185
Antigüedad: 7 años, 7 meses
Puntos: 2
Respuesta: Reproducir imagenes

he intentado pegar esto, pero sale muy juntas.

Código HTML:
<div class="l"> <a href="http://www.free-css.com/"><img src="images/_thumb3.jpg" alt="" /></a>
          <p>&nbsp;</p>
        </div> 
Sale asi:

  #3 (permalink)  
Antiguo 23/06/2010, 22:39
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 9 meses
Puntos: 1314
Respuesta: Reproducir imagenes

Mira los float en CSS. Con un Float left a las imágenes para colocarlas una a lado de la otra y margin para separarlas.

Saludos
__________________
Grupo Telegram Docker en Español
  #4 (permalink)  
Antiguo 24/06/2010, 16:37
 
Fecha de Ingreso: junio-2010
Mensajes: 6
Antigüedad: 7 años, 5 meses
Puntos: 1
Respuesta: Reproducir imagenes

te recomeindo que agregues una tabla de 3 columnas con un margen grueso, y puedes alinear la imagen izquierda a la izquierda, la imagen del centro al centro y la derecha a la derecha (valga la expresion)

por cierto, muy bonito diseño.
  #5 (permalink)  
Antiguo 24/06/2010, 16:44
 
Fecha de Ingreso: enero-2010
Mensajes: 95
Antigüedad: 7 años, 11 meses
Puntos: 6
Respuesta: Reproducir imagenes

La tabla es la solución más sencilla pero float con css es más limpio y se ve igual en todos los navegadores.
  #6 (permalink)  
Antiguo 24/06/2010, 22:05
Avatar de SPAWN3000  
Fecha de Ingreso: marzo-2008
Ubicación: Bogota
Mensajes: 858
Antigüedad: 9 años, 9 meses
Puntos: 15
Respuesta: Reproducir imagenes

Revisa grid 960...

Etiquetas: imagenes, reproducir
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:21.