Entrar Regístrate
 
[HTML] Menú lateral
#1 · · Editado por Josepepe033

Descripción: Añade una tabla en el lateral del foro, en ella podrás añadir todas las celdas que quieras, incluyendo en ellas imágenes, textos, enlaces,...  Además, el menú se personaliza automáticamente con el aspecto del foro en el que se introduzca.

Ejemplo de Menú Lateral:


Lenguajes: HTML


Instalación: Copia y pega el sigiente código en la cabecera HTML de tu foro.

Cita:

<!--Menú Lateral by Josepepe033-->


<meta content="text/html; charset=ISO-8859-1"
</head> <body> <table align="center" style="padding: 0px; width: 100%; text-align: left;" border="0" cellpadding="2" cellspacing="2">  <tbody>  <tr>  <td colspan="2">  
<thead>
<tr>
<table align="center;" style= "padding: 0px; width: 100%; text-align: left;" cellpadding="2" cellspacing="2" colspan="2">  <tbody>
<tr><td valign="top"><table style="border: 1px solid #000000; width: 100%; height:40px; text-align: left;" cellpadding="2" cellspacing="0">
<tbody>

De ese código no hace falta modificar nada, aunque pueden elegir el alto y ancho de las celdas; ahora, agregaremos tantas celdas como queramos; podemos añadir:

  • Celda de título:
Cita:

<tr><td class='tabla_titulo' id='tabla_titulo_obj' style="border-bottom: 1px solid #000000;">TEXTO</td></tr>

  • Celda estilo bloque 1:
Cita:

<tr><td class="tabla_texto_1" style="border-bottom: 1px solid #000000;"><img src="ENLACE DE IMAGEN A MOSTRAR" border="0" align="absmiddle" /> <a href="ENLACE AL QUE REDIRIGE" style="text-decoration:none;">TEXTO</a> </td>

  • Celda estilo bloque 2:
Cita:

<tr><td class="tabla_texto_2" style="border-bottom: 1px solid #000000;"><img src="ENLACE DE IMAGEN A MOSTRAR" border="0" align="absmiddle" /> <a href="ENLACE AL QUE REDIRIGE" style="text-decoration:none;">TEXTO</a> </td>

Repitan ese código tantas veces como quieran; después de haber creado todas las celdas, añadimos el siguiente código:

Cita:

</tbody> </table><br>
<table style="width= 100%; text-align: center;" border="1" cellpadding="2" cellspacing="2">  <tbody>  </tbody>  </table> </td> <br>  <td valign="top">

Vamos al pie HTML, y al principio de éste, pegamos este código:

Cita:

</tr>
</thead>
<br>  </td>  </tr>  </tbody>  </td> </table> <br>


Espero que les sirva.

Saludos



Josepepe033
Moderador del foro
Moderador del foro
Haz clic para ver el perfil del usuario
Mensajes: 2.734
Desde: 10/Ene/2009
· ·
#2 · · Editado por RikkuTenjou

me ha encantado tu menú, esta genial! voy a probar como queda en la practica, muchas gracias por todo, eres muy bueno!


RikkuTenjou
Machacateclados
Machacateclados
Haz clic para ver el perfil del usuario
Mensajes: 218
Desde: 18/Abr/2009
· ·
#3 · · Editado por RikkuTenjou

perdón por el doble post, pero lo he hecho y no se porque, hace que todo el conjunto del foro en general se me desforme, o se me quede el fondo negro. Lo he instalado tanto en el HTML de la cabecera como en un HTML de menú de portal, pero me pasa lo mismo. Aquí está mi código, puede que haya hecho algo mal.

Cita:

