Foros del Web » Creando para Internet » CSS »

Menu css y Border button

Estas en el tema de Menu css y Border button en el foro de CSS en Foros del Web. @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código CSS: Ver original /* CSS Document */ ul .Menus a {   color : white ;   text-decoration : none ;   ...
  #1 (permalink)  
Antiguo 13/05/2010, 00:13
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
Menu css y Border button

Código CSS:
Ver original
  1. /* CSS Document */
  2. ul.Menus a {
  3.   color: white;
  4.   text-decoration: none;
  5.   display: block;
  6.   width: 100%;
  7. }
  8. ul.Menus,
  9. ul.Menus ul {
  10.   background: rgb(0, 128, 255);
  11.   list-style: none;
  12.   padding: 0;
  13.   margin: 0;
  14.   border-bottom: 1px solid  rgb(0, 128, 255);
  15.   width: 185px;
  16.  }
  17. ul.Menus ul {
  18.   position: absolute;
  19.   top: 0;
  20.   left: 185px;
  21.   visibility: hidden;
  22. }
  23. ul.Menus li {
  24.   position: relative;
  25.   padding: 2px;
  26. }
  27. ul.Menus li:hover {
  28.   background: rgb(136, 196, 255);
  29. }
  30. ul.Menus li:hover > ul {
  31.   visibility: visible;
  32. }

Mneu
Código HTML:
Ver original
  1. <ul class="Menus">
  2.   <li class="Menus"><a href='http://p2p.wrox.com'>Historia del Arca</a>
  3.     <ul>
  4.       <li>Internacional</li>
  5.       <li>Dominicana</li>
  6.     </ul>
  7.   <li class="Menus">Consejo de administraci&oacute;n
  8.   <li>Personas Acogidas  
  9.     <ul>
  10.       <li class="Menus">Acogidos Internos
  11.         <ul>
  12.           <li>Audry</li>
  13.           <li>Toto</li>
  14.           <li>Jes&uacute;s</li>
  15.         </ul>
  16.       </li>
  17.       <li class="Menus">Acogidos Externos
  18.         <ul>
  19.           <li>Julio</li>
  20.           <li>Alex</li>
  21.         </ul>
  22.       </li>
  23.       <li class="Menus">Asistentes
  24.       </li>
  25.   </ul>
  26.   <li class="Menus">Actividades  
  27.   <ul>
  28.     <li>Talleres</li>
  29.      <li>Productos</li>
  30.       </ul>
  31.      
  32. </ul>
  33. </div></div>

El problema es que no se mucho css (yo siempre tengo problemas y lo saben ejeje) aunque debo decir que he avanzado en el aprendisaje.. Bueno el problema es que no se porque no me coje la division cuando le doy un border-button.

por ahi unos menues pero siempre un trabajo raro que hacer
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #2 (permalink)  
Antiguo 13/05/2010, 03:22
 
Fecha de Ingreso: mayo-2010
Mensajes: 16
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: Menu css y Border button

Yo no entiendo bien tu problema, si puedes explicarlo mejor igual podrá ayudarte. Dime que es lo que quieres.
  #3 (permalink)  
Antiguo 13/05/2010, 03:36
 
Fecha de Ingreso: mayo-2010
Mensajes: 16
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: Menu css y Border button

He probado una cosa, que no sé si es lo que necesitas. Y es:

Esto es lo que tienes:
Código CSS:
Ver original
  1. ul.Menus ul {
  2.   background: rgb(0, 128, 255);
  3.   list-style: none;
  4.   padding: 0;
  5.   margin: 0;
  6.   border-bottom: 1px solid  rgb(0, 128, 255);
  7.   width: 185px;
  8.  }

En vez de poner en el ul el border-bottom, ponlo en el li,tambien le puse border-left(pero eso a tu gusto) y cambiale el color(con el mismo no se nota el borde).

Código CSS:
Ver original
  1. ul.Menus li {
  2.   position: relative;
  3.   padding: 2px;
  4.   cursor:pointer;
  5.   border-bottom: 1px solid  white;
  6.   border-left: 1px solid white;
  7. }

PD: Le he puesto cursor:pointer para que se vea mejor el menu(para mi gusto que todos tengan manita me gusta mas) pero si quieres puedes ponerlo como tu quieras jeje. Espero que te sea de ayuda.

Última edición por Phantomluffy; 13/05/2010 a las 03:42
  #4 (permalink)  
Antiguo 13/05/2010, 14:14
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Menu css y Border button

Perfecto, Muchas gracias



Ahora, tengo un inconveniente y es que no me gusta mucho como queda pero tengo que hacerlo con ese color azul de fondo pero la verdad como que queda mal ¿que opinas al respecto?.
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #5 (permalink)  
Antiguo 05/06/2010, 17:02
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Menu css y Border button



Bien, como podrás darte cuenta e cambiado los css por completos y ahora mi problema se trata de que en que el display block no funciona correctamente en el segundo enlace,

Código CSS:
Ver original
  1. /* CSS Document */
  2. ul.Menus a {
  3.   color: white;
  4.   text-decoration: none;
  5.   display: block;
  6.   width: 100%;
  7.   height:100%;
  8.  
  9. }
  10. ul.Menus,
  11. ul.Menus ul {
  12.   background:#006699;
  13.   list-style: none;
  14.   padding: 0;
  15.   margin: 0;
  16.   width: 185px;
  17.    display: block;
  18.  
  19.  }
  20. ul.Menus ul {
  21.   position: absolute;
  22.   top: 0;
  23.   left: 185px;
  24.   visibility: hidden;
  25.  
  26. }
  27. ul.Menus li {
  28.  
  29.         position: relative;
  30.         padding: 2px;
  31.         cursor:pointer;
  32.         border-bottom: 1px solid  white;
  33.          display: block;
  34.       }
  35. ul.Menus li:hover {
  36.   background: #383;
  37. }
  38. ul.Menus li:hover > ul {
  39.   visibility: visible;
  40. }
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #6 (permalink)  
Antiguo 06/06/2010, 17:13
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 9 meses
Puntos: 997
Respuesta: Menu css y Border button

copié el html de tu primer mensaje (salvo la última línea con los 2 </div>) y el css de tu último mensaje, y lo veo bien.

de hecho en tu imagen aparece 2 veces la frase "Historia del Arca" pero en tu html del primer mensaje, solo 1 vez.. ¿?
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -

Última edición por webosiris; 06/06/2010 a las 17:25
  #7 (permalink)  
Antiguo 06/06/2010, 17:46
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Menu css y Border button

el problema es que es una web anidada a tres columnas y si quito un div se va todo a un lado y si te fjijas en el dibujito.. en el segundo enlace que estai igual, estaba probando ya que en el primero aparece bien el hover
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #8 (permalink)  
Antiguo 06/06/2010, 19:16
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 9 meses
Puntos: 997
Respuesta: Menu css y Border button

lo que vi ahora es que te estás olvidando cerrar los li! Quizás sea por eso.
Por ejemplo, el LI que abres en la línea 2 nunca lo cierras.
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #9 (permalink)  
Antiguo 08/06/2010, 15:06
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Menu css y Border button

bueno.. aquí te dejare el código entero de la anidación con la parte central de la pagina ya que la web es de tres columnas

Código HTML:
Ver original
  1. <div id="content-container1">
  2.         <div id="content-container2">
  3.             <div id="section-navigation">
  4.               <div id="menu">
  5. <ul class="Menus">
  6.   <li class="Menus"><a href='http://p2p.wrox.com'>Historia del Arca</a>
  7.   <ul>
  8.     <li>Internacional</li>
  9.      <li>Dominicana</li>
  10.       </ul>
  11.     </li>
  12.   <li class="Menus"><a href='http://p2p.wrox.com'>Consejo Adm.</a></li>
  13.   <li class="Menus"><a href="http://p2p.wrox.com">Personas Acogidas</a>
  14.     <ul>
  15.         <li class="Menus"><a href="http://p2p.wrox.com">cogidos Internos</a>
  16.           <ul>
  17.               <li>Audry</li>
  18.             <li>Toto</li>
  19.             <li>Jes&uacute;s</li>
  20.           </ul>
  21.         </li>
  22.        
  23.       <li class="Menus">Acogidos Externos</li>
  24.         <ul>
  25.               <li>Julio</li>
  26.           <li>Alex</li>
  27.          
  28.         </ul>
  29.      
  30.       <li class="Menus">Asistentes</li>
  31.     </ul>
  32.     <li class="Menus">Actividades </li>
  33.     <ul>
  34.     <li>Talleres</li>
  35.      <li>Productos</li>
  36.       </ul>
  37. </ul>
  38. </div></div>   
  39.         <div id="content">
  40.                 <h2>NUESTRA  HISTORIA</h2>
  41.                
  42.                   <p>La  primera Comunidad del Arca fue fundada en 1964, en la ciudad de Trosly,  Francia, cuando Jean Vanier,                            lugarteniente de la Real Marina Canadiense se  encontr&oacute; con dos j&oacute;venes con discapacidad                       intelectual abandonados en un  hospital psiqui&aacute;trico de Francia, por lo que decidi&oacute; dejar su                       brillante carrera  por venir, y fund&oacute; un hogar para vivir con ellos como una verdadera familia.</p>
  43.                  
  44.                    <p> Este es  el nacimiento de El Arca, una organizaci&oacute;n de ayuda a los discapacitados  intelectuales, en                   donde, formando verdaderos Hogares, conviven tanto personas  Acogidas, como Asistentes.</p>
  45.                  
  46.                   <p>Hoy d&iacute;a  El Arca tiene 153 Comunidades en 53 pa&iacute;ses, entre los que se encuentra  Rep&uacute;                   blica Dominicana desde el a&ntilde;o 1984, con una trayectoria de amor y de  entrega a los m&aacute;s fr&aacute;                   giles y desprotegidos de nuestra sociedad.</p>
  47.                  
  48.                  <p>Nuestra  Comunidad en Santo Domingo es miembro permanente de la Federaci&oacute;n Internacional  de                   Comunidades Arca, con sede en Trosly, Francia.</p>
  49.                  
  50.                  <p> En la  actualidad, en el Barrio de Buenos Aires de Herrera, Santo Domingo Oeste, 10  personas con                      discapacidad intelectual comparten dos casas, con un n&uacute;mero  similar de Asistentes, conformando                      Hogares en donde la vida diaria se  desarrolla alrededor de las necesidades de las personas Acogidas, en un                     ambiente de amor, respeto, solidaridad, trabajo y ayuda. Asi mismo,12 personas  con discapacidad, que viven                    con sus familias del sector, asisten al Taller  productivo de la Comunidad.</p>
  51.                    
  52.                     <p>El  objetivo primordial de El Arca es qyudar a hacer de &eacute;stos ni&ntilde;os, j&oacute;venes y                    adultos, personas que puedan insertarse en la Sociedad actual, mediante el  reconocimiento de sus dones, como                    personas con la inmensa capacidad de amar y  ser amados, de aportar su trabajo productivo a la sociedad y de                   alguna forma  ayudar a sustentar los hogares en donde viven, a trav&eacute;s de talleres de  producci&oacute;n                   de Artesan&iacute;as, tarjetas de saludo, </div>
  53.        
  54.             <div id="aside">
  55.                 <h3>Aside heading
  56.                 </h3>
  57.                 <p>
  58.                     Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu                             feugiat nulla facilisis at vero eros et accumsan.
  59.                 </p>
  60.             </div>

Este el css del menu

Código CSS:
Ver original
  1. /* CSS Document */
  2. ul.Menus a {
  3.   color: white;
  4.   text-decoration: none;
  5.   display: block;
  6.   width: 100&#37;;
  7.   height:100%;
  8.  
  9. }
  10. ul.Menus,
  11. ul.Menus ul {
  12.   background:#006699;
  13.   list-style: none;
  14.   padding: 0;
  15.   margin: 0;
  16.   width: 185px;
  17.    display: block;
  18.  
  19.  }
  20. ul.Menus ul {
  21.   position: absolute;
  22.   top: 0;
  23.   left: 185px;
  24.   visibility: hidden;
  25.  
  26. }
  27. ul.Menus li {
  28.  
  29.         position: relative;
  30.         padding: 2px;
  31.         cursor:pointer;
  32.         border-bottom: 1px solid  white;
  33.          display: block;
  34.       }
  35. ul.Menus li:hover {
  36.   background: #383;
  37. }
  38. ul.Menus li:hover > ul {
  39.   visibility: visible;
  40. }

y por si acaso el css de la pagina (el cuadro)

Código CSS:
Ver original
  1. /* CSS Document */
  2.  
  3. #container
  4. {
  5.     margin: 0 auto;
  6.     width: 100%;
  7.     background: #fff;
  8. }
  9.  
  10. #header
  11. {
  12.     background: #ccc;
  13.     padding: 20px;
  14. }
  15.  
  16. #header h1 { margin: 0; }
  17.  
  18. #navigation
  19. {
  20.     float: left;
  21.     width: 100%;
  22.     background: #006699;
  23. }
  24.  
  25. #navigation ul
  26. {
  27.     margin: 0;
  28.     padding: 0;
  29. }
  30.  
  31. #navigation ul li
  32. {
  33.     list-style-type: none;
  34.     display: inline;
  35. }
  36.  
  37. #navigation li a
  38. {
  39.     display: block;
  40.     float: left;
  41.     padding: 5px 10px;
  42.     color: #fff;
  43.     text-decoration: none;
  44.     border-right: 1px solid #fff;
  45. }
  46.  
  47. #navigation li a:hover { background: #383; }
  48.  
  49. #content-container1
  50. {
  51.     float: left;
  52.     width: 100%;
  53.     background: #fff url(/wp-content/uploads/layout-three-liquid-background1.gif) repeat-y 20% 0;
  54. }
  55.  
  56. #content-container2
  57. {
  58.     float: left;
  59.     width: 100%;
  60.     background: url(/wp-content/uploads/layout-three-liquid-background2.gif) repeat-y 80% 0;
  61. }
  62.  
  63. #section-navigation
  64. {
  65.     float: left;
  66.     width: 16%;
  67.     padding: 20px 0;
  68.     margin: 0 2%;
  69.     display: inline;
  70. }
  71.  
  72. #section-navigation ul
  73. {
  74.     margin: 0;
  75.     padding: 0;
  76. }
  77.  
  78. #section-navigation ul li
  79. {
  80.     margin: 0 0 1em;
  81.     padding: 0;
  82.     list-style-type: none;
  83. }
  84.  
  85. #content
  86. {
  87.     float: left;
  88.     width: 56%;
  89.     padding: 20px 0;
  90.     margin: 0 0 0 2%;
  91. }
  92.  
  93. #content h2 { margin: 0; }
  94.  
  95. #aside
  96. {
  97.     float: right;
  98.     width: 16%;
  99.     padding: 20px 0;
  100.     margin: 0 2% 0 0;
  101.     display: inline;
  102. }
  103.  
  104. #aside h3 { margin: 0; }
  105.  
  106. #footer
  107. {
  108.     clear: left;
  109.     background: #ccc;
  110.     text-align: right;
  111.     padding: 20px;
  112.     height: 1%;
  113. }

A mi me sale igual ( tiene un ancho) el hover
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #10 (permalink)  
Antiguo 09/06/2010, 16:14
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Menu css y Border button

Que opinan?

¿que estoy haciendo mal?
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #11 (permalink)  
Antiguo 12/06/2010, 03:26
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Menu css y Border button

Hola:

No se si es lo que buscas pero, como te había indicado antes Webosiris tienes varios <li> y <ul> sin cerrar. Prueba a ver si así te sirve.

Código CSS:
Ver original
  1. <div id="menu">
  2.                         <ul class="Menus">
  3.                             <li class="Menus"><a href='http://p2p.wrox.com'>Historia del Arca</a>
  4.                                 <ul>
  5.                                     <li>Internacional</li>
  6.                                     <li>Dominicana</li>
  7.                                 </ul>
  8.                             </li>
  9.                             <li class="Menus"><a href='http://p2p.wrox.com'>Consejo Adm.</a></li>
  10.                             <li class="Menus"><a href="http://p2p.wrox.com">Personas Acogidas</a>
  11.                                 <ul>
  12.                                     <li class="Menus"><a href="http://p2p.wrox.com">Acogidos Internos</a>
  13.                                         <ul>
  14.                                             <li>Audry</li>
  15.                                             <li>Toto</li>
  16.                                             <li>Jes&uacute;s</li>
  17.                                         </ul>
  18.                                     </li>
  19.                                     <li class="Menus">Acogidos Externos
  20.                                         <ul>
  21.                                             <li>Julio</li>
  22.                                             <li>Alex</li>
  23.                                         </ul>
  24.                                     </li>
  25.                                 </ul>
  26.                             </li>
  27.                             <li class="Menus">Asistentes</li>
  28.                             <li class="Menus">Actividades
  29.                                 <ul>
  30.                                     <li>Talleres</li>
  31.                                     <li>Productos</li>
  32.                                 </ul>
  33.                             </li>
  34.                         </ul>
  35.                     </div>

Y añado un consejo propio, cuando escribas tu código utiliza algún tipo de indentación. Suele ser muy útil, en el caso de las anidaciónes, para saber que etiqueta debemos abrir/cerrar.

Saludos.


Etiquetas: border
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:55.