Menu Activo con class

[emilio_viguri]

Bueno saludos a todos y espero me puedan ayudar con esto...

Tengo un menu echo por tablas todo funciona bien el problema es que como tengo que poner una sentencia o clase para que en el codigo yo le ponga class="activo" y se muestre activo la opcion.

no se CSS lo utiliso muy basicamente...

este es mi codigo de archivo CSS

Código CSS:

table.menu a {
    border: 1px solid #000;
    display: block;
    background-color: #D0E0ED;
    font-family: Tahoma, verdana, sans-serif;
}
 
div.menu a {
    color: #000000;
    text-decoration: none;
    font-size: 12px;
    line-height: 16px;
    padding: 3px 6px;
    font-family: Tahoma, verdana, sans-serif;
    background-color: #BAD1E4;
}   
div.menu (position:absolute;top:0; left:0;) /*fixes IE slowness?? */
div.menu a:link {
    color: #000;
    text-decoration: none;
    background: #BAD1E4;
}
div.menu a:active {
    color: #000;
    text-decoration: none;
    background: #BAD1E4;
}
div.menu a:visited {
    color: #000;
    text-decoration: none;
    background: #BAD1E4;
}
div.menu a:hover {
    color: #FFF;
    text-decoration: none;
    background: #FE7400;
    border: 1px solid #000000;
}
 

y este es mi menu archivo HTML

Código HTML:

<div class="menu">
  <table class="menu">
    <tr>
      <td><a href="partida_agregar.php" class="activo">Partida</a></td>
    </tr>
    <tr>
      <td><a href="proveedor.php">Proveedor</a></td>
    </tr>
    <tr>
      <td><a href="hospital.php">Hospital</a></td>
    </tr>
    <tr>
      <td><a href="orden1.php">Orden</a></td>
    </tr>
    <tr>
      <td><a href="rrappyd.php">Remision Rappyd</a></td>
    </tr>
    <tr>
      <td><a href="factura.php">Factura</a></td>
    </tr>
    <tr>
      <td><a href="reporte/listareportes.php">Reportes</a></td>
    </tr>
  </table>
</div>
 

