Sobreado de links según una variable de página

xamamo · #1 (**permalink**) 08/04/2008, 03:34

Hola a todos,

tengo dos columnas en mi página web. En una se me carga un listado de nombres. Y en la derecha la descripción asociada a ese nombre.

Me gustaría que cuando pinchas en el link de un nombre y se cargue el contenido en la derecha, el nombre de ese título (columna izda) se quede sombreado. No como 'hover' o 'visitado' sino como algo activo.

Cuando cambiara de nombre que se mostrara otra info pues ese otro nombre sombreado. Encontré un código más o menos así que no conseguí hacer funcionar:

Código PHP:

  
<? $res=mysql_query("select * from promociones where estado='actual'");

while($fila=mysql_fetch_array($res))

    {

    ?>

//Hasta aquí mi código

 <li<?php if ($fila["nombre"] == "$edit") echo " class=\"seleccionado\""; ?>>

<a href="promocion.php?id_promocion=<?echo $fila["id_promocion"];?>">>

 <?echo $fila["nombre"];?></a>

</li>

 
            <? } ?>

Código:

.listado li.seleccionado a { background-color: #d9dadc; color: black; padding: 10px 0px 10px 15px; }

Pues esó, que si estamos en la página:

http://mihost.com/mipagina.php (Nada con background)
http://mihost.com/mipagina.php?id_nombre=10 (la fila con el nombre del id 10 sombreada)

Este código es el que he encontrado con más sentido aunque creo que no lo supe aplicar.

alguna sugerencia o tutorial sobre este caso?

Mil gracias

arriaka · #2 (**permalink**) 08/04/2008, 09:07

Hola xamamo

El codigo CSS parece ser correcto (suponiendo que <ul class="listado"> sea quien contenga a los <li>).

Puede que haya algun error en el codigo PHP. En eso de momento no te puedo ayudar. Estoy haciendo un curso de PHP pero todavia no hemos hecho conexiones con la base de datos!

De todas maneras se me ocurre que puedes mirar el codigo fuente que sale despues de ejecutarlo. Mira a ver si el <li> en el que haces clic y quieres que se le cambie el fondo tiene escrito <li class="seleccionado">.

Saludos

xamamo · #3 (**permalink**) 08/04/2008, 14:54

Muchas gracias por tu comentario. La verdad que llevo haciendo pruebas todo el día, finalmente me salió con esto código y ahora solo tengo un problema técnico de visualización que con mis conocimientos de css no se llega a comportar como quiero. El caso es que ya se marca cuando estoy en la página pero se me muestra con un padding muy extraño.

De hecho es cojonudo, el primer registro se me lista con la 'altura' que toca pero los otros dos (mal.jpg) no se comportan como quiero. Se que el problema está en el código CSS seguro así que les muestro por si algún entendido pudiera hecharme una ayuda:

El caso está aquí:

http://www.rwfact.com/images/bien.jpg (como debería verse)
http://www.rwfact.com/images/mal.jpg (como se ve ahora... mal)

El código que uso:

Código PHP:

 
    <td colspan="2" class="listado">

 
                <?

 
        $res=mysql_query("select * from promociones where estado='actual'");

 
    while($fila=mysql_fetch_array($res))

 
            {

 
            ?>

 
                <h1<?php if ($fila["id_promocion"] == "$edit") echo " class=\"seleccionado\""; ?>>

             <a href="promocion.php?id_promocion=<?echo $fila["id_promocion"];?>">> <?echo $fila["nombre"];?></a></h1>

 
            <? } ?>

        

 
    </td>

CSS:

Código PHP:

  .listado {  vertical-align: top; font-family: verdana; font-size: 11px;  text-align: left; border-bottom: 1px solid #a4a5a7; border-left: 1px solid #a4a5a7;border-right: 1px solid #a4a5a7;font-weight: bold; }

 
.listado a { font-size: 11px; border-bottom: 1px solid #a4a5a7; color: #7c7b7b; text-decoration: none; display: block; padding: 10px 0px 10px 15px; }

 
.listado a:hover { font-size: 11px; border-bottom: 1px solid #a4a5a7; background-color: #d9dadc; display: block; color: black; padding: 10px 0px 10px 15px; }

 
.listado h1 a { font-size: 11px; border-bottom: 1px solid #a4a5a7; color: #7c7b7b; text-decoration: none; display: block; padding: 10px 0px 10px 15px; }

 
.listado h1 a:hover { font-size: 11px; border-bottom: 1px solid #a4a5a7; background-color: #d9dadc; display: block; color: black; height: 15px; }

 
.listado h1.seleccionado a {  background-color: #d9dadc; color: black; display: block; padding: 10px 0px 10px 15px;  }

 
.listado h1.seleccionado a:hover { background-color: #d9dadc; color: black; display: block; padding: 10px 0px 10px 15px; }

Sobra mucho código CSS seguro, pero como no es mi fuerte, perdonen si repito código.

Un saludo

juaniquillo · #4 (**permalink**) 08/04/2008, 16:26

deberías poner el codigo html que genera el navegador (View -> Page Source en Firefox) en vez del codigo PHP.

He probado lo que pusiste lo que veo es que no le has quitado el margin y el padding original del h1. Agrégale:

Código HTML:

 .listado h1{margin:0; padding:0;}

arriaka · #5 (**permalink**) 08/04/2008, 16:55

Si, seguramente seran el margin y el padding del h1.

De todas maneras, no le estas dando un uso adecuado al h1. El h1 es para los titulos de la pagina o del sitio web, por lo que se supone que solo se podria usar una unica vez. Podrias hacer lo mismo, pero usando por ejemplo el h2.

Saludos