Cómo agregar un cuadro con sinopsis, imagen y contador

Allan Cano · 14 May 2014

Buenas noches

anda:

Alguien sabe cómo poner esté cuadro, el cuadro contiene una sinopsis, una imagen y un contador de visualizaciones :welcoming:

Esté es el sitio en donde mire el cuadro, Mantenimiento

Ya mire el código fuente de la pagina pero no me sale, me da un error, y no sé si copie códigos de más o de menos,

SpeWard · 14 May 2014

eso se puede hacer con css y html
porque no le preguntas al dueño?

Allan Cano · 14 May 2014

Spew dijo:
eso se puede hacer con css y html
porque no le preguntas al dueño?

Es qué es más difícil contactar al dueño, aquí en este foro saben mucho :welcoming: y me han ayudado bastante en cosas incluso más difíciles

parrax · 15 May 2014

Es un div y dentro tiene tablas, es fácil realizar sólo hay que sacar el css y luego armar el div class con sus tablas correspondientes para cada sección..

xcite · 15 May 2014

Aquí está la estructura, ya solo ponle los colores que quieras con CSS:

HTML:

<div class="table_info">
<table width="1030" border="0" cellpadding="0" cellspacing="4">
  <tbody><tr>
    <td width="770"><h1>El sorprendente hombre araña 2 Online</h1> </td>
    <td width="268" align="right">
    <div style="position:relative;">
    <div class="nube_info" style="display:none;">
<div class="title">Te Gusta esta pelicula?</div>
<div class="msg">Dále una valoración</div>
<div class="arrow"></div>
</div>
<div itemscope="" itemtype="http://schema.org/Article">
<meta itemprop="name" content="Ver Película El sorprendente hombre araña 2 Online Gratis (2014)">
<meta itemprop="url" content="http://www.yaske.to/es/pelicula/0005348/ver-the-amazing-spider-man-2-online.html">
<meta itemprop="description" content="Peter Parker lleva una vida muy ocupada, compaginando su tiempo entre su papel como Spider-Man, acabando con los malos, y en el instituto con la persona a la que quiere, Gwen. Peter no ve el momento de graduarse. No ha olvidado la promesa que le hizo al padre de Gwen de protegerla, manteniéndose lejos de ella, pero es una promesa que simplemente no puede cumplir. Las cosas cambiarán para Peter cuando aparece un nuevo villano, Electro, y un viejo amigo, Harry Osborn, regresa, al tiempo que descubre nuevas pistas sobre su pasado.">

<div id="rating_star_movie" style="padding-right:20px;">
 <div class="star_rating" title="Votaciones sobre esta pelicula">
   <ul class="star" default="98.6" style="float:none; left:auto;">
        <li class="curr" style="width: 98.6%;"></li>
       </ul>
 </div>
<div style="display: none;" itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating">
<meta itemprop="bestRating" content="5">
<meta itemprop="ratingValue" content="4.93">
<meta itemprop="ratingCount" content="3440">
<meta itemprop="reviewCount" content="3440"></div>
    <span id="ratingValue">4.93</span> media de: <span id="reviewCount">3440</span> votos
</div>
</div>
</div>
    </td>
    </tr>
  <tr>
    <td class="subtitle"><span>Titulo original:</span> The Amazing Spider-Man 2 - <span>2014</span></td>
    <td align="right"><h3>Visto: 280 110 veces</h3></td>
    </tr>
  </tbody></table>