<!--Menú Lateral by Josepepe033--> <tr><td align="center" valign="top" style="padding: 0px;" colspan="2"> <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr> <td style="min-width: 140px; width: 18%; max-width: 180px; border:1px solid #000000;" valign="top"> <table width="100%" align="center" cellpadding="3" cellspacing="0"> <tr><td class='tabla_titulo' id='tabla_titulo_obj' style="border-bottom: 1px solid #000000;">Archivos</td></tr> <tr><td style="border-bottom: 1px solid #000000;"><img src="https://espacioforos.miarroba.st/71878/Foro/plum_pic.gif" border="0" align="absmiddle" /> <a href="http://instituto-sakurai.mforos.com/1671194-informacion-sobre-el-rol/ " style="text-decoration:none;">Información sobre el rol </a> </td> <tr><td style="border-bottom: 1px solid #000000;"><img src="https://espacioforos.miarroba.st/71878/Foro/plum_pic.gif" border="0" align="absmiddle" /> <a href="http://instituto-sakurai.mforos.com/1671195-expedientes/" style="text-decoration:none;">Expedientes </a> </td> <tr><td style="border-bottom: 1px solid #000000;"><img src="https://espacioforos.miarroba.st/71878/Foro/plum_pic.gif" border="0" align="absmiddle" /> <a href="http://instituto-sakurai.mforos.com/1671197-panel-de-anuncios/" style="text-decoration:none;">Panel de Anuncios </a> </td> <tr><td style="border-bottom: 1px solid #000000;"><img src="https://espacioforos.miarroba.st/71878/Foro/plum_pic.gif" border="0" align="absmiddle" /> <a href="http://instituto-sakurai.mforos.com/1673624-diarios-secretos/" style="text-decoration:none;">Diarios Secretos </a> </td> <tr><td class='tabla_titulo' id='tabla_titulo_obj' style="border-bottom: 1px solid #000000;">Instituto Sakurai</td></tr> <tr><td style="border-bottom: 1px solid #000000;"><img src="http://img248.imageshack.us/img248/7783/azulicono.png" border="0" align="absmiddle" /> <a href="http://instituto-sakurai.mforos.com/forums/?cat=415970" style="text-decoration:none;">Edificios Comunes </a> </td> <tr><td style="border-bottom: 1px solid #000000;"><img src="http://img248.imageshack.us/img248/7783/azulicono.png" border="0" align="absmiddle" /> <a href="http://instituto-sakurai.mforos.com/forums/?cat=415972" style="text-decoration:none;">Vestuarios / Aseos </a> </td> <tr><td style="border-bottom: 1px solid #000000;"><img src="http://img248.imageshack.us/img248/7783/azulicono.png" border="0" align="absmiddle" /> <a href="http://instituto-sakurai.mforos.com/forums/?cat=415973" style="text-decoration:none;">Primer Piso - Aulas </a> </td> <tr><td style="border-bottom: 1px solid #000000;"><img src="http://img248.imageshack.us/img248/7783/azulicono.png" border="0" align="absmiddle" /> <a href="http://instituto-sakurai.mforos.com/forums/?cat=415974" style="text-decoration:none;">Residencias de Alumnos </a> </td> <tr><td style="border-bottom: 1px solid #000000;"><img src="http://img248.imageshack.us/img248/7783/azulicono.png" border="0" align="absmiddle" /> <a href="http://instituto-sakurai.mforos.com/forums/?cat=415975" style="text-decoration:none;">Edificio de Clubes </a> </td> <tr><td style="border-bottom: 1px solid #000000;"><img src="http://img248.imageshack.us/img248/7783/azulicono.png" border="0" align="absmiddle" /> <a href="http://instituto-sakurai.mforos.com/forums/?cat=415976" style="text-decoration:none;">Exterior </a> </td> <tr><td style="border-bottom: 1px solid #000000;"><img src="http://img248.imageshack.us/img248/7783/azulicono.png" border="0" align="absmiddle" /> <a href="http://instituto-sakurai.mforos.com/forums/?cat=415979" style="text-decoration:none;">Alrededores </a> </td> </td></tr> </table> <td align="center" valign="top" style="padding: 5px; padding-top: 0px;" ><br style="line-height:5px;" />

