Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Problema con código de menú CSS

 Estas en el tema de Problema con código de menú CSS en el foro de CSS en Foros del Web. Estoy segura que es de mega-novato mi problema, pero estoy hace rato haciendo de todo y no llego a nada... Me robe un menu para ...
  #1 (permalink)  
Antiguo 04/08/2013, 23:02
 
Fecha de Ingreso: agosto-2013
Mensajes: 7
Antigüedad: 11 años, 3 meses
Puntos: 0
Problema con código de menú CSS
Estoy segura que es de mega-novato mi problema, pero estoy hace rato haciendo de todo y no llego a nada...

Me robe un menu para la web: http://www.cssplay.co.uk/menus/vertical-list.html

Pongo el codigo HTML y el archivo CSS en mi web, y funciona perfecto, el problema son los bordes de noseque -> Un bordecito azul en dreamweaver que sirve para seleccionar todo y que yo asi le cargo el archivo .css




Como ven no se adapta al menu y me roba todo el espacio, ademas de ser dos recuadros, yo quiero que quede asi:




ya se que es recontranoob la pregunta, pero hace horas que estoy buscando en google y toqueteando el codigo CSS sin lograr nada

PD: Por las dudas dejo el codigo CSS


Código CSS: 
Ver original
  1. @charset "utf-8";
  2. /* CSS Document */
  3.  
  4.  
  5. #menuContainer {width:750px; height:500px; background:url(vertical-list/fashion.jpg); position:relative;}
  6.  
  7. #verticalNav {position:absolute; left:5px; top:50px; margin:0; list-style:none; position:relative; font-family:verdana, sans-serif;float:left; padding:150px 0 0 0;}
  8.  
  9. #verticalNav ul.toplevel {padding:0; margin:0; list-style:none;}
  10. #verticalNav ul.sub {padding:0; margin:0; list-style:none;}
  11.  
  12. #verticalNav table {border-collapse:collapse; margin:-1px;}
  13. #verticalNav ul.toplevel ul.sub {position:absolute; left:-9999px; width:173px;}
  14. #verticalNav ul.toplevel ul div.base {position:absolute; left:-9999px; background:#fff; border:1px solid #ddd; padding:10px; width:350px; height:300px;}
  15. #verticalNav ul.toplevel ul div.border {position:absolute; left:-9999px; background:transparent url(vertical-list/backing.png); width:390px; height:340px;}
  16.  
  17. #verticalNav ul.toplevel {width:175px; border-top:1px solid #ddd;}
  18. #verticalNav ul.toplevel li {float:left; width:175px;}
  19. #verticalNav ul.toplevel li a {display:block; width:163px; padding-left:10px; height:22px; line-height:22px; text-decoration:none; color:#000; font-size:11px; background:#eef0f0 url(vertical-list/arrow-black.gif) no-repeat 160px center; border:1px solid #ddd; border-width:0 1px 1px 1px;}
  20.  
  21. #verticalNav a:hover {white-space:nowrap;}
  22. #verticalNav :hover ul.toplevel li a {background:#eee url(vertical-list/arrow-grey.gif) no-repeat 160px center; color:#444; filter:alpha(opacity=90); opacity:0.9;
  23. }
  24. #verticalNav ul.toplevel li a:hover {color:#069; background:#fff url(vertical-list/arrow-black.gif) no-repeat 160px center; filter:alpha(opacity=100); opacity:1.0;}
  25. #verticalNav ul.toplevel li:hover > a {color:#069; background:#fff url(vertical-list/arrow-black.gif) no-repeat 160px center; filter:alpha(opacity=100); opacity:1.0;}
  26.  
  27. #verticalNav :hover ul.toplevel :hover ul.sub {left:174px; top:0; border-top:1px solid #ddd;}
  28. #verticalNav :hover ul.toplevel :hover ul.pos1 {top:150px;}
  29. #verticalNav :hover ul.toplevel :hover ul.pos2 {top:173px;}
  30. #verticalNav :hover ul.toplevel :hover ul.pos3 {top:196px;}
  31. #verticalNav :hover ul.toplevel :hover ul.pos4 {top:219px;}
  32. #verticalNav :hover ul.toplevel :hover ul.pos5 {top:242px;}
  33. #verticalNav :hover ul.toplevel :hover ul.pos6 {top:265px;}
  34. #verticalNav :hover ul.toplevel :hover ul.pos7 {top:288px;}
  35. #verticalNav :hover ul.toplevel :hover ul.pos8 {top:196px;}
  36. #verticalNav :hover ul.toplevel :hover ul.pos9 {top:265px;}
  37. #verticalNav :hover ul.toplevel :hover ul.pos10 {top:242px;}
  38.  
  39. #verticalNav :hover ul.toplevel :hover ul.sub li a {background:#eee; color:#000; filter:alpha(opacity=100); opacity:1.0;}
  40. #verticalNav :hover ul.toplevel :hover ul.sub li a.sub2 {background:#eee url(vertical-list/arrow-black.gif) no-repeat 160px center; color:#000;}
  41.  
  42. #verticalNav :hover ul.toplevel :hover ul.sub li a:hover {background:#fff; color:#069;}
  43. #verticalNav :hover ul.toplevel :hover ul.sub li a.sub2:hover {background:#fff url(vertical-list/arrow-black.gif) no-repeat 160px center; color:#069;}
  44. #verticalNav :hover ul.toplevel :hover ul.sub li:hover > a.sub2 {background:#fff url(vertical-list/arrow-black.gif) no-repeat 160px center; color:#069;}
  45.  
  46. #verticalNav :hover ul.toplevel :hover ul.sub div.base {left:-9999px;}
  47. #verticalNav :hover ul.toplevel :hover ul.sub div.border {left:-9999px;}
  48.  
  49. #verticalNav :hover ul.toplevel :hover ul.sub :hover div.base {left:185px;}
  50. #verticalNav :hover ul.toplevel :hover ul.sub :hover div.div1 {top:-92px;}
  51. #verticalNav :hover ul.toplevel :hover ul.sub :hover div.div2 {top:-115px;}
  52. #verticalNav :hover ul.toplevel :hover ul.sub :hover div.div3 {top:-207px;}
  53. #verticalNav :hover ul.toplevel :hover ul.sub :hover div.div4 {top:-230px;}
  54. #verticalNav :hover ul.toplevel :hover ul.sub :hover div.div5 {top:-137px;}
  55. #verticalNav :hover ul.toplevel :hover ul.sub :hover div.div6 {top:-207px;}
  56. #verticalNav :hover ul.toplevel :hover ul.sub :hover div.div7 {top:-185px;}
  57.  
  58. #verticalNav :hover ul.toplevel :hover ul.sub :hover div.border {left:175px;}
  59. #verticalNav :hover ul.toplevel :hover ul.sub :hover div.b1 {top:-102px;}
  60. #verticalNav :hover ul.toplevel :hover ul.sub :hover div.b2 {top:-125px;}
  61. #verticalNav :hover ul.toplevel :hover ul.sub :hover div.b3 {top:-217px;}
  62. #verticalNav :hover ul.toplevel :hover ul.sub :hover div.b4 {top:-240px;}
  63. #verticalNav :hover ul.toplevel :hover ul.sub :hover div.b5 {top:-147px;}
  64. #verticalNav :hover ul.toplevel :hover ul.sub :hover div.b6 {top:-217px;}
  65. #verticalNav :hover ul.toplevel :hover ul.sub :hover div.b7 {top:-195px;}
  66.  
  67. #verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul {float:left; padding:0; margin:0; list-style:none; width:200px;}
  68. #verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul li {display:block; float:left; width:150px; height:auto; padding:0; margin:0;}
  69. #verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul li a {width:190px; padding-left:10px; background:#fff url(vertical-list/dot.gif) no-repeat left center; color:#000; border:0; margin:0; height:auto; line-height:18px;}
  70. #verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul li a:hover {color:#069;}
  71.  
  72. #verticalNav :hover ul.toplevel :hover ul.sub :hover div.base h4 {color:#888; font-size:13px; margin:0; padding:5px 0 5px 0;}
  73. #verticalNav :hover ul.toplevel :hover ul.sub :hover div.base p {color:#555; font-size:11px; margin:0; padding:0 0 5px 0; line-height:18px;}
