Foros del Web » Creando para Internet » CSS »

Como poner dos menús css en una misma hoja??

Estas en el tema de Como poner dos menús css en una misma hoja?? en el foro de CSS en Foros del Web. Hola tengo dos menús css uno horizontal y otro vertical que se cargan en la misma página a través de un include php cada uno, ...
  #1 (permalink)  
Antiguo 28/07/2009, 14:19
 
Fecha de Ingreso: julio-2009
Mensajes: 117
Antigüedad: 8 años, 5 meses
Puntos: 0
Como poner dos menús css en una misma hoja??

Hola tengo dos menús css uno horizontal y otro vertical que se cargan en la misma página a través de un include php cada uno, el menú horizontal pasa a ser vertical y compartiendo algunas propiedades del menú vertical


código des primer menú (horizontal):

Código:
<style type="text/css"> 
#menu { font-family:Calibri; height:34px; position:relative; background:#6679d2; -moz-border-radius:10px; -webkit-border-radius:10px; margin: 10px 0;}
#nav { margin:0px; padding:0px; position:absolute; display:block;}
#nav > li { list-style-type:none; float:left; display:block; margin:0px; position:relative; padding:1px; width:40px;}
#nav > li:hover ul { display:block; }
#nav > li:hover { background-color:#3b4d83; -moz-border-radius:10px; -webkit-border-radius:10px; }
#nav li ul { margin:0px; padding:0px; display:none;}
#nav li ul li { list-style-type:none; margin:10px 0 0 0;}
#nav li ul li a { display:block; padding:5px 10px; color:#A2E200; text-decoration:none}
#nav li ul li:hover a { background-color:#606060; -moz-border-radius:10px; -webkit-border-radius:10px;}
#nav li span { cursor:pointer; margin:0px 10px; font-weight:bold; }
a {
	color: #000000;
}
a:visited {
	color: #000000;
}
a:active {
	color: #000000;
}
a:hover {
	color: #000000;
}
</style>
código del segundo menú (vertical):