ow xD quedo todo hecho una bola, pero yo lo tengo ordenado sip.


RikkuTenjou
Machacateclados
Machacateclados
Haz clic para ver el perfil del usuario
Mensajes: 218
Desde: 18/Abr/2009
· ·
#4 ·

Hola, he insertado en mi foro de pruebas tu código y no me da ningun problema, así que debe ser la configuración de tu foro. De todas formas acabo de visitar tu página, y el menú está en orden.

Saludos



Josepepe033
Moderador del foro
Moderador del foro
Haz clic para ver el perfil del usuario
Mensajes: 2.734
Desde: 10/Ene/2009
· ·
#5 ·

Si, ahora esta en orden porque saqué el código (aun estoy haciendo pruebas) Si quieres hago una captura, pero si, yo tambien he pensado que debe ser por el código de la piel en si.

Lo que pasa cuando pongo este menú es que las ventanas se desforman y asanchan, y que en ocasiones el fondo queda negro o.o


RikkuTenjou
Machacateclados
Machacateclados
Haz clic para ver el perfil del usuario
Mensajes: 218
Desde: 18/Abr/2009
· ·
#6 · · Editado por Josepepe033

Prueba a dejar solamente el código del menú en la cabecera y quita el pie de HTML, en mi foro se ve bien:

Pruebas_Josepepe033.mforos.com

Pero si pones este menú, y tienes los bloques de Miarroba a la izquiera, el foro se quedaría dividido en tres bloques, que sería el menú lateral, y el bloque izqiuerdo y central de Miarroba.

Saludos



Josepepe033
Moderador del foro
Moderador del foro
Haz clic para ver el perfil del usuario
Mensajes: 2.734
Desde: 10/Ene/2009
· ·
#7 ·

En efecto, mira probe en otro foro que tengo y se me deformó xD

Spoiler:

Voy a probarlo en algun foro que este limpio completamente a ver


RikkuTenjou
Machacateclados
Machacateclados
Haz clic para ver el perfil del usuario
Mensajes: 218
Desde: 18/Abr/2009
· ·
#8 ·

Aviso de que al copiar y pegar los códigos para crear cada celda, se me borró una parte sin querer, que es la que define el estilo de cada uno de éstas, así que al crear cada celda, debes poner después del <td esto:

Cita:

class="tabla_texto_1" o class="tabla_texto_2"

RikkuTenjou, el menú presenta algunos fallos, pero no debería desconfigurarte el foro; así que enseñame que tienes en tu cabecera de HTML (todo, no solo el menú).

Saludos



Josepepe033
Moderador del foro
Moderador del foro
Haz clic para ver el perfil del usuario
Mensajes: 2.734
Desde: 10/Ene/2009
· ·
#9 ·

ok, pues voy a hacer un par de pruebas antes de nada y si sigo sin encontrar lo que falla te paso el HTML que tengo instalado.

Gracias por la ayuda ^^


RikkuTenjou
Machacateclados
Machacateclados
Haz clic para ver el perfil del usuario
Mensajes: 218
Desde: 18/Abr/2009
· ·
#10 ·

Hola;

Te ruego que rehagas el menú con el nuevo código del mensaje principal, pues he solucionado los fallos y he cambiado bastante la estructura, ahora no debería darte ningún problema. (Agradezco a EffectedCard su ayuda)

Saludos



Josepepe033
Moderador del foro
Moderador del foro
Haz clic para ver el perfil del usuario
Mensajes: 2.734
Desde: 10/Ene/2009
· ·
#11 · · Editado por PaseanteDelForo

Lo he probado y funciona bien, pero me queda la imprecion de que es igual, por que el fondo al ser negro con lineas semiinvisibles, son iguales que las lineas que dividen que son parte de la tabla. si lo mirais , te vas a dar cuenta de lo que digo.

