Como puedo utilizar un css para un menu y otro para otro dentro de la misma pagina.

marco_sa · #1 (**permalink**) 12/01/2008, 05:56

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 · #2 (**permalink**) 12/01/2008, 06:34

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 · #3 (**permalink**) 12/01/2008, 07:17

Cita:

Iniciado por aloqui

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 · #4 (**permalink**) 12/01/2008, 07:40

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 · #5 (**permalink**) 12/01/2008, 07:51

Cita:

Iniciado por aloqui

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 · #6 (**permalink**) 12/01/2008, 10:26

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 · #7 (**permalink**) 12/01/2008, 14:28

Cita:

Iniciado por aloqui

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.