Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Información de entradas arriba de la caratula
#1
Hola, quiero hacer el siguiente cambio como lo muestra la imagen:

[Imagen: index.php?action=dlattach;topic=12188.0;...2478;image]

La información de la película quiero que valla arriba, por que queda cortado y se ve mal. Quiero que se vea como viene en el diseño original, que es así:

[Imagen: 2fda48f852806bc2cb706cc71e42b7f4o.png]

Que aparezca la información arriba, les dejo el home.tpl y el style.css

home.tpl:

Código:
{include file='sections/head.tpl'}
{include file='sections/sidebar.tpl'}
            <!--<cn>-->
            <div class="content">
                <!--<bkpelsalf>-->
                <section>
                    <div class="title">
                         <h2><div class="listaico"></div>Peliculas por Orden Alfabetico</h2>
                    </div>
                    <div class="alfabeto">
                        <ul>
                            <li><a href="{$msConfig.datos.w_url}/letra/a.html" title="Peliculas que comienzan con A">A</a></li>
                            <li><a href="{$msConfig.datos.w_url}/letra/b.html" title="Peliculas que comienzan con B">B</a></li>
                            <li><a href="{$msConfig.datos.w_url}/letra/c.html" title="Peliculas que comienzan con C">C</a></li>
                            <li><a href="{$msConfig.datos.w_url}/letra/d.html" title="Peliculas que comienzan con D">D</a></li>
                            <li><a href="{$msConfig.datos.w_url}/letra/e.html" title="Peliculas que comienzan con E">E</a></li>
                            <li><a href="{$msConfig.datos.w_url}/letra/f.html" title="Peliculas que comienzan con F">F</a></li>
                            <li><a href="{$msConfig.datos.w_url}/letra/g.html" title="Peliculas que comienzan con G">G</a></li>
                            <li><a href="{$msConfig.datos.w_url}/letra/h.html" title="Peliculas que comienzan con H">H</a></li>
                            <li><a href="{$msConfig.datos.w_url}/letra/i.html" title="Peliculas que comienzan con I">I</a></li>
                            <li><a href="{$msConfig.datos.w_url}/letra/j.html" title="Peliculas que comienzan con J">J</a></li>
                            <li><a href="{$msConfig.datos.w_url}/letra/k.html" title="Peliculas que comienzan con K">K</a></li>
                            <li><a href="{$msConfig.datos.w_url}/letra/l.html" title="Peliculas que comienzan con L">L</a></li>
                            <li><a href="{$msConfig.datos.w_url}/letra/m.html" title="Peliculas que comienzan con M">M</a></li>
                            <li><a href="{$msConfig.datos.w_url}/letra/n.html" title="Peliculas que comienzan con N">N</a></li>
                            <li><a href="{$msConfig.datos.w_url}/letra/o.html" title="Peliculas que comienzan con O">O</a></li>
                            <li><a href="{$msConfig.datos.w_url}/letra/p.html" title="Peliculas que comienzan con P">P</a></li>
                            <li><a href="{$msConfig.datos.w_url}/letra/q.html" title="Peliculas que comienzan con Q">Q</a></li>
                            <li><a href="{$msConfig.datos.w_url}/letra/r.html" title="Peliculas que comienzan con R">R</a></li>
                            <li><a href="{$msConfig.datos.w_url}/letra/s.html" title="Peliculas que comienzan con S">S</a></li>
                            <li><a href="{$msConfig.datos.w_url}/letra/t.html" title="Peliculas que comienzan con T">T</a></li>
                            <li><a href="{$msConfig.datos.w_url}/letra/u.html" title="Peliculas que comienzan con U">U</a></li>
                            <li><a href="{$msConfig.datos.w_url}/letra/v.html" title="Peliculas que comienzan con V">V</a></li>
                            <li><a href="{$msConfig.datos.w_url}/letra/w.html" title="Peliculas que comienzan con W">W</a></li>
                            <li><a href="{$msConfig.datos.w_url}/letra/x.html" title="Peliculas que comienzan con X">X</a></li>
                            <li><a href="{$msConfig.datos.w_url}/letra/y.html" title="Peliculas que comienzan con Y">Y</a></li>
                            <li><a href="{$msConfig.datos.w_url}/letra/z.html" title="Peliculas que comienzan con Z">Z</a></li>
                            <li><a href="{$msConfig.datos.w_url}/letra/09.html" title="Peliculas que comienzan con numeros de 0 a 9">0 - 9</a></li>            
                        </ul>
                    </div>
                </section>
                <!--</bkpelsalf>-->
                
                <!--<bkbnrc>-->
                {if $msConfig.ads.728x90 != ""}
                <section>
                    {$msConfig.ads.728x90|unescape}<br/>
                 </section>
          
                {/if}
                <!--</bkbnrc>-->
                <!--<bkcnpels>-->
                <section>
                    <div class="title">
                         <h2><div class="listaico"></div>Estrenos</h2>
                    </div>
                    <div id="caratula">
                    <ul>  
                {if $msEstrenos != ""}
                    {foreach from=$msEstrenos item=e}            
                      <li>
                    <article class="posts">