<script>
(function(id){
 $('#rating_star_movie .star_rating > .star').on('mousemove click', function(e){
  if (e.offsetX == undefined) e.offsetX = e.originalEvent.layerX;
  var stars = 5;
  var percent = ((e.offsetX / this.offsetWidth) * 100).toFixed(2);
   exactitud = (percent / (stars * 2)).toString().split('.');
  if (e.type == 'mousemove' && percent > 100) return false; 
  if (Number(exactitud[1]) > 0)
   exactitud = Number(exactitud[0]) + 1;
  exactitud = (exactitud / 2).toFixed(0);
  percent = (exactitud * (stars * 2)) * 2;
  var valor = (percent * ((stars * 2) / 100)) / 2;
  $(this).find('li').css('width', percent + '%');
  if (e.type == 'click'){
   $(this).attr('default', percent);
   if (valor < 3)
        valor = 3;
   $.get('http://www.yaske.to/api/rating/', { value: valor, alt: 'json', id: id, stars: 5}, function(data){
    $('#ratingValue').text(data.avg_star);
    var total = Number($('#reviewCount').text());
    $('#reviewCount').text(total + 1);
   }, 'json');
  }
 }).on('mouseout', function(){
  $(this).find('li').css('width', $(this).attr('default') + '%');
 });   
})('86cc6c835d9786a5cf9f66d66ae60ff3');
</script>
<div class="hr"></div>
<table width="1030" border="0" cellpadding="0" cellspacing="20">
  <tbody><tr>
    <td width="135" height="195" align="center" valign="top"><img src="http://www.yaske.to/upload/images/thumb3-l_1872181_d677e7ce-1399765174.jpg" width="192" height="272" style="border: 1px solid #299a0b;"></td>

    <td width="355" align="left" valign="top" class="sinopsis"><span>Sinopsis</span><div class="hr" style="margin-bottom:10px; margin-top:10px;"></div>Peter Parker lleva una vida muy ocupada, compaginando su tiempo entre su papel como Spider-Man, acabando con los malos, y en el instituto con la persona a la que quiere, Gwen. Peter no ve el momento de graduarse. No ha olvidado la promesa que le hizo al padre de Gwen de protegerla, manteniéndose lejos de ella, pero es una promesa que simplemente no puede cumplir. Las cosas cambiarán para Peter cuando aparece un nuevo villano, Electro, y un viejo amigo, Harry Osborn, regresa, al tiempo que descubre nuevas pistas sobre su pasado.</td>
    <td width="480" align="left" valign="top"><table width="474" border="0" cellpadding="0" cellspacing="4">
      <tbody><tr>
        <td width="133" align="right" valign="top">Genero : </td>
        <td width="329" align="left" valign="top"><a href="http://www.yaske.to/es/peliculas/genero/action">Accion</a><a href="http://www.yaske.to/es/peliculas/genero/adventure">Aventura</a><a href="http://www.yaske.to/es/peliculas/genero/sci_fi">ciencia Ficcion</a></td>
        </tr>
      <tr>
        <td align="right" valign="top">Directores : </td>
        <td align="left" valign="top"><a rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Marc+Webb&amp;button=&amp;title=Especial%3ABuscar" target="_blank">Marc Webb</a></td>
        </tr>
      <tr>
        <td align="right" valign="top">Escritores : </td>
        <td align="left" valign="top"><a rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Alex+Kurtzman&amp;button=&amp;title=Especial%3ABuscar" target="_blank">Alex Kurtzman</a><a rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Roberto+Orci&amp;button=&amp;title=Especial%3ABuscar" target="_blank">Roberto Orci</a></td>
        </tr>
      <tr>
        <td align="right" valign="top">Reparto : </td>
        <td align="left" valign="top"><a rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Andrew+Garfield&amp;button=&amp;title=Especial%3ABuscar" target="_blank">Andrew Garfield</a><a rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Emma+Stone&amp;button=&amp;title=Especial%3ABuscar" target="_blank">Emma Stone</a><a rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Jamie+Foxx&amp;button=&amp;title=Especial%3ABuscar" target="_blank">Jamie Foxx</a><a rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Dane+DeHaan&amp;button=&amp;title=Especial%3ABuscar" target="_blank">Dane DeHaan</a><a rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Campbell+Scott&amp;button=&amp;title=Especial%3ABuscar" target="_blank">Campbell Scott</a><a rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Embeth+Davidtz&amp;button=&amp;title=Especial%3ABuscar" target="_blank">Embeth Davidtz</a><a rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Colm+Feore&amp;button=&amp;title=Especial%3ABuscar" target="_blank">Colm Feore</a><a rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Paul+Giamatti&amp;button=&amp;title=Especial%3ABuscar" target="_blank">Paul Giamatti</a><a rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Sally+Field&amp;button=&amp;title=Especial%3ABuscar" target="_blank">Sally Field</a><a rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Martin+Sheen&amp;button=&amp;title=Especial%3ABuscar" target="_blank">Martin Sheen</a><a rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Chris+Zylka&amp;button=&amp;title=Especial%3ABuscar" target="_blank">Chris Zylka</a><a rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Denis+Leary&amp;button=&amp;title=Especial%3ABuscar" target="_blank">Denis Leary</a><a rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Frank+Deal&amp;button=&amp;title=Especial%3ABuscar" target="_blank">Frank Deal</a><a rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Marton+Csokas&amp;button=&amp;title=Especial%3ABuscar" target="_blank">Marton Csokas</a><a rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Stan+Lee&amp;button=&amp;title=Especial%3ABuscar" target="_blank">Stan Lee</a></td>
      </tr>
    </tbody></table>


    </td>
  </tr>
  </tbody></table>