Última edición por nadiadsz; 04/08/2013 a las 23:35
  #2 (permalink)  
Antiguo 05/08/2013, 15:29
Avatar de pzin
Moderata 😈
  
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 3 meses
Puntos: 2114
Respuesta: Problema con código de menú CSS
Bienvenida al foro.

Debes de tener conectado el ordenador a una televisión de 60" para que ese código te resulte cómodo de leer.

¿Cuáles son los elementos a los que les sale el borde? ¿Probaste a poner un border: 0 a esos elementos? ¿Es un problema que te ocurre en Dreamweaver exclusivamente o también si abres la página en cualquier navegador?
  #3 (permalink)  
Antiguo 05/08/2013, 16:38
 
Fecha de Ingreso: agosto-2013
Mensajes: 7
Antigüedad: 11 años, 3 meses
Puntos: 0
Respuesta: Problema con código de menú CSS
no entiendo lo del codigo, yo lo veo bien
Probe con border:0 pero no funciona, sigue igual

Saque el menu container y no hubo problemas, es el verticalnav el que me causa el problema



No es de plomo que quiero que el coso azul se adapte al menu, sino porque no me deja poner cosas al costado del menu donde van los productos...

Este es el nuevo codigo, lo subo a pastebin por si se ve mal aca: http://pastebin.com/YXFEnuVF

