Buenas, estoy haciendo mis primeros pasos con CSS, para empezar a crear mis diseños.
El tema es que hice un menú horizontal simple. Le coloqué una imagen de fondo creada con photoshop, el menú no pasa de los 13px de alto.
Le coloque los links a las demas secciones de la página (desde el html) y quedo bien.
Después se me ocurrió colocarle un efecto hover a las opciones del menú. Y es lo que no me funciona, cuando paso el mouse el efecto no se activa. Será porque estoy usando una imagen de fondo en vez de color plano?.
Desde ya muchas gracias, abajo dejo escrito como definí el css:
Código:
@charset "utf-8";
/* CSS Document */
/* Margin : espacio entre contenedores o espacio contra el margen del navegador */
/* Padding : espacio entre un elemento (texto, imagen, o algo más) contra los bordes del contenedor */
* {padding: 0px; margin: 0px} /* mejora la visualizacion en distintos navegadores */
body{
background-color: #FFF;
/* background-image: url(img/fondo.png);
background-repeat: repeat-x; */
}
#sombra{
width: 900px;
height: 650px;
margin: auto;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
-moz-box-shadow: 0 0 5px 5px #888; /* mozilla */
-webkit-box-shadow: 0 0 5px 5px#888; /* chrome */
box-shadow: 0 0 5px 5px #888;
}
#page{
background-color:#FFF;
width: 900px;
height: 650px;
margin: auto;
-moz-border-radius: 7px; /*borde redondeado para navegadores Mozilla (Iceweasel, Firefox, Chameleon, otros..)*/
-webkit-border-radius: 7px; /* borde redondeado para Safari y Chrome */
/*en navegadores Opera e IE no funciona esta opcion */
}
#header{
widht: 66%;
margin: auto;
text-align:right;
padding-right: 1%;
height: 15%;
}
#logo{
width: 34%;
float:left;
}
#corniza{
width: 100%;
height: 4%;
background-image:url(img/menu.png)
}
#contenido{
width: 100%;
height: 77%;
}
#pie{
background-image: url(img/pie.png);
width: 100%;
height: 4%;
}
/* TEXTOS */
h1{
text-align: center;
/*padding-left: 27%;*/
padding-top: 2%;
}
/* texto del header y pie de pagina */
h3{
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
}
/* opciones del menu */
h2{
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
color:#FFF;
padding-top: 0.5%;
padding-left: 1%;
}
ul{
list-style-type: none;
}
li{
padding-top: 0.5%;
padding-left: 1%;
display: inline;
float: left;
}
p{
font-family:Verdana, Geneva, sans-serif;
}
p.menu{
font-size:12px;
color:#FFF;
}
p.contenido{
padding-top: 1%;
padding-left: 1%;
font-size: 14px;
color:#000;
}
p.head{
font-size:10px;
color:#000;
font-weight: bold;
}
/* ENLACES */
/* links del menu */
a.plain{
text-decoration:none;
}
a:hover{
background-image:url(img/hover.png);
}