<div class="entry-header">
        <div class="entry-titulo">
            <h2><a href="{$msConfig.datos.w_url}/pelicula/{$m.p_id}/{$m.p_seo}.html" title="{$e.p_titulo}">{$e.p_titulo}</a></h2>
         </div>
     </div>
                    <a href="{$msConfig.datos.w_url}/pelicula/{$e.p_id}/{$e.p_seo}.html" title="{$e.p_titulo}" target="_blank">
                    <img  class="img" src="{$msConfig.datos.w_url}/files/uploads/{$e.p_id}.jpg" alt="{$e.p_titulo}"/><img class="hd_label" src="{$msConfig.datos.w_url}/Temas/default/img/caratula.png" alt="{$e.p_titulo}"/>
                    </a>
                    </article>
                    </li>    
                    {/foreach}    
                {/if}            
                    </ul>
                    </div>
                 </section>
                <section>
                    <div class="title">
                         <h2><div class="listaico"></div>{if $msQ != ""}Resultados para: {$msQ}{else}Agregadas Recientemente{/if}</h2>
                    </div>
                    <!--<bkbnrc>-->
                    {if $msConfig.ads.300x250 != "" }
                    <div>
                        <div>
                                {$msConfig.ads.300x250|unescape}
                        </div>  
                    </div>
                    {/if}
                    <!--</bkbnrc>-->

                  <bR/>              

        
<!--<peliculas>-->
{if $msMovie != ""}

    
<div id="caratula">
<ul>

<!--</pelicula>-->
{foreach from=$msMovie item=m}
<!--<pelicula>-->
<li>
<article class="posts">
<div class="entry-header">
        <div class="entry-titulo">
            <h2><a href="{$msConfig.datos.w_url}/pelicula/{$m.p_id}/{$m.p_seo}.html" title="{$m.p_titulo|escape}">{$m.p_titulo|escape|substr:0:21}</a></h2>
         </div>
     </div>
            
<a class="tooltip" href="{$msConfig.datos.w_url}/pelicula/{$m.p_id}/{$m.p_seo}.html" title="{$m.p_titulo|escape}"><img class="img" src="{$msConfig.datos.w_url}/files/uploads/{$m.p_id}.jpg" alt="{$m.p_titulo|escape}"/><img class="hd_label" src="{$msConfig.datos.w_url}/Temas/default/img/caratula.png" alt="{$e.p_titulo}"/>
<span>
<h2>{$m.p_titulo|escape}</h2>
<strong>Sinopsis</strong>: {$m.p_sinopsis|substr:0:370}
<div ><strong>Genero</strong>: {$m.g_nombre}, {$m.p_ano}</div>  
<div ><strong>Idioma</strong>: {$m.p_idioma|escape}</div>  
<div><strong>Calidad</strong>: {$m.p_calidad|escape}</div>  
<div><strong>Visualizada</strong>: {$m.p_hits} Veces</div>
</span>
</a>
</article>
</li>
<!--</pelicula>-->
{/foreach}

</ul>
</div>


<!--</peliculas>-->                     
                    {if $msPag != ""}
                    <!--<nav>-->
                    <ul class="nav bgdeg4 bold brdr10px bxshd2 clr fs18px lnht30px liasbrdr10px lstinl pd10px txt_cen white">
                        {$msPag}
                    </ul>
                    <!--</nav>-->
                    {/if}
                    {else}<center>
                      No se ha encontrado m&aacute;s pel&iacute;culas.
                    </center><br />{/if}
                </section>
                <!--</bkcnpels>-->
               </div>
            <!--</cn>-->
        </div>
        <!--</bd>-->
{include file='sections/footer.tpl'}

style.css

Código:
@charset "utf-8";
/* CSS Document */
body {
    font: 80%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-color: #42413C;
    background: url(../img/fodosweb/bg-4.jpg) repeat-y fixed center;
    margin: 0;
    padding: 0;
    color: #000;
}

ul, ol, dl {
    padding: 0;
    margin: 0;
}
ol,ul {
    list-style:none;
}
h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;    
    padding-right: 15px;
    padding-left: 15px;
}
a img {
    border: none;
}
a:link {
    color: #42413C;
    text-decoration: underline;
}
a:visited {
    color: #6E6C64;
    text-decoration: underline;
}
a:hover, a:active, a:focus {
    text-decoration: none;
}
.container {
    width: 1024px;
    margin:0 auto;
}
.fondo01{
    background:url(../img/header.png) no-repeat center top;
    width:100%;
    height:300px;
    margin-top:0;
    padding-top:30px;
    }