dejo el link aqui: XXXXXXXXXXXXXXXX, puede que sepas como cambiar el fondo, pero asi mismo dejar el color de a tabla

en otras palabras, que se diferencie la tabla del fondo.

desde ya, y buena tabla

Edicion de la Moderacion:

A ver, trata de no poner la direccion de tu foro cada vez que postees, salvo que sea muy, muy preciso...ya que de lo contrario, es considerado spam.

Si en tu perfil pones la direccion de tu foro en la barra inferior de cada mensaje que postees, sale esto:

Haz clic para ver el perfil del usuarioPerfil·Privado·Desconectado·Haz clic para visitar la página webWeb

donde pone web, estara el link a tu foro, y cualquiera podra verlo, y asi no haces spam.   ¿ok?


Lost_717
Usuario habitual
Usuario habitual
Haz clic para ver el perfil del usuario
Mensajes: 48
Desde: 18/Nov/2009
· ·
#12 ·

Puedes crear con CSS un nuevo estilo así:

Cita:

<style type="text/css">
.tabla_texto_3{
font-family: Helvetica;
font-size: 13px;
color: #FFFFFF;
border-top: 1px solid #FBFAF6;
border-left: 1px solid #FBFAF6;
border-right: 1px solid #E5E4DB;
border-bottom: 1px solid #E5E4DB;
}
</style>

Pones ese código en la cabecera o pie de HTML de tu foro, y modificas los valores que quieras. Entonces, en el menú lateral, en cada línea, en vez de poner :

Cita:

class="tabla_texto_1" o class="tabla_texto_2"

Puedes poner:

Cita

class="tabla_texto_3"

Saludos



Josepepe033
Moderador del foro
Moderador del foro
Haz clic para ver el perfil del usuario
Mensajes: 2.734
Desde: 10/Ene/2009
· ·
#13 ·

muchas gracias , voy a probarlo


Lost_717
Usuario habitual
Usuario habitual
Haz clic para ver el perfil del usuario
Mensajes: 48
Desde: 18/Nov/2009
· ·
#14 ·

Muy buenas!! soy un poco novato... bueno, bastante novato...

Quisiera intentar poner el codigo en mi foro, pero no se exactamente como e de hacerlo, es decir, se donde se pega, pero no se el idioma HTML (sease, nose como escribir o poner lo que necesito dentro de ellas)

Mi idea era por ejemplo poner un rankin de mejores posteadores... ¿Me puedes dar un mini ejemplo... porfi...?:z):l)


LocoMouchen
Usuario habitual
Usuario habitual
Haz clic para ver el perfil del usuario
Mensajes: 23
Desde: 29/Dic/2009
· ·
#15 ·

Primero necesitaría que me dijeras donde quieres insertar ese ranking (en alguna columna del portal o en el HTML de tu foro). De todas formas Miarroba ya ofrece un bloque con los usuarios más activos que se puede poner en el portal sin modificar nada.

Saludos



Josepepe033
Moderador del foro
Moderador del foro
Haz clic para ver el perfil del usuario
Mensajes: 2.734
Desde: 10/Ene/2009
· ·
#16 ·

Bueno, el ranquin en cuestion nose si se podria poner (por ejemplo) un ranquin de puntuacion, es decir, de los puntos consegidos en un juego o algo por el estilo...

Si no es posible, me gustaria incluir tu columna vertical en mi foro, no tengo el portal activo, ¿me lo recomiendas?

No obstante, el donde colocarla es lo que menos me preocupa, siempre que quede bien, te dejo aqui un enlace a mi foro por si quieres comprobar algo. ¡GRACIAS POR TODO!


LocoMouchen
Usuario habitual
Usuario habitual
Haz clic para ver el perfil del usuario
Mensajes: 23
Desde: 29/Dic/2009
· ·
#17 ·