Código CSS: 
Ver original
  1. @charset "utf-8";
  2. /* CSS Document */
  3.  
  4.  
  5. #verticalNav {
  6.     position: absolute;
  7.     left: 5px;
  8.     top: 50px;
  9.     margin: 0;
  10.     list-style: none;
  11.     position: relative;
  12.     font-family: verdana, sans-serif;
  13.     float: left;
  14.     padding: 150px 0 0 0;
  15.     border: 0;
  16.     overflow: auto;
  17. }
  18.  
  19. #verticalNav ul.toplevel {padding:0; margin:0; list-style:none;}
  20. #verticalNav ul.sub {padding:0; margin:0; list-style:none;}
  21.  
  22. #verticalNav table {border-collapse:collapse; margin:-1px;}
  23. #verticalNav ul.toplevel ul.sub {position:absolute; left:-9999px; width:173px;}
  24. #verticalNav ul.toplevel ul div.base {position:absolute; left:-9999px; background:#fff; border:1px solid #ddd; padding:10px; width:350px; height:300px;}
  25. #verticalNav ul.toplevel ul div.border {position:absolute; left:-9999px; background:transparent url(vertical-list/backing.png); width:390px; height:340px;}
  26.  
  27. #verticalNav ul.toplevel {width:175px; border-top:1px solid #ddd;}
  28. #verticalNav ul.toplevel li {float:left; width:175px;}
  29. #verticalNav ul.toplevel li a {display:block; width:163px; padding-left:10px; height:22px; line-height:22px; text-decoration:none; color:#000; font-size:11px; background:#eef0f0 url(vertical-list/arrow-black.gif) no-repeat 160px center; border:1px solid #ddd; border-width:0 1px 1px 1px;}
  30.  
  31. #verticalNav a:hover {white-space:nowrap;}
  32. #verticalNav :hover ul.toplevel li a {background:#eee url(vertical-list/arrow-grey.gif) no-repeat 160px center; color:#444; filter:alpha(opacity=90); opacity:0.9;
  33. }
  34. #verticalNav ul.toplevel li a:hover {color:#069; background:#fff url(vertical-list/arrow-black.gif) no-repeat 160px center; filter:alpha(opacity=100); opacity:1.0;}
  35. #verticalNav ul.toplevel li:hover > a {color:#069; background:#fff url(vertical-list/arrow-black.gif) no-repeat 160px center; filter:alpha(opacity=100); opacity:1.0;}
  36.  
  37. #verticalNav :hover ul.toplevel :hover ul.sub {left:174px; top:0; border-top:1px solid #ddd;}
  38. #verticalNav :hover ul.toplevel :hover ul.pos1 {top:150px;}
  39. #verticalNav :hover ul.toplevel :hover ul.pos2 {top:173px;}
  40. #verticalNav :hover ul.toplevel :hover ul.pos3 {top:196px;}
  41. #verticalNav :hover ul.toplevel :hover ul.pos4 {top:219px;}
  42. #verticalNav :hover ul.toplevel :hover ul.pos5 {top:242px;}
  43. #verticalNav :hover ul.toplevel :hover ul.pos6 {top:265px;}
  44. #verticalNav :hover ul.toplevel :hover ul.pos7 {top:288px;}
  45. #verticalNav :hover ul.toplevel :hover ul.pos8 {top:196px;}
  46. #verticalNav :hover ul.toplevel :hover ul.pos9 {top:265px;}
  47. #verticalNav :hover ul.toplevel :hover ul.pos10 {top:242px;}
  48.  
  49. #verticalNav :hover ul.toplevel :hover ul.sub li a {background:#eee; color:#000; filter:alpha(opacity=100); opacity:1.0;}
  50. #verticalNav :hover ul.toplevel :hover ul.sub li a.sub2 {background:#eee url(vertical-list/arrow-black.gif) no-repeat 160px center; color:#000;}
  51.  
  52. #verticalNav :hover ul.toplevel :hover ul.sub li a:hover {background:#fff; color:#069;}
  53. #verticalNav :hover ul.toplevel :hover ul.sub li a.sub2:hover {background:#fff url(vertical-list/arrow-black.gif) no-repeat 160px center; color:#069;}
  54. #verticalNav :hover ul.toplevel :hover ul.sub li:hover > a.sub2 {background:#fff url(vertical-list/arrow-black.gif) no-repeat 160px center; color:#069;}
  55.  
  56. #verticalNav :hover ul.toplevel :hover ul.sub div.base {left:-9999px;}
  57. #verticalNav :hover ul.toplevel :hover ul.sub div.border {left:-9999px;}
  58.  
  59. #verticalNav :hover ul.toplevel :hover ul.sub :hover div.base {left:185px;}
  60. #verticalNav :hover ul.toplevel :hover ul.sub :hover div.div1 {top:-92px;}
  61. #verticalNav :hover ul.toplevel :hover ul.sub :hover div.div2 {top:-115px;}
  62. #verticalNav :hover ul.toplevel :hover ul.sub :hover div.div3 {top:-207px;}
  63. #verticalNav :hover ul.toplevel :hover ul.sub :hover div.div4 {top:-230px;}
  64. #verticalNav :hover ul.toplevel :hover ul.sub :hover div.div5 {top:-137px;}
  65. #verticalNav :hover ul.toplevel :hover ul.sub :hover div.div6 {top:-207px;}
  66. #verticalNav :hover ul.toplevel :hover ul.sub :hover div.div7 {top:-185px;}
  67.  
  68. #verticalNav :hover ul.toplevel :hover ul.sub :hover div.border {left:175px;}
  69. #verticalNav :hover ul.toplevel :hover ul.sub :hover div.b1 {top:-102px;}
  70. #verticalNav :hover ul.toplevel :hover ul.sub :hover div.b2 {top:-125px;}
  71. #verticalNav :hover ul.toplevel :hover ul.sub :hover div.b3 {top:-217px;}
  72. #verticalNav :hover ul.toplevel :hover ul.sub :hover div.b4 {top:-240px;}
  73. #verticalNav :hover ul.toplevel :hover ul.sub :hover div.b5 {top:-147px;}
  74. #verticalNav :hover ul.toplevel :hover ul.sub :hover div.b6 {top:-217px;}
  75. #verticalNav :hover ul.toplevel :hover ul.sub :hover div.b7 {top:-195px;}
  76.  
  77. #verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul {float:left; padding:0; margin:0; list-style:none; width:200px;}
  78. #verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul li {display:block; float:left; width:150px; height:auto; padding:0; margin:0;}
  79. #verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul li a {width:190px; padding-left:10px; background:#fff url(vertical-list/dot.gif) no-repeat left center; color:#000; border:0; margin:0; height:auto; line-height:18px;}
  80. #verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul li a:hover {color:#069;}
  81.  
  82. #verticalNav :hover ul.toplevel :hover ul.sub :hover div.base h4 {color:#888; font-size:13px; margin:0; padding:5px 0 5px 0;}
  83. #verticalNav :hover ul.toplevel :hover ul.sub :hover div.base p {color:#555; font-size:11px; margin:0; padding:0 0 5px 0; line-height:18px;}
Última edición por nadiadsz; 05/08/2013 a las 17:00
  #4 (permalink)  
Antiguo 05/08/2013, 17:36
 
Fecha de Ingreso: agosto-2013
Mensajes: 7
Antigüedad: 11 años, 3 meses
Puntos: 0
Respuesta: Problema con código de menú CSS
Gracias por la ayuda pero me rindo, me cargo un menu mas simple :P
  #5 (permalink)  
Antiguo 06/08/2013, 14:13
Avatar de Rafael
Modegráfico
  
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años, 8 meses
Puntos: 1826
Respuesta: Problema con código de menú CSS
Revisa algunos menús sencillos acá: http://araudi.net/ejemplos/menus_desplegables_CSS.html

La estructura ideal de un menú es semejante a esta:

Código HTML: 
Ver original
  1. <ul>
  2. <li><a href="">Tema 1</a></li>
  3. <li><a href="">Tema 2</a></li>
  4. <li><a href="">Tema 3</a></li>
  5. <ul>

Puedes anidar temas, pero la misma subestructura.

Etiquetas: bordes
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 04:34.