.conteslider{
    width:1024px;
    padding-left:0px;
    padding-bottom:5px;
    padding-top:5px;
    margin-top:30px;
    background:transparent !important;
    -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 2px 6px;
    box-shadow: rgba(0, 0, 0, 0.3) 0 2px 6px;
    -moz-box-shadow: rgba(0,0,0,0.3) 0 2px 6px;
}
.header {
    background-color:trasnparent;
    box-shadow:#333;
    border-top:solid 3px #24476a;
    -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 2px 6px;
    box-shadow: rgba(0, 0, 0, 0.3) 0 2px 6px;
    -moz-box-shadow: rgba(0,0,0,0.3) 0 2px 6px;
}
.contenido{
    width: 1024px;
    margin-top: 35px;
    margin-bottom:40px;
    float: left;
    overflow: hidden;
    background: transparent;
    padding-right:0;
    padding-bottom: 20px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 2px 6px;
    box-shadow: rgba(0, 0, 0, 0.3) 0 2px 6px;
    -moz-box-shadow: rgba(0,0,0,0.3) 0 2px 6px;
}
.sidebar1 {
    float: right;
    width: 307px;
    padding-bottom: 10px;
    margin-right:8px;
    margin-top:0px;
}
.sidebar2 ul{
    list-style-type: none;
    margin-left:10px;
    margin-top:5px;
}
.sidebar2 li{
    display:inline;
}
.sidebar2 ul li {
    float:left;
    margin-left:5px;
}

.sidebar3 {
    float: left;
    width: 307px;
    padding-bottom: 10px;
    margin-left:8px;
    margin-top:-30px;
}
.sidebar1 h2{
    background: #0d8ddf;
    font-family: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    font-size: 17px;
    font-weight: bold;
    height: 30px;
    padding-top:10px;
    text-shadow: 0px 1px 0px black;
    color:#FFF;
}
.sidebar3 h2{
    background: #0d8ddf;
    font-family: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    font-size: 17px;
    font-weight: bold;
    height: 30px;
    padding-top:10px;
    text-shadow: 0px 1px 0px black;
    color:#FFF;
}
.sidebar2 .flecha{
    background:url(../img/metro/arrow-circle.png)  no-repeat;
    height: 16px;
    float:right;
    display:block;
    width:20px;
    margin-top:2px;
    margin-right:-10px;
}
.sidebar2 {
    float: right;
    width: 305px;
    background: #fff;
    -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
    box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
    -moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
    padding-bottom: 10px;
    margin-top:15px;
    border-bottom:solid 3px #24476a;
}
#menusi ul{
margin-left:-5px;
padding:0;
list-style-type:none;
}

#menusi ul li{display: inline; /*IE 6*/}

#menusi ul li a{
display:block;
background:#d9d9d9;
width:285px;
text-decoration:none;
padding:4px/*padding for top, bottom*/ 7px /*padding for left, right*/;
border-bottom:1px solid #eeeeee;
border-top:1px solid #cccccc;
border-left:5px solid #24476a;
color:#333333;
}

#menusi ul li a:hover{
border-left-color:#0099FF;
color:#0066FF;
background:#c4c4c4;
}

.content {
    padding: 10px 0;
    width: 670px;
    float: right;
    margin-right:30px;
    margin-top:0px;
}
.content2 {
    padding: 10px 0;
    width: 1008px;
    float: right;
    margin-right:8px;
}
.content ul, .content ol {
    padding-bottom: 15px;
    padding-left: 14px;
    padding-right: 12px;
    padding-top: 0;
}

