Foros del Web » Creando para Internet » CSS »

Menu Css

 Estas en el tema de Menu Css en el foro de CSS en Foros del Web. Hola, estoy teniendo unos problemitas con este menu css...y los submenus no se q es lo que hacen q copian la imagen del menu...he estado ...
  #1 (permalink)  
Antiguo 18/05/2008, 11:37
Avatar de Marcos071  
Fecha de Ingreso: enero-2006
Ubicación: Presidencia Roque Sáenz Peña - Chaco
Mensajes: 384
Antigüedad: 18 años, 3 meses
Puntos: 5
Menu Css
Hola, estoy teniendo unos problemitas con este menu css...y los submenus no se q es lo que hacen q copian la imagen del menu...he estado probando varias cosas pero no puedo lograr eso...aqui lo dejo comentado al css y al html.


Aqui el html...

Código: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<title>Menú horizontal con CSS</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<script type="text/javascript" src="funciones.js"></script>

<body>
<div id="principal">

  <div id="cabecera"> 
    <div id="titulo"> 
      <h1>Cabecera del sitio</h1>
    </div>
  </div>
  


<div id="menu">
<ul>


    <li id="inicio"><a href="#"></a> 
      <ul id="submenu">
        <li class="inicio"><a href="#">Area Legal</a></li>
      </ul>
    </li>



    <li id="propiedades"><a href="#">Propiedades</a> 
      <ul>
        <li><a href="#">Compra</a></li>
        <li><a href="#">Venta</a></li>
        <li><a href="#">Alquiler</a></li>
        <li><a href="#">Alquiler Temporario</a></li>
      </ul>
    </li>
 


    <li id="arquitectura"><a href="#"></a> 

    </li>



    <li id="tasaciones"><a href="#"></a> 

    </li>



     <li id="contacto"><a href="#"></a> 

    </li>


</ul>


</div>

</div>
</body>
</html>

Y aqui el css...

Código: 
@charset "utf-8";
/* CSS Document */

* {
  margin:0;
  padding:0;
}
body {
  min-width: 680px;
  background: #999; 
  padding:10px;
}

#cabecera {
  background: #eee;
}

#titulo {
  height:75px;
  background:#ccc;
}

div#menu {
  float: left;
}


#menu li {
	float:left;
	position:relative;
	list-style:none;
}


#inicio a{background-image:url(bot1.jpg); width:245px; height:51px;}
#inicio a:active{background:url(bot1.jpg) left 51px;}
#inicio a:hover{background:url(bot1.jpg) left 51px;}


#propiedades a{background-image:url(bot2.jpg); width:221px; height:51px;}
#propiedades a:active{background:url(bot2.jpg) left 51px; }
#propiedades a:hover{background:url(bot2.jpg) left 51px;}

#arquitectura a{background-image:url(bot3.jpg); width:137px; height:51px;}
#arquitectura a:active{background:url(bot3.jpg) left 51px; }
#arquitectura a:hover{background:url(bot3.jpg) left 51px;}

#tasaciones a{background-image:url(bot4.jpg); width:130px; height:51px;}
#tasaciones a:active{background:url(bot4.jpg) left 51px; }
#tasaciones a:hover{background:url(bot4.jpg) left 51px;}

#contacto a{background-image:url(bot5.jpg); width:217px; height:51px;}
#contacto a:active{background:url(bot5.jpg) left 51px; }
#contacto a:hover{background:url(bot5.jpg) left 51px; }


.inicio{ width:245px; height:20px; text-align:center;}
.inicio a:active{ left 51px;}
.inicio a:hover{ left 51px;}

#submenu ul li {
  display:block;        
  text-decoration:none;   
  background-color:#006699;
}


div#menu a {
  display:block;        
  text-decoration:none;   
}

div#menu ul li ul {
   position:absolute;       
   
}

div#menu ul li ul li {
         
   border:1px 1px 1px 1px solid #069;
}

body div#menu ul li ul {
  display:none;
}

div#menu ul li:hover ul, div#menu ul li ul:hover {
  display:block;
}
  #2 (permalink)  
Antiguo 18/05/2008, 11:46
Avatar de juaniquillo
Colaborador
  
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 18 años, 4 meses
Puntos: 281
Respuesta: Menu Css
creo que tienes que quitarle el background al enlace de los sub-menús ya que estan heredando esa propiedad:

Código HTML:
#inicio a ul li a{background: none;}
#inicio a ul li a:hover{background: none;}
#inicio a ul li a:active{background: none;}
eso lo tienes que hacer con todos los enlaces de los sub-menús.

También acuerdate que el orden de las 'pseudo-classes' de los enlaces deben ser así:

Código HTML:
a:link {color: #FF0000}     /* unvisited link */
a:visited {color: #00FF00}  /* visited link */
a:hover {color: #FF00FF}   /* mouse over link */
a:active {color: #0000FF}   /* selected link */
Tú tienes el 'active' antes del 'hover'. Aquí tienes mas información al respecto:
http://www.w3schools.com/CSS/css_pseudo_classes.asp
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
  #3 (permalink)  
Antiguo 18/05/2008, 12:03
Avatar de Marcos071  
Fecha de Ingreso: enero-2006
Ubicación: Presidencia Roque Sáenz Peña - Chaco
Mensajes: 384
Antigüedad: 18 años, 3 meses
Puntos: 5
Respuesta: Menu Css
Haber...pues no comprendo lo de herencia de las clases...cuando te refieres a esta parte

Código: 
#inicio a ul li a{background: none;}
#inicio a ul li a:hover{background: none;}
#inicio a ul li a:active{background: none;}

Pues lo que tengo es esto...que es donde pongo las imagenes como fondo de los menus, pero como hago para hacer referencia a los submenus? porque creo que si pongo como tu dices quedaria asi...



Código: 
@charset "utf-8";
/* CSS Document */

* {
  margin:0;
  padding:0;
}
body {
  min-width: 680px;
  background: #999; 
  padding:10px;
}

#cabecera {
  background: #eee;
}

#titulo {
  height:75px;
  background:#ccc;
}

div#menu {
  float: left;
}


#menu li {
	float:left;
	position:relative;
	list-style:none;
}


#inicio a{background-image:url(bot1.jpg); width:245px; height:51px;}
#inicio a:hover{background:url(bot1.jpg) left 51px;}
#inicio a:active{background:url(bot1.jpg) left 51px;}


#propiedades a{background-image:url(bot2.jpg); width:221px; height:51px;}
#propiedades a:hover{background:url(bot2.jpg) left 51px;}
#propiedades a:active{background:url(bot2.jpg) left 51px; }

#arquitectura a{background-image:url(bot3.jpg); width:137px; height:51px;}
#arquitectura a:hover{background:url(bot3.jpg) left 51px;}
#arquitectura a:active{background:url(bot3.jpg) left 51px; }

#tasaciones a{background-image:url(bot4.jpg); width:130px; height:51px;}
#tasaciones a:hover{background:url(bot4.jpg) left 51px;}
#tasaciones a:active{background:url(bot4.jpg) left 51px; }

#contacto a{background-image:url(bot5.jpg); width:217px; height:51px;}
#contacto a:hover{background:url(bot5.jpg) left 51px; }
#contacto a:active{background:url(bot5.jpg) left 51px; }




#inicio a ul li a{background: none;} /*.......igualmente no funciona porque sigue heredando las imagenes......*/
#inicio a ul li a:hover{background: none;}
#inicio a ul li a:active{background: none;}

#propiedades a ul li a{background: none;}
#propiedades a ul li a:hover{background: none;}
#propiedades a ul li a:active{background: none;}

/*.............etc etc etc...para los demas casos......*/


div#menu a {
  display:block;        
  text-decoration:none;   
}

div#menu ul li ul {
   position:absolute;       
   
}

div#menu ul li ul li {
         
   border:1px 1px 1px 1px solid #069;
}

body div#menu ul li ul {
  display:none;
}

div#menu ul li:hover ul, div#menu ul li ul:hover {
  display:block;
}

O donde es que debo modificar esto? proque si lo modifico donde dice esto...

Código: 
#inicio a{background-image:url(bot1.jpg); width:245px; height:51px;}
#inicio a:hover{background:url(bot1.jpg) left 51px;}
#inicio a:active{background:url(bot1.jpg) left 51px;}
no va a poner las imagenes como fondo...
  #4 (permalink)  
Antiguo 18/05/2008, 12:24
Avatar de Marcos071  
Fecha de Ingreso: enero-2006
Ubicación: Presidencia Roque Sáenz Peña - Chaco
Mensajes: 384
Antigüedad: 18 años, 3 meses
Puntos: 5
Respuesta: Menu Css
Voy a hacer mas especifico...porque no comprendo como hacer referencia a los submenus...

Código HTML:
<div id="contenedor">


  <ul id="menu">  //En esta lista contengo todos los menus que hago referencia a ellos nombrandolo así    div#contenedor #menu{}


        <li id="boton1">  //Aqui el primer boton que lo llamo asi  #menu #boton1 li{} //no se si estaria bien llamado de esa manera....

                <ul id="submenu"> // Y de aqui en mas no lo se....
                       <li id="sub_boton1"></li>
                       <li id="sub_boton2"></li>
                       <li id="sub_boton3"></li>
                <ul>
        </li>



        <li id="boton2">
                <ul id="submenu">
                       <li id="sub_boton1"></li>
                       <li id="sub_boton2"></li>
                       <li id="sub_boton3"></li>
                <ul>
        </li>


  <ul>