La pregunta es como hago para que en mi codigo HTML en la primera opcion de mi tabla si yo le pongo activo (class="activo") se vea activo, con los colores del CSS sobre ( div.menu a:hover { )

archivo CSS

Código CSS:

menu.activo tr td a {
    border: 2px solid #000;
    display: block;
    background-color: #FE7400;
    text-decoration: none;
    border: 2px solid #000000;
    background: #FE7400;
}
 

segun yo esto si lo pongo como activo me deve de poner la opcion como si tubiera el raton sobre la opcion pero no lo logre

[pzin]

Código CSS:

menu.activo tr td a
 

Con esto lo que haces es seleccionar un enlace dentro de td, que está en tr en un tabla que tenga una clase llamada activo.
Es decir, algo así:

Código HTML:

<table class="activo">
  <tr>
    <td>
      <a...>
 

No tienes ninguna tabla con una clase activo.

Tu selector, según tu HTML, debería de apuntar en todo caso a un enlace con la clase activo, no una tabla con la clase activo.

Código CSS:

menu tr td a.activo
 

Supongo que ya lo del :hover lo puedes sacar sin mayor problema.

Y aquí es donde hubiera que recomendarte echarle un vistazo a algún manual/tutorial; http://librosweb.es dicen que está muy bien.

Como dice uno de por aquí, by the way, tampoco estaría de más olvidarte de usar una tabla para hacer un menú.

[emilio_viguri]

entonces si yo le pongo en mi archivo css con los atributos, me va a iluminar entonces la tr td que tenco marcada con la classe activo ???

Código CSS:

menu tr td a.activo
 

bueno lo voy a intentar y despues comento como me fue con la respuesta . . .

[pzin]

Iniciado por emilio_viguri

me va a iluminar entonces la tr td que tenco marcada con la classe activo ???

a.activo se refiere a elemento A con la clase activo.

[furoya]

Que por otro lado, es lo único en ese HTML que puede ser activo.



Por tu ejemplo, emilio_viguri, me parece que no tenés mucha idea de CSS. Así que no sé si vas a entender esta explicación, pero comento que -hasta donde sé- con CSS3 no se puede apuntar con formatos a un elemento "padre"; solamente "hijos" y "hermanos".
Y adivino por lo incoherente de tu hoja de estilos que lo que suponés es que con esa sintaxis "subís" desde el ancla hasta (p.e.) la tabla o su contenedor.

Si fuera para la celda que contiene al enlace, hay un pequeño truco, que es expandirlo hasta ocupar toda la celda y así el formato parece que se lo aplicaras a ella.
Si hay más ancestros, lo único que se me ocurre es javascript.

Un detalle: la próxima, si podés poner el código completo, listo para copiar y probar, mejor.
Así como lo dejaste, repartido en cómodas cuotas, no sólo es más difícil de leer, sino de editar para verlo funcionando.
Justo aquí no era grave, porque se entiende de mirarlo por encima; pero en la mayoría de los casos no es así.

[emilio_viguri]

Bueno pues contestando a lo comentado por furoya pongo el codigo completo para mi menu y pues entiendo mas o menos tengo nociones se programar en otras cosas pero no en CSS como ven entonces lo que repito...

solo quiero que la opcion que marque como activo (class="activo") se quede iluminada como si tubiera el raton sobre ella

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
table.menu a {
    border: 1px solid #000;
    display: block;
    background-color: #D0E0ED;
    font-family: Tahoma, verdana, sans-serif;
}
 
div.menu a {
    color: #000000;
    text-decoration: none;
    font-size: 12px;
    line-height: 16px;
    padding: 3px 6px;
    font-family: Tahoma, verdana, sans-serif;
    background-color: #BAD1E4;
}   
div.menu (position:absolute;top:0; left:0;) /*fixes IE slowness?? */
div.menu a:link {
    color: #000;
    text-decoration: none;
    background: #BAD1E4;
}
div.menu a:active {
    color: #000;
    text-decoration: none;
    background: #BAD1E4;
}
div.menu a:visited {
    color: #000;
    text-decoration: none;
    background: #BAD1E4;
}
div.menu a:hover {
    color: #FFF;
    text-decoration: none;
    background: #FE7400;
    border: 1px solid #000000;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>
 
<body>
    <div class="menu">
      <table class="menu">
        <tr>
          <td><a href="partida_agregar.php" class="activo">Partida</a></td>
        </tr>
        <tr>
          <td><a href="proveedor.php">Proveedor</a></td>
        </tr>
        <tr>
          <td><a href="hospital.php">Hospital</a></td>
        </tr>
        <tr>
          <td><a href="orden1.php">Orden</a></td>
        </tr>
        <tr>
          <td><a href="rrappyd.php">Remision Rappyd</a></td>
        </tr>
        <tr>
          <td><a href="factura.php">Factura</a></td>
        </tr>
        <tr>
          <td><a href="reporte/listareportes.php">Reportes</a></td>
        </tr>
      </table>
    </div>
</body>
</html>
 

[pzin]

Bastaría con que cambiaras esta línea

Código CSS:

div.menu a:hover
 

por esta otra.

Código CSS:

div.menu a:hover,div menu a.activo:link {
 

Y hasta este último mensaje la verdad es que no te había entendido. Claro que ahora releyendo si se entiende mejor que antes de saber.

Supongo que probarías con .activo nada más como selector o algo parecido. Pero al tener :link, este tiene preferencia, por lo que hay que volver a declararlo junto al .activo.

[furoya]

Claro, la clase está en el código fuente; dependiendo de la página en que se vea el menú, class=activo se encontrará en uno u otro botón. Pero no los cambiás con CSS ni javascript, ni nada. La única animación es el hover.

Ahora yo también entiendo.
Es así como te dice Bonez, el mismo formato que le das al hover se lo ponés a .activo, separados con una coma.

[emilio_viguri]

no pues no lo pude echar andar :( como lo tenia funcion pero no pude hacer la $&#$#%& opcion activada ...

Pero no me quede sin respuesta asi que lo termine encontrando en otro lado y lo termine dejando asi ...

Código CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#subMenu {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    WIDTH: 100%;
    COLOR: #000000;
    PADDING-TOP: 25px;
    font-family: Verdana, Geneva, sans-serif;
}
#subMenu UL {
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px;
    LIST-STYLE-TYPE: none;
    font-family: Verdana, Geneva, sans-serif;
}
#subMenu LI {
    DISPLAY: block;
    MARGIN: 0px;
    LIST-STYLE-TYPE: none;
    font-family: Verdana, Geneva, sans-serif;
}
#subMenu A {
    DISPLAY: block;
    MARGIN: 0px;
    COLOR: #000000;
    TEXT-DECORATION: none;
    font-family: Verdana, Geneva, sans-serif;
}
#subMenu A.d0 {
    PADDING-RIGHT: 12px;
    PADDING-LEFT: 12px;
    PADDING-BOTTOM: 7px;
    PADDING-TOP: 7px;
    background-color: #D0E0ED;
    font-family: Verdana, Geneva, sans-serif;
}
#subMenu A.open {
    background-color: #D0E0ED;
    font-family: Verdana, Geneva, sans-serif;
}
#subMenu A.d1 {
    PADDING-RIGHT: 12px;
    PADDING-LEFT: 24px;
    BACKGROUND: #D0E0ED;
    PADDING-BOTTOM: 7px;
    PADDING-TOP: 7px;
    font-family: Verdana, Geneva, sans-serif;
}
#subMenu A.d2 {
    PADDING-RIGHT: 12px;
    PADDING-LEFT: 36px;
    BACKGROUND: #D0E0ED;
    PADDING-BOTTOM: 7px;
    PADDING-TOP: 7px;
    font-family: Verdana, Geneva, sans-serif;
}
#subMenu A.d3 {
    PADDING-RIGHT: 12px;
    PADDING-LEFT: 48px;
    BACKGROUND: #D0E0ED;
    PADDING-BOTTOM: 7px;
    PADDING-TOP: 7px;
    font-family: Verdana, Geneva, sans-serif;
}
#subMenu A:hover {
    background-color: #FA7200;  /* BACKGROUND: #a9a18c */
    font-family: Verdana, Geneva, sans-serif;
}
#subMenu #current {
    FONT-WEIGHT: bold;
    background-color: #FF9C4A;  /* FONT-WEIGHT: bold; BACKGROUND: #d0cbbf */
    font-family: Verdana, Geneva, sans-serif;
}
#subMenu A.open {
    BACKGROUND: #ECD9D9;
    font-family: Verdana, Geneva, sans-serif;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>
 