footer {
    padding: 10px 0;
    background:transparent;
    -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 2px 6px;
    box-shadow: rgba(0, 0, 0, 0.3) 0 2px 6px;
    -moz-box-shadow: rgba(0,0,0,0.3) 0 2px 6px;
    position: relative;
    clear: both;
    width:1024px;
    margin:0 auto;
    color:#FFF;
    font-family: 'PT Sans', sans-serif;
    font-size: 17px;
    text-shadow: 0px 1px 0px black;
}
section{
    background:#FFF;
    border-bottom:solid 3px #24476a;
    -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 2px 6px;
    box-shadow: rgba(0, 0, 0, 0.3) 0 2px 6px;
    -moz-box-shadow: rgba(0,0,0,0.3) 0 2px 6px;
    overflow: hidden;
    margin-bottom:20px;
}
.alfabeto{
    background:#24476a;
    height:100px;
    padding:0;
    margin-top:-20px;
}
.alfabeto ul{
    list-style:none;
}
.alfabeto li{
    display:inline;
    float:left;
    margin-top:20px;
}
.alfabeto li a{
    font-weight:bold;
    text-shadow: 0px 1px 0px #A3D1FF;
    color:#FFF;
    margin-left:10px;
    background:#52697F;
    text-decoration:none;
    width:10px;
    height:10px;
    padding:10px;
    border-radius:3px;
}
.alfabeto li a:hover{
    border-color:#3390CA;
    background:#58B0E7;
    background:-moz-linear-gradient(top, #B4F6FF 1px, #63D0FE 1px, #58B0E7);
    background:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0.02, #B4F6FF), color-stop(0.02, #63D0FE), color-stop(1, #58B0E7));
    border-radius:5px;
}

section .title{
    padding: 10px 16px 10px 20px;
    display: inline-table;
    border-bottom: 1px solid #24476a;
    margin-bottom: 20px;
    background: #0d8ddf;
    width: 635px;
    margin-right: -20px;
    margin-top:0;
    height:20px;
}
section .title .listaico{
    background:url(../img/metro/lista.png)  no-repeat;
    height: 16px;
    float: left;
    display:block;
    width:20px;
    margin-top:3px;
    margin-left:-8px;
    margin-right:5px;
}
section .title2{
    padding: 10px 16px 10px 20px;
    border-bottom: 1px solid #24476a;
    margin-bottom: 20px;
    background: #0d8ddf;
    width: 973px;
    margin-right: -20px;
    margin-top: 30px;
    height:20px;
}
.title2 .listaico{
    background:url(../img/metro/lista.png)  no-repeat;
    height: 16px;
    float: left;
    display:block;
    width:20px;
    margin-top:3px;
    margin-left:-8px;
    margin-right:5px;
}
.title2{
    padding: 10px 16px 10px 20px;
    border-bottom: 1px solid #24476a;
    margin-bottom: 20px;
    background: #0d8ddf;
    width: 973px;
    margin-right: -20px;
    margin-top: 30px;
    height:20px;
}
.title2 h2{
    font-size:17px;
    font-weight:700;
    margin-bottom:0;
    text-transform:uppercase;
    color:#FFF;
    float:left;
    padding:0 5px 0 0;
    text-shadow: 0px 1px 0px black;
}

section h2{
    font-size:17px;
    font-weight:700;
    margin-bottom:0;
    text-transform:uppercase;
    color:#FFF;
    float:left;
    padding:0 5px 0 0;
    text-shadow: 0px 1px 0px black;
}
header, section, footer, aside, article, figure {
    display: block;
}
#menuprincipal {
    padding:0;
    width:1024px;
      background: transparent url('../img/bg-menu.png') repeat-x;
      background-position: bottom;
    height:47px;
    font-family: 'PT Sans', sans-serif;
    margin-top:50px;
}

#menuprincipal ul {
    margin:0;
    padding:0;
    list-style:none;
}

#menuprincipal ul li {
    float:left;
}

#menuprincipal ul li a {
       float: left;
    color:#FFF;
    padding: 10px 20px;
    text-decoration:none;
}

#menuprincipal ul li a:hover,
#menuprincipal ul li:hover > a {
    background:url(../img/bg-menu-hover.png) repeat-x center;
    border-bottom:solid #0d8ddf 5px;

}

#menuprincipal li ul a:hover,
#menuprincipal ul li li:hover > a  {
        color: #FFF;
        background:#0d8ddf;
        border:none;
}
#menuprincipal li ul {
        left: -999em;
        margin: 47px 0 0;
        position: absolute;
        width: 160px;
        z-index: 9999;
        background:#FFF;
}

#menuprincipal li:hover ul {
        left: auto;
}
#menuprincipal li a {
        background:url(../img/nav-sep.png) no-repeat right center;
}

#menuprincipal li ul a {
        background: none;
        border: 0 none;
        margin-right: 0;
        width: 120px;
        font-size:15px;
        color:#666;
}
#menuprincipal li ul a:hover {
        background:#0d8ddf;
        border:none;
}

#menuprincipal li li ul {
        margin: -1px 0 0 160px;
        visibility:hidden;
}

#menuprincipal li li:hover ul {
        visibility:visible;
}
#menuprincipal li.home > a {
       text-indent:-9999px;
       background:url(../img/home_icon.png) no-repeat center;
       height:22px;
       width:27px;
}