Pues personalmente me gustan los foros con portal, y te lo recomendaría. No obstante, si quieres inlcuir un ranking con, digamos 3 usuarios, aquí te dejo este código que hice, para que lo pongas en el HTML de tu foro.

Código:
<!--Tabla_Ranking By Josepepe033-->
<table align="center" style="padding: 0px; width: 30%; text-align: center; border: 1px solid #000000;" cellpadding="2" cellspacing="0">
<tr>
<td class='tabla_titulo' id='tabla_titulo_obj'><div align="center"><b>Nick</b></div></td>
<td class='tabla_titulo' id='tabla_titulo_obj'><div align="center"><b>Puesto</b></div></td>
</tr>
<tr>
<td class='tabla_texto_1'><div align="center">Ganador1</div></td>
<td class='tabla_texto_1'><div align="center">1º</div></td>
</tr>
<tr>
<td class='tabla_texto_2'><div align="center">Ganador2</div></td>
<td class='tabla_texto_2'><div align="center">2º</div></td>
</tr>
<tr>
<td class='tabla_texto_1'><div align="center">Ganador3</div></td>
<td class='tabla_texto_1'><div align="center">3º</div></td>
</tr>

Puedes añadir facilmente más columnas, copiando y pegando desde un <tr> a un </tr> del código que te dí.

Saludos



Josepepe033
Moderador del foro
Moderador del foro
Haz clic para ver el perfil del usuario
Mensajes: 2.734
Desde: 10/Ene/2009
· ·
#18 ·

Muchas gracias hermano, incluire el portal, ahora solo me falta que me quede bien con la imagen que tengo puesta... cosa improbable, asi que me intentare buscar un diseño por aqui, si saes de alguno te lo agradeceria, el estilo que busco es militar o MW2, no hace falta que me ayudes pero si sabes de alguno...lo agradeceria xD gracias de nuevo tio!!!!

PSDT: Me biene de perlas el rankin :D


LocoMouchen
Usuario habitual
Usuario habitual
Haz clic para ver el perfil del usuario
Mensajes: 23
Desde: 29/Dic/2009
· ·
#19 ·

Hermano tengo un problema, e puesto el rankin en el portal y el titulo ( lo e puesto como ID/gamertag     Mando) me sale imvisible... no se me ve devido al color rojo y negro que tengo en el foro... podrias decirme como hacer para que esto se vea?

Gracias hermano, por cierto, estas invitado a mi foro eh? xD:-]


LocoMouchen
Usuario habitual
Usuario habitual
Haz clic para ver el perfil del usuario
Mensajes: 23
Desde: 29/Dic/2009
· ·
#20 ·

Holaa!! Por que no actualizan los codigos para trucos???

Por favor...


Condesa-Erzsebet
Machacateclados
Machacateclados
Haz clic para ver el perfil del usuario
Mensajes: 110
Desde: 15/Ago/2006
· ·
ATENCIÓN: Este tema no tiene actividad desde hace más de 6 MESES,
te recomendamos abrir un nuevo tema en lugar de responder al actual
Foro de soporte · Comunidades de foros · Diseños y Skins foros
Opciones:
Versión imprimible del tema
Subscríbete a este tema
Date de baja de este tema
Ir al subforo:  
TU NO PUEDES Escribir nuevos temas en este foro
TU NO PUEDES Responder a los temas en este foro
TU NO PUEDES Editar tus propios mensajes en este foro
TU NO PUEDES Borrar tus propios mensajes en este foro
Ahora son las 18:54 UTC+02:00 DST
Temas similares
 I FotoPTemaMensajesÚltima respuesta
No Hay mensajes nuevosHaz clic para ver el perfil del usuario705/Abr/2011, 21:37
Josepepe033 Ir al último mensaje del tema
No Hay mensajes nuevosHaz clic para ver el perfil del usuario
Menu Lateral
Por: Jackoneto · 04/Jun/2006, 20:33
1210/Jun/2006, 21:35
Jackoneto Ir al último mensaje del tema