<body>
<div id="subMenu">
    <ul>
        <li><a href="partida_agregar.php" class="d0" id="current">Partida</a></li>
        <li><a href="proveedor.php" class="d0">Proveedor</a></li>
        <li><a href="hospital.php" class="d0">Hospital</a></li>
        <li><a href="orden1.php" class="d0">Orden</a></li>
        <li><a href="rrappyd.php" class="d0">Remision Rappyd</a></li>
        <li><a href="factura.php" class="d0">Factura</a></li>
        <li><a href="reporte/listareportes.php" class="d0">Reportes</a></li>
    </ul>
</div>
</body>
</html>
 

[furoya]

Es que seguimos en la misma. No entendés, entonces copiás y pegas; y te quedan esos códigos que después tenemos que venir a corregirlos.
Porque está muy bien y te reconocemos el que traigas una solución luego de plantear una duda, pero la idea es que publiquemos código que sirvan de ejemplo para que otros aprendan.

¡Mirá el ejemplo que les estás dando!

Lo que te decía Bonez era

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#subMenu {
    padding: 0;
    margin: 0;
    width: 100%;
    padding-top: 25px;
    font-family: verdana, geneva, sans-serif;
}
#subMenu ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}
#subMenu li {
    margin: 0;
}
#subMenu a {
    display: block;
    margin: 0;
    color: #000000;
    text-decoration: none;
}
#subMenu a.d0 {
    padding: 7px 12px;
    background-color: #d0e0ed;
}
#subMenu #current, #subMenu a:hover {
    font-weight: bold;
    background-color: #fa7200;
}

</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>
 
<body>
<div id="subMenu">
    <ul>
        <li><a href="partida_agregar.php" class="d0" id="current">Partida</a></li>
        <li><a href="proveedor.php" class="d0">Proveedor</a></li>
        <li><a href="hospital.php" class="d0">Hospital</a></li>
        <li><a href="orden1.php" class="d0">Orden</a></li>
        <li><a href="rrappyd.php" class="d0">Remision Rappyd</a></li>
        <li><a href="factura.php" class="d0">Factura</a></li>
        <li><a href="reporte/listareportes.php" class="d0">Reportes</a></li>
    </ul>
</div>
</body>
</html>

Allí ves la separación con coma y el código limpio. Y ahora sí están iguales los formatos.

[emilio_viguri]

Si este codigo si me funciono con LI, pero con tablas NO pude hacerlo, que si te das cuenta en si el que yo pido ayuda fue el de table el primer codigo y el ultimo codigo que puse publicando es como lo pude hacer funcionar y si funciona ...

[furoya]

Ah. No me acordaba. Yo te depuré el último ejemplo, que ya andaba, pero era cualquier cosa menos prolijo.

¿Qué problema tenés con la tabla? Habrá que hacer algún ajuste de formato, pero tendría que andar igual.


Edición:

Para que vamos a andar con vueltas. Los dos sabemos que en una tabla anda perfectamente.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<style type="text/css">
#menu {
    padding: 0;
    margin: 0;
    width: 100%;
    font-family: verdana, geneva, sans-serif;
}
#menu a {
    display: block;
    margin: 0;
    font-size: 16px; 
    width: 10em;
    color: #000000;
    text-decoration: none;
    padding: 7px 12px;
    background-color: #d0e0ed;
}
#menu #current, #menu a:hover {
    font-weight: bold;
    background-color: #fa7200;
}
</style>
</head>
<body>

  <table id="menu">
    <tr>
      <td><a href="partida_agregar.php" id="current">Partida</a></td>
    </tr>
    <tr>
      <td><a href="proveedor.php">Proveedor</a></td>
    </tr>
    <tr>
      <td><a href="hospital.php">Hospital</a></td>
    </tr>
    <tr>
      <td><a href="orden1.php">Orden</a></td>
    </tr>
    <tr>
      <td><a href="rrappyd.php">Remision Rappyd</a></td>
    </tr>
    <tr>
      <td><a href="factura.php">Factura</a></td>
    </tr>
    <tr>
      <td><a href="reporte/listareportes.php">Reportes</a></td>
    </tr>
  </table>

</body>
</html>