#menuprincipal  li.home:hover > a, #navigation ul.nav > li.home.current-menu-item > a, #navigation ul.nav > li.home.current-menu-ancestor > a  {
       background: url(../img/home_icon.png) no-repeat center;
       height:22px;
}
#separadorhome{
    background:url(../img/nav-sep.png) no-repeat;
    width:3px;
    height:45px;
    float:right
}
#logo{
    width:225px;
    height:85px;
    margin-left:10px;
    margin-top:10px;
    background:url(../img/logo.png) no-repeat center;
}
#logoright{
    float:right;
    width:auto;
    height:50px;
    margin-right:50px;
    margin-top:-70px;
    font-size:35px;
    font-family:Arial, Helvetica, sans-serif;
    color:#faa833;
    text-shadow: -1px 1px 1px #000;
    font-style:italic;
    
}

#caratula ul{
   list-style-type: none;
}
#caratula li{
   display: inline;
}
#caratula li a {
   text-decoration: none;
}
#caratular li a:hover{
   color: #ffffff;
}
#caratula .img{
    width: 116px;
    height: 158px;
    margin-left:15px;
    margin-top:10px;
}
.posts {
    height: 200px;
    display: block;
    float: left;
    width: 135px;
    padding:5px;
    border: 1px solid #0d8ddf;
    background: #fff;
    border-radius:4px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 3px 4px;
    box-shadow: rgba(0, 0, 0, 0.3) 0 3px 4px;
    -moz-box-shadow: rgba(0,0,0,0.3) 0 3px 4px;
    margin-bottom: 10px;
    margin-left:0;
    margin-right: 14px;
    margin-top: 5px;
}

.posts .entry-titulo {

    width: 147px;

    height: 25px;
    margin-left:-5px;
    background: #0d8ddf;
    margin-top:-5px;
    -webkit-border-top-left-radius:3px;

    -webkit-border-top-right-radius:3px;
    
    
    

}
.posts .entry-titulo h2 {
    height:128px;
    margin-top:4px;
    margin-left:18px;
    font-size: 12px;

font-weight: bold;

color: #fff;

width: 105px;

line-height: 18px;

padding: 0 4px;

position: absolute;

text-shadow: 0 1px 0 black;

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

text-align:center;

}



.posts .entry-titulo h2 a {

    text-decoration:none;

    font-size: 12px;

font-weight: bold;

color: #fff;

width: 112px;

line-height: 18px;

padding: 0 4px;

text-shadow: 0 1px 0 black;

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

text-align:center;

}

.posts .entry-titulo h2 a:hover {

color: #fff;

}

.hd_label {
    position: absolute;
    margin-left:-134px;
    margin-top:0;
    width:140px;
}

.button2 {
    text-decoration: none;
    font: bold 13px Arial;
    display: block;
    width: 100px;
    height:30px;
    padding-bottom: 2px;
    padding-left: 5px;
    padding-right:5px;
    padding-top: 10px;
    text-align:center;
}

.button2:hover {
    background:url(../img/bg-menu-hover.png) repeat-x center;
    border-bottom:solid #0d8ddf 5px;
}
h1.cs3,
h3.cs3
{
  margin:0 0 8px;
  text-decoration:none;
  border:0;
  padding:0;
  font-family: 'Bangers', arial, serif;
  color:#FFFFFF;
  text-shadow:2px 2px 1px #222222;
}

h1.cs3{
  font-size:80px;
  line-height:60px;
}

h3.cs3{
  font-size:27px;
}
.listauno{
    margin-left:10px;
    list-style-image:url("../img/button-blue.png");
}
.listauno span{
    color:#000;
    
}

.scrollup{
    width:40px;
    height:40px;
    opacity:0.3;
    position:fixed;
    bottom:0px;
    right:10px;
    display:none;
    text-indent:-9999px;
    background:#0d8ddf url(../img/metro/scroll.png) no-repeat center;
}
.scrollup:hover{
    opacity:1;
}
h1.cs3si,
h3.cs3si
{
  margin:0 0 8px;
  text-decoration:none;
  border:0;
  padding:0;
  font-family: 'Bangers', arial, serif;
  color:#FFFFFF;
  text-shadow:2px 2px 1px #222222;
}

h1.cs3si
{
  font-size:20px;
  line-height:10px;
}