</div>

Allan Cano · 15 May 2014

xcite dijo:

Aquí está la estructura, ya solo ponle los colores que quieras con CSS:

HTML:

<div class="table_info">
<table width="1030" border="0" cellpadding="0" cellspacing="4">
  <tbody><tr>
    <td width="770"><h1>El sorprendente hombre araña 2 Online</h1> </td>
    <td width="268" align="right">
    <div style="position:relative;">
    <div class="nube_info" style="display:none;">
<div class="title">Te Gusta esta pelicula?</div>
<div class="msg">Dále una valoración</div>
<div class="arrow"></div>
</div>
<div itemscope="" itemtype="http://schema.org/Article">
<meta itemprop="name" content="Ver Película El sorprendente hombre araña 2 Online Gratis (2014)">
<meta itemprop="url" content="http://www.yaske.to/es/pelicula/0005348/ver-the-amazing-spider-man-2-online.html">
<meta itemprop="description" content="Peter Parker lleva una vida muy ocupada, compaginando su tiempo entre su papel como Spider-Man, acabando con los malos, y en el instituto con la persona a la que quiere, Gwen. Peter no ve el momento de graduarse. No ha olvidado la promesa que le hizo al padre de Gwen de protegerla, manteniéndose lejos de ella, pero es una promesa que simplemente no puede cumplir. Las cosas cambiarán para Peter cuando aparece un nuevo villano, Electro, y un viejo amigo, Harry Osborn, regresa, al tiempo que descubre nuevas pistas sobre su pasado.">

<div id="rating_star_movie" style="padding-right:20px;">
 <div class="star_rating" title="Votaciones sobre esta pelicula">
   <ul class="star" default="98.6" style="float:none; left:auto;">
        <li class="curr" style="width: 98.6%;"></li>
       </ul>
 </div>
<div style="display: none;" itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating">
<meta itemprop="bestRating" content="5">
<meta itemprop="ratingValue" content="4.93">
<meta itemprop="ratingCount" content="3440">
<meta itemprop="reviewCount" content="3440"></div>
    <span id="ratingValue">4.93</span> media de: <span id="reviewCount">3440</span> votos
</div>
</div>
</div>
    </td>
    </tr>
  <tr>
    <td class="subtitle"><span>Titulo original:</span> The Amazing Spider-Man 2 - <span>2014</span></td>
    <td align="right"><h3>Visto: 280 110 veces</h3></td>
    </tr>
  </tbody></table>
