Re: [Ovillo] Problema con background y #menu li a:hover
Solucionado colocando una imagen en background y los menús encima.
Solo quería saber si se podía sin una imagen de fondo.
Saludos y gracias por tu post, esta bueno.
-Mensaje original-
De: ovillo-boun...@lists.ovillo.org [mailto:ovillo-
boun...@lists.ovillo.org] En nombre de Tei
Enviado el: Lunes, 22 de Marzo de 2010 08:20 a.m.
Para: Ovillo, la lista de CSS en castellano
Asunto: Re: [Ovillo] Problema con background y #menu li a:hover
Solo por diversion he creado este html+css.
Esto lo que hace es cuando pones el raton sobre pelicula, pone libros
y teatro en azul. Si pones el raton sobre libros, pone teatro y
pelicula en azul. El enlace que esta activado no cambia, cambian los
otros enlaces.
ul style=background-color: red id=commie
li
ul
li id=c1a href=#teatro/li
li id=c2a href=#libros/li
li id=c3a href=# pelicula/li
/ul
/li
/ul
style
#commie {
background-color: red;
}
#commie li:hover {
background-color: blue;
}
#c1 a:hover,#c2 a:hover,#c3 a:hover {
background-color: red!important;
}
/style
No propongo este html+css para el problema de Miker, ni mucho menos.
Aunque alguien con mas experiencia que yo lo podria adaptar para este
proposito.
tl;dr:
un hover que afecta a los demas elementos, en lugar de al señalado
On 22 March 2010 13:35, Jairo Ochoa jairo.oc...@gmail.com wrote:
con hover puedes mostrar o quitar las líneas de un elemento del
menú, pero
... tú quieres lo contrario? que el hover afecte a los demás
elemento.
me parece que con css no se puede, tandrás que usar js + css
--
Jairo Ochoa
2010/3/21 Mikersson mikerfra...@gmail.com
Buens días,
Estoy teniendo un problema la hora de pasar el mouse en un menú
vertical
con imagen de fondo.
La imagen es:
http://www.pixelperu.net/file/menu.jpg
Al pasar el mouse sobre algún menú quisiera que las líneas de los
menus
adyacentes desaparezcan. Se me ha hecho difícil lograrlo con CSS
asi es que
recurro a ustedes y ver si puedo encontrar la solución.
EL XHTML del menú:
div id=menu
ul id=nav
li id=abouta
href=index.htmlstrongABOUT US/strong/a/li
li id=servicesa href=services.html
strongSERVICES/strong/a/li
li id=healthya
href=programs.htmlstrongHEALTHY STUFF PROGRAMS/strong/aa
href=carriers.htmlstrongCARRIERS/strong/a/li
li id=claima
href=help.htmlstrongCLAIM HELP/strong/a/li
li id=contacta
href=contact.htmlstrongCONTACT US/strong/a/li
/ul
div class=rTable/div
/div
EL CSS de mi menú es:
#menu {
float:left;
width: 230px;
height: auto;
font:normal 1.3em/100% Helvetica, Arial, sans-serif;
text-align: left;
padding:10px 0 ;
font-weight: bold;
border: 1px solid #000;}
#menu ul{
margin:0px;
padding:0px;
list-style:none;
}
#menu li a {
voice-family: \}\;
voice-family: inherit;
width: 210px;
height: 24px;
background:#fff;
border-bottom: 1px solid #99F;
text-decoration: none;
font-weight:normal;
}
#menu li a:link, #menu li a:visited {
color:#666;
display: block;
background: url(images/menu4.gif);
padding: 8px 0 0 0;
margin-left: 10px;
}
#menu li a:hover {
color: #66;
background:#FC0;
padding: 9px 0 0 0;
margin-left: 10px;
/*border-top: 3px solid #FC0;
border-bottom: 3px solid #FC0;*/
}
#menu li a:active {
color: #66;;
background: url(images/menu4.gif) 0 -
64px;
padding: 8px 0 0 20px;
}
#about span li a:hover {
height:35px;
background-image:url(images/about.gif);
background
Re: [Ovillo] Problema con background y #menu li a:hover
Solo por diversion he creado este html+css.
Esto lo que hace es cuando pones el raton sobre pelicula, pone libros
y teatro en azul. Si pones el raton sobre libros, pone teatro y
pelicula en azul. El enlace que esta activado no cambia, cambian los
otros enlaces.
ul style=background-color: red id=commie
li
ul
li id=c1a href=#teatro/li
li id=c2a href=#libros/li
li id=c3a href=# pelicula/li
/ul
/li
/ul
style
#commie {
background-color: red;
}
#commie li:hover {
background-color: blue;
}
#c1 a:hover,#c2 a:hover,#c3 a:hover {
background-color: red!important;
}
/style
No propongo este html+css para el problema de Miker, ni mucho menos.
Aunque alguien con mas experiencia que yo lo podria adaptar para este
proposito.
tl;dr:
un hover que afecta a los demas elementos, en lugar de al señalado
On 22 March 2010 13:35, Jairo Ochoa jairo.oc...@gmail.com wrote:
con hover puedes mostrar o quitar las líneas de un elemento del menú, pero
... tú quieres lo contrario? que el hover afecte a los demás elemento.
me parece que con css no se puede, tandrás que usar js + css
--
Jairo Ochoa
2010/3/21 Mikersson mikerfra...@gmail.com
Buens días,
Estoy teniendo un problema la hora de pasar el mouse en un menú vertical
con imagen de fondo.
La imagen es:
http://www.pixelperu.net/file/menu.jpg
Al pasar el mouse sobre algún menú quisiera que las líneas de los menus
adyacentes desaparezcan. Se me ha hecho difícil lograrlo con CSS asi es que
recurro a ustedes y ver si puedo encontrar la solución.
EL XHTML del menú:
div id=menu
ul id=nav
li id=abouta
href=index.htmlstrongABOUT US/strong/a/li
li id=servicesa href=services.html
strongSERVICES/strong/a/li
li id=healthya
href=programs.htmlstrongHEALTHY STUFF PROGRAMS/strong/aa
href=carriers.htmlstrongCARRIERS/strong/a/li
li id=claima
href=help.htmlstrongCLAIM HELP/strong/a/li
li id=contacta
href=contact.htmlstrongCONTACT US/strong/a/li
/ul
div class=rTable/div
/div
EL CSS de mi menú es:
#menu {
float:left;
width: 230px;
height: auto;
font:normal 1.3em/100% Helvetica, Arial, sans-serif;
text-align: left;
padding:10px 0 ;
font-weight: bold;
border: 1px solid #000;}
#menu ul{
margin:0px;
padding:0px;
list-style:none;
}
#menu li a {
voice-family: \}\;
voice-family: inherit;
width: 210px;
height: 24px;
background:#fff;
border-bottom: 1px solid #99F;
text-decoration: none;
font-weight:normal;
}
#menu li a:link, #menu li a:visited {
color:#666;
display: block;
background: url(images/menu4.gif);
padding: 8px 0 0 0;
margin-left: 10px;
}
#menu li a:hover {
color: #66;
background:#FC0;
padding: 9px 0 0 0;
margin-left: 10px;
/*border-top: 3px solid #FC0;
border-bottom: 3px solid #FC0;*/
}
#menu li a:active {
color: #66;;
background: url(images/menu4.gif) 0 -64px;
padding: 8px 0 0 20px;
}
#about span li a:hover {
height:35px;
background-image:url(images/about.gif);
background-repeat:no-repeat;
}
div span {display:none;}
Como puedo hacer con el #nav no lo he definido aún,
De antemano muchas gracias!
---
Miguel Flores
Graphic Design Standard based Web Design
Phone +511.6237408
MSN: mi...@pixelperu.net
http://pe.linkedin.com/in/mikersson http://pe.linkedin.com/in/mikersson
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Problema con background y #menu li a:hover
Muchas gracias, veo que la cosa esta tranca parta hacerlo solo con CSS... y
Cómo hacer que al pasar el mouse el menú activo crezca 3 líneas en el top y
bottom PERO sin que los menús de arriba y abajo se muevan?? Solo así se
podrían cubrir las líneas...
#menu li a:hover {
color: #66;
background:#FC0;
padding: 9px 0 0 0;
margin-left: 10px;
/*border-top: 3px solid #FC0;
border-bottom: 3px solid #FC0;*/
#menu li a {
voice-family: \}\;
voice-family: inherit;
width: 210px;
height: 24px;
background:#fff;
border-bottom: 1px solid #99F;
text-decoration: none;
font-weight:normal;
}
---
Miguel Flores
Graphic Design Standard based Web Design
Phone +511.6237408
MSN: mi...@pixelperu.net
http://pe.linkedin.com/in/mikersson
-Mensaje original-
De: ovillo-boun...@lists.ovillo.org [mailto:ovillo-
boun...@lists.ovillo.org] En nombre de Tei
Enviado el: Lunes, 22 de Marzo de 2010 08:20 a.m.
Para: Ovillo, la lista de CSS en castellano
Asunto: Re: [Ovillo] Problema con background y #menu li a:hover
Solo por diversion he creado este html+css.
Esto lo que hace es cuando pones el raton sobre pelicula, pone libros
y teatro en azul. Si pones el raton sobre libros, pone teatro y
pelicula en azul. El enlace que esta activado no cambia, cambian los
otros enlaces.
ul style=background-color: red id=commie
li
ul
li id=c1a href=#teatro/li
li id=c2a href=#libros/li
li id=c3a href=# pelicula/li
/ul
/li
/ul
style
#commie {
background-color: red;
}
#commie li:hover {
background-color: blue;
}
#c1 a:hover,#c2 a:hover,#c3 a:hover {
background-color: red!important;
}
/style
No propongo este html+css para el problema de Miker, ni mucho menos.
Aunque alguien con mas experiencia que yo lo podria adaptar para este
proposito.
tl;dr:
un hover que afecta a los demas elementos, en lugar de al señalado
On 22 March 2010 13:35, Jairo Ochoa jairo.oc...@gmail.com wrote:
con hover puedes mostrar o quitar las líneas de un elemento del
menú, pero
... tú quieres lo contrario? que el hover afecte a los demás
elemento.
me parece que con css no se puede, tandrás que usar js + css
--
Jairo Ochoa
2010/3/21 Mikersson mikerfra...@gmail.com
Buens días,
Estoy teniendo un problema la hora de pasar el mouse en un menú
vertical
con imagen de fondo.
La imagen es:
http://www.pixelperu.net/file/menu.jpg
Al pasar el mouse sobre algún menú quisiera que las líneas de los
menus
adyacentes desaparezcan. Se me ha hecho difícil lograrlo con CSS
asi es que
recurro a ustedes y ver si puedo encontrar la solución.
EL XHTML del menú:
div id=menu
ul id=nav
li id=abouta
href=index.htmlstrongABOUT US/strong/a/li
li id=servicesa href=services.html
strongSERVICES/strong/a/li
li id=healthya
href=programs.htmlstrongHEALTHY STUFF PROGRAMS/strong/aa
href=carriers.htmlstrongCARRIERS/strong/a/li
li id=claima
href=help.htmlstrongCLAIM HELP/strong/a/li
li id=contacta
href=contact.htmlstrongCONTACT US/strong/a/li
/ul
div class=rTable/div
/div
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
[Ovillo] Problema con background y #menu li a:hover
Buens días,
Estoy teniendo un problema la hora de pasar el mouse en un menú vertical
con imagen de fondo.
La imagen es:
http://www.pixelperu.net/file/menu.jpg
Al pasar el mouse sobre algún menú quisiera que las líneas de los menus
adyacentes desaparezcan. Se me ha hecho difícil lograrlo con CSS asi es que
recurro a ustedes y ver si puedo encontrar la solución.
EL XHTML del menú:
div id=menu
ul id=nav
li id=abouta
href=index.htmlstrongABOUT US/strong/a/li
li id=servicesa href=services.html
strongSERVICES/strong/a/li
li id=healthya
href=programs.htmlstrongHEALTHY STUFF PROGRAMS/strong/aa
href=carriers.htmlstrongCARRIERS/strong/a/li
li id=claima
href=help.htmlstrongCLAIM HELP/strong/a/li
li id=contacta
href=contact.htmlstrongCONTACT US/strong/a/li
/ul
div class=rTable/div
/div
EL CSS de mi menú es:
#menu {
float:left;
width: 230px;
height: auto;
font:normal 1.3em/100% Helvetica, Arial, sans-serif;
text-align: left;
padding:10px 0 ;
font-weight: bold;
border: 1px solid #000;}
#menu ul{
margin:0px;
padding:0px;
list-style:none;
}
#menu li a {
voice-family: \}\;
voice-family: inherit;
width: 210px;
height: 24px;
background:#fff;
border-bottom: 1px solid #99F;
text-decoration: none;
font-weight:normal;
}
#menu li a:link, #menu li a:visited {
color:#666;
display: block;
background: url(images/menu4.gif);
padding: 8px 0 0 0;
margin-left: 10px;
}
#menu li a:hover {
color: #66;
background:#FC0;
padding: 9px 0 0 0;
margin-left: 10px;
/*border-top: 3px solid #FC0;
border-bottom: 3px solid #FC0;*/
}
#menu li a:active {
color: #66;;
background: url(images/menu4.gif) 0 -64px;
padding: 8px 0 0 20px;
}
#about span li a:hover {
height:35px;
background-image:url(images/about.gif);
background-repeat:no-repeat;
}
div span {display:none;}
Como puedo hacer con el #nav no lo he definido aún,
De antemano muchas gracias!
---
Miguel Flores
Graphic Design Standard based Web Design
Phone +511.6237408
MSN: mi...@pixelperu.net
http://pe.linkedin.com/in/mikersson http://pe.linkedin.com/in/mikersson
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