h3.cs3si
{
  font-size:14px;
}
a.tooltip {outline:none;text-decoration:none;}
    a.tooltip strong {line-height:30px;}
    a.tooltip > span
    {
        width:200px;
        padding: 10px 20px;
        margin-top: 20px;
        margin-left: -155px;
        opacity: 0;
        visibility: hidden;
        z-index: 10;      
        position: absolute;

        font-family: Arial;
        font-size: 12px;
        font-style: normal;  
                
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -o-border-radius: 3px;
        border-radius: 3px;
        
        
        -webkit-box-shadow: 2px 2px 2px #999;
        -moz-box-shadow: 2px 2px 2px #999;        
        box-shadow: 2px 2px 2px #999;        
        
        -webkit-transition-property:opacity, margin-top, visibility, margin-left;
        -webkit-transition-duration:0.4s, 0.3s, 0.4s, 0.3s;  
        -webkit-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
    
        -moz-transition-property:opacity, margin-top, visibility, margin-left;
        -moz-transition-duration:0.4s, 0.3s, 0.4s, 0.3s;  
        -moz-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
    
        -o-transition-property:opacity, margin-top, visibility, margin-left;
        -o-transition-duration:0.4s, 0.3s, 0.4s, 0.3s;  
        -o-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
    
        transition-property:opacity, margin-top, visibility, margin-left;
        transition-duration:0.4s, 0.3s, 0.4s, 0.3s;  
        transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
    }
    
    /*a.tooltip > span:hover,*/
    a.tooltip:hover > span
    {
        opacity: 1;
        text-decoration:none;
        visibility: visible;
        overflow: visible;
        margin-top:-8px;
        display: inline;
        margin-left: -10px;        
    }

    a.tooltip span b {
    
        width: 15px;
        height: 15px;
        margin-left: 20px;
        margin-top: -19px;
            
        display: block;
        position: absolute;

        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
            
        -webkit-box-shadow: inset -1px 1px 0 #fff;
        -moz-box-shadow: inset 0 1px 0 #fff;
        -o-box-shadow: inset 0 1px 0 #fff;
        box-shadow: inset 0 1px 0 #fff;
            
        display: none\0/;
        *display: none;
    }
    
a.tooltip > span {
    color: #000000;

    background: #236BA3;
    background: -moz-linear-gradient(top, #236BA3 0%, #0d8ddf 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#236BA3), color-stop(100%,#0d8ddf));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#236BA3', endColorstr='#0d8ddf',GradientType=0 );
        
    border: 1px solid #0066FF;        
}    
      
a.tooltip span b {
    background: #236BA3;
    border-top: 1px solid #0066FF;
    border-right: 1px solid #0066FF;
}
#search input {
    background: none repeat scroll 0 0 #fff;
    border: 0 none;
    color: #7F7F7F;
    float: left;
    font: 12px 'Helvetica','Lucida Sans Unicode','Lucida Grande',sans-serif;
    height: 15px;
    margin: 0;
    padding: 10px;
    transition: background 0.3s ease-in-out 0s;
    width: 150px;
}

#search button {
    background: url("../img/search.png") no-repeat scroll center center #0d8ddf;
    cursor: pointer;
    height: 35px;
    text-indent: -99999em;
    transition: background 0.3s ease-in-out 0s;
    width: 35px;
    border: 2px solid #fff;
}

#search button:hover {
    background-color:#24476a;
}
#ver-peli img{
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    box-shadow:0 6px 6px #333;
    margin-bottom:15px;
    margin-left:10px;
}
#info-peli{
    float: left;
    font-weight:bold;
    color:#09C;
    width: 300px;
    white-space: initial;
}
.opt{
    background:#24476a;
    height:60px;
    padding:0;
    margin-top:-20px;
}
.opt ul{
    list-style:none;
}
.opt li{
    display:inline;
    float:left;
    margin-top:20px;
}
.opt li a{
    font-weight:bold;
    text-shadow: 0px 1px 0px #A3D1FF;
    color:#FFF;
    margin-left:10px;
    background:#52697F;
    text-decoration:none;
    width:10px;
    height:10px;
    padding:10px;
    border-radius:3px;
}
.opt li a:hover{
    border-color:#3390CA;
    background:#58B0E7;
    background:-moz-linear-gradient(top, #B4F6FF 1px, #63D0FE 1px, #58B0E7);
    background:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0.02, #B4F6FF), color-stop(0.02, #63D0FE), color-stop(1, #58B0E7));
    border-radius:5px;
}
.reproconte{
    background:transparent;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    box-shadow:0 3px 6px #333;
    -moz-box-shadow:0 3px 6px #333;
    -webkit-box-shadow:0 3px 6px #333;
    width: 600px;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    padding:8px;
}
.tagspe{
    background: #ffcc00; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffcc00 0%, #ff9a00 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffcc00), color-stop(100%,#ff9a00)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffcc00 0%,#ff9a00 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffcc00 0%,#ff9a00 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffcc00 0%,#ff9a00 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffcc00 0%,#ff9a00 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcc00', endColorstr='#ff9a00',GradientType=0 ); /* IE6-9 */

    border-radius:8px;
    box-shadow:0 2px 5px #333;
    padding:5px;
    
}
.redessociales{
    background:url(../img/bgdeg9.png) repeat-x;
    height:30px;
    border-radius:8px;
    box-shadow:0 2px 5px #333;
    margin-bottom:20px;
    margin-top:50px;
}
.player_buttons {
    width: 50px;
    margin-top:0;
    margin-left: 140px;
}
.player_buttons li {
    background-color: #F8F8F8;
    border-radius: 5px 0 0 5px;
    margin-bottom: 5px;
}
.player_buttons li a{
    height: 50px;
    width: 50px;
    display: block;
    background-repeat: no-repeat;
    background-position: center center;
    text-decoration: none;
}
.alert {background-image: url(../img/alert.png);}
.vote_up {background-image: url(../img/vote_up.png);}
.vote_down {background-image: url(../img/vote_down.png);}
.sinoptxt {padding-right:50px;}
.descargarpeli{
    background:url(../img/bgdeg9.png) repeat-x;
    border-radius:8px;
    box-shadow:0 2px 5px #333;
    padding:10px;
    font-weight:bold;
    color:#FFF;
    text-decoration:none;
    margin-left:15px;
}
.btn_g {
    display: block;
    font-weight: bold;
    padding: 5px 8px;
    border: 1px solid #bababa;
    -moz-border-radius: 5px;
    background: url('../img/bg_g.gif') repeat-x bottom left!important;
    text-shadow:0 1px 0 #FFFFFF;
    font-size: 11px;
}
.btn_g span,.btn_g span:hover {
    padding-left: 22px;
    text-decoration: none!important;
}
.btn_g:hover {
    -moz-box-shadow: 0 0 2px rgba(0,0,0,0.3);
    text-decoration: none;
}
.btn_g:active {
    background: #cbcbcb url('../img/bg_g.gif') repeat-x top left!important;
}
#admin_panel fieldset {
    background-color: #FFFFFF;
    border-color: #D7D7D7 #CCCCCC #CCCCCC #D7D7D7;
    border-style: solid;
    border-width: 1px;
    margin: 5px 0;
    padding: 10px;
    position: relative;
    font-family: Verdana;
    color: #536482;
    clear: both;
}
#admin_panel legend {
    color: #115098;
    font-weight: bold;
    line-height: 1.2em;
    margin-top: -0.4em;
    padding: 1px 0;
    position: relative;
    text-transform: none;
    top: -0.2em;
    vertical-align: middle;
}
#admin_panel fieldset dl {
    height: 1%;
    overflow: hidden;
    margin-bottom: 10px;
}
#admin_panel fieldset dt {
    border-color: #CCCCCC;
    border-style: none solid none none;
    border-width: medium 1px medium medium;
    padding-top: 3px;
    text-align: left;
    width: 45%;
    float: left;
}
#admin_panel dt label {
    color: #4A5A73;
    font-weight: bold;
    text-align: left;
    padding: 0 5px 0 0;
    cursor: pointer;
}
#admin_panel dt span {
    padding: 0 5px 0 0;
}
#admin_panel dl:hover dt {border-color:#000}
#admin_panel dl:hover dt label {color:#000}
#admin_panel fieldset dd {
    border-color: #CCCCCC;
    border-style: none none none solid;
    border-width: medium medium medium 1px;
    margin: 0 0 0 45%;
    padding: 0 0 0 5px;
    vertical-align: top;
    color:#666;
}
#admin_panel dd input {
    font-size: 1em;
    max-width: 100%;
    padding: 2px;
    width: 50%;
}
#admin_panel dd label {
    color: #4A5A73;
    font-size: 1em;
    margin: 0 10px 0 0;
    white-space: nowrap;
}
#admin_panel fieldset p {
    background-color: transparent;
    border: medium none;
    margin: 0 0 5px;
    padding: 5px 0 0;
    text-align: right;
}
#admin_panel fieldset p input{
    cursor:pointer;
    float:right;
}
#admin_panel input.radio {
    background-color: transparent;
    border: medium none;
    cursor: default;
    width: auto !important;
}
hr {
    background:#CCC;
    color:#CCC;
    height:1px;
    border:0 none;
}
#admin_panel hr {
    border-top: dashed 1px #CCC;
    background: #FFF;
    margin: 10px 0;
}
.admin_table {border:1px solid #ddd; border-width:1px 0 0 1px; margin-bottom:15px;}
.admin_table thead {background:#F4F4F4}
.admin_table th, .admin_table td {padding:3px 4px;border:1px solid #ddd; border-width:0px 1px 1px 0px; vertical-align:middle; text-align:center}
#basic-modal-content {display:none;}
/* Container */
#simplemodal-container {height:360px; width:600px; color:#bbb; background-color:#333; border:4px solid #444; padding:12px;}
#simplemodal-container .simplemodal-data {padding:8px;}
#simplemodal-container a {color:#ddd;}
#simplemodal-container a.modalCloseImg {background:url(../img/basic/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}
#simplemodal-container h3 {color:#84b8d9;}
#simplemodal-container h3 {color:#3a6d8c; font-size:22px; line-height:26px; font-weight:normal; margin:0 0 8px 0;}

sitio web: http://www.cinelan.skn1.com

El theme que uso es: MovieScript.

Espero sus respuesta, muchos saludos.
#2
La imagen no se ve es privada del la web del autor subelo a un host.

PD: Y si facilitas alguien que lo tenga mucho mejor.
WWW
#3
Checa este enlace, es para crear tooltips con CSS3 y jQuery. Puedes usar HTML dentro de este, como deseas.

Código:
http://jquerytools.org/demos/tooltip/any-html.html
WWW
#4
[Imagen: 8708853a84e2e26dfd945e172f37f329o.png]

Disculpen mi ignorancia, pero que es un tooltips?
#5
Exactamente no entiendo que es lo que quieres como posicionarlo y todo eso recuerda que el tooltip va a estar flotando y puedes posicionarlo modificando este css.

Código:
    a.tooltip:hover > span
    {
        opacity: 1;
        text-decoration:none;
        visibility: visible;
        overflow: visible;
        margin-top:-8px;
        display: inline;
        margin-left: -10px;        
    }
WWW
#6
(25-07-2014, 10:16 PM)Vicen escribió: Exactamente no entiendo que es lo que quieres como posicionarlo y todo eso recuerda que el tooltip va a estar flotando y puedes posicionarlo modificando este css.

Código:
    a.tooltip:hover > span
    {
        opacity: 1;
        text-decoration:none;
        visibility: visible;
        overflow: visible;
        margin-top:-8px;
        display: inline;
        margin-left: -10px;        
    }

Como veras el tooltip aparece abajo, y yo quiero que aparezca arriba, entiendes?
#7
@Cine-lan A lo que se refiere mi compañer @Vicen es que puedes editar tu actual tooltip editando el CSS.

Te recomiendo leer hacerca del funcionamiento de los tooltips para que puedas corregirlo.

La solución al problema que presentas es de fácil solución, sólo tienes que cambiar sus coordenadas con margin, en tu caso negativo.
WWW
#8
Como te dice mi compañero a eso me referia puedes posicionarlo a tu gusto de todas formas lo mejor seria verlo donde lo quieres ya que sale diferente.

De todas formas mañana mirare por mi cuenta.
WWW
#9
Remplaza este css y con este se te sube arriba,

Código:
    a.tooltip:hover > span
    {
        opacity: 1;
        text-decoration:none;
        visibility: visible;
        overflow: visible;
        margin-top: -42%;
        display: inline;
        margin-left: -10px;        
    }
WWW
#10
(26-07-2014, 11:03 AM)Vicen escribió: Remplaza este css y con este se te sube arriba,

Código:
    a.tooltip:hover > span
    {
        opacity: 1;
        text-decoration:none;
        visibility: visible;
        overflow: visible;
        margin-top: -42%;
        display: inline;
        margin-left: -10px;        
    }

Me sirvió! muchas gracias a los dos.

Saludos.


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  [Aporte] PcTag: Información HTML KesiaMuller 0 182 28-10-2016, 05:42 AM
Último mensaje: KesiaMuller
  Botón para ir arriba de la página con HTML, CSS y jQuery imgur 7 1,608 01-12-2014, 11:03 AM
Último mensaje: Vicen
  Botón de donar con información de usuario Gonzalo 5 498 16-04-2014, 06:10 AM
Último mensaje: MaxHurbano
  Botones de Redes Sociales para Compartir entradas en tu blog cahcnehco29 0 427 26-05-2013, 04:25 AM
Último mensaje: cahcnehco29
  Ir arriba con efecto deslizante (JavaScript) Ibancius 29 3,593 12-01-2013, 05:53 PM
Último mensaje: natestale
  Ir arriba y abajo con jQuery Juliens 10 1,541 30-09-2012, 07:03 PM
Último mensaje: Juliens
  Mostrar información del navegador [Clase PHP] AbaddonOrmuz 2 942 22-09-2012, 05:32 PM
Último mensaje: Marcus_Fenix
  Control de acceso a la información mandragon 0 405 30-04-2012, 02:27 AM
Último mensaje: mandragon
  busco codigo javascrip contador de entradas Yamil 3 615 08-02-2012, 07:48 PM
Último mensaje: Yamil
Sonrisa Mostrar informacion de server de cs 1.6 batmannn 2 959 01-11-2011, 06:01 PM
Último mensaje: moscoquera



Usuarios navegando en este tema: 1 invitado(s)