Foros del Web

Foros del Web (http://www.forosdelweb.com/)
-   CSS (http://www.forosdelweb.com/f53/)
-   -   Como puedo utilizar un css para un menu y otro para otro dentro de la misma pagina. (http://www.forosdelweb.com/f53/como-puedo-utilizar-css-para-menu-otro-para-otro-dentro-misma-pagina-547552/)

marco_sa 12/01/2008 05:56
Como puedo utilizar un css para un menu y otro para otro dentro de la misma pagina.
 
Hola

Quisiera poder asignar un tipo de menú a una parte de una pagina y otro tipo de menu a otra parte de la pagina, os pongo el codigo.

Tengo dos ficheros css

El 1 es para botonera del menu operarios y es este:

Código:
# menu_operarios
ul {
                list-style-type: none;
                font-family:sans-serif;
               
                text-align: center
                }
li {       
       
                display:inline;
                background-color: #000000;
                margin:6px;
                margin-right: 10px;
                font-size:16px;
                }
               
li a {
        font-family: sans-serif;
        width:120px;
        padding:4px 4px;
        text-decoration:none;
        text-align:center;
        font-weight:bold;
        font-size:11px;
        color:#FFFFFF;
        background-color:#000000;
        border-left:10px solid #666666;
        }
li a:hover { color:#CC9900;
        background-color:#CCCC66;
        border-left-color:#CC9900;
        }
El 2 es para botonera del menu delegaciones y es este:
Código:
# menu_delegaciones
ul {
                list-style-type: none;
                font-family: verdana, arial, sans-serif;
               
                text-align: center
                }
li {       
       
                display:inline;
                background-color: #000000;
                margin:6px;
                margin-right: 10px;
                font-size:16px;
                }
               
li a {
        font-family: verdana, arial, sans-serif;
        width:120px;
        padding:4px 4px;
        text-decoration:none;
        text-align:center;
        font-weight:bold;
        font-size:11px;
        color:#FFFFFF;
        background-color:#000000;
        border-left:10px solid #666666;
        }
li a:hover { color:#FF0000;
        background-color:#FFFFFF;
        border-left-color:#FF0000;
        }
Los llamo desde mi web asi:
Código HTML:
<link href="css/menus_index_gestion_delegacion.css" rel="stylesheet" type="text/css">
<link href="css/botonera_menus_index_operarios.css" rel="stylesheet" type="text/css">
Y los utilizo asi desde un div

Código HTML:
<div id="menu_operarios">
        <ul>
        <li><a href="nuevo_empleado_d.php>">NUEVO EMPLEADO</a> </li>
        <li><a href="crear_jefes_equipo.php">CREAR JEFES DE EQUIPO</a></li>
        <li><a href="baja_empleado.php" >BAJA EMPLEADO<br>
          <br>
        </a></li>
        <li><a href="ver_comisiones.php">COMISIONES DE OPERARIO</a></li>
        <li><a href="modificar_empleado_d.php">VER &oacute; MODIFICAR EMPLEADO</a></li>
          </ul>
      </div>       


<div id="menu_delegaciones">
        <ul>
                <li><a href="lfact.php">LOTE FACTURAS</a></li> 
        <li><a href="lcontra.php" >LOTE CONTRATOS</a></li>
                <li><a href="carga_material.php" >CARGA MATERIAL</a></li>
        </ul></div>
Solo me carga la ultima opción osease lo lee todo como el menu_operarios y no como el menu_delegaciones.

Alguien sabe si se puede hacer esto, y como por que por logica no va, a todos los enlaces les aplica el estilo ultimo cargado.

Un saludo y gracias.

aloqui 12/01/2008 06:34
Re: Como puedo utilizar un css para un menu y otro para otro dentro de la misma pagin
 
Una opcion es que los elementos (ul, li, a...) no sean absolutos, sino relativos.
Y ya que tienes un div con id en cada uno puedes hacerlo relativo a dichos IDs:

Para operarios.css:
Código:
#menu_operarios ul { ... }
#menu_operarios li { ... }
...
y para delegaciones.css:
Código:
#menu_delegaciones ul { ... }
#menu_delegaciones li { ... }
...

marco_sa 12/01/2008 07:17
Re: Como puedo utilizar un css para un menu y otro para otro dentro de la misma pagin
 
Cita:
Iniciado por aloqui (Mensaje 2245831)
Una opcion es que los elementos (ul, li, a...) no sean absolutos, sino relativos.
Y ya que tienes un div con id en cada uno puedes hacerlo relativo a dichos IDs:

Para operarios.css:
Código:
#menu_operarios ul { ... }
#menu_operarios li { ... }
...
y para delegaciones.css:
Código:
#menu_delegaciones ul { ... }
#menu_delegaciones li { ... }
...
Hola aloqui

Lo he probado y nada de nada no va, se si lo he hecho bien pero he puesto delante de cada ul y li el nombre del menu que quiero que salga.

Es asi?

Saludos y gracias

aloqui 12/01/2008 07:40
Re: Como puedo utilizar un css para un menu y otro para otro dentro de la misma pagin
 
Debes poner delante (separandos con al menos un espacio) el elemento en que está incluido, en tu caso un div.
Si el div estuviera definido con una clase (class="clase1" , habria que poner delante ".clase1" (con un punto, y sin comillas)
Pero como el div está definido con un id (id="id2"), debes poner delante "#id2" (un numeral, y sin comillas)

marco_sa 12/01/2008 07:51
Re: Como puedo utilizar un css para un menu y otro para otro dentro de la misma pagin
 
Cita:
Iniciado por aloqui (Mensaje 2245862)
Debes poner delante (separandos con al menos un espacio) el elemento en que está incluido, en tu caso un div.
Si el div estuviera definido con una clase (class="clase1" , habria que poner delante ".clase1" (con un punto, y sin comillas)
Pero como el div está definido con un id (id="id2"), debes poner delante "#id2" (un numeral, y sin comillas)
Hola aloqui

Entonces en mis div como debo de ponerlo por que no me entero de la misa la media estoy empanao esta mañana.

Saludos

aloqui 12/01/2008 10:26
Re: Como puedo utilizar un css para un menu y otro para otro dentro de la misma pagin
 
Prueba esto, debería funcionar:

El fichero con el CSS del menú de operarios:
Código:
#menu_operarios ul
{
  list-style-type: none;
  font-family:sans-serif;
  text-align: center
}

#menu_operarios ul li
{   
  display:inline;
  background-color: #000000;
  margin:6px;
  margin-right: 10px;
  font-size:16px;
}
     
#menu_operarios ul li a
{
  font-family: sans-serif;
  width:120px;
  padding:4px 4px;
  text-decoration:none;
  text-align:center;
  font-weight:bold;
  font-size:11px;
  color:#FFFFFF;
  background-color:#000000;
  border-left:10px solid #666666;
}

#menu_operarios ul li a:hover
{
  color:#CC9900;
  background-color:#CCCC66;
  border-left-color:#CC9900;
}
El fichero con el CSS del menú de operarios:
Código:
#menu_delegaciones ul
{
  list-style-type: none;
  font-family: verdana, arial, sans-serif;
  text-align: center
}

#menu_delegaciones ul li
{   
  display:inline;
  background-color: #000000;
  margin:6px;
  margin-right: 10px;
  font-size:16px;
}
     
#menu_delegaciones ul li a
{
  font-family: verdana, arial, sans-serif;
  width:120px;
  padding:4px 4px;
  text-decoration:none;
  text-align:center;
  font-weight:bold;
  font-size:11px;
  color:#FFFFFF;
  background-color:#000000;
  border-left:10px solid #666666;
}

#menu_delegaciones ul li a:hover
{
  color:#FF0000;
  background-color:#FFFFFF;
  border-left-color:#FF0000;
}

marco_sa 12/01/2008 14:28
Re: Como puedo utilizar un css para un menu y otro para otro dentro de la misma pagin
 
Cita:
Iniciado por aloqui (Mensaje 2246005)
Prueba esto, debería funcionar:

El fichero con el CSS del menú de operarios:
Código:
#menu_operarios ul
{
  list-style-type: none;
  font-family:sans-serif;
  text-align: center
}

#menu_operarios ul li
{   
  display:inline;
  background-color: #000000;
  margin:6px;
  margin-right: 10px;
  font-size:16px;
}
     
#menu_operarios ul li a
{
  font-family: sans-serif;
  width:120px;
  padding:4px 4px;
  text-decoration:none;
  text-align:center;
  font-weight:bold;
  font-size:11px;
  color:#FFFFFF;
  background-color:#000000;
  border-left:10px solid #666666;
}

#menu_operarios ul li a:hover
{
  color:#CC9900;
  background-color:#CCCC66;
  border-left-color:#CC9900;
}
El fichero con el CSS del menú de operarios:
Código:
#menu_delegaciones ul
{
  list-style-type: none;
  font-family: verdana, arial, sans-serif;
  text-align: center
}

#menu_delegaciones ul li
{   
  display:inline;
  background-color: #000000;
  margin:6px;
  margin-right: 10px;
  font-size:16px;
}
     
#menu_delegaciones ul li a
{
  font-family: verdana, arial, sans-serif;
  width:120px;
  padding:4px 4px;
  text-decoration:none;
  text-align:center;
  font-weight:bold;
  font-size:11px;
  color:#FFFFFF;
  background-color:#000000;
  border-left:10px solid #666666;
}

#menu_delegaciones ul li a:hover
{
  color:#FF0000;
  background-color:#FFFFFF;
  border-left-color:#FF0000;
}
Hola aloqui


Muchisimas gracias ahora si ha funcionado, poniendo la referencia en el div como siempre y cambiando los archivos css.

Mil gracias por tu ayuda, saludos.


La zona horaria es GMT -6. Ahora son las 09:42.

Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2026, Jelsoft Enterprises Ltd.