Re: [Ovillo] Problema con background y #menu li a:hover

2010-03-25 Por tema Mikersson
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

2010-03-22 Por tema Tei
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

2010-03-22 Por tema Mikersson
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

2010-03-21 Por tema Mikersson
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