<script>
(function(id){
 $('#rating_star_movie .star_rating > .star').on('mousemove click', function(e){
  if (e.offsetX == undefined) e.offsetX = e.originalEvent.layerX;
  var stars = 5;
  var percent = ((e.offsetX / this.offsetWidth) * 100).toFixed(2);
   exactitud = (percent / (stars * 2)).toString().split('.');
  if (e.type == 'mousemove' && percent > 100) return false; 
  if (Number(exactitud[1]) > 0)
   exactitud = Number(exactitud[0]) + 1;
  exactitud = (exactitud / 2).toFixed(0);
  percent = (exactitud * (stars * 2)) * 2;
  var valor = (percent * ((stars * 2) / 100)) / 2;
  $(this).find('li').css('width', percent + '%');
  if (e.type == 'click'){
   $(this).attr('default', percent);
   if (valor < 3)
        valor = 3;
   $.get('http://www.yaske.to/api/rating/', { value: valor, alt: 'json', id: id, stars: 5}, function(data){
    $('#ratingValue').text(data.avg_star);
    var total = Number($('#reviewCount').text());
    $('#reviewCount').text(total + 1);
   }, 'json');
  }
 }).on('mouseout', function(){
  $(this).find('li').css('width', $(this).attr('default') + '%');
 });   
})('86cc6c835d9786a5cf9f66d66ae60ff3');
</script>
<div class="hr"></div>
<table width="1030" border="0" cellpadding="0" cellspacing="20">
  <tbody><tr>
    <td width="135" height="195" align="center" valign="top"><img src="http://www.yaske.to/upload/images/thumb3-l_1872181_d677e7ce-1399765174.jpg" width="192" height="272" style="border: 1px solid #299a0b;"></td>

    <td width="355" align="left" valign="top" class="sinopsis"><span>Sinopsis</span><div class="hr" style="margin-bottom:10px; margin-top:10px;"></div>Peter Parker lleva una vida muy ocupada, compaginando su tiempo entre su papel como Spider-Man, acabando con los malos, y en el instituto con la persona a la que quiere, Gwen. Peter no ve el momento de graduarse. No ha olvidado la promesa que le hizo al padre de Gwen de protegerla, manteniéndose lejos de ella, pero es una promesa que simplemente no puede cumplir. Las cosas cambiarán para Peter cuando aparece un nuevo villano, Electro, y un viejo amigo, Harry Osborn, regresa, al tiempo que descubre nuevas pistas sobre su pasado.</td>
    <td width="480" align="left" valign="top"><table width="474" border="0" cellpadding="0" cellspacing="4">
      <tbody><tr>
        <td width="133" align="right" valign="top">Genero : </td>
        <td width="329" align="left" valign="top"><a rel="nofollow" href="http://www.yaske.to/es/peliculas/genero/action">Accion</a><a rel="nofollow" href="http://www.yaske.to/es/peliculas/genero/adventure">Aventura</a><a rel="nofollow" href="http://www.yaske.to/es/peliculas/genero/sci_fi">ciencia Ficcion</a></td>
        </tr>
      <tr>
        <td align="right" valign="top">Directores : </td>
        <td align="left" valign="top"><a rel="nofollow" rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Marc+Webb&button=&title=Especial%3ABuscar" target="_blank">Marc Webb</a></td>
        </tr>
      <tr>
        <td align="right" valign="top">Escritores : </td>
        <td align="left" valign="top"><a rel="nofollow" rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Alex+Kurtzman&button=&title=Especial%3ABuscar" target="_blank">Alex Kurtzman</a><a rel="nofollow" rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Roberto+Orci&button=&title=Especial%3ABuscar" target="_blank">Roberto Orci</a></td>
        </tr>
      <tr>
        <td align="right" valign="top">Reparto : </td>
        <td align="left" valign="top"><a rel="nofollow" rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Andrew+Garfield&button=&title=Especial%3ABuscar" target="_blank">Andrew Garfield</a><a rel="nofollow" rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Emma+Stone&button=&title=Especial%3ABuscar" target="_blank">Emma Stone</a><a rel="nofollow" rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Jamie+Foxx&button=&title=Especial%3ABuscar" target="_blank">Jamie Foxx</a><a rel="nofollow" rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Dane+DeHaan&button=&title=Especial%3ABuscar" target="_blank">Dane DeHaan</a><a rel="nofollow" rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Campbell+Scott&button=&title=Especial%3ABuscar" target="_blank">Campbell Scott</a><a rel="nofollow" rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Embeth+Davidtz&button=&title=Especial%3ABuscar" target="_blank">Embeth Davidtz</a><a rel="nofollow" rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Colm+Feore&button=&title=Especial%3ABuscar" target="_blank">Colm Feore</a><a rel="nofollow" rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Paul+Giamatti&button=&title=Especial%3ABuscar" target="_blank">Paul Giamatti</a><a rel="nofollow" rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Sally+Field&button=&title=Especial%3ABuscar" target="_blank">Sally Field</a><a rel="nofollow" rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Martin+Sheen&button=&title=Especial%3ABuscar" target="_blank">Martin Sheen</a><a rel="nofollow" rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Chris+Zylka&button=&title=Especial%3ABuscar" target="_blank">Chris Zylka</a><a rel="nofollow" rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Denis+Leary&button=&title=Especial%3ABuscar" target="_blank">Denis Leary</a><a rel="nofollow" rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Frank+Deal&button=&title=Especial%3ABuscar" target="_blank">Frank Deal</a><a rel="nofollow" rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Marton+Csokas&button=&title=Especial%3ABuscar" target="_blank">Marton Csokas</a><a rel="nofollow" rel="nofollow" href="http://es.wikipedia.org/w/index.php?search=Stan+Lee&button=&title=Especial%3ABuscar" target="_blank">Stan Lee</a></td>
      </tr>
    </tbody></table>


    </td>
  </tr>
  </tbody></table>
</div>

Muchas gracias amigo, quedo super bien. :welcoming:

---------- Post agregado el 15-may-2014 hora: 05:54 ----------

parrax dijo:
Es un div y dentro tiene tablas, es fácil realizar sólo hay que sacar el css y luego armar el div class con sus tablas correspondientes para cada sección..

Pues lo intentaré hacer yo mismo, aunque xcite me dio la estructura, pero lo haré para ver sí me sale.

Por cierto tu sitio se ve bastante bien. :encouragement:

Cómo agregar un cuadro con sinopsis, imagen y contador

Allan Cano Seguir

SpeWard

Allan Cano

parrax

xcite

Allan Cano