</div>
  #5 (permalink)  
Antiguo 18/05/2008, 12:27
Avatar de juaniquillo
Colaborador
  
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 18 años, 4 meses
Puntos: 281
Respuesta: Menu Css
Perdón, no había visto bien el atributo que estabas usando. Lo has hecho bien, lo que pasa es que estás usando 'background-image' en vez de 'background'. Ponlo así y dime si te funciona:

Código HTML:
#inicio a ul li a{background-image: none;}
#inicio a ul li a:hover{background-image: none;}
#inicio a ul li a:active{background-image: none;}
Siempre tienes que usar el mismo atributo para poder contrarrestarlo.
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
  #6 (permalink)  
Antiguo 18/05/2008, 15:03
Avatar de Marcos071  
Fecha de Ingreso: enero-2006
Ubicación: Presidencia Roque Sáenz Peña - Chaco
Mensajes: 384
Antigüedad: 18 años, 3 meses
Puntos: 5
Respuesta: Menu Css
Aqui ando de nuevo, desp de unas cuantas pruebas y entender un poco mas el CSS puedo decir que he acabado, pero solo me anda bien en FireFox y en Opera, pero como siempre el IE6 no, a los submenus no me los muestra uno debajo del otro, sino uno al costado del otro...es decir hacia la derecha...cual es el error?

.html

Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<title>Menú horizontal con CSS</title>
<link rel="StyleSheet" href="estilos3.css" type="text/css">
</head>
<script type="text/javascript" src="funciones.js"></script>

<body>
<div id="principal">

<div id="menu">

<ul>

   <li id="inicio"><a href="#"></a> 
      <ul>
        <li><a href="#"></a></li>
      </ul>
    </li>

    <li id="propiedades"><a href="#"></a> 
      <ul>
        <li><a href="#">Compra</a></li>
        <li><a href="#">Venta</a></li>
        <li><a href="#">Alquiler</a></li>
        <li><a href="#">Alquiler Temporario</a></li>
      </ul>
    </li>

    <li id="arquitectura"><a href="#"></a></li>

    <li id="tasaciones"><a href="#"></a></li>

    <li id="contacto"><a href="#"></a></li>

</ul>

</div><!--finmenu-->

</div>

</body>
</html>


.css

Código HTML:
@charset "utf-8";
/* CSS Document */

* {
  margin:0;
  padding:0;
}
div#menu {
  float: left;
}
#menu li {
	float:left;
	position:relative;
	list-style:none;
}


#inicio a{background-image:url(bot1.jpg); width:245px; height:51px;}
#inicio a:hover{background:url(bot1.jpg) left 51px;}
#inicio a:active{background:url(bot1.jpg) left 51px;}


#propiedades a{background-image:url(bot2.jpg); width:221px; height:51px;}
#propiedades a:hover{background:url(bot2.jpg) left 51px;}
#propiedades a:active{background:url(bot2.jpg) left 51px; }

#arquitectura a{background-image:url(bot3.jpg); width:137px; height:51px;}
#arquitectura a:hover{background:url(bot3.jpg) left 51px;}
#arquitectura a:active{background:url(bot3.jpg) left 51px; }

#tasaciones a{background-image:url(bot4.jpg); width:130px; height:51px;}
#tasaciones a:hover{background:url(bot4.jpg) left 51px;}
#tasaciones a:active{background:url(bot4.jpg) left 51px; }

#contacto a{background-image:url(bot5.jpg); width:217px; height:51px;}
#contacto a:hover{background:url(bot5.jpg) left 51px; }
#contacto a:active{background:url(bot5.jpg) left 51px; }

#propiedades ul{
	border:0px;
	height:20px;
	}

#propiedades ul li a{
	color:#006699;
	background:none;
	text-align:center;
	height:20px;
	background:none;
	}
	
#propiedades ul li a:hover{ 
	font-weight:bold; 
	text-align:center;
	height:20px;
	background:url(submenu1.jpg);
}


div#menu a {
  display:block;        
  text-decoration:none;
  background-color:#99CC00;
}

div#menu ul li ul {
   position:absolute;  
}

div#menu ul li ul li {
   border:0px;
}

body div#menu ul li ul {
  display:none;
}

div#menu ul li:hover ul, div#menu ul li ul:hover {
  display:block;
}
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


« Tema Anterior | Próximo Tema »


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