Código:
<style type="text/css"> 
ul {margin: 0;	padding: 0;	list-style: none;	width: 211px;}
ul li {	position: relative;	}
li ul {	position: absolute;	left: 300px; top: 0; display: none;	}
ul li a {	display: block;	text-decoration: none;	color: #777;	background: transparent;	padding: 5px;	border-bottom: 0;	}
ul {	margin: 0;	padding: 0;	list-style: none;	width: 211px;	}
ul li {position: relative;}
 
ul {margin: 0;	padding: 0;	list-style: none;	width: 211px;}
ul li {	position: relative;	}
li ul {	position: absolute;	left: 300px; top: 0; display: none;	}
ul li a {	display: block;	text-decoration: none;	color: #777;	background: transparent;	padding: 5px;	border-bottom: 0;	}
ul {	margin: 0;	padding: 0;	list-style: none;	width: 211px;	}
ul li {position: relative;}
li:hover ul { display:block; }
 
.style2 {
	font-family: Tahoma;
	font-size: small;
}
</style>
como hago para que que le menú horizontal nos e modifique por culpa de menú vertical.

PD: el que quiera la dirección web donde están los menús para ver mejor de lo que hablo que me lo diga y se la mando por PM.
  #2 (permalink)  
Antiguo 28/07/2009, 15:01
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Como poner dos menús css en una misma hoja??

la clave está en "especificidad css"
Sé más específico en tus declaraciones:
ul li {...}
Afecta a todos los li de tu página.
#horizontal ul li {...} sólo a los li que estén dentro de una caja con: <div id="horizontal">
#vertical ul li {...} idem pero <div id="vertical">
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 28/07/2009, 15:30
 
Fecha de Ingreso: julio-2009
Mensajes: 117
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Como poner dos menús css en una misma hoja??

Gracias voy a mirar me imaginaba que podia ser algo asi tambien estaba por especificar los includes pero no estaba seguro de si era valido ni de como hacerlo como esto.

gracias
  #4 (permalink)  
Antiguo 30/07/2009, 05:45
 
Fecha de Ingreso: julio-2009
Mensajes: 117
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Como poner dos menús css en una misma hoja??

Hola de nuevo.

He conseguido que el menú vertical no modifique al menú horizontal y viceversa y cada uno con sus propiedades tal y como dijiste ahora los submenus del menú vertical no salen paralelos a su menu correspondiente. gracias

estilo css del menú horizontal:

Código:
#menu { font-family:Calibri; height:34px; position:relative; background:#6679d2; -moz-border-radius:10px; -webkit-border-radius:10px; margin: 10px 0;}
#nav { margin:0px; padding:0px; position:absolute; display:block;}
#nav > li { list-style-type:none; float:left; display:block; margin:0px; position:relative; padding:1px; width:40px;}
#nav > li:hover ul { display:block; }
#nav > li:hover { background-color:#3b4d83; -moz-border-radius:10px; -webkit-border-radius:10px; }
#nav li ul { margin:0px; padding:0px; display:none;}
#nav li ul li { list-style-type:none; margin:10px 0 0 0;}
#nav li ul li a { display:block; padding:5px 10px; color:#A2E200; text-decoration:none}
#nav li ul li:hover a { background-color:#606060; -moz-border-radius:10px; -webkit-border-radius:10px;}
#nav li span { cursor:pointer; margin:0px 10px; font-weight:bold; }
a {
	color: #000000;
}
a:visited {
	color: #000000;
}
a:active {
	color: #000000;
}
a:hover {
	color: #000000;
}
y menú css horizontal
Código:
<div id="menu">
            <ul id="nav" style="left: 3px; top: 5px; height: 51px">
 
            <li style="left: 0px; top: 0px; width: 57px"><span>
			<a href="">Inicio</a></span></li>
            <li style="left: -8px; top: 0px; width: 81px"><span>
			<a href="">Situación</a></span></li>
            <li style="left: -15px; top: 0px; width: 108px"><span>
			<a href="">Instalaciones</a></span></li>
            <li style="left: -20px; top: 0px; width: 142px"><span>
			<a href="">Horarios y Cuotas</a></span></li>
            <li style="left: -28px; top: 0px; width: 96px"><span>
			<a href="">El Maestro</a></span></li>
            <li style="left: -36px; top: 0px; width: 105px"><span>
			<a href="">Musculación</a></span></li>
            <li style="left: -44px; top: 0px; width: 97px"><span>
			<a href="">Taekwondo</a></span></li>
            <li style="left: -52px; top: -1px; width: 70px"><span>
			<a href="">Aeróbic</a></span></li>
            <li style="left: -60px; top: 0px; width: 161px"><span>
			<a href="">Jeet Kune Do Murcia</a></span></li>
            <li style="left: 876px; top: -20px; width: 138px"><span>Otras actividades</span>
                <ul>
                    <li><a href="">Danza del Vientre</a></li>
                    <li><a href="">Step</a></li>
               </ul>
            </li>            
    </div>
estilo css del menú vertical: (edito)
Código:
#mene {margin: 0;	padding: 0;	list-style: none;	width: 211px;}
#nov ul li {	position: relative;	}
#nov li ul {	position: absolute;	left: 211px; display: none;	}
#nov li a {	display: block;	text-decoration:none;	color: #777;	background: transparent;	padding: 5px;}
#nov ul {	margin: 0;	padding: 0;	list-style: none;	width: 211px;	}
#nov ul li {position: relative;}
#nov li:hover ul { display: block; }

.style2 {
	font-family: Tahoma;
	font-size: small;
}
nota: ahora si sale el sub menú, pero no sale en linea con el menu

menú css vertical:(edito)
Código:
<div id="mene" style="height: 169px">
<ul id="nov"> 
    <li class="style2">Principal</li> 
    <li class="style2"><a href="#">Artículos y entrevistas</a></li> 
    <li><span class="style2"><a href="#">Conoce al instructor</a></span> 
      <ul> 
        <li><a href="#">Imagenes</a></li> 
      </ul> 
    </li>
    <li><span class="style2"><a href="#">Jeet Kune Do</a></span> 
      <ul> 
        <li><a href="#">Imagenes</a></li> 
      </ul> 
    </li><li><span class="style2"><a href="#">Filipino Martial Arts (KALI-ESKRIMA-ARNIS)</a></span> 
      <ul> 
        <li><a href="#">Imagenes</a></li> 
      </ul> 
    </li><li><span class="style2"><a href="#">Maphilindo Silat & Majapahit Martial Arts</a></span> 
      <ul> 
        <li><a href="#">Imagenes</a></li> 
      </ul> 
    </li>
    </ul>
</div>
nota: he metido el menú en una etiqueta <div>.

repito ahora el problema lo tengo con los submenus del menú vertical que no salen en linea con con el menú (si no, una linea por debajo)

Última edición por taoshi; 30/07/2009 a las 07:26
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 08:04.