Buenas de nuevo. Espero no ser muy pesado que últimamente estoy haciendo muchas preguntas. La cosa es que acabo de meterle a la plantilla de mi futura web un menú desplegable que he sacado de la web:
http://www.comocreartuweb.com/html-kit-tutorial/tutorial-html-kit-l…
Por cierto, si me meto directamente al curso paso a paso la sección cuarta es distinta al del enlace y el menú desplegable no aparece.
Bueno al ponerlo me surgen dos problemas:
1. - Tengo unos botones morados con letras blancas y a uno de ellos le he puesto el menú. La cosa es que al desplegarlo y quitar el ratón de encima los colores se invierten, es decir, es un botón blanco con letras moradas.
2.- El borde izquierdo del menú no me encaja con el botón, se descuadrará un par de píxeles. (Esto es lo de menos, pero si puede arreglarse mejor que mejor).
Los botones funcionaban a la perfección antes de meterle el menú desplegable.
Os dejo el código de los dos estilos (el mío y el del menú, que lo he toqueteado un poco y tal vez sea eso). Llevo tiempo ya revisando pero no se me ocurre qué es, no sé si por las horas que son.
Código menú desplegable
Código mi estilo
Espero que no sea una tontería, pero es que ya me pican los ojos jejeje. Muchas gracias de antemano!
EDITO: Creo con lo poco que sé y lo que he visto en el código que no se puede hacer, pero por si acaso lo pregunto: ¿Es posible cambiarle el color a cada uno de los enlaces del menú desplegable o de las letras que hay dentro? Es decir, que pases el ratón, se despliegue el menú y en este salga un recuadro rojo, otro azul, etc... Gracias de nuevo!
http://www.comocreartuweb.com/html-kit-tutorial/tutorial-html-kit-l…
Por cierto, si me meto directamente al curso paso a paso la sección cuarta es distinta al del enlace y el menú desplegable no aparece.
Bueno al ponerlo me surgen dos problemas:
1. - Tengo unos botones morados con letras blancas y a uno de ellos le he puesto el menú. La cosa es que al desplegarlo y quitar el ratón de encima los colores se invierten, es decir, es un botón blanco con letras moradas.
2.- El borde izquierdo del menú no me encaja con el botón, se descuadrará un par de píxeles. (Esto es lo de menos, pero si puede arreglarse mejor que mejor).
Los botones funcionaban a la perfección antes de meterle el menú desplegable.
Os dejo el código de los dos estilos (el mío y el del menú, que lo he toqueteado un poco y tal vez sea eso). Llevo tiempo ya revisando pero no se me ocurre qué es, no sé si por las horas que son.
Código menú desplegable
/* this is the clipping region for the menu. it's width and height get set by script, depending on the size of the items table */
.transMenu {
position:absolute;
overflow:hidden;
left:-1000px;
top:-1000px;
text-align: left;
}
/* this is the main container for the menu itself. it's width and height get set by script, depending on the size of the items table */
.transMenu .content {
position:absolute;
}
/* this table comprises all menu items. each TR is one item. It is relatively positioned so that the shadow and background transparent divs can be positioned underneath it */
.transMenu .items {
position:relative;
left:0px; top:0px;
border:1px solid #999;
z-index:2;
}
.transMenu.top .items {
border-top:none;
}
/* each TR.item is one menu item */
.transMenu .item {
color:white;
background-image: url(objetos/fondo-no-activo.gif);
font-size: 15px;
font-weight: bold;
text-decoration:none;
/* this is a hack for mac/ie5, whom incorrectly cascades the border properties of the parent table to each row */
border:none;
cursor:pointer;
cursor:hand;
}
/* this DIV is the semi-transparent white background of each menu. the -moz-opacity is a proprietary way to get transparency in mozilla, the filter is for IE/windows 5.0+. */
/* we set the background color in script because ie mac does not use it; that browser only uses a semi-transparent white PNG that the spacer gif inside this DIV is replaced by */
.transMenu .background {
position:absolute;
left:0px;
top:0px;
z-index:1;
-moz-opacity:.8;
filter:alpha(opacity=95);
}
/* same concept as .background, but this is the sliver of shadow on the right of the menu. It's left, height, and background are set by script. In IE5/mac, it uses a PNG */
.transMenu .shadowRight {
position:absolute;
z-index:0;
top:0px; width:0px;
-moz-opacity:.4;
filter:alpha(opacity=40);
}
/* same concept as .background, but this is the sliver of shadow on the bottom of the menu. It's top, width, and background are set by script. In IE5/mac, it uses a PNG */
.transMenu .shadowBottom {
position:absolute;
z-index:0;
left:0px; height:0px;
-moz-opacity:.4;
filter:alpha(opacity=40);
}
/* this is the class that is used when the mouse is over an item. script sets the row to this class when required. */
.transMenu .item.hover {
background-image: url(objetos/fondo-activo.gif);
color:#FFCC00;
}
/* this is either the dingbat that indicates there is a submenu, or a spacer gif in it's place. We give it extra margin to create some space between the text and the dingbat */
.transMenu .item img {
margin-left:10px;
}
.textoNoIdent {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
text-decoration: none;
}
.formError {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #333333;
border-top: 1px solid #C4CCCC;
border-right: 1px solid #ACB5B5;
border-bottom: 1px solid #6F7777;
border-left: 1px solid #ACB5B5;
padding: 2px 0 2px 0.25em;
background-color: #F5E984;
}
.txtError {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #990000;
background-color: #E9E9E9;
padding: 5px;
text-align: justify;
}Código mi estilo
* {margin:0px ; padding:0px ; border: 0px}
h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: center}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center}
#logotipo {background-color: brown ; width:300px ; height:120px ; float:left }
#publicidad {background-color: none; width:500px ; height:85px ; float:right ; margin-top:25px}
#cabecera { background-image: none ; height:120px ; width:800px ; margin: 25px 0px 0px 0px auto}
#navegacion {background-color: none ; height:60px ; width:800px ; float: top ; margin: 0px auto}
#navegacion li {font: bold 15px arial ; float:right ; list-style:none ; margin: 0px 3px 0px 3px ; width:100px ; height:60px }
#navegacion ul { margin-left: 180px }
#curva-superior { background-image: url(objetos/curva-superior.png) ; background-repeat: no-repeat ; width: 800px ; height: 18px ; overflow : hidden}
#global {width:800px ; margin: 4px auto }
#contenido {background-color: white ; border-left: #8800AA 2px solid ; border-right: #8800AA 2px solid }}
#contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
#menu {background-color: white ; width: 150px ; float:left ; text-align:left ; margin:3px 10px 3px 3px }
#menu li {list-style:none ; margin: 4px 0px 4px 6px}
#pie {background-color: white ; border-left: #8800AA 2px solid ; border-right: #8800AA 2px solid; border-top: #8800AA 2px solid}
#curva-inferior { background-image: url(objetos/curva-inferior.png) ; background-repeat: no-repeat ; width: 800px ; height: 18px ; overflow : hidden}
p {text-align: justify}
a {color: #8800AA ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {}
a:active{}
a.cabecera {color: white ; text-decoration:bold ; display: block ; background-color: #8800AA}
a:link {}
a:visited {}
a:hover {color:white ; text-decoration:bold ; background-color: purple}
a:active{}
body {text-align: center}Espero que no sea una tontería, pero es que ya me pican los ojos jejeje. Muchas gracias de antemano!
EDITO: Creo con lo poco que sé y lo que he visto en el código que no se puede hacer, pero por si acaso lo pregunto: ¿Es posible cambiarle el color a cada uno de los enlaces del menú desplegable o de las letras que hay dentro? Es decir, que pases el ratón, se despliegue el menú y en este salga un recuadro rojo, otro azul, etc... Gracias de nuevo!