Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Sobreado de links según una variable de página en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 08/04/2008, 04:34
 
Fecha de Ingreso: septiembre-2007
Mensajes: 106
Antigüedad: 10 años, 2 meses
Puntos: 1
Sobreado de links según una variable de página

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
  #2 (permalink)  
Antiguo 08/04/2008, 10:07
Avatar de arriaka  
Fecha de Ingreso: febrero-2008
Mensajes: 45
Antigüedad: 9 años, 9 meses
Puntos: 1
Re: Sobreado de links según una variable de página

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
  #3 (permalink)  
Antiguo 08/04/2008, 15:54
 
Fecha de Ingreso: septiembre-2007
Mensajes: 106
Antigüedad: 10 años, 2 meses
Puntos: 1
Re: Sobreado de links según una variable de página

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-aligntopfont-familyverdanafont-size11px;  text-alignleftborder-bottom1px solid #a4a5a7; border-left: 1px solid #a4a5a7;border-right: 1px solid #a4a5a7;font-weight: bold; }

.listado a font-size11pxborder-bottom1px solid #a4a5a7; color: #7c7b7b; text-decoration: none; display: block; padding: 10px 0px 10px 15px; }

.listado a:hover font-size11pxborder-bottom1px solid #a4a5a7; background-color: #d9dadc; display: block; color: black; padding: 10px 0px 10px 15px; }

.listado h1 a font-size11pxborder-bottom1px solid #a4a5a7; color: #7c7b7b; text-decoration: none; display: block; padding: 10px 0px 10px 15px; }

.listado h1 a:hover font-size11pxborder-bottom1px 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
  #4 (permalink)  
Antiguo 08/04/2008, 17:26
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 12 años
Puntos: 281
Re: Sobreado de links según una variable de página

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;}
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
  #5 (permalink)  
Antiguo 08/04/2008, 17:55
Avatar de arriaka  
Fecha de Ingreso: febrero-2008
Mensajes: 45
Antigüedad: 9 años, 9 meses
Puntos: 1
Re: Sobreado de links según una variable de página

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
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:45.