Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Como puedo utilizar un css para un menu y otro para otro dentro de la misma pagina. en el foro de CSS en Foros del Web. 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, ...
  #1 (permalink)  
Antiguo 12/01/2008, 05:56
 
Fecha de Ingreso: diciembre-2007
Mensajes: 113
Antigüedad: 10 años
Puntos: 0
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.
  #2 (permalink)  
Antiguo 12/01/2008, 06:34
Avatar de aloqui  
Fecha de Ingreso: diciembre-2007
Mensajes: 973
Antigüedad: 10 años
Puntos: 24
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 { ... }
...
__________________
Grupos de Música
Pop Music Stars
  #3 (permalink)  
Antiguo 12/01/2008, 07:17
 
Fecha de Ingreso: diciembre-2007
Mensajes: 113
Antigüedad: 10 años
Puntos: 0
Re: Como puedo utilizar un css para un menu y otro para otro dentro de la misma pagin

Cita:
Iniciado por aloqui Ver Mensaje
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
  #4 (permalink)  
Antiguo 12/01/2008, 07:40
Avatar de aloqui  
Fecha de Ingreso: diciembre-2007
Mensajes: 973
Antigüedad: 10 años
Puntos: 24
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)
__________________
Grupos de Música
Pop Music Stars
  #5 (permalink)  
Antiguo 12/01/2008, 07:51
 
Fecha de Ingreso: diciembre-2007
Mensajes: 113
Antigüedad: 10 años
Puntos: 0
Re: Como puedo utilizar un css para un menu y otro para otro dentro de la misma pagin

Cita:
Iniciado por aloqui Ver Mensaje
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
  #6 (permalink)  
Antiguo 12/01/2008, 10:26
Avatar de aloqui  
Fecha de Ingreso: diciembre-2007
Mensajes: 973
Antigüedad: 10 años
Puntos: 24
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; 
}
__________________
Grupos de Música
Pop Music Stars
  #7 (permalink)  
Antiguo 12/01/2008, 14:28
 
Fecha de Ingreso: diciembre-2007
Mensajes: 113
Antigüedad: 10 años
Puntos: 0
Re: Como puedo utilizar un css para un menu y otro para otro dentro de la misma pagin

Cita:
Iniciado por aloqui Ver Mensaje
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.
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 01:12.