Hola:
Adelanto que soy novato en esto de las hojas de estilo.
Tengo problemas con una CSS, no puedo conseguir que el fondo de un menú llegue hasta abajo para toparse con el pie de página.
Aquí la muestra:
http://idiweb.com.mx/sedil/
Adicionalmente tengo problemas con esa página al mostrarla en Opera 7.23, lo que sucede es que no muestra las imágenes, y además los vínculos no los realiza, el menú no funciona, en fin. No sirve para nada la hoja ahí.
Pongo una captura de pantalla para que vean como la veo:
http://idiweb.com.mx/sedil/img/sedil-opera.gif
Y en IE no me funciona el hover sobre la imágen, no cambia de color el borde.
Solamente funciona bien en firefox 1.5 !
Abusando de su buena voluntad, les pido si pueden revisar mi CSS y hacerme críticas para ver qué se puede mejorar y optimizar para que sea mas eficiente.
Código:
body{
margin:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:100%;
background:#303c4a;
}
#contenedor{
position:absolute;
margin:0;
width:750px;
background:#596574;
border-right:1px solid #596574;
}
#encabezado h1{
margin:0;
padding:0;
text-indent:-9999em;
display:block;
height:140px;
background:#303c4a url(../img/encabezado.jpg) no-repeat top center;
}
#menu{
width:220px;
float:left;
height:auto;
margin-bottom:0;
font-family:Geneva, Arial, Helvetica, sans-serif;
background:#404e5f url(../img/fondo_menu.gif) repeat-y left top;
}
#menu ul{
margin:0;
padding:0;
list-style-type:none;
}
#menu li{
font-size:.7em;
font-weight:bold;
color:#ff9900;
border-top:1px solid #596574;
border-bottom:1px solid #303c4a;
}
#menu li a{
padding-left:25px;
display:block;
text-decoration:none;
line-height:2em;
height:2em;
color:#ff9900;
background:url(../img/vineta.gif) no-repeat 1em center;
}
#menu li a:hover{
color:#fff;
background:#89919d url(../img/vineta2.gif) no-repeat 1.3em center;
}
#contenidos{
width:480px;
float:left;
padding:1em 25px;
background:url(../img/fondo_conten.gif) repeat-y right top;
}
#contenidos h1{
font-size:1.1em;
color:#ff9900;
font-weight:bold;
}
#contenidos p, #contenidos ul{
font-size:.8em;
color:#fff;
/* text-align:justify;*/
}
#contenidos img{
float:right;
padding:2px;
margin:1em 0 1em 1em;
border:2px solid #89919D;
background:#404E5F;
}
#contenidos a img{
border:2px solid #89919D;
}
#contenidos a:hover img{
border:2px solid #ff9900;
}
#pie{
clear:both;
/* height:70px;*/
padding:.4em 3em;
border-top:1px solid #303c4a;
background:#404e5f url(../img/fondo_pie.gif) repeat-x left top;
}
#pie p{
font-size:.6em;
/* margin-top:1.5em;
margin-bottom:1.5em;*/
color:#fff;
text-align:center;
line-height:1.8em;
}
Gracias !