Foros del Web » Creando para Internet » CSS »

Foros despleglables 2.

Estas en el tema de Foros despleglables 2. en el foro de CSS en Foros del Web. Hola a todos. Llevo buscando una idea hace tiempo para esto, pero creo que hoy se me ha ocurrido. El punto es que no se ...
  #1 (permalink)  
Antiguo 17/12/2008, 02:24
 
Fecha de Ingreso: noviembre-2008
Mensajes: 16
Antigüedad: 9 años
Puntos: 0
Foros despleglables 2.

Hola a todos.

Llevo buscando una idea hace tiempo para esto, pero creo que hoy se me ha ocurrido. El punto es que no se com aplicarlo correctamente, ya que aún soy un usuario inicial en esto.

Lo que pasa es que tengo un foro que tiene categorías y en cada categorías los subforos, y el foro es tan grande, que cuesta encontrar la información.

Basándome en la idea del menú desplegable vertical con CSS, me gustaría hacer lo mismo para los foros.

El siguiente segmento de código corresponde a la siguiente captura, que representa una categoría con dos foros.



Código:
 <div class="forabg"> 
                          <div class="inner"><span class="corners-top"><span></span></span> 
                            <ul class="topiclist">
                              <li class="header"> 
                                <dl class="icon">
                                  <dd class="dterm"> 
                                    <div class="table-title"> 
                                      <h2>Relaciones Exteriores de la Confederación</h2>
                                    </div>
                                  </dd>
                                  <dd class="topics">Argumentos</dd>
                                  <dd class="posts">Mensajes</dd>
                                  <dd class="lastpost"><span>Últimos Mensajes</span></dd>
                                </dl>
                              </li>
                            </ul>

                            <ul class="topiclist forums">

                              <li class="row"> 
                                <dl class="icon" style="background-image: url(../hitskin.com/themes/11/31/75/i_folder_big.png); background-position: 10px 50%;">
                                  <dd class="dterm"> 
                                    <div style="display: block; margin : 0 0px 0 45px;"> 
                                      <h3 class="hierarchy"><a href="halo-embajada-f3/index.html" class="forumtitle">Halo 
                                        Embajada</a></h3>
                                      <br />
                                      <p></p>
                                      <table VALIGN="middle">
                                        <tr> 
                                          <td><a href="halo-embajada-f3/index.html"><img src="../img522.imageshack.us/img522/1926/cascohalocopy2vr7.png" border="0" alt="" /></a></td>
                                          <td><strong>Bienvenidos a la Alianza 
                                            Halo, si tienes algún pacto que proponernos, 
                                            indícalo aquí.</strong></td>
                                        <tr> 
                                      </table>
                                      <br />
                                      <strong></strong> </div>
                                  </dd>
                                  <dd class="topics">3 <dfn>Argumentos</dfn></dd>
                                  <dd class="posts">10 <dfn>Mensajes</dfn></dd>
                                  <dd class="lastpost"><span><a href="halo-embajada-f3/halo-t6.htm#14" title="Halo">Halo</a><br />
                                    Sáb Nov 22, 2008 8:45 pm<br />
                                    <strong><a href="login66b0.html?mode=viewprofile&amp;u=5" class="gensmall" rel="nofollow">Rapaig</a></strong><a href="halo-embajada-f3/halo-t6.htm#14" class="last-post-icon"><img src="../hitskin.com/themes/11/31/75/i_icon_latest_reply.gif" alt="Ver el último mensaje" title="Ver el último mensaje" /></a></span></dd>
                                </dl>
                              </li>
                              <li class="row"> 
                                <dl class="icon" style="background-image: url(../hitskin.com/themes/11/31/75/i_folder_big.png); background-position: 10px 50%;">
                                  <dd class="dterm"> 
                                    <div style="display: block; margin : 0 0px 0 45px;"> 
                                      <h3 class="hierarchy"><a href="embajada-de-la-republica-de-jedis-y-siths-ojs-f4/index.html" class="forumtitle">Embajada 
                                        de la República de Jedis y Siths (O.J.S)</a></h3>
                                      <br />
                                      <p></p>
                                      <table VALIGN="middle">
                                        <tr> 
                                          <td><a href="embajada-de-la-republica-de-jedis-y-siths-ojs-f4/index.html"><img src="../img88.imageshack.us/img88/6360/luke70bt7.png" border="0" alt="" /></a></td>
                                          <td><strong>Bienvenidos a la Alianza 
                                            O.J.S, si tienes algún Pacto o Sugerencia, 
                                            éste es el lugar a expresarlo.</strong></td>
                                        <tr> 
                                      </table>
                                      <br />
                                      <strong></strong> </div>
                                  </dd>
                                  <dd class="topics">0 <dfn>Argumentos</dfn></dd>
                                  <dd class="posts">0 <dfn>Mensajes</dfn></dd>
                                  <dd class="lastpost"></dd>
                                </dl>
                              </li>
                            </ul>
                            <span class="corners-bottom"><span></span></span></div>
El código CSS que estoy ocupando:

Código:
/*Foros desplegables*/

ul.topiclist forums
{
    list-style:none;
}


ul.topiclist forums, dd.dterm
{
   display:none;
   list-style:none;
} 

ul.topiclist li:hover > dl, dd 
{
   display:block;
}
Traté de aplicar el CSS, tal cual (y las variaciones que he hecho), me presenta lo siguiente.



Ahora lo que me gustaría es que mostrara, por lo menos el nombre de la categoría y luego al pasar por la categoría se desplegara todo el contenido de la categoría.

Que se viera en este caso : "Relaciones Exteriores de la Confederación"

Saludos
Iván

Última edición por Rapaig; 17/12/2008 a las 03:59
  #2 (permalink)  
Antiguo 17/12/2008, 09:35
 
Fecha de Ingreso: noviembre-2008
Mensajes: 16
Antigüedad: 9 años
Puntos: 0
Respuesta: Foros despleglables 2.

He probado, mediante ensayo y error corregir el error.. y no he tenido resultados positivos, siempre lo mismo. Se termina ocultando todo...

Saludos
Iván
  #3 (permalink)  
Antiguo 17/12/2008, 16:44
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: Foros despleglables 2.

Esto es mas o menos sencillo:

Estructura:
Código:
<script>
function show_hide( divToHide ) {
	var elem, vis;
	if( document.getElementById ) // this is the way the standards work
		elem = document.getElementById( divToHide );
	else if( document.all ) // this is the way old msie versions work
		elem = document.all[divToHide];
	else if( document.layers ) // this is the way nn4 works
		elem = document.layers[divToHide];
	vis = elem.style;
	if(vis.display == 'block') {
		vis.display = 'none';
	} else {
		vis.display = 'block';
	} 
}
</script>
<titulo de categoria 1><a href="javascript:show_hide('fcat1');">Ocultar</a>
<div id="fcat1" style="display:block;">
    Aqui todos los foros que pertenecen a la categoria
</div>

<titulo de categoria 2><a href="javascript:show_hide('fcat2');">Ocultar</a>
<div id="fcat2" style="display:block;">
    Aqui todos los foros que pertenecen a la categoria
</div>
__________________
- León, Guanajuato
- GV-Foto
  #4 (permalink)  
Antiguo 17/12/2008, 20:40
 
Fecha de Ingreso: noviembre-2008
Mensajes: 16
Antigüedad: 9 años
Puntos: 0
Respuesta: Foros despleglables 2.

Hola Triby.

Gracias por responder, pero no puedo ocupar tu código, porque ello implica editar el código del foro. Y es lo que no puedo hacer, porque el foro ya viene hecho de cierta manera. Uno crea las categorías y foros en un pánel de administración.

Por ende no pueado agregar la línea:

Cita:
<a href="javascript:show_hide('fcat1');">Ocultar</a>
Porque no puedo editar el código fuente.

Las cosas que puedo hacer, es colocar un java o manipular el CSS.

Saludos
Iván
  #5 (permalink)  
Antiguo 18/12/2008, 13:15
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: Foros despleglables 2.

Si el foro es PHPBB, vBulletin, Invision, PunBB, etc. y tienes acceso al codigo fuente, por supuesto que puedes modificarlo, a menos que no sepas PHP.

1- Respalda el archivo antes de modificarlo
2- Modifica libremente y ve si funciona
3- Si hay algun error, vuelve a colocar el archivo original
__________________
- León, Guanajuato
- GV-Foto
  #6 (permalink)  
Antiguo 18/12/2008, 18:38
 
Fecha de Ingreso: noviembre-2008
Mensajes: 16
Antigüedad: 9 años
Puntos: 0
Respuesta: Foros despleglables 2.

Cita:
Iniciado por Triby Ver Mensaje
Si el foro es PHPBB, vBulletin, Invision, PunBB, etc. y tienes acceso al codigo fuente, por supuesto que puedes modificarlo, a menos que no sepas PHP.

1- Respalda el archivo antes de modificarlo
2- Modifica libremente y ve si funciona
3- Si hay algun error, vuelve a colocar el archivo original
Pues me pillas mal. Porque no se dónde puedo editar el código fuente del foro.

El servidor del foro, es www.foroactivo.com.

Y la página del foro que tengo es halo-ojs.activoforo.com

Saludos
Iván
  #7 (permalink)  
Antiguo 18/12/2008, 18:51
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: Foros despleglables 2.

Ok, estando en un foro de hosting gratuito va a ser dificil que tengas acceso al codigo fuente, pero aun puedes modificar la plantilla header.tpl para agregar el scritp y forum_index.tpl (segun creo) para agregar el boton (preferiblemente) que oculte o muestre categorias.
__________________
- León, Guanajuato
- GV-Foto
  #8 (permalink)  
Antiguo 18/12/2008, 18:58
 
Fecha de Ingreso: noviembre-2008
Mensajes: 16
Antigüedad: 9 años
Puntos: 0
Respuesta: Foros despleglables 2.

El script lo puedo agregar sin problemas. Pero lo único que puedo editar es la CSS. del foro. Por eso era que buscaba una alternativa de ocultar y mostrar los foros, mediante el método del menú de despliege vertical.

Saludos
Iván.

PD: esos archivos, solo los veo, cuando descargo el foro de internet y lo manejo en mi PC. Pero arriba no tengo como verlo.
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 03:52.