HELP: Tablón de anuncios cruel

Mar Nov 08, 2016 8:54 pm

¡Holy! Ya vine por acá con mis enredos coderos, tengo el code para poner un tablón de anuncios en el header y que aparezca a la vista solo cuando se pasa el ratón por el header, lo probé con algo simple y funcionó, entonces conseguí editar el tablón que quiero usar en el foro, pensé que con solo acomodarlo donde debía funcionaría perfecto, pero NO, el tablón es un hijo de una hiena cruel que decide complicarme la vida y cuando lo pongo no sucede nada:( no sé si habré hecho algo mal al editarlo o si lo estoy acomodando mal, ¿Alguien podría ayudarme a acomodarlo porfavor? :snifsnif:

Código del efecto:

Código:: <div id="tablon-header"> <div id="contenido1"> Contenido que aparece al pasar el ratón por el header </div> </div> <style> #tablon-header { left: 350px; position: absolute; right: 10px; top: 35px; transition: all 0.5s ease 0.5s; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } #contenido1 { background-color: #0000FF; border: 1px solid #FFFFFF; color: #FFFFFF; font-size: 20px; font-weight: bold; height: 100px; opacity: 0.8; width: 300px; } .headerbar .inner:hover #tablon-header { margin: 0; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } <script> jQuery(function () { jQuery(".headerbar .inner").append(jQuery("#tablon-header")); }); </script>

Código del Tablón:

Código:: <style type="text/css">#comments_scroll_container {margin-top: 5px; width: 185px; height: 100px; font-weight: 700; color: #DEDDD0; font-size: 11px; text-align: center; font-family: calibri; line-height: 100%;} .stafef {width: 90px; height: 70px; background:#E4E4E4; opacity: 0; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out;} .stafef:hover {opacity:1; -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -o-transform: rotate(-360deg);}</style><link href="http://fonts.googleapis.com/css?family=BenchNine" rel="stylesheet" type="text/css" /><link href="http://fonts.googleapis.com/css?family=Voltaire" rel="stylesheet" type="text/css" /> <center> <div style="width: 790px; background: #FAFAFA; padding: 5px; border-bottom: 20px solid #beb1ba; border-top: 20px solid #beb1ba;"> <table cellspacing="0"> <tbody> <tr> <td> <div style="border: 3px double #d5c7b4; margin: 5px; width: 200px; height: 130px; background:#fff;"> <center> <div style="width: 185px; background:#d5d5d5; font-family: BenchNine; text-transform: uppercase; font-size: 11px; color: #fff; line-height: 100%; text-align: center; padding-top: 2px; letter-spacing: 2px; margin-top: 5px; margin-bottom: -2px;"> Administración </div> <table cellspacing="5"> <tbody> <tr> <td> <div style="width: 90px; height: 70px; overflow: hidden; background-image:url(http://r12.imgfast.net/users/1214/13/72/77/avatars/91-72.jpg); margin-bottom: 3px;"> <div class="stafef"> <div style="color: #fff; font-size: 11px; text-align: center; font-family: calibri; line-height: 100%; padding-top: 10px; font-weight: 700;"> Rainbow Soldier<br /> <a href="http://www.eyesofangels.net/u2556"><span style="color:#beb1ba;">Contáctame</span></a> </div> </div> </div> <td> <div style="width: 90px; height: 70px; overflow: hidden; background-image:url(http://r12.imgfast.net/users/1216/40/54/04/avatars/4208-30.jpg);"> <div class="stafef"> <div style="color: #fff; font-size: 11px; text-align: center; font-family: calibri; line-height: 100%; padding-top: 10px; font-weight: 700;"> Jem Carstairs<br /> <a href="http://www.eyesofangels.net/u4208"><span style="color:#beb1ba;">Contáctame</span></a> </div> </div> </div> </td> </tr> </tbody> </table> </center> </div> <div style="border: 3px double #d5c7b4; margin: 5px; width: 200px; height: 130px; background:#fff;"> <center> <div style="width: 185px; background:#d5d5d5; font-family: BenchNine; text-transform: uppercase; font-size: 11px; color: #fff; line-height: 100%; text-align: center; padding-top: 2px; letter-spacing: 2px; margin-top: 5px;"> Novedades </div> <div style="color: #beb1ba; font-size: 11px; text-align: left; font-family: calibri; line-height: 100%; padding-left: 8px; padding-right: 8px; margin-top: 3px; font-weight: 700;"> <a href=""> 08/11 Renovación total del foro.</a> <img src="https://38.media.tumblr.com/tumblr_lo1fh1s26P1qka0da.gif" /><br /> 00/00 Noticia que contar. <br /> 00/00 Noticia que contar. <br /> 00/00 Noticia que contar. </div> </center> </div> </td> <td> <div style="border: 3px double #d5c7b4; margin: 5px; width: 340px; height: 271px; background:#fff;"> <div style="width: 320px; margin: 10px; height: 90px; background-image:url(https://i37.servimg.com/u/f37/19/54/32/67/cabece10.jpg); margin-bottom: 5px;"> </div> <div style="float: left; width: 45%; color: #beb1ba; font-size: 11px; text-align: justify; font-family: Calibri; line-height: 100%; padding-left: 10px; font-weight: 700;"> Bienvenid@ a <i>Bookaholics</i>, la renovación total del antiguo foro <i>Eyes of Angels</i>,un foro literario dedicado a aquellos adictos a las buenas historias. Te invitamos a formar parte de nuestro pequeño imperio, adéntrate en el mundo literario que te ofrecemos, advertimos que una vez dentro no hay marcha atrás, pero te aseguramos que sin duda lo vas a disfrutar. ¡Te esperamos!<br><center>Atte: Staff Bookaholics</center> </div> <div style="float: right; width: 45%; color: #beb1ba; font-size: 11px; text-align: justify; font-family: calibri; line-height: 100%; padding-right: 10px; font-weight: 700;"> <center>Porfavor recuerda que:</center> No damos fechas de salida o publicación.<br> Este es un foro hecho de fans para fans, no estamos afiliados a ninguna editorial por lo tanto nuestro trabajo es sin fines de lucro.<br> La recopilación de nuestro trabajo está penada con expulsión del foro y daremos aviso al resto de foros pertenecientes a la comunidad literaria. </div> </div> </td> <td> <div style="margin: 5px; width: 200px; height: 130px; background:#fff; border: 3px double #d5c7b4;"> <center> <div style="width: 185px; background:#d5d5d5; font-family: BenchNine; text-transform: uppercase; font-size: 11px; color: #fff; line-height: 100%; text-align: center; padding-top: 2px; letter-spacing: 2px; margin-top: 5px;"> Avisos </div> <div style="color: #DEDDD0; font-size: 11px; text-align: justify; font-family: calibri; line-height: 100%; padding-left: 8px; padding-right: 8px; margin-top: 3px; font-weight: 700; overflow: auto; height: 100px;"> <img src="https://38.media.tumblr.com/tumblr_lo1fh1s26P1qka0da.gif" /> 08/11 Pruebas para Addicters abiertas <a href="url"><span style="color: rgb(71, 89, 109);">+INFO</span></a><br /><br />08/11 Pruebas para Smugglers abiertas <a href="url"><span style="color: rgb(71, 89, 109);">+INFO</span></a><br /><br />08/11 Pruebas para Traffickers abiertas <a href="url"><span style="color: rgb(71, 89, 109);">+INFO</span></a><br /><br /> </div> </center> </div> <div style="border: 3px double #d5c7b4; margin: 5px; width: 200px; height: 130px; background:#fff;"> <center> <div style="width: 185px; background:#d5d5d5; font-family: BenchNine; text-transform: uppercase; font-size: 11px; color: #fff; line-height: 100%; text-align: center; padding-top: 2px; letter-spacing: 2px; margin-top: 5px;"> Últimos Temas </div> <script> jQuery(document).ready(function(){ jQuery("#micontenedor").replaceWith(jQuery("#comments_scroll_div")); }); </script> <div id="contenedorultimostemas"> <div id="micontenedor"> </div> </div> </center> </div> </td> </tr> </tbody> </table> <table cellspacing="0"> <tbody> <tr> <td> <div style="border: 3px double #d5c7b4; margin: 5px; margin-top: 0px; width: 200px; height: 130px; background:#fff;"> <center> <div style="width: 185px; background:#d5d5d5; font-family: BenchNine; text-transform: uppercase; font-size: 11px; color: #fff; line-height: 100%; text-align: center; padding-top: 2px; letter-spacing: 2px; margin-top: 5px;"> Créditos </div> <div style="color: #beb1ba; font-size: 11px; text-align: justify; font-family: calibri; line-height: 100%; padding-left: 8px; padding-right: 8px; margin-top: 3px; font-weight: 700; overflow: auto; height: 100px;">Este tablón ha sido diseñado por Hardrock de <a href="http://thecaptainknowsbest.tumblr.com/"><span style="color:#d5d5d5;">Captain Knows Best.</span></a><br>El skin fue creado por ¿? y modificado para su uso exclusivo de Bookaholics por Rainbow Soldier. </div> </center> </div> </td> <td> <center> <div style="border: 3px double #d5c7b4; margin: 5px; width: 200px; height: 130px; background:#fff; margin-top: 0px;"> <div style="width: 185px; background:#d5d5d5; font-family: BenchNine; text-transform: uppercase; font-size: 11px; color: #fff; line-height: 100%; text-align: center; padding-top: 2px; letter-spacing: 2px; margin-top: 5px; margin-bottom: 3px;"> Trabajamos en: </div><script language="javascript"> function VecImagenes() { n=0; this[n++]="http://i.imgur.com/dB4XbZa.jpg"; this[n++]="http://i.imgur.com/dB4XbZa.jpg"; this[n++]="http://i.imgur.com/dB4XbZa.jpg"; this[n++]="url_de_la_imagen04"; this[n++]="url_de_la_imagen05"; this.N=n; } var Imagenes=new VecImagenes(); src= Imagenes[ Math.floor(Math.random() * Imagenes.N) ] ; document.write("<img src="+src+" align=center>"); </script> </div> </center> </td> <td> <div style="border: 3px double #d5c7b4; margin: 5px; margin-top: 0px; width: 340px; height: 130px; background:#fff;"> <center> <div style="width: 325px; background:#d5d5d5; font-family: BenchNine; text-transform: uppercase; font-size: 11px; color: #fff; line-height: 100%; text-align: center; padding-top: 2px; letter-spacing: 2px; margin-top: 5px;"> Booktubers del Mes </div> <div style="width: 325px;"> <marquee onmouseout="this.start()" onmouseover="this.stop()" scrolldelay="70" scrollamount="2"> <table cellspacing="3"> <tbody> <tr> <td> <a href=""><img src="http://i.imgur.com/zViUh3M.jpg" /></a> <div style="width: 120px; background:#d5d5d5; font-family: BenchNine; text-transform: uppercase; font-size: 11px; color: #fff; line-height: 100%; text-align: center; padding-top: 2px; letter-spacing: 2px;"> Addict del Mes </div> </td> <td> <a href=""><img src="http://i.imgur.com/zViUh3M.jpg" /></a> <div style="width: 120px; background:#d5d5d5; font-family: BenchNine; text-transform: uppercase; font-size: 11px; color: #fff; line-height: 100%; text-align: center; padding-top: 2px; letter-spacing: 2px;"> Smuggler del Mes </div> </td>

Mar Nov 08, 2016 9:31 pm

Hola nena podrias dejarme una o varias capturas de tu foro para ver que es lo que esta mal con el código, es que no entendí bien cual es el error T__T gracias!

Miér Nov 09, 2016 3:34 pm

No puedo tomar captura pero dejo el link del foro, es foro de pruebas asi que lo siento por los horrores visuales que hay.

Link:

Pasa que estoy intentando poner el tablón con un efecto como este:

El widget está puesto pero solo se ve el tablón cuando le doy refresh a la página, por más que pase el ratón por encima de la imagen no aparece, supongo que el problema es porque tuve que acomodar ambos códigos y probablemente no lo hice bien, este es el código tal y como está en el widget:

Código:: <div id="tablon-header"> <style type="text/css">#comments_scroll_container {margin-top: 5px; width: 185px; height: 100px; font-weight: 700; color: #DEDDD0; font-size: 11px; text-align: center; font-family: calibri; line-height: 100%;} .stafef {width: 90px; height: 70px; background:#E4E4E4; opacity: 0; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out;} .stafef:hover {opacity:1; -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -o-transform: rotate(-360deg);}</style><link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=BenchNine" /><link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Voltaire" /> <center> <div style="width: 790px; background: #FAFAFA; padding: 5px; border-bottom: 20px solid #beb1ba; border-top: 20px solid #beb1ba;"> <table cellspacing="0"> <tbody> <tr> <td> <div style="border: 3px double #d5c7b4; margin: 5px; width: 200px; height: 130px; background:#fff;"> <center> <div style="width: 185px; background:#d5d5d5; font-family: BenchNine; text-transform: uppercase; font-size: 11px; color: #fff; line-height: 100%; text-align: center; padding-top: 2px; letter-spacing: 2px; margin-top: 5px; margin-bottom: -2px;"> Administración </div> <table cellspacing="5"> <tbody> <tr> <td> <div style="width: 90px; height: 70px; overflow: hidden; background-image:url(http://r12.imgfast.net/users/1214/13/72/77/avatars/91-72.jpg); margin-bottom: 3px;"> <div class="stafef"> <div style="color: #fff; font-size: 11px; text-align: center; font-family: calibri; line-height: 100%; padding-top: 10px; font-weight: 700;"> Rainbow Soldier<br /> <a href="http://www.eyesofangels.net/u2556"><span style="color:#beb1ba;">Contáctame</span></a> </div> </div> </div> </td> <td> <div style="width: 90px; height: 70px; overflow: hidden; background-image:url(http://r12.imgfast.net/users/1216/40/54/04/avatars/4208-30.jpg);"> <div class="stafef"> <div style="color: #fff; font-size: 11px; text-align: center; font-family: calibri; line-height: 100%; padding-top: 10px; font-weight: 700;"> Jem Carstairs<br /> <a href="http://www.eyesofangels.net/u4208"><span style="color:#beb1ba;">Contáctame</span></a> </div> </div> </div> </td> </tr> </tbody> </table> </center> </div> <div style="border: 3px double #d5c7b4; margin: 5px; width: 200px; height: 130px; background:#fff;"> <center> <div style="width: 185px; background:#d5d5d5; font-family: BenchNine; text-transform: uppercase; font-size: 11px; color: #fff; line-height: 100%; text-align: center; padding-top: 2px; letter-spacing: 2px; margin-top: 5px;"> Novedades </div> <div style="color: #beb1ba; font-size: 11px; text-align: left; font-family: calibri; line-height: 100%; padding-left: 8px; padding-right: 8px; margin-top: 3px; font-weight: 700;"> <a href=""> ❣08/11 Renovación total del foro.</a> <img src="https://38.media.tumblr.com/tumblr_lo1fh1s26P1qka0da.gif" /><br /> ❣ 00/00 Noticia que contar. <br /> ❣ 00/00 Noticia que contar. <br /> ❣ 00/00 Noticia que contar. </div> </center> </div> </td> <td> <div style="border: 3px double #d5c7b4; margin: 5px; width: 340px; height: 271px; background:#fff;"> <div style="width: 320px; margin: 10px; height: 90px; background-image:url(https://i37.servimg.com/u/f37/19/54/32/67/cabece10.jpg); margin-bottom: 5px;"> </div> <div style="float: left; width: 45%; color: #beb1ba; font-size: 11px; text-align: justify; font-family: Calibri; line-height: 100%; padding-left: 10px; font-weight: 700;"> Bienvenid@ a <em>Bookaholics</em>, la renovación total del antiguo foro <em>Eyes of Angels</em>,un foro literario dedicado a aquellos adictos a las buenas historias. Te invitamos a formar parte de nuestro pequeño imperio, adéntrate en el mundo literario que te ofrecemos, advertimos que una vez dentro no hay marcha atrás, pero te aseguramos que sin duda lo vas a disfrutar. ¡Te esperamos!<br /> <center> Atte: Staff Bookaholics </center> </div> <div style="float: right; width: 45%; color: #beb1ba; font-size: 11px; text-align: justify; font-family: calibri; line-height: 100%; padding-right: 10px; font-weight: 700;"> <center> Porfavor recuerda que: </center> ❣ No damos fechas de salida o publicación.<br />❣ Este es un foro hecho de fans para fans, no estamos afiliados a ninguna editorial por lo tanto nuestro trabajo es sin fines de lucro.<br />❣ La recopilación de nuestro trabajo está penada con expulsión del foro y daremos aviso al resto de foros pertenecientes a la comunidad literaria. </div> </div> </td> <td> <div style="margin: 5px; width: 200px; height: 130px; background:#fff; border: 3px double #d5c7b4;"> <center> <div style="width: 185px; background:#d5d5d5; font-family: BenchNine; text-transform: uppercase; font-size: 11px; color: #fff; line-height: 100%; text-align: center; padding-top: 2px; letter-spacing: 2px; margin-top: 5px;"> Avisos </div> <div style="color: #DEDDD0; font-size: 11px; text-align: justify; font-family: calibri; line-height: 100%; padding-left: 8px; padding-right: 8px; margin-top: 3px; font-weight: 700; overflow: auto; height: 100px;"> <img src="https://38.media.tumblr.com/tumblr_lo1fh1s26P1qka0da.gif" />❣ 08/11 Pruebas para Addicters abiertas <a href="url"><span style="color: rgb(71, 89, 109);">+INFO</span></a><br /><br />❣08/11 Pruebas para Smugglers abiertas <a href="url"><span style="color: rgb(71, 89, 109);">+INFO</span></a><br /><br />❣08/11 Pruebas para Traffickers abiertas <a href="url"><span style="color: rgb(71, 89, 109);">+INFO</span></a><br /><br /> </div> </center> </div> <div style="border: 3px double #d5c7b4; margin: 5px; width: 200px; height: 130px; background:#fff;"> <center> <div style="width: 185px; background:#d5d5d5; font-family: BenchNine; text-transform: uppercase; font-size: 11px; color: #fff; line-height: 100%; text-align: center; padding-top: 2px; letter-spacing: 2px; margin-top: 5px;"> Últimos Temas </div> <script> jQuery(document).ready(function(){ jQuery("#micontenedor").replaceWith(jQuery("#comments_scroll_div")); }); </script> <div id="contenedorultimostemas"> <div id="micontenedor"> </div> </div> </center> </div> </td> </tr> </tbody> </table> <table cellspacing="0"> <tbody> <tr> <td> <div style="border: 3px double #d5c7b4; margin: 5px; margin-top: 0px; width: 200px; height: 130px; background:#fff;"> <center> <div style="width: 185px; background:#d5d5d5; font-family: BenchNine; text-transform: uppercase; font-size: 11px; color: #fff; line-height: 100%; text-align: center; padding-top: 2px; letter-spacing: 2px; margin-top: 5px;"> Créditos </div> <div style="color: #beb1ba; font-size: 11px; text-align: justify; font-family: calibri; line-height: 100%; padding-left: 8px; padding-right: 8px; margin-top: 3px; font-weight: 700; overflow: auto; height: 100px;"> Este tablón ha sido diseñado por Hardrock de <a href="http://thecaptainknowsbest.tumblr.com/"><span style="color:#d5d5d5;">Captain Knows Best.</span></a><br />El skin fue creado por ¿? y modificado para su uso exclusivo de Bookaholics por Rainbow Soldier. </div> </center> </div> </td> <td> <center> <div style="border: 3px double #d5c7b4; margin: 5px; width: 200px; height: 130px; background:#fff; margin-top: 0px;"> <div style="width: 185px; background:#d5d5d5; font-family: BenchNine; text-transform: uppercase; font-size: 11px; color: #fff; line-height: 100%; text-align: center; padding-top: 2px; letter-spacing: 2px; margin-top: 5px; margin-bottom: 3px;"> Trabajamos en: </div><script language="javascript"> function VecImagenes() { n=0; this[n++]="http://i.imgur.com/dB4XbZa.jpg"; this[n++]="http://i.imgur.com/dB4XbZa.jpg"; this[n++]="http://i.imgur.com/dB4XbZa.jpg"; this[n++]="url_de_la_imagen04"; this[n++]="url_de_la_imagen05"; this.N=n; } var Imagenes=new VecImagenes(); src= Imagenes[ Math.floor(Math.random() * Imagenes.N) ] ; document.write("<img src="+src+" align=center>"); </script> </div> </center> </td> <td> <div style="border: 3px double #d5c7b4; margin: 5px; margin-top: 0px; width: 340px; height: 130px; background:#fff;"> <center> <div style="width: 325px; background:#d5d5d5; font-family: BenchNine; text-transform: uppercase; font-size: 11px; color: #fff; line-height: 100%; text-align: center; padding-top: 2px; letter-spacing: 2px; margin-top: 5px;"> Booktubers del Mes </div> <div style="width: 325px;"> <marquee scrollamount="2" scrolldelay="70" onmouseover="this.stop()" onmouseout="this.start()"> <table cellspacing="3"> <tbody> <tr> <td> <a href=""><img src="http://i.imgur.com/zViUh3M.jpg" /></a> <div style="width: 120px; background:#d5d5d5; font-family: BenchNine; text-transform: uppercase; font-size: 11px; color: #fff; line-height: 100%; text-align: center; padding-top: 2px; letter-spacing: 2px;"> Addict del Mes </div> </td> <td> <a href=""><img src="http://i.imgur.com/zViUh3M.jpg" /></a> <div style="width: 120px; background:#d5d5d5; font-family: BenchNine; text-transform: uppercase; font-size: 11px; color: #fff; line-height: 100%; text-align: center; padding-top: 2px; letter-spacing: 2px;"> Smuggler del Mes </div> </td> </tr> </tbody> </table> </marquee> </div> </center> </div> </td> </tr> </tbody> </table> </div> </center> </div> <style> #tablon-header { left:50px; position: absolute; right: 10px; top: 35px; transition: all 0.5s ease 0.5s; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } .headerbar .inner:hover #tablon-header { margin: 0; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } <script> jQuery(function () { jQuery(".headerbar .inner").append(jQuery("#tablon-header")); }); </script></style>

Cada vez que recargo la página aparece rápidamente y ya está,no consigo que se vea el efecto genial que necesito:(

Jue Nov 10, 2016 1:14 pm

Hola nena!~ Disculpa la demora, estuve revisando tu código y encontré el error! Pasa que no colocaste el hover correctamente.

Tú código lo tienes así:

Entonces te falta añadir el código para el hover así:

Creo que tu header es más chico que tu tablón así que te recomiendo hacerlo más largo ;D Si tienes más problemitas o dudas entonces dime y con gusto te ayudaré!
HELP: Tablón de anuncios cruel 2267839517

HELP: Tablón de anuncios cruel 2267839517

Jue Nov 10, 2016 8:41 pm

OMG me sentí poderosa dhfghgjfkd muchisimas gracias lof patsional para tú HELP: Tablón de anuncios cruel 1074632958

HELP: Tablón de anuncios cruel 386739646

Próx

Bridgerton

Luz vs Oscuridad

Paraíso Personal

Amor y Amistad

Conejo de Pascua

HELP: Tablón de